// pages-catalog.jsx — Hats, Hebillas, Correas, Product detail const { useState, useEffect, useMemo } = React; // ── Hats Page ──────────────────────────────────────────────────────────────── function HatsPage({ lang, navigate, initialFilter }) { const t = I18N[lang]; const [filter, setFilter] = useState(initialFilter || 'all'); const [sort, setSort] = useState(0); const filtered = useMemo(() => { let list = filter === 'all' ? HAT_PRODUCTS : HAT_PRODUCTS.filter(p => p.style === filter); if (sort === 1) list = [...list].reverse(); if (sort === 2) list = [...list].sort((a, b) => a.id - b.id); return list; }, [filter, sort]); const styleList = Object.values(HAT_STYLES); return (
{/* Title band */}
{t.catalog.count(filtered.length)}

{t.catalog.hatsTitle}

{t.catalog.hatsSub}

{/* Style cards — quick nav */} {filter === 'all' && (
{styleList.map((s, i) => ( ))} {/* Decorative fill — only visible on mobile where 3-col grid leaves 1 empty cell */}
SensStyle e.target.style.display='none'} />
{lang === 'fr' ? 'Artisanat' : lang === 'en' ? 'Craftsmanship' : 'Artesanía'}
· {lang === 'en' ? 'Leather' : lang === 'fr' ? 'Cuir' : 'Cuero'} ·
Canada
)} {/* Filter bar */}
{/* Scrollable filter buttons */}
{styleList.map(s => { const n = HAT_PRODUCTS.filter(p => p.style === s.id).length; return ( ); })}
{/* Sort — always visible on right */}
{t.catalog.sort}
{/* Style hero when filtered */} {filter !== 'all' && (() => { const s = HAT_STYLES[filter]; return (
{s.code} · {lang === 'es' ? 'Estilo' : 'Style'}

{s.name[lang]}

{s.count}+ {lang === 'es' ? 'MODELOS DISPONIBLES' : lang === 'fr' ? 'MODÈLES DISPONIBLES' : 'MODELS AVAILABLE'}

{s.desc[lang]}

); })()} {/* Product grid */}
{filtered.map(p => ( ))}
); } // ── Hat Card ───────────────────────────────────────────────────────────────── function HatCard({ product, lang, navigate, compact = false }) { const t = I18N[lang]; const s = HAT_STYLES[product.style]; const [hover, setHover] = useState(false); const displayName = lang === 'en' ? product.nameEn : lang === 'fr' ? product.nameFr : product.name; return ( ); } // ── Hebillas Page ───────────────────────────────────────────────────────────── function HebillasPage({ lang }) { const t = I18N[lang]; const [lb, setLb] = useState(null); const [showInquire, setShowInquire] = useState(null); return (
{/* Title */}
{t.catalog.buckleCount(BUCKLE_IMAGES.length)}

{t.catalog.hebillasTitle}

{t.catalog.hebillasSub}

{/* Buckle grid */}
{BUCKLE_IMAGES.map((b, i) => (
))}
{/* Lightbox */} {lb !== null && ( b.src)} index={lb} onClose={() => setLb(null)} onNav={d => setLb((lb + d + BUCKLE_IMAGES.length) % BUCKLE_IMAGES.length)} /> )} {/* Inquire modal */} {showInquire && ( setShowInquire(null)} /> )}
); } function BuckleInquireModal({ lang, buckle, onClose }) { const t = I18N[lang]; const [sent, setSent] = useState(false); const [sending, setSending] = useState(false); const [form, setForm] = useState({ name: '', company: '', email: '', message: '' }); const [captchaToken, setCaptchaToken] = useState(''); const [error, setError] = useState(''); const submit = async (e) => { e.preventDefault(); setSending(true); setError(''); try { const res = await fetch(API_BASE + '/api/public/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: form.name, email: form.email, subject: `Cotización Hebilla ${buckle.sku}`, message: `Empresa: ${form.company}\n${form.message}`, captchaToken, }), }); const data = await res.json(); if (data.ok) { setSent(true); } else { setError(data.error || 'Error al enviar'); } } catch { setError('Error de conexión'); } finally { setSending(false); } }; return (
e.stopPropagation()} style={{ background: 'var(--parchment)', width: 'min(580px, 92vw)', padding: 48, position: 'relative' }}> {!sent ? ( <>
{t.catalog.hebillasTitle}

Hebilla {buckle.sku}

{t.catalog.moq}

setForm({...form, name: e.target.value})} />
setForm({...form, company: e.target.value})} />
setForm({...form, email: e.target.value})} />