/* 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 (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style={{ flex: '0 0 auto' }}>
      <path d="M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.157 5.335 5.493 0 12.05 0a11.82 11.82 0 0 1 8.413 3.488 11.82 11.82 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.82 9.82 0 0 0 1.51 5.26l-.999 3.648 3.978-1.607zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.71.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/>
    </svg>
  );
}
function Arrow({ s = 16 }) {
  return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
}

function WaCTA({ href, label, size = 'lg', style = {} }) {
  return (
    <Button as="a" href={href} target="_blank" rel="noopener noreferrer"
      variant="whatsapp" size={size} iconLeft={<WaGlyph s={size === 'lg' ? 19 : 17} />} style={{ color: '#fff', ...style }}>
      {label}
    </Button>
  );
}

/* lazy Drive image */
function Img({ id, w = 1600, alt = '', style = {}, className }) {
  return <img src={kimg(id, w)} alt={alt} loading="lazy" className={className}
    style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover', ...style }} />;
}

/* =========================================================
   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 (
    <header style={{
      position: 'fixed', insetInlineStart: 0, insetInlineEnd: 0, top: 0, zIndex: 50,
      transition: 'background .35s var(--ease-out), box-shadow .35s var(--ease-out)',
      background: scrolled ? 'rgba(255,255,255,0.96)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(1.2) blur(8px)' : 'none',
      boxShadow: scrolled ? '0 1px 0 rgba(16,66,72,0.08)' : 'none',
    }}>
      <div className="k-container" style={{ height: 78, display: 'flex', alignItems: 'center', gap: 24 }}>
        <a href="#hero" style={{ display: 'flex', alignItems: 'center', flex: '0 0 auto' }} aria-label="Keiko Eyewear">
          <img src={scrolled ? 'assets/logos/keiko-lockup-teal-trim.png' : 'assets/logos/keiko-lockup-white-trim.png'}
            alt="Keiko Eyewear" style={{ height: 50, width: 'auto', display: 'block', transition: 'opacity .3s' }} />
        </a>
        <nav className="k-desktop-nav" style={{ display: 'flex', gap: 30, flex: 1, justifyContent: 'center' }}>
          {links.map(([key, href]) => (
            <a key={key} href={href} className="k-navlink" style={{
              color: ink, fontSize: 12.5, fontWeight: 500, textDecoration: 'none',
              letterSpacing: '0.14em', textTransform: 'uppercase', whiteSpace: 'nowrap', transition: 'color .25s, opacity .25s', opacity: 0.92,
            }}>{t.nav[key]}</a>
          ))}
        </nav>
        <div className="k-header-langs" role="group" aria-label="Idioma" style={{ display: 'flex', alignItems: 'center', gap: 2, flex: '0 0 auto' }}>
          {langs.map(([code, label], i) => (
            <React.Fragment key={code}>
              {i > 0 && <span style={{ width: 1, height: 11, background: ink, opacity: 0.3 }}></span>}
              <button onClick={() => setLang(code)} style={{
                background: 'none', border: 'none', cursor: 'pointer', padding: '4px 7px',
                fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: lang === code ? 700 : 500,
                color: ink, opacity: lang === code ? 1 : 0.6, letterSpacing: '0.04em', whiteSpace: 'nowrap',
              }}>{label}</button>
            </React.Fragment>
          ))}
        </div>
        <button className="k-burger" onClick={() => setMenuOpen(true)} aria-label="Menú" aria-expanded={menuOpen} style={{
          display: 'none', flex: '0 0 auto', background: 'none', border: 'none', cursor: 'pointer',
          padding: 6, color: ink, alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
        </button>
      </div>
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} links={links} t={t} lang={lang} setLang={setLang} langs={langs} />
    </header>
  );
}

function MobileMenu({ open, onClose, links, t, lang, setLang, langs }) {
  return (
    <div role="dialog" aria-modal="true" aria-hidden={!open} style={{
      position: 'fixed', inset: 0, zIndex: 60, background: 'var(--teal-900)',
      display: 'flex', flexDirection: 'column', padding: '26px clamp(1.4rem,6vw,3rem)',
      opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none',
      transform: open ? 'translateY(0)' : 'translateY(-8px)',
      transition: 'opacity .3s var(--ease-out), transform .3s var(--ease-out)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <img src="assets/logos/keiko-lockup-white-trim.png" alt="Keiko Eyewear" style={{ height: 44, width: 'auto' }} />
        <button onClick={onClose} aria-label="Cerrar" style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 6, color: '#fff' }}>
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
        </button>
      </div>
      <nav style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: '8vh', flex: 1 }}>
        {links.map(([key, href]) => (
          <a key={key} href={href} onClick={onClose} style={{
            color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 300,
            fontSize: 'clamp(1.7rem,7vw,2.4rem)', textDecoration: 'none', padding: '10px 0',
            borderBottom: '1px solid rgba(255,255,255,0.10)', letterSpacing: '-0.01em',
          }}>{t.nav[key]}</a>
        ))}
      </nav>
      <div role="group" aria-label="Idioma" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        {langs.map(([code, label]) => (
          <button key={code} onClick={() => { setLang(code); }} style={{
            background: lang === code ? 'rgba(255,255,255,0.14)' : 'none', border: '1px solid rgba(255,255,255,0.22)',
            borderRadius: 999, cursor: 'pointer', padding: '7px 16px',
            fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: lang === code ? 700 : 500,
            color: '#fff', opacity: lang === code ? 1 : 0.7, letterSpacing: '0.04em',
          }}>{label}</button>
        ))}
      </div>
    </div>
  );
}

/* =========================================================
   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 (
    <section id="hero" style={{ position: 'relative', height: '100svh', minHeight: 600, overflow: 'hidden', background: 'var(--teal-900)' }}>
      <div data-hero-media style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
        <img src={kimg(M.hero, 1600)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%' }} />
      </div>
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, background: 'linear-gradient(180deg, rgba(8,39,43,0.45) 0%, rgba(8,39,43,0.12) 38%, rgba(8,39,43,0.78) 100%)' }}></div>

      <div className="k-container" style={{ position: 'relative', zIndex: 2, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 'clamp(3rem,8vh,7rem)', color: '#fff' }}>
        <span data-hero-anim className="k-eyebrow" style={{ color: '#fff', opacity: 0.9, marginBottom: 22 }}>{t.hero.eyebrow}</span>
        <h1 data-hero-anim style={{
          fontFamily: 'var(--font-display)', fontWeight: 300, margin: 0,
          fontSize: 'clamp(2.6rem, 1.4rem + 4.4vw, 5.6rem)', lineHeight: 1.04, letterSpacing: '-0.015em',
          textWrap: 'balance', maxWidth: '16ch',
        }}>
          {t.hero.lead}{' '}
          <span style={{ display: 'inline-grid' }}>
            {words.map((w, idx) => (
              <span key={idx} aria-hidden={idx !== i} style={{
                gridArea: '1 / 1', color: 'var(--keiko-gold)', fontWeight: 500, whiteSpace: 'nowrap',
                opacity: idx === i ? 1 : 0, transform: idx === i ? 'translateY(0)' : 'translateY(0.25em)',
                transition: 'opacity .7s var(--ease-out), transform .7s var(--ease-out)',
              }}>{w}</span>
            ))}
            <span style={{ gridArea: '1 / 1', visibility: 'hidden', fontWeight: 500, whiteSpace: 'nowrap' }}>{words.reduce((a, b) => b.length > a.length ? b : a, '')}</span>
          </span>
        </h1>
        <p data-hero-anim style={{ marginTop: 22, fontSize: 'clamp(1rem,0.95rem+0.3vw,1.2rem)', lineHeight: 1.6, color: 'rgba(255,255,255,0.86)', maxWidth: '42ch', fontWeight: 300 }}>{t.hero.sub}</p>
        <div data-hero-anim style={{ marginTop: 32, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <WaCTA href={L.waVenezuela} label={t.wa.hero} />
          <Button as="a" href="#collections" variant="outline-light" size="lg" iconRight={<Arrow s={17} />}>{t.collections.cta}</Button>
        </div>
      </div>
      <div data-hero-anim className="k-scroll-hint" style={{ position: 'absolute', insetInlineEnd: 'clamp(1.25rem,3vw,3rem)', bottom: 'clamp(3rem,8vh,7rem)', zIndex: 2, color: 'rgba(255,255,255,0.65)', writingMode: 'vertical-rl', fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase' }}>{t.hero.scroll}</div>
    </section>
  );
}

/* =========================================================
   ABOUT
   ========================================================= */
function About({ t }) {
  return (
    <section id="about" className="k-section" style={{ background: '#fff' }}>
      <div className="k-container k-about-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2.5rem,6vw,6rem)', alignItems: 'center' }}>
        <div data-reveal style={{ position: 'relative' }}>
          <div style={{ overflow: 'hidden', aspectRatio: '4 / 5' }}>
            <Img id={M.about} w={1200} alt="Keiko" className="k-zoom" />
          </div>
        </div>
        <div>
          <span data-reveal className="k-eyebrow">{t.about.eyebrow}</span>
          <h2 data-reveal className="k-h" style={{ marginTop: 18 }}>
            {t.about.title} <span className="k-accent-word">{t.about.accent}</span>
          </h2>
          <p data-reveal style={{ marginTop: 22, fontSize: 16.5, lineHeight: 1.8, color: 'var(--ink-600)', fontWeight: 300 }}>{t.about.p1}</p>
          <p data-reveal style={{ marginTop: 14, fontSize: 16.5, lineHeight: 1.8, color: 'var(--ink-600)', fontWeight: 300 }}>{t.about.p2}</p>
          <blockquote data-reveal style={{ margin: '28px 0 0', paddingInlineStart: 22, borderInlineStart: '2px solid var(--keiko-gold)', fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.25rem,1rem+0.9vw,1.7rem)', lineHeight: 1.4, color: 'var(--teal-900)' }}>{t.about.quote}</blockquote>
          <div data-reveal style={{ marginTop: 34, display: 'flex', gap: 'clamp(1.75rem,4vw,3.5rem)', flexWrap: 'wrap' }}>
            {t.about.stats.map((s, idx) => (
              <div key={idx}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(1.8rem,1.4rem+1.2vw,2.5rem)', fontWeight: 300, color: 'var(--teal-700)', lineHeight: 1 }}>{s.n}</div>
                <div style={{ marginTop: 8, fontSize: 11.5, color: 'var(--ink-500)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   COLLECTIONS — large editorial image cards
   ========================================================= */
function Collections({ t }) {
  const c = t.collections;
  const imgs = [M.dama, M.caballero, M.sol];
  return (
    <section id="collections" className="k-section" style={{ background: '#fff' }}>
      <div className="k-container">
        <div data-reveal style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto' }}>
          <span className="k-eyebrow">{c.eyebrow}</span>
          <h2 className="k-h" style={{ marginTop: 16 }}>{c.title} <span className="k-accent-word">{c.accent}</span></h2>
          <p style={{ marginTop: 18, fontSize: 16, lineHeight: 1.7, color: 'var(--ink-600)', fontWeight: 300 }}>{c.intro}</p>
        </div>

        <div className="k-grid-3" style={{ marginTop: 54, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22 }}>
          {c.cards.map((card, idx) => (
            <a data-reveal key={idx} href={L.waVenezuela} target="_blank" rel="noopener noreferrer" className="k-col-card" style={{ position: 'relative', display: 'block', overflow: 'hidden', textDecoration: 'none', aspectRatio: '3 / 4', background: 'var(--teal-900)' }}>
              <Img id={imgs[idx]} w={1000} alt={card.title} className="k-zoom" style={{ opacity: 0.96 }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(8,39,43,0) 45%, rgba(8,39,43,0.72) 100%)' }}></div>
              <div style={{ position: 'absolute', insetInline: 0, bottom: 0, padding: 'clamp(1.25rem,2vw,1.75rem)', color: '#fff' }}>
                <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-400)', marginBottom: 8 }}>{card.tag}</div>
                <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.4rem,1.1rem+1vw,1.9rem)', lineHeight: 1.1 }}>{card.title}</h3>
                <p style={{ margin: '8px 0 0', fontSize: 13.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.8)', fontWeight: 300, maxWidth: '34ch' }}>{card.desc}</p>
                <span className="k-col-link" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginTop: 14, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#fff' }}>{c.cta} <Arrow s={15} /></span>
              </div>
            </a>
          ))}
        </div>

        {/* Kromo Caribe */}
        <div data-reveal className="k-kromo" style={{ marginTop: 22, display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 380, overflow: 'hidden', background: 'var(--keiko-teal)', color: '#fff' }}>
          <div style={{ padding: 'clamp(2rem,4vw,3.5rem)', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 16 }}>
            <Badge variant="gold" style={{ alignSelf: 'flex-start' }}>{c.kromo.tag}</Badge>
            <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(2rem,1.5rem+1.6vw,3.2rem)', lineHeight: 1.06 }}>{c.kromo.title}</h3>
            <p style={{ margin: 0, fontSize: 16, lineHeight: 1.7, color: 'var(--teal-100)', maxWidth: '44ch', fontWeight: 300 }}>{c.kromo.desc}</p>
          </div>
          <div style={{ overflow: 'hidden', minHeight: 300 }}><Img id={M.kromo} w={1200} alt="Kromo Caribe" className="k-zoom" /></div>
        </div>
      </div>
    </section>
  );
}

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