// v2-sections.jsx — part 1: Nav, Hero, MentalLoad, Conversation, Capabilities

// ─── Scroll reveal hook ────────────────────────────────────────────
function useReveal() {
  React.useEffect(() => {
    const reveal = (el) => { el.classList.add('in'); el.style.opacity = '1'; };
    const els = document.querySelectorAll('.v2 .reveal');
    const vh = window.innerHeight;
    els.forEach((el) => { if (el.getBoundingClientRect().top < vh * 0.92) reveal(el); });
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -6% 0px' });
    els.forEach((el) => { if (!el.classList.contains('in')) io.observe(el); });
    // Safety net: anything still hidden after 2.5s (capture tools, edge cases) is forced visible.
    const safety = setTimeout(() => els.forEach((el) => { if (!el.classList.contains('in')) reveal(el); }), 2500);
    return () => { io.disconnect(); clearTimeout(safety); };
  }, []);
}

// ─── Nav ───────────────────────────────────────────────────────────
function V2Nav() {
  const [stuck, setStuck] = React.useState(false);
  const lang = React.useContext(LangContext);
  const setLang = React.useContext(LangSetContext);
  React.useEffect(() => {
    const on = () => setStuck(window.scrollY > 12);
    window.addEventListener('scroll', on); on();
    return () => window.removeEventListener('scroll', on);
  }, []);
  const seg = (active) => ({
    border: 0, background: active ? 'var(--purple-600, #5B4FD9)' : 'transparent',
    color: active ? '#fff' : 'var(--ink-500, #6b6b7a)', cursor: 'pointer',
    fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 600,
    padding: '5px 9px', borderRadius: 6, lineHeight: 1,
  });
  return (
    <nav className={`nav ${stuck ? 'stuck' : ''}`}>
      <Logo size={30} />
      <div className="nav-links">
        <a href="#how" className="hide-sm"><L mn="Яаж ажилладаг" en="How it works" /></a>
        <a href="#can" className="hide-sm"><L mn="Чадвар" en="What it does" /></a>
        <a href="#price" className="hide-sm"><L mn="Тариф" en="Pricing" /></a>
        <a href="#story" className="hide-sm"><L mn="Тухай" en="Story" /></a>
        <div role="group" aria-label="Language / Хэл сонгох"
          style={{ display: 'inline-flex', gap: 2, padding: 2, border: '1px solid var(--line, #e4e1d8)', borderRadius: 8 }}>
          <button type="button" aria-pressed={lang === 'mn'} aria-label="Монгол" onClick={() => setLang('mn')} style={seg(lang === 'mn')}>МН</button>
          <button type="button" aria-pressed={lang === 'en'} aria-label="English" onClick={() => setLang('en')} style={seg(lang === 'en')}>EN</button>
        </div>
        <button className="btn btn-primary" style={{ padding: '11px 18px', fontSize: 14, boxShadow: '0 4px 0 var(--purple-900)' }}>
          <L mn="Messenger-д нээх" en="Open in Messenger" />
        </button>
      </div>
    </nav>
  );
}

// ─── Hero — character-led, asymmetric ──────────────────────────────
const WORRIES = [
  { mn: 'эмчийн цаг', en: 'doctor appt', color: '#FF6B5B', cls: 'drift-a', pos: { top: '12%', left: '6%' } },
  { mn: 'хүүхдийн витамин', en: "kid's vitamin", color: '#FFD23F', cls: 'drift-b', pos: { top: '26%', left: '2%' } },
  { mn: 'ээжийн төрсөн өдөр', en: "mom's birthday", color: '#7BC4A8', cls: 'drift-c', pos: { top: '64%', left: '5%' } },
  { mn: 'талх, сүү авах', en: 'bread, milk', color: '#5B4FD9', cls: 'drift-a', pos: { top: '80%', left: '14%' } },
  { mn: 'түрээс төлөх', en: 'pay rent', color: '#FF6B5B', cls: 'drift-b', pos: { top: '16%', right: '8%' } },
  { mn: 'багштай уулзах', en: 'meet teacher', color: '#7BC4A8', cls: 'drift-c', pos: { top: '74%', right: '6%' } },
];

function V2Hero() {
  const [motion, setMotion] = React.useState(true);
  return (
    <section style={{ position: 'relative', padding: 'clamp(40px,7vw,96px) clamp(20px,5vw,72px) clamp(60px,8vw,120px)', overflow: 'hidden' }}>
      {/* drifting worries */}
      {WORRIES.map((w, i) => (
        <div key={i} className={`worry ${w.cls}`} style={{ ...w.pos, animationDelay: `${i * 0.6}s`, zIndex: 1 }}>
          <span className="dot" style={{ background: w.color }} />
          <L mn={w.mn} en={w.en} />
        </div>
      ))}

      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1280, margin: '0 auto' }}>
        {/* eyebrow */}
        <div className="reveal" style={{ display: 'flex', justifyContent: 'center', marginBottom: 'clamp(20px,3vw,40px)' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 16px', background: '#fff', border: '1px solid var(--mist)', borderRadius: 999, boxShadow: 'var(--shadow-sm)' }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--sage)' }} />
            <span className="kicker" style={{ color: 'var(--ink)', letterSpacing: '0.1em' }}><L mn="Messenger дотор · Монгол AI анд" en="Inside Messenger · Mongolian AI friend" /></span>
          </span>
        </div>

        {/* headline + character composition */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', position: 'relative' }}>
          <h1 className="mega reveal d1" style={{ position: 'relative', zIndex: 3 }}>
            <L
              mn={<>Толгойдоо тээж<br/>яваа юмаа</>}
              en={<>The mental load<br/>you carry —</>}
            />
          </h1>

          {/* character sits between the two halves of the headline */}
          <div className="reveal d2" style={{ position: 'relative', margin: 'clamp(-6px,-0.5vw,0) 0', zIndex: 2 }}>
            <div className={motion ? 'breathe' : ''} style={{ display: 'inline-block' }}>
              <BigAndaa size={Math.min(360, typeof window !== 'undefined' ? window.innerWidth * 0.62 : 360)} expression="wave" holding="check" />
            </div>
            {/* speech bubble out of character */}
            <div className="bob" style={{ position: 'absolute', top: '6%', right: '-6%', background: '#fff', border: '1px solid var(--mist)', borderRadius: '18px 18px 18px 4px', padding: '10px 14px', boxShadow: 'var(--shadow-md)', fontWeight: 600, fontSize: 14, maxWidth: 180, textAlign: 'left' }}>
              <L mn="Би санаж байя. Чи амар." en="I'll remember. You rest." />
            </div>
          </div>

          <h1 className="mega reveal d2" style={{ position: 'relative', zIndex: 3 }}>
            <L
              mn={<><span className="hl">надад өг.</span></>}
              en={<>hand it <span className="hl">to me.</span></>}
            />
          </h1>
        </div>

        {/* lede + CTA */}
        <div className="reveal d3" style={{ maxWidth: 640, margin: 'clamp(28px,4vw,48px) auto 0', textAlign: 'center' }}>
          <p className="lede">
            <L
              mn="Andaa бол энгийн Messenger чатад амьдардаг Монгол AI анд. Сануулга, хуваарь, асуулт, жагсаалт — хэлэхэд л санаж, цагт нь эргэж сануулна."
              en="Andaa is a Mongolian AI friend that lives in your Messenger. Reminders, schedules, questions, lists — just say it and it remembers."
            />
          </p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', marginTop: 'clamp(24px,3vw,36px)' }}>
            <button className="btn btn-primary">
              <Icon name="msgs" size={18} color="#fff" />
              <L mn="Messenger-д туршаарай" en="Try it in Messenger" />
            </button>
            <button className="btn btn-ghost">
              <L mn="90 сек видео" en="Watch 90s demo" />
            </button>
          </div>
          <div style={{ marginTop: 18, fontSize: 13, color: 'var(--slate)', display: 'flex', gap: 8, justifyContent: 'center', alignItems: 'center' }}>
            <Icon name="check" size={14} color="var(--sage)" strokeWidth={2.6} />
            <L mn="14 хоног үнэгүй · карт шаардахгүй" en="14 days free · no card needed" />
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Ticker / marquee ──────────────────────────────────────────────
function V2Ticker() {
  const items = [
    { mn: 'сануулга', en: 'reminders' },
    { mn: 'Gmail тойм', en: 'Gmail digest' },
    { mn: 'машины торгууль', en: 'traffic fines' },
    { mn: 'дугаарын хязгаарлалт', en: 'plate-day' },
    { mn: 'тооцоо төлбөр', en: 'utility bills' },
    { mn: 'хүүхдийн хуваарь', en: 'kids schedule' },
  ];
  const row = [...items, ...items];
  return (
    <div className="marquee" style={{ background: 'var(--ink)', color: 'var(--cream)', padding: '16px 0', transform: 'rotate(-1.2deg) scale(1.04)', margin: '0 0 clamp(20px,4vw,40px)' }}>
      <div className="marquee-track">
        {row.map((it, i) => (
          <span key={i} className="marquee-item">
            <L mn={it.mn} en={it.en} />
            <span style={{ color: 'var(--sun)' }}>✶</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─── Mental load section — coral world ─────────────────────────────
function V2MentalLoad() {
  return (
    <section id="how" style={{ padding: 'clamp(60px,9vw,140px) clamp(20px,5vw,72px)', background: 'var(--coral-soft)', position: 'relative', overflow: 'hidden' }}>
      <div className="dotbg" style={{ position: 'absolute', inset: 0, opacity: 0.5 }} />
      <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(0,1fr)', gap: 0 }}>
        <div className="reveal" style={{ maxWidth: 720 }}>
          <span className="kicker" style={{ color: '#c43b2c' }}><L mn="Танил мэдрэмж" en="A familiar feeling" /></span>
          <h2 className="big" style={{ marginTop: 18 }}>
            <L
              mn={<>Ээжийн толгойд<br/><span className="hl-coral hl">нэг зэрэг 12 юм</span><br/>эргэлдэж байдаг.</>}
              en={<>A parent's head holds<br/><span className="hl-coral hl">12 things at once</span>,<br/>all day long.</>}
            />
          </h2>
        </div>

        {/* before → after */}
        <div className="reveal d2" style={{ marginTop: 'clamp(36px,5vw,64px)', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24, alignItems: 'stretch' }}>
          {/* before */}
          <div style={{ background: '#fff', borderRadius: 24, padding: 28, border: '1px solid rgba(0,0,0,0.06)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <span style={{ width: 32, height: 32, borderRadius: 10, background: 'var(--coral-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="moon" size={18} color="var(--coral)" />
              </span>
              <span style={{ fontWeight: 600, fontFamily: 'var(--font-display)', fontSize: 18 }}><L mn="Andaa-гүйгээр" en="Without Andaa" /></span>
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {[
                { mn: 'витамин мартсан', en: 'forgot vitamin' },
                { mn: 'эмчийн цаг өнгөрсөн', en: 'missed appt' },
                { mn: 'төрсөн өдөр санасангүй', en: 'forgot birthday' },
                { mn: '“юу авах байсан билээ?”', en: '“what was it again?”' },
                { mn: 'шөнө сэрж бодсон', en: 'awake at night' },
              ].map((t, i) => (
                <span key={i} style={{ padding: '8px 12px', background: 'var(--mist-soft)', borderRadius: 999, fontSize: 13, color: 'var(--slate)', textDecoration: 'line-through', textDecorationColor: 'rgba(0,0,0,0.2)' }}>
                  <L mn={t.mn} en={t.en} />
                </span>
              ))}
            </div>
          </div>
          {/* after */}
          <div style={{ background: 'var(--ink)', color: 'var(--cream)', borderRadius: 24, padding: 28, position: 'relative', overflow: 'hidden' }}>
            <div className="dotbg-light" style={{ position: 'absolute', inset: 0, opacity: 0.5 }} />
            <div style={{ position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                <span style={{ width: 32, height: 32, borderRadius: 10, background: 'rgba(123,196,168,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name="sun" size={18} color="var(--sage)" />
                </span>
                <span style={{ fontWeight: 600, fontFamily: 'var(--font-display)', fontSize: 18 }}><L mn="Andaa-тай" en="With Andaa" /></span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  { mn: '09:00 эмч — санууллаа', en: '09:00 doctor — reminded' },
                  { mn: '17:00 витамин — өдөр бүр', en: '17:00 vitamin — daily' },
                  { mn: 'Лхагва — ээжид мэндчилгээ', en: 'Wed — birthday wishes' },
                ].map((t, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14 }}>
                    <Icon name="check" size={16} color="var(--sage)" strokeWidth={2.6} />
                    <L mn={t.mn} en={t.en} />
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 20, fontSize: 13, color: 'rgba(250,247,240,0.7)', display: 'flex', alignItems: 'center', gap: 8 }}>
                <AndaaPeek size={28} />
                <L mn="Толгой чинь чөлөөтэй." en="Your head is clear." />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { useReveal, V2Nav, V2Hero, V2Ticker, V2MentalLoad, WORRIES });