// components.jsx — shared UI components const { useState, useEffect, useRef } = React; function InquiryBag({ t, onOpen }) { const I = (typeof window !== 'undefined') ? window.INQUIRY : null; const [n, setN] = useState(() => I ? I.count() : 0); useEffect(() => { if (!I) return; const onChange = () => setN(I.count()); window.addEventListener('lesso-inquiry-change', onChange); return () => window.removeEventListener('lesso-inquiry-change', onChange); }, []); if (!I) return null; const inq = (t && t.inquiry) || {}; const aria = (inq.badgeAria || 'Open inquiry list ({n} items)').replace('{n}', n); return ( ); } function Header({ t, lang, setLang, route, go, buildUrl }) { const items = [ { key: 'home', label: t.nav.home }, { key: 'products', label: t.nav.products }, { key: 'about', label: t.nav.about }, { key: 'quality', label: t.nav.quality }, { key: 'news', label: t.nav.news }, { key: 'contact', label: t.nav.contact }, ]; // Mobile menu state. Auto-closes on every route change so visitors don't // see a stale open dropdown after navigating from a link inside it. const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { setMenuOpen(false); }, [route.page]); const onClickLink = (e, page, extra) => { if (e.metaKey||e.ctrlKey||e.shiftKey||e.button===1) return; e.preventDefault(); setMenuOpen(false); go(page, extra); }; return (
onClickLink(e, 'home')}> {t.brand.name} {t.brand.sub}
window.INQUIRY_UI && window.INQUIRY_UI.openDrawer()} /> onClickLink(e, 'contact')}> {t.nav.inquiry}
); } function Footer({ t, go, buildUrl, lang }) { return ( ); } // Inline SVG icons for the footer + contact social cards. Same path // data as the SocialLinksSection in pages.jsx — repeated here so the // footer is self-contained without pulling pages.jsx state. const SOCIAL_ICONS = { youtube: , whatsapp: , facebook: , twitter: , douyin: , instagram: , email: , }; // Footer's 5th column — small icon grid linking out to every social // platform the customer has filled in. Hidden in full if no URLs are // configured. function FooterSocial({ t, lang }) { const social = (window.CONTACT && window.CONTACT.social) || {}; // bg = chip background colour, fg = SVG colour. On the dark footer the // X / TikTok marks use a white background with black ink so they don't // blend into the surface, the rest use the platform brand colour. const rows = [ { id: 'youtube', url: social.youtube, name: 'YouTube', bg: '#FF0000', fg: '#fff' }, { id: 'whatsapp', url: social.whatsappLink, name: 'WhatsApp', bg: '#25D366', fg: '#fff' }, { id: 'facebook', url: social.facebook, name: 'Facebook', bg: '#1877F2', fg: '#fff' }, { id: 'twitter', url: social.twitter, name: 'X', bg: '#ffffff', fg: '#000' }, { id: 'douyin', url: social.douyin, name: 'TikTok', bg: '#ffffff', fg: '#000' }, { id: 'instagram', url: social.instagram, name: 'Instagram', bg: '#E4405F', fg: '#fff' }, { id: 'email', url: social.emailAlt ? `mailto:${social.emailAlt}` : '', name: social.emailAlt || 'E-mail', bg: '#525252', fg: '#fff' }, ].filter(r => r.url); if (rows.length === 0) return null; return (
{(t && t.footer && t.footer.colSocial) || ({ pt: 'Conecte-se', en: 'Connect', es: 'Conéctese' }[lang] || 'Connect')}
); } function Crumbs({ items, go, lang, buildUrl }) { const onClick = (e, to) => { if (e.metaKey||e.ctrlKey||e.shiftKey||e.button===1) return; e.preventDefault(); go(to); }; return ( ); } // ──────────────────────────────────────────────────────────────────────────── // InquiryAddButton — reusable + / ✓ toggle that lives inside product cards. // Two visual variants: // variant="corner" — absolutely-positioned circular pill on top-right // of the .thumb (used by ProductCard) // variant="row" — full-width secondary button at the bottom of a card // (used by subproduct cards) // Renders nothing if window.INQUIRY is somehow missing (e.g. mid-boot). // ──────────────────────────────────────────────────────────────────────────── function InquiryAddButton({ itemKey, label, image, url, variant, t }) { const I = (typeof window !== 'undefined') ? window.INQUIRY : null; const [added, setAdded] = useState(() => !!(I && I.has(itemKey))); useEffect(() => { if (!I) return; const onChange = () => setAdded(I.has(itemKey)); window.addEventListener('lesso-inquiry-change', onChange); return () => window.removeEventListener('lesso-inquiry-change', onChange); }, [itemKey]); if (!I) return null; const onClick = (e) => { e.preventDefault(); e.stopPropagation(); if (I.has(itemKey)) { I.remove(itemKey); } else { I.add({ key: itemKey, label, image, url, addedAt: new Date().toISOString() }); } }; const inq = (t && t.inquiry) || {}; if (variant === 'corner') { return ( ); } // variant === 'row' return ( ); } function ProductCard({ product, go, tone, t, lang, buildUrl }) { const href = buildUrl ? buildUrl(lang, 'product', { slug: product.slug }) : '#'; const openProduct = () => go('product', { slug: product.slug }); const onClick = (e) => { if (e.defaultPrevented) return; if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) { window.open(href, '_blank', 'noopener'); return; } openProduct(); }; return (
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openProduct(); } }} aria-label={product.name} data-href={href} >
{ e.currentTarget.src = placeholderImg(product.short, tone); }} /> {product.tag}

{product.name}

{product.desc}

{product.specs.map((s, i) => {s})}
); } function FAQItem({ q, a }) { const [open, setOpen] = useState(false); const id = useRef('faq-' + Math.random().toString(36).slice(2, 9)); const btnId = id.current + '-btn'; const panelId = id.current + '-panel'; return (
{a}
); } function CTABand({ t, go }) { return (

{t.home.ctaBandH}

{t.home.ctaBandP}

); } Object.assign(window, { Header, Footer, Crumbs, ProductCard, FAQItem, CTABand, InquiryAddButton, InquiryBag });