/* Keiko Eyewear — section components (2/2): Kids, Gallery, Wholesale, Briventi, Contact, Footer. */
const KDS2 = window.KeikoEyewearDesignSystem_efeae4;
const { Button: KBtn, Badge: KBadge } = KDS2;
const { WaCTA: KWaCTA, Arrow: KArrow, Img: KImg } = window.KeikoSections1;
const LK = window.KEIKO_LINKS;
const MM = window.KEIKO_MEDIA;
const kimg2 = window.kimg;
const KIDS = { yellow: '#f1d457', blue: '#2BA8E0', red: '#E0463C', green: '#4CA64C' };

function IgGlyph({ s = 18 }) {
  return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ flex: '0 0 auto' }}><rect x="2" y="2" width="20" height="20" rx="5.5"/><circle cx="12" cy="12" r="4.2"/><circle cx="17.6" cy="6.4" r="1.1" fill="currentColor" stroke="none"/></svg>;
}
function LinkGlyph({ s = 18 }) {
  return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ flex: '0 0 auto' }}><path d="M9 17H7A5 5 0 0 1 7 7h2M15 7h2a5 5 0 0 1 0 10h-2M8 12h8"/></svg>;
}

/* =========================================================
   KEIKO KIDS — light, playful-but-refined
   ========================================================= */
function Kids({ t }) {
  const k = t.kids;
  const dots = [KIDS.yellow, KIDS.blue, KIDS.red, KIDS.green];
  return (
    <section id="kids" className="k-section" style={{ background: 'var(--cream-100)', position: 'relative', overflow: 'hidden' }}>
      <div className="k-container">
        <div className="k-kids-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2.5rem,5vw,5rem)', alignItems: 'center' }}>
          <div className="k-kids-photos" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: 'auto auto', gap: 14 }}>
            <div data-reveal-bounce style={{ overflow: 'hidden', aspectRatio: '3/4', gridRow: 'span 2', borderRadius: 16 }}><KImg id={MM.kids[0]} w={900} className="k-zoom" /></div>
            <div data-reveal-bounce style={{ overflow: 'hidden', aspectRatio: '1/1', borderRadius: 16 }}><KImg id={MM.kids[1]} w={700} className="k-zoom" /></div>
            <div data-reveal-bounce style={{ overflow: 'hidden', aspectRatio: '1/1', borderRadius: 16 }}><KImg id={MM.kids[2]} w={700} className="k-zoom" /></div>
          </div>
          <div>
            <img data-reveal-bounce src="assets/logos/keiko-kids-trim.png" alt="Keiko Kids" style={{ height: 74, width: 'auto', display: 'block', marginBottom: 20 }} />
            <span data-reveal-bounce className="k-eyebrow" style={{ color: KIDS.blue }}>{k.eyebrow}</span>
            <h2 data-reveal-bounce className="k-h" style={{ marginTop: 14, color: 'var(--teal-900)' }}>{k.title} <span style={{ color: KIDS.red, fontWeight: 500 }}>{k.accent}</span></h2>
            <p data-reveal-bounce style={{ marginTop: 18, fontSize: 16, lineHeight: 1.75, color: 'var(--ink-700)', fontWeight: 300 }}>{k.p1}</p>
            <div className="k-kids-features" data-reveal-bounce style={{ marginTop: 24, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              {k.features.map((f, i) => (
                <div key={i} style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
                  <span style={{ width: 11, height: 11, borderRadius: '50%', background: dots[i % 4], marginTop: 5, flex: '0 0 auto' }}></span>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14.5, color: 'var(--teal-900)' }}>{f.t}</div>
                    <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--ink-500)', fontWeight: 300 }}>{f.d}</div>
                  </div>
                </div>
              ))}
            </div>
            {k.cert && (
              <div data-reveal-bounce style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 16, padding: '14px 18px', background: '#fff', border: '1px solid var(--cream-300, rgba(8,39,43,0.10))', borderRadius: 14, maxWidth: 'fit-content' }}>
                <img src="assets/logos/euipo.png" alt="EUIPO — European Union Intellectual Property Office" style={{ height: 38, width: 'auto', flex: '0 0 auto' }} />
                <div style={{ borderInlineStart: '1px solid rgba(8,39,43,0.12)', paddingInlineStart: 16 }}>
                  <div style={{ fontWeight: 600, fontSize: 13.5, color: 'var(--teal-900)', letterSpacing: '0.01em' }}>{k.cert}</div>
                  {k.certNote && <div style={{ fontSize: 12, lineHeight: 1.45, color: 'var(--ink-500)', fontWeight: 300, marginTop: 2, maxWidth: 320 }}>{k.certNote}</div>}
                </div>
              </div>
            )}
            <div data-reveal-bounce style={{ marginTop: 30, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <KWaCTA href={LK.waVenezuela} label={t.wa.kids} />
              <KBtn as="a" href={LK.instagramKids} target="_blank" rel="noopener noreferrer" variant="outline" size="lg" iconLeft={<IgGlyph s={18} />}>{k.instagram}</KBtn>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   GALLERY — editorial grid + lightbox
   ========================================================= */
function Gallery({ t, onOpen }) {
  const g = t.gallery;
  const LINES = window.KEIKO_LINES;
  const order = ['dama', 'caballero', 'sol', 'kids'];
  const f = g.filters || { all: 'All', dama: 'Dama', caballero: 'Caballero', sol: 'Sol', kids: 'Kids' };
  const [active, setActive] = React.useState('dama');
  const tiles = LINES[active].map((id) => ({ id, cat: active }));
  const chips = order.map((c) => [c, f[c]]);
  return (
    <section id="gallery" className="k-section" style={{ background: '#fff' }}>
      <div className="k-container">
        <div data-reveal style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto' }}>
          <span className="k-eyebrow">{g.eyebrow}</span>
          <h2 className="k-h" style={{ marginTop: 16 }}>{g.title} <span className="k-accent-word">{g.accent}</span></h2>
          <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.7, color: 'var(--ink-600)', fontWeight: 300 }}>{g.sub}</p>
        </div>
        <div data-reveal role="tablist" aria-label={g.eyebrow} style={{ marginTop: 30, display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 10 }}>
          {chips.map(([key, label]) => {
            const on = active === key;
            return (
              <button key={key} role="tab" aria-selected={on} onClick={() => setActive(key)} style={{
                cursor: 'pointer', padding: '9px 20px', borderRadius: 999, fontFamily: 'var(--font-body)',
                fontSize: 13.5, fontWeight: on ? 600 : 500, letterSpacing: '0.02em',
                border: '1px solid ' + (on ? 'var(--teal-900)' : 'rgba(8,39,43,0.18)'),
                background: on ? 'var(--teal-900)' : 'transparent',
                color: on ? '#fff' : 'var(--ink-600)', transition: 'all .2s var(--ease-out)',
              }}>{label}</button>
            );
          })}
        </div>
        <div className="k-lines-grid" style={{ marginTop: 34, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gridAutoRows: '260px', gap: 12 }}>
          {tiles.map(({ id, cat }, idx) => (
            <div data-reveal key={cat + id + idx} className="k-gal-tile"
              onClick={() => onOpen(kimg2(id, 1600))}
              style={{ position: 'relative', overflow: 'hidden', cursor: 'zoom-in', background: 'var(--cream-300)', borderRadius: 4 }}>
              <KImg id={id} w={1200} className="k-zoom" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   VIDEO GALLERY — autoplay muted loop, click for sound
   ========================================================= */
const KEIKO_VIDEOS = ['assets/video/keiko-5.webm', 'assets/video/keiko-kv2.webm'];

function VideoTile({ src }) {
  const ref = React.useRef(null);
  const [muted, setMuted] = React.useState(true);
  // play/pause on viewport visibility to save resources
  React.useEffect(() => {
    const v = ref.current;
    if (!v || !('IntersectionObserver' in window)) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { v.play && v.play().catch(() => {}); }
      else { v.pause && v.pause(); }
    }, { threshold: 0.4 });
    io.observe(v);
    return () => io.disconnect();
  }, []);
  const toggleSound = () => {
    const v = ref.current; if (!v) return;
    const next = !muted; setMuted(next); v.muted = next;
    if (!next) v.play && v.play().catch(() => {});
  };
  return (
    <div data-reveal className="k-video-tile" style={{ position: 'relative', borderRadius: 18, overflow: 'hidden', background: 'var(--teal-900)', boxShadow: 'var(--shadow-md)' }}>
      <video ref={ref} src={src} muted={muted} loop playsInline preload="metadata"
        style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover', cursor: 'pointer' }}
        onClick={toggleSound} />
      <button onClick={toggleSound} aria-label={muted ? 'Activar sonido' : 'Silenciar'} style={{
        position: 'absolute', insetInlineEnd: 14, bottom: 14, width: 44, height: 44, borderRadius: '50%',
        border: '1px solid rgba(255,255,255,0.35)', background: 'rgba(8,39,43,0.55)', backdropFilter: 'blur(6px)',
        color: '#fff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {muted
          ? <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M11 5 6 9H2v6h4l5 4z"/><path d="m22 9-6 6M16 9l6 6"/></svg>
          : <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M11 5 6 9H2v6h4l5 4z"/><path d="M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13"/></svg>}
      </button>
    </div>
  );
}

function VideoGallery({ t }) {
  const v = (t.gallery && t.gallery.video) || { eyebrow: 'Video', title: 'Keiko', accent: 'video' };
  return (
    <section id="video" className="k-section" style={{ background: 'var(--cream-100)', paddingTop: 'clamp(2rem,4vw,3.5rem)' }}>
      <div className="k-container">
        <div data-reveal style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto' }}>
          <span className="k-eyebrow">{v.eyebrow}</span>
          <h2 className="k-h" style={{ marginTop: 16 }}>{v.title} <span className="k-accent-word">{v.accent}</span></h2>
        </div>
        <div className="k-video-grid" style={{ marginTop: 44, display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 'clamp(14px,2vw,22px)', alignItems: 'stretch' }}>
          {KEIKO_VIDEOS.map((src) => <VideoTile key={src} src={src} />)}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   RETAIL — ¿Dónde comprar? (final customers)
   ========================================================= */
function Retail({ t }) {
  const r = t.retail;
  const L = window.KEIKO_LINES;
  const bubbles = [L.dama[0], L.caballero[0], L.sol[0], L.kids[0], L.dama[3]];
  return (
    <section id="retail" className="k-section" style={{ background: 'var(--cream-100)' }}>
      <div className="k-container">
        <div data-reveal style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
          <span className="k-eyebrow">{r.eyebrow}</span>
          <h2 className="k-h" style={{ marginTop: 16 }}>{r.title} <span className="k-accent-word">{r.accent}</span></h2>
          <p style={{ marginTop: 18, fontSize: 16.5, lineHeight: 1.8, color: 'var(--ink-600)', fontWeight: 300 }}>{r.body}</p>
        </div>
        <div data-reveal style={{ marginTop: 42, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 'clamp(14px,3vw,32px)', flexWrap: 'wrap' }}>
          {bubbles.map((id, i) => (
            <div key={id + i} style={{
              width: 'clamp(78px,11vw,104px)', aspectRatio: '1', borderRadius: '50%', padding: 3,
              background: 'linear-gradient(135deg, var(--keiko-gold, #f1d457), var(--teal-900))',
              flex: '0 0 auto',
            }}>
              <div style={{ width: '100%', height: '100%', borderRadius: '50%', overflow: 'hidden', border: '3px solid var(--cream-100)', background: 'var(--cream-300)' }}>
                <KImg id={id} w={400} />
              </div>
            </div>
          ))}
        </div>
        <div data-reveal style={{ marginTop: 38, display: 'flex', justifyContent: 'center' }}>
          <KBtn as="a" href={LK.instagram} target="_blank" rel="noopener noreferrer" variant="gold" size="lg" iconLeft={<IgGlyph s={18} />}>{r.cta}</KBtn>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   WHOLESALE — full-bleed image band, teal overlay
   ========================================================= */
function Wholesale({ t }) {
  const w = t.wholesale;
  return (
    <section id="wholesale" style={{ position: 'relative', overflow: 'hidden', color: '#fff' }}>
      <div style={{ position: 'absolute', inset: 0, zIndex: 0 }}><img src={kimg2(MM.wholesale, 1600)} alt="" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 35%' }} /></div>
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, background: 'linear-gradient(100deg, rgba(8,39,43,0.92) 0%, rgba(16,66,72,0.82) 48%, rgba(8,39,43,0.45) 100%)' }}></div>
      <div className="k-container" style={{ position: 'relative', zIndex: 2, paddingBlock: 'clamp(4rem,9vw,8rem)' }}>
        <div style={{ maxWidth: 560 }}>
          <span data-reveal className="k-eyebrow" style={{ color: 'var(--gold-400)' }}>{w.eyebrow}</span>
          <h2 data-reveal className="k-h" style={{ marginTop: 16, color: '#fff' }}>{w.title} <span className="k-accent-word" style={{ color: 'var(--keiko-gold)' }}>{w.accent}</span></h2>
          <p data-reveal style={{ marginTop: 20, fontSize: 17, lineHeight: 1.75, color: 'rgba(255,255,255,0.86)', fontWeight: 300 }}>{w.body}</p>
          <ul data-reveal style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
            {w.points.map((p, i) => (
              <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 15.5, fontWeight: 300 }}>
                <span style={{ width: 16, height: 16, background: 'var(--keiko-gold)', clipPath: 'var(--chevron-clip)', flex: '0 0 auto' }}></span>{p}
              </li>
            ))}
          </ul>
          <div data-reveal style={{ marginTop: 32 }}><KWaCTA href={LK.waVenezuela} label={t.wa.wholesale} /></div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   BRIVENTI
   ========================================================= */
function Briventi({ t }) {
  const b = t.briventi;
  return (
    <section id="briventi" className="k-section" style={{ background: '#fff' }}>
      <div className="k-container">
        <div data-reveal className="k-briventi-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2rem,5vw,4.5rem)', alignItems: 'center' }}>
          <div style={{ overflow: 'hidden', aspectRatio: '4/3' }}><KImg id={MM.briventi} w={1200} className="k-zoom" /></div>
          <div>
            <span className="k-eyebrow">{b.eyebrow}</span>
            <h2 className="k-h" style={{ marginTop: 14 }}>{b.title} <span className="k-accent-word">{b.accent}</span></h2>
            <div style={{ marginTop: 16, display: 'inline-flex' }}><KBadge variant="outline">{b.location}</KBadge></div>
            <p style={{ marginTop: 18, fontSize: 16.5, lineHeight: 1.8, color: 'var(--ink-600)', fontWeight: 300, maxWidth: '52ch' }}>{b.body}</p>
            <div style={{ marginTop: 28 }}><KWaCTA href={LK.waBriventi} label={t.wa.briventi} /></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   CONTACT
   ========================================================= */
function Contact({ t }) {
  const c = t.contact;
  return (
    <section id="contact" className="k-section" style={{ background: 'var(--teal-900)', color: '#fff', textAlign: 'center' }}>
      <div className="k-container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <span data-reveal className="k-eyebrow" style={{ color: 'var(--gold-400)' }}>{c.eyebrow}</span>
        <h2 data-reveal className="k-h" style={{ marginTop: 16, color: '#fff', fontSize: 'clamp(2.4rem,1.6rem+3vw,4.5rem)' }}>{c.title} <span className="k-accent-word" style={{ color: 'var(--keiko-gold)' }}>{c.accent}</span></h2>
        <p data-reveal style={{ marginTop: 20, fontSize: 17, lineHeight: 1.7, color: 'rgba(255,255,255,0.82)', maxWidth: '48ch', fontWeight: 300 }}>{c.body}</p>
        <div data-reveal style={{ marginTop: 34, display: 'flex', gap: 13, flexWrap: 'wrap', justifyContent: 'center' }}>
          <KWaCTA href={LK.waVenezuela} label={t.wa.general} />
          <KBtn as="a" href={LK.instagram} target="_blank" rel="noopener noreferrer" variant="outline-light" size="lg" iconLeft={<IgGlyph s={18} />}>{c.instagram}</KBtn>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   FOOTER
   ========================================================= */
function Footer({ t, lang, setLang }) {
  const links = [['about', '#about'], ['collections', '#collections'], ['kids', '#kids'], ['gallery', '#gallery'], ['wholesale', '#wholesale'], ['briventi', '#briventi'], ['contact', '#contact']];
  const langs = [['es', 'Español'], ['en', 'English'], ['zh', '中文'], ['ar', 'العربية']];
  return (
    <footer style={{ background: '#08272b', color: 'var(--teal-100)', paddingTop: 'clamp(3.5rem,6vw,5.5rem)', paddingBottom: 32 }}>
      <div className="k-container">
        <div className="k-footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1.2fr', gap: 'clamp(2rem,4vw,3rem)', alignItems: 'start' }}>
          <div>
            <img src="assets/logos/keiko-lockup-white-trim.png" alt="Keiko Eyewear" style={{ height: 72, width: 'auto', display: 'block' }} />
            <p style={{ marginTop: 20, fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 18, color: 'var(--cream-300)', maxWidth: '26ch', lineHeight: 1.4 }}>{t.footer.tagline}</p>
          </div>
          <div>
            <h4 className="k-foot-h">{t.footer.navTitle}</h4>
            <ul className="k-foot-list">{links.map(([key, href]) => <li key={key}><a href={href} className="k-foot-link">{t.nav[key]}</a></li>)}</ul>
          </div>
          <div>
            <h4 className="k-foot-h">{t.footer.followTitle}</h4>
            <ul className="k-foot-list">
              <li><a href={LK.instagram} target="_blank" rel="noopener noreferrer" className="k-foot-link" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><IgGlyph s={16} />@keikoeyewear</a></li>
              <li><a href={LK.instagramKids} target="_blank" rel="noopener noreferrer" className="k-foot-link" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><IgGlyph s={16} />@keikidseyewear</a></li>
            </ul>
          </div>
          <div>
            <h4 className="k-foot-h">{t.footer.langTitle}</h4>
            <ul className="k-foot-list">
              {langs.map(([code, label]) => (
                <li key={code}><button onClick={() => setLang(code)} className="k-foot-link" style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'var(--font-body)', fontWeight: lang === code ? 700 : 300, color: lang === code ? 'var(--keiko-gold)' : 'var(--teal-100)' }}>{label}</button></li>
              ))}
            </ul>
          </div>
        </div>
        <div style={{ marginTop: 'clamp(2.5rem,4vw,3.5rem)', paddingTop: 22, borderTop: '1px solid rgba(255,255,255,0.1)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontSize: 12.5, color: 'var(--teal-200)' }}>
          <span>{t.footer.rights}</span>
          <span>Briventi Optical Distribution · USA</span>
        </div>
      </div>
    </footer>
  );
}

window.KeikoSections2 = { Kids, Gallery, VideoGallery, Retail, Wholesale, Briventi, Contact, Footer };
