100 lines
5.0 KiB
TypeScript
100 lines
5.0 KiB
TypeScript
import Link from "next/link";
|
|
|
|
import { serverFetch } from "../../lib/api";
|
|
|
|
function toText(value: unknown, fallback = "") {
|
|
return typeof value === "string" && value ? value : fallback;
|
|
}
|
|
|
|
function toBool(value: unknown) {
|
|
return value === true || value === "true";
|
|
}
|
|
|
|
function asArray(value: unknown): string[] {
|
|
return Array.isArray(value) ? value.map((item) => String(item)) : [];
|
|
}
|
|
|
|
export default async function ServicePage({ params }: { params: Promise<{ slug: string }> }) {
|
|
const { slug } = await params;
|
|
const { service } = await serverFetch<{ service: Record<string, unknown> }>(`/services/${slug}`);
|
|
|
|
return (
|
|
<main className="page-shell service-page">
|
|
<div className="detail-grid">
|
|
<section className="service-content">
|
|
<section className="panel stack">
|
|
<span className="eyebrow">Servicio publico</span>
|
|
<h1 className="headline" style={{ fontSize: "clamp(2rem, 5vw, 3.1rem)" }}>{toText(service.title)}</h1>
|
|
<p className="lead">{toText(service.description)}</p>
|
|
<div className="badges">
|
|
<span className="badge">{toText(service.category)}</span>
|
|
<span className="badge">{toBool(service.local_pickup) ? "Retiro local" : "Solo envio"}</span>
|
|
<span className="badge">{toBool(service.nationwide_shipping) ? "Envio nacional" : "Cobertura puntual"}</span>
|
|
</div>
|
|
<div className="meta-grid">
|
|
<div className="stat-tile"><span className="stat-value">{String(service.lead_time_days || 4)} dias</span><span className="mini-note">Plazo orientativo</span></div>
|
|
<div className="stat-tile"><span className="stat-value">Desde</span><span className="mini-note">${Math.round(Number(service.price_from_cents || 0) / 100).toLocaleString("es-AR")}</span></div>
|
|
<div className="stat-tile"><span className="stat-value">Visible</span><span className="mini-note">En mapa y perfil</span></div>
|
|
<div className="stat-tile"><span className="stat-value">Guiado</span><span className="mini-note">Contacto contextual</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="panel stack">
|
|
<div className="section-head">
|
|
<div className="stack" style={{ gap: 6 }}>
|
|
<span className="eyebrow">Materiales y capacidades</span>
|
|
<h2 className="section-title">Informacion pensada para decidir rapido</h2>
|
|
</div>
|
|
</div>
|
|
<div className="badges">
|
|
{asArray(service.materials).map((item) => (
|
|
<span key={item} className="badge">{item}</span>
|
|
))}
|
|
{asArray(service.technologies).map((item) => (
|
|
<span key={item} className="badge">{item}</span>
|
|
))}
|
|
</div>
|
|
<div className="grid-cards">
|
|
<article className="visual-card">
|
|
<img className="thumb" src="/demo/work-dashboard-bracket.svg" alt="Uso" />
|
|
<div className="visual-body">
|
|
<strong>Uso principal</strong>
|
|
<span className="mini-note">Piezas funcionales, prototipos y necesidades reales con restricciones claras.</span>
|
|
</div>
|
|
</article>
|
|
<article className="visual-card">
|
|
<img className="thumb" src="/demo/work-custom.svg" alt="Entrega" />
|
|
<div className="visual-body">
|
|
<strong>Entrega</strong>
|
|
<span className="mini-note">Retiro local, envio o cobertura segun la configuracion del maker.</span>
|
|
</div>
|
|
</article>
|
|
<article className="visual-card">
|
|
<img className="thumb" src="/demo/work-coffee-hinge.svg" alt="Contexto" />
|
|
<div className="visual-body">
|
|
<strong>Consulta guiada</strong>
|
|
<span className="mini-note">El cliente no llega en frio. Llega con referencia, urgencia y uso final.</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<aside className="stack">
|
|
<section className="panel contact-card stack">
|
|
<span className="eyebrow">Iniciar consulta</span>
|
|
<h2 className="section-title">Pide este servicio con un flujo corto y util</h2>
|
|
<Link
|
|
href={`/consultas/nueva?makerId=${encodeURIComponent(String(service.maker_id))}&sourceType=service&sourceId=${encodeURIComponent(String(service.id))}&makerName=${encodeURIComponent(toText(service.maker_name, "Maker"))}&contextTitle=${encodeURIComponent(toText(service.title))}&returnTo=${encodeURIComponent(`/services/${slug}`)}`}
|
|
className="button button-primary"
|
|
>
|
|
Abrir contacto guiado
|
|
</Link>
|
|
<Link href={`/makers/${toText(service.maker_slug)}`} className="button button-secondary">Ver maker</Link>
|
|
</section>
|
|
</aside>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|