// shared.jsx — Header, Footer, Placeholder, Ornament, Lightbox const { useState, useEffect, useRef, useMemo } = React; const WA_NUMBER = '15148677519'; function WaIcon({ size = 20, color = '#25D366' }) { return ( ); } // ---------- Placeholder with mono label (now supports real images) ---------- function Placeholder({ label, ratio = '4/5', tone = 'default', corner, style = {}, className = '', children, src, objectPosition = 'center', contain = false, blend = false }) { const base = { width: '100%', position: 'relative' }; if (ratio && ratio !== 'unset') base.aspectRatio = ratio; if (src) { return (
{label} {corner && (
{corner}
)} {children}
); } return (
{corner &&
{corner}
}
[ {label} ]
{children}
); } // ---------- Logo mark ---------- function Logo({ height = 52, invert = false }) { const [broken, setBroken] = React.useState(false); if (broken) { return ( SensStyle ); } return ( SensStyle setBroken(true)} style={{ height, width: 'auto', filter: invert ? 'brightness(1.1) saturate(0.95)' : 'none', }} /> ); } // ---------- Ornament ---------- function Ornament({ color }) { return (
); } // ---------- CaptchaField (invisible: honeypot + signed timestamp token) ---------- function CaptchaField({ onCaptcha }) { const [token, setToken] = useState(''); useEffect(() => { fetch(API_BASE + '/api/public/captcha').then(r => r.json()).then(data => { setToken(data.token); if (onCaptcha) onCaptcha(data.token); }).catch(() => {}); }, []); return ( ); } // ---------- Header ---------- function Header({ lang, setLang, route, navigate, onDark = false }) { const t = I18N[lang]; const [collOpen, setCollOpen] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); const collRef = useRef(null); const langs = ['es', 'en', 'fr']; const isCollectionActive = ['sombreros','hebillas','correas','product'].includes(route.page); // Close dropdown on outside click useEffect(() => { const handler = (e) => { if (collRef.current && !collRef.current.contains(e.target)) setCollOpen(false); }; document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, []); // Close mobile menu on route change useEffect(() => { setMobileOpen(false); }, [route]); // Lock body scroll when mobile menu open useEffect(() => { document.body.style.overflow = mobileOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [mobileOpen]); const collSubItems = [ { id: 'sombreros', label: t.nav.sombreros, icon: '✦' }, { id: 'hebillas', label: t.nav.hebillas, icon: '◈' }, { id: 'correas', label: t.nav.correas, icon: '◇' }, ]; const leftPages = [ { id: 'home', label: t.nav.home }, { id: 'distributors', label: t.nav.distributors }, ]; const rightPages = [ { id: 'about', label: t.nav.about }, { id: 'gallery', label: t.nav.gallery }, { id: 'blog', label: t.nav.blog }, { id: 'contact', label: t.nav.contact }, ]; const allPages = [...leftPages, ...rightPages]; return ( <>
{[...Array(2)].map((_, i) => t.announce.map((m, j) => ( ✦ {m} )) )}
{/* Hamburger — mobile only */} {/* Left nav — desktop only */} {/* Logo center */} { e.preventDefault(); navigate({ page: 'home' }); }}> {/* Right nav — desktop only */}
{langs.map((l, i) => ( {i < langs.length - 1 && } ))}
{t.nav.wholesale}
{/* MOBILE DRAWER OVERLAY */} {mobileOpen && (
setMobileOpen(false)} role="presentation" /> )} ); } // ---------- Footer Newsletter (with invisible captcha) ---------- function FooterNewsletter({ lang, f }) { const [captchaToken, setCaptchaToken] = useState(''); useEffect(() => { fetch(API_BASE + '/api/public/captcha').then(r => r.json()).then(d => setCaptchaToken(d.token)).catch(() => {}); }, []); return (
{ e.preventDefault(); const email = e.target.elements.email.value; const hp = e.target.elements.website?.value; if (hp) return; if (!email) return; try { const res = await fetch(API_BASE + '/api/public/newsletter', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, source: 'footer', captchaToken }), }); const data = await res.json(); if (data.ok) { e.target.elements.email.value = ''; e.target.elements.email.placeholder = '✦ ' + (lang === 'es' ? '¡Suscrito!' : lang === 'fr' ? 'Abonné!' : 'Subscribed!'); setTimeout(() => { e.target.elements.email.placeholder = f.newsletterPh; }, 3000); } } catch {} }} style={{ display: 'flex', gap: 0, maxWidth: 380, borderBottom: '1px solid rgba(245,237,224,0.25)', paddingBottom: 10 }}>
); } // ---------- Footer ---------- function Footer({ lang, navigate }) { const t = I18N[lang]; const f = t.footer; return ( ); } // ---------- Speed-Dial FAB ---------- function WhatsappFloat({ lang, navigate }) { const t = I18N[lang]; const [open, setOpen] = React.useState(false); const fabRef = React.useRef(null); // Close on outside click React.useEffect(() => { const handler = (e) => { if (fabRef.current && !fabRef.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, []); const actions = [ { id: 'whatsapp', label: 'WhatsApp', icon: ( ), color: '#25D366', action: () => { window.open(`https://wa.me/${WA_NUMBER}`, '_blank'); setOpen(false); }, }, { id: 'catalog', label: lang === 'es' ? 'Catálogo' : lang === 'fr' ? 'Catalogue' : 'Catalog', icon: ( ), color: 'var(--gold-600)', action: () => { navigate && navigate({ page: 'sombreros' }); setOpen(false); }, }, { id: 'contact', label: lang === 'es' ? 'Contacto' : lang === 'fr' ? 'Contact' : 'Contact', icon: ( ), color: 'var(--saddle-500)', action: () => { navigate && navigate({ page: 'contact' }); setOpen(false); }, }, ]; return (
{/* Speed-dial menu */} {open && (
{actions.map((act, i) => (
{/* Label chip */}
{act.label}
{/* Action button */}
))}
)} {/* Main FAB trigger */}
); } // ---------- Lightbox ---------- function Lightbox({ images, index, onClose, onNav }) { const [zoomed, setZoomed] = React.useState(false); useEffect(() => { setZoomed(false); }, [index]); useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') { if (zoomed) setZoomed(false); else onClose(); } if (e.key === 'ArrowRight' && !zoomed) onNav(1); if (e.key === 'ArrowLeft' && !zoomed) onNav(-1); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose, onNav, zoomed]); const src = images[index]; return (
{ if (zoomed) setZoomed(false); else onClose(); }} role="dialog" aria-modal="true" aria-label="Image viewer">
e.stopPropagation()}> {images.length > 1 && ( <> )} {src ? ( {`Imagen setZoomed(v => !v)} /> ) : (
SIN IMAGEN
)}
{index + 1} / {images.length}
); } Object.assign(window, { Placeholder, Logo, Ornament, Header, Footer, WhatsappFloat, Lightbox, WaIcon, WA_NUMBER });