/* Keiko Eyewear — section components (1/2): Header, Hero, About, Collections. Elegant editorial direction · Montserrat · real brand photography. */ const KDS = window.KeikoEyewearDesignSystem_efeae4; const { Button, Badge } = KDS; const L = window.KEIKO_LINKS; const M = window.KEIKO_MEDIA; const kimg = window.kimg; /* ---------- glyphs ---------- */ function WaGlyph({ s = 18 }) { return ( ); } function Arrow({ s = 16 }) { return ; } function WaCTA({ href, label, size = 'lg', style = {} }) { return ( ); } /* lazy Drive image */ function Img({ id, w = 1600, alt = '', style = {}, className }) { return {alt}; } /* ========================================================= HEADER ========================================================= */ function Header({ t, lang, setLang }) { const [scrolled, setScrolled] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); React.useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [menuOpen]); const links = [['about', '#about'], ['collections', '#collections'], ['kids', '#kids'], ['gallery', '#gallery'], ['retail', '#retail'], ['wholesale', '#wholesale'], ['contact', '#contact']]; const ink = scrolled ? 'var(--teal-900)' : '#fff'; const langs = [['es', 'ES'], ['en', 'EN'], ['zh', '中文'], ['ar', 'ع']]; return (
Keiko Eyewear
{langs.map(([code, label], i) => ( {i > 0 && } ))}
setMenuOpen(false)} links={links} t={t} lang={lang} setLang={setLang} langs={langs} />
); } function MobileMenu({ open, onClose, links, t, lang, setLang, langs }) { return (
Keiko Eyewear
{langs.map(([code, label]) => ( ))}
); } /* ========================================================= HERO — full-bleed editorial photo ========================================================= */ function Hero({ t, reduced }) { const words = t.hero.rotators; const [i, setI] = React.useState(0); React.useEffect(() => { if (reduced) return; const id = setInterval(() => setI((p) => (p + 1) % words.length), 2600); return () => clearInterval(id); }, [words, reduced]); return (
{t.hero.eyebrow}

{t.hero.lead}{' '} {words.map((w, idx) => ( {w} ))} {words.reduce((a, b) => b.length > a.length ? b : a, '')}

{t.hero.sub}

{t.hero.scroll}
); } /* ========================================================= ABOUT ========================================================= */ function About({ t }) { return (
Keiko
{t.about.eyebrow}

{t.about.title} {t.about.accent}

{t.about.p1}

{t.about.p2}

{t.about.quote}
{t.about.stats.map((s, idx) => (
{s.n}
{s.l}
))}
); } /* ========================================================= COLLECTIONS — large editorial image cards ========================================================= */ function Collections({ t }) { const c = t.collections; const imgs = [M.dama, M.caballero, M.sol]; return (
{c.eyebrow}

{c.title} {c.accent}

{c.intro}

{c.cards.map((card, idx) => ( {card.title}
{card.tag}

{card.title}

{card.desc}

{c.cta}
))}
{/* Kromo Caribe */}
{c.kromo.tag}

{c.kromo.title}

{c.kromo.desc}

Kromo Caribe
); } window.KeikoSections1 = { Header, Hero, About, Collections, WaCTA, WaGlyph, Arrow, Img };