// product-page.jsx — Data-driven product page. // Reads window.__PRODUCT_SLUG, looks up PRODUCT_DATA[slug], renders the page. // Sections: Hero · Overview · Features · Specs · Applications · Gallery · FAQ · Related · CTA. const ART_MAP_PP = { tank: ProverTankArt, measure: TestMeasureArt, water: WaterDrawArt, tower: TankerTowerArt, bench: TestBenchArt, lab: MinilabArt, }; const PP_LOCALE = window.location.pathname.includes('/es/') ? 'es' : window.location.pathname.includes('/pt/') ? 'pt' : 'en'; const PP_I18N = { en: { requestQuote: 'Request a Quote', askEngineering: 'Ask engineering', downloadDatasheet: 'Download Datasheet (PDF)', contactHref: 'contact.html', ctaEyebrow: 'Get a custom configuration', ctaBody: "Send your flow rate, accuracy class, and the standards you must comply with. We'll return a configuration and quote within two business days.", chatWA: 'Chat on WhatsApp', }, es: { requestQuote: 'Solicitar Cotización', askEngineering: 'Consultar a ingeniería', downloadDatasheet: 'Descargar ficha técnica (PDF)', contactHref: 'es/contacto', ctaEyebrow: 'Obtener una configuración a medida', ctaBody: 'Envíenos su caudal requerido, clase de exactitud y las normas que debe cumplir. Devolvemos una configuración y cotización en dos días hábiles.', chatWA: 'Chatear por WhatsApp', }, pt: { requestQuote: 'Solicitar Cotação', askEngineering: 'Consultar engenharia', downloadDatasheet: 'Baixar ficha técnica (PDF)', contactHref: 'pt/contato', ctaEyebrow: 'Obter uma configuração sob medida', ctaBody: 'Envie-nos seu fluxo requerido, classe de exatidão e as normas que deve cumprir. Retornamos uma configuração e cotação em dois dias úteis.', chatWA: 'Conversar no WhatsApp', }, }; const t = PP_I18N[PP_LOCALE]; /* ─── Product hero ──────────────────────────────────────────────────── */ function ProductHero({ data }) { const heroSrc = LONETTI_PHOTOS[data.heroPhoto]; const Art = ART_MAP_PP[data.art]; return (
{/* Breadcrumb */}
{data.eyebrow}

/g, '') }}/>

{data.lede}

{/* Quick specs strip */}
{data.quickSpecs.map(([k, v], i) => (
{k}
{v}
))}

{data.h1Plain} {data.heroCallouts.map((c, i) => ( ))} {/* Small inline SVG drawing badge — keeps the engineering-diagram identity */}
); } function CalloutTag({ top, right, left, bottom, label }) { return (
{label}
); } /* ─── Overview (with SVG drawing inline) ────────────────────────────── */ function OverviewSection({ data }) { const Art = ART_MAP_PP[data.art]; return (
Overview
§1 — {data.overviewKicker}
{data.overviewParas.map((p, i) => (

{p}

))}
Schematic
); } /* ─── Features ──────────────────────────────────────────────────────── */ function FeaturesSection({ data }) { return (
{data.features.map((f) => (
{f.n}

{f.title}

{f.body}

))}
); } /* ─── Specs table ───────────────────────────────────────────────────── */ function SpecsSection({ data }) { return (
Specifications

Built to your spec, certified to ours.

These are the parameters our engineering team needs to start a quote. For a full technical datasheet of a specific configuration, request the PDF.

Download full datasheet
{data.specs.map(([k, v], i) => ( ))}
{k} {v}
); } /* ─── Applications ──────────────────────────────────────────────────── */ function ApplicationsSection({ data }) { return (
{data.applications.map((a, i) => (
0{i + 1}

{a.title}

{a.body}

))}
); } /* ─── Gallery + lightbox ────────────────────────────────────────────── */ function GallerySection({ data }) { const [lightbox, setLightbox] = useState(null); // Resolve photoKey → real photo URL (also accept literal paths like "measurement-equipment-on-trailer") const items = data.gallery.map((it) => ({ ...it, photo: LONETTI_PHOTOS[it.photoKey] || `images/${it.photoKey}.jpg`, })); return (
{items.map((it, i) => ( ))}
{lightbox !== null && ( setLightbox(null)} onPrev={() => setLightbox((lightbox - 1 + items.length) % items.length)} onNext={() => setLightbox((lightbox + 1) % items.length)} idx={lightbox} total={items.length}/> )}
); } function Lightbox({ item, onClose, onPrev, onNext, idx, total }) { useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); if (e.key === "ArrowLeft") onPrev(); if (e.key === "ArrowRight") onNext(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onClose, onPrev, onNext]); return (
e.stopPropagation()} style={{ background: "var(--navy-2)", borderRadius: 6, overflow: "hidden", width: "min(80vw, 1000px)", aspectRatio: "4/3", position: "relative", }}> {item.caption}
{item.tag}
{item.caption}
{String(idx + 1).padStart(2, "0")} / {String(total).padStart(2, "0")}
); } /* ─── FAQ ───────────────────────────────────────────────────────────── */ function FaqSection({ data }) { const [open, setOpen] = useState(0); return (
FAQ

Common questions.

Don't see your question? Talk to our engineering team — they answer within one business day.

{t.askEngineering}
{data.faq.map((qa, i) => (
{open === i && (
{qa.a}
)}
))}
); } /* ─── Related ───────────────────────────────────────────────────────── */ function RelatedSection({ data }) { const related = data.related.map((slug) => PRODUCT_DATA[slug]).filter(Boolean); return (
); } /* ─── Bottom CTA ─────────────────────────────────────────────────────── */ function ProductCtaBlock({ data }) { return (
{t.ctaEyebrow}

{data.ctaTitle}

{t.ctaBody}

); } /* ─── Product page root ─────────────────────────────────────────────── */ function ProductPage() { const slug = window.__PRODUCT_SLUG; const data = PRODUCT_DATA[slug]; if (!data) { return
Product not found: {slug}
; } return ( <>