/* ── Vitrium Óticas — Shared Components ───────────────────────── */ const { useState, useEffect, useRef, useCallback } = React; const C = { cream: '#E8E4DE', creamLight: '#F5F1EB', sand: '#CFB898', warmBrown: '#7F6F60', darkBrown: '#7F5B28', gold: '#D6AA6D', goldLight: '#E8CC9A', charcoal: '#2C2416', white: '#FFFFFF', }; /* ── LogoMark ─────────────────────────────────────────────────── */ const LogoMark = ({ size = 36, dark = false }) => { const c = dark ? C.white : C.gold; const rays = [ [22,2],[22,42],[2,22],[42,22], [8,8],[36,36],[36,8],[8,36], [13,5],[31,5],[39,13],[39,31],[31,39],[13,39],[5,31],[5,13] ]; return ( {rays.map(([x,y], i) => ( ))} ); }; const Logo = ({ dark = false, size = 'md' }) => { // Usa o logo oficial do cliente (LOGOS VITRIUM 2026 entregue como horizontal-dourado) const heights = { sm: 38, md: 54, lg: 64 }; const h = heights[size]; const src = dark ? 'assets/logos/marcas/vitrium-horizontal-dourado-branco.webp' : 'assets/logos/marcas/vitrium-horizontal-dourado.webp'; return ( Vitrium Óticas ); }; /* ── Btn ──────────────────────────────────────────────────────── */ const Btn = ({ children, variant = 'primary', size = 'md', onClick, style: extra, as: Tag = 'button', href }) => { const [hov, setHov] = useState(false); const base = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontFamily: 'var(--font-ui)', fontWeight: 500, letterSpacing: '0.06em', borderRadius: 7, border: 'none', cursor: 'pointer', transition: 'all 0.22s ease', whiteSpace: 'nowrap', textDecoration: 'none', }; const sizes = { sm: { padding: '8px 18px', fontSize: 11.5 }, md: { padding: '11px 26px', fontSize: 12.5 }, lg: { padding: '14px 36px', fontSize: 13.5 } }; const variants = { primary: { background: hov ? '#C49A5A' : C.gold, color: C.charcoal, boxShadow: hov ? '0 4px 16px rgba(214,170,109,0.35)' : 'none' }, secondary: { background: hov ? '#6A4C20' : C.darkBrown, color: C.white }, outline: { background: hov ? 'rgba(214,170,109,0.08)' : 'transparent', color: C.darkBrown, border: `1.5px solid ${C.gold}` }, ghost: { background: hov ? 'rgba(255,255,255,0.12)' : 'transparent', color: C.white, border: `1px solid rgba(255,255,255,0.32)` }, whatsapp: { background: hov ? '#1da851' : '#25D366', color: C.white }, }; const props = { onMouseEnter: () => setHov(true), onMouseLeave: () => setHov(false), onClick, style: { ...base, ...sizes[size], ...variants[variant], ...extra }, }; if (href) props.href = href; return {children}; }; /* ── Nav ──────────────────────────────────────────────────────── */ const Nav = ({ page, setPage }) => { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const h = () => setScrolled(window.scrollY > 30); window.addEventListener('scroll', h, { passive: true }); return () => window.removeEventListener('scroll', h); }, []); const links = [ { label: 'Início', key: 'home' }, { label: 'Óculos de Grau', key: 'grau' }, { label: 'Óculos de Sol', key: 'sol' }, { label: 'Lentes de Contato', key: 'lentes' }, { label: 'Sobre', key: 'sobre' }, ]; return (