// v2-sections2.jsx — Conversation (purple), Capabilities, Proof, Founder, Pricing, CTA, Footer

// ─── Conversation — full-bleed PURPLE, animated chat ───────────────
function V2Conversation() {
  const STEPS = [700, 1300, 1100, 1500, 1000, 900, 3400, 1800];
  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const t = setTimeout(() => setStep((s) => (s + 1) % (STEPS.length + 1)), STEPS[step] || 1000);
    return () => clearTimeout(t);
  }, [step]);
  const v = step === STEPS.length ? -1 : step;
  const typing1 = v === 2, typing2 = v === 5;
  const reply1 = v >= 3, user2 = v >= 4, reply2 = v >= 6, done = v >= 7;

  const Typing = () => (
    <div style={{ display: 'inline-flex', gap: 4, padding: '14px 16px', background: '#fff', borderRadius: '18px 18px 18px 4px', alignItems: 'center', border: '1px solid var(--mist)' }}>
      <span className="typing-dot" /><span className="typing-dot" /><span className="typing-dot" />
    </div>
  );

  return (
    <section id="conv" style={{ padding: 'clamp(60px,9vw,140px) clamp(20px,5vw,72px)', background: 'var(--purple)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div className="dotbg-light" style={{ position: 'absolute', inset: 0, opacity: 0.4 }} />
      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 'clamp(36px,5vw,72px)', alignItems: 'center' }}>
        {/* left: words + character */}
        <div className="reveal">
          <span className="kicker" style={{ color: 'var(--sun)' }}><L mn="Яаж ажилладаг вэ" en="How it works" /></span>
          <h2 className="big" style={{ marginTop: 18, color: '#fff' }}>
            <L mn={<>Шинэ app алга.<br/>Шинэ нэвтрэлт алга.<br/>Зүгээр л <span style={{ color: 'var(--sun)' }}>бичнэ.</span></>} en={<>No new app.<br/>No new login.<br/>Just <span style={{ color: 'var(--sun)' }}>say it.</span></>} />
          </h2>
          <p className="lede" style={{ color: 'rgba(255,255,255,0.82)', marginTop: 20, maxWidth: 460 }}>
            <L mn="Найзтайгаа бичдэг шигээ Andaa-тай ярь. Тэр ойлгоно, тохирно, цагт нь эргэж сануулна." en="Chat with Andaa like you'd text a friend. It understands, adjusts, and circles back at the right time." />
          </p>
          <div className="breathe" style={{ marginTop: 32 }}>
            <BigAndaa size={200} expression="happy" holding="bell" />
          </div>
        </div>

        {/* right: phone-ish chat card */}
        <div className="reveal d2" style={{ justifySelf: 'center', width: '100%', maxWidth: 420 }}>
          <div style={{ background: 'var(--cream)', borderRadius: 28, padding: 18, boxShadow: '0 30px 60px rgba(0,0,0,0.25)', border: '8px solid rgba(0,0,0,0.15)' }}>
            {/* header */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '4px 6px 14px', borderBottom: '1px solid var(--mist)' }}>
              <div style={{ position: 'relative' }}>
                <CharacterMark size={30} />
              </div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 15, color: 'var(--ink)' }}>Andaa</div>
                <div style={{ fontSize: 11, color: 'var(--sage)' }}>● <L mn="идэвхтэй" en="active now" /></div>
              </div>
            </div>
            <div style={{ padding: '16px 6px 6px', display: 'flex', flexDirection: 'column', gap: 10, minHeight: 360 }}>
              {v >= 0 && <div className="bubble-in" style={{ textAlign: 'center', fontSize: 11, color: 'var(--slate)' }}><L mn="БЯМБА · 14:12" en="SAT · 14:12" /></div>}
              {v >= 1 && <ConvBubble who="user" key={`u1${v<0?'r':''}`} mn="Маргааш Тогтуун 15:30-д хөлбөмбөгтэй." en="Tomorrow Togtuun has football at 15:30." />}
              {typing1 && <div className="bubble-in" style={{ alignSelf: 'flex-start' }}><Typing /></div>}
              {reply1 && <ConvBubble who="andaa" key={`a1${v<0?'r':''}`} mn="Тэмдэглэлээ ✓ 14:50-д сануулъя?" en="Saved ✓ Want a 14:50 nudge?" chips={[{mn:'Тийм',en:'Yes'},{mn:'30 мин түрүүлж',en:'30 min early'}]} />}
              {user2 && <ConvBubble who="user" key={`u2${v<0?'r':''}`} mn="30 мин түрүүлж." en="30 min earlier." />}
              {typing2 && <div className="bubble-in" style={{ alignSelf: 'flex-start' }}><Typing /></div>}
              {reply2 && <ConvBubble who="andaa" key={`a2${v<0?'r':''}`} mn="✓ 14:20-д сануулна. Талх ч жагсаалтад нэмэх үү?" en="✓ Reminding at 14:20. Add bread to your list too?" />}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ConvBubble({ who, mn, en, chips }) {
  const isUser = who === 'user';
  return (
    <div className="bubble-in" style={{ display: 'flex', flexDirection: 'column', alignItems: isUser ? 'flex-end' : 'flex-start', gap: 6 }}>
      <div style={{
        maxWidth: '82%', padding: '11px 15px', fontSize: 14.5, lineHeight: 1.35,
        background: isUser ? 'var(--purple)' : '#fff',
        color: isUser ? '#fff' : 'var(--ink)',
        border: isUser ? 'none' : '1px solid var(--mist)',
        borderRadius: isUser ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
      }}>
        <L mn={mn} en={en} />
      </div>
      {chips && (
        <div className="bubble-in" style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {chips.map((c, i) => (
            <span key={i} style={{ padding: '6px 12px', borderRadius: 999, background: 'var(--cream)', border: '1px solid var(--purple)', color: 'var(--purple)', fontSize: 12, fontWeight: 600 }}>
              <L mn={c.mn} en={c.en} />
            </span>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── Modules — real product modules with sample output ─────────────
const MODULES = [
  {
    icon: 'clock', tint: 'var(--purple-50)', ic: 'var(--purple)', rot: -1.5,
    name: { mn: 'Сануулга & хуваарь', en: 'Reminders & schedule' },
    desc: { mn: 'Хэлэхэд л тэмдэглэж, зөв цагт сануулна.', en: 'Just say it — Andaa logs it and nudges on time.' },
    who: 'andaa',
    sample: { mn: 'Тэмдэглэлээ ✓ Маргааш 13:30-д сануулъя?', en: 'Saved ✓ Remind tomorrow at 13:30?' },
  },
  {
    icon: 'mail', tint: 'var(--coral-soft)', ic: 'var(--coral)', rot: 1.2,
    name: { mn: 'Gmail өглөөний тойм', en: 'Gmail morning digest' },
    desc: { mn: 'Gmail холбоод өглөө бүр чухал/чухал бишийг ялгаж товчилно.', en: 'Connect Gmail — every morning, sorted: important vs noise.' },
    who: 'andaa',
    sample: { mn: '14 имэйл — Хаан банк, GitHub чухал. Бусад нь мэдэгдэл.', en: '14 emails — Khan Bank, GitHub matter. Rest is noise.' },
  },
  {
    icon: 'car', tint: 'var(--sage-soft)', ic: '#1f5b40', rot: -1,
    name: { mn: 'Машин — торгууль', en: 'Car — traffic fines' },
    desc: { mn: 'Дугаараа бүртгэ — өглөө бүр шинэ торгууль гарсан эсэхийг шалгана.', en: 'Register your plate — daily check for new fines.' },
    who: 'andaa',
    sample: { mn: '🚗 7100УКК: Өчигдөр зөрчилгүй — сайн байна ✓', en: '🚗 7100УКК: No violations yesterday ✓' },
  },
  {
    icon: 'ban', tint: 'var(--sun-soft)', ic: '#a67c00', rot: 1.5,
    name: { mn: 'Дугаарын хязгаарлалт', en: 'Plate-day restriction' },
    desc: { mn: 'Өнөөдөр чиний дугаар гарах боломжтой эсэхийг өглөө сануулна.', en: 'Tells you each morning if your plate can drive today.' },
    who: 'andaa',
    sample: { mn: 'Өнөөдөр Лхагва — 7100УКК гарах боломжгүй. Бүү гараарай.', en: "Today is Wed — 7100УКК can't drive. Best stay parked." },
  },
  {
    icon: 'bolt', tint: 'var(--purple-50)', ic: 'var(--purple)', rot: -1.2,
    name: { mn: 'Тооцоо төлбөр', en: 'Utility billing' },
    desc: { mn: 'Цахилгаан, ус, интернэтийн төлбөрийн өдрийг урьдчилан сануулна.', en: 'Reminds you before electricity, water & internet bills are due.' },
    who: 'andaa',
    sample: { mn: 'Цахилгааны төлбөр 25-нд. 2 өдрийн өмнө сануулъя?', en: 'Electricity bill due on the 25th. Nudge 2 days early?' },
  },
  {
    icon: 'family', tint: 'var(--coral-soft)', ic: 'var(--coral)', rot: 1,
    name: { mn: 'Хүүхэд', en: 'Kids' },
    desc: { mn: 'Хүүхдийн хуваарь, асуулт, хүргэх/авах цаг — бүгд нэг дор.', en: "Kids' schedules, questions, pickups — all in one place." },
    who: 'andaa',
    sample: { mn: 'Болдыг 08:30-д цэцэрлэгт хүргэх. 30 минут үлдлээ ⏰', en: 'Drop Bold at daycare 08:30. 30 minutes left ⏰' },
  },
];

function V2Modules() {
  return (
    <section id="can" style={{ padding: 'clamp(60px,9vw,140px) clamp(20px,5vw,72px)', background: 'var(--cream)', position: 'relative' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div className="reveal" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 'clamp(36px,5vw,64px)' }}>
          <div style={{ maxWidth: 680 }}>
            <span className="kicker" style={{ color: 'var(--purple)' }}><L mn="Andaa-гийн module-ууд" en="Andaa's modules" /></span>
            <h2 className="big" style={{ marginTop: 18 }}>
              <L mn={<>Нэг чатад —<br/>өрхийн <span className="hl">бүхэл долоо хоног.</span></>} en={<>One chat —<br/>your family's <span className="hl">whole week.</span></>} />
            </h2>
            <p className="lede" style={{ marginTop: 16, maxWidth: 540 }}>
              <L mn="Module бүр өглөө бүр чиний өмнөөс ажилладаг. Чи зүгээр л чатаа уншина." en="Each module works for you in the background. You just read your chat." />
            </p>
          </div>
          <div className="bob"><AndaaPeek size={72} /></div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 20 }}>
          {MODULES.map((m, i) => (
            <div key={i} className={`sticker reveal d${(i % 4) + 1}`} style={{ transform: `rotate(${m.rot}deg)`, display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 46, height: 46, borderRadius: 14, background: m.tint, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
                  <Icon name={m.icon} size={24} color={m.ic} />
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19, letterSpacing: '-0.01em', lineHeight: 1.1 }}>
                  <L mn={m.name.mn} en={m.name.en} />
                </div>
              </div>
              <p style={{ fontSize: 14, color: 'var(--slate)', lineHeight: 1.5 }}><L mn={m.desc.mn} en={m.desc.en} /></p>
              {/* sample output bubble */}
              <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'flex-end', gap: 8 }}>
                <CharacterMark size={22} />
                <div style={{ background: 'var(--cream)', border: '1px solid var(--mist)', borderRadius: '14px 14px 14px 4px', padding: '9px 13px', fontSize: 13.5, lineHeight: 1.35, color: 'var(--ink)' }}>
                  <L mn={m.sample.mn} en={m.sample.en} />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Agentic vision — one chat, many agents (orbit) ────────────────
function V2Agentic() {
  const ring = [
    { icon: 'clock', mn: 'Сануулга', en: 'Reminders' },
    { icon: 'mail',  mn: 'Gmail',    en: 'Gmail' },
    { icon: 'car',   mn: 'Торгууль', en: 'Fines' },
    { icon: 'ban',   mn: 'Дугаар',   en: 'Plate-day' },
    { icon: 'bolt',  mn: 'Төлбөр',   en: 'Bills' },
    { icon: 'family',mn: 'Хүүхэд',   en: 'Kids' },
  ];
  const n = ring.length;
  const pos = ring.map((_, i) => {
    const theta = (-90 + i * (360 / n)) * Math.PI / 180;
    return { x: 50 + 40 * Math.cos(theta), y: 50 + 40 * Math.sin(theta) };
  });

  return (
    <section style={{ padding: 'clamp(60px,9vw,140px) clamp(20px,5vw,72px)', background: 'var(--ink)', color: 'var(--cream)', position: 'relative', overflow: 'hidden' }}>
      <div className="dotbg-light" style={{ position: 'absolute', inset: 0, opacity: 0.35 }} />
      <div style={{ position: 'relative', maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'clamp(40px,5vw,80px)', alignItems: 'center' }}>
        {/* words */}
        <div className="reveal">
          <span className="kicker" style={{ color: 'var(--sun)' }}><L mn="Нэг анд, олон agent" en="One friend, many agents" /></span>
          <h2 className="big" style={{ marginTop: 18, color: '#fff' }}>
            <L mn={<>Нэг чат.<br/>Доор нь <span style={{ color: 'var(--sun)' }}>олон ухаалаг</span> agent.</>} en={<>One chat.<br/>Many smart <span style={{ color: 'var(--sun)' }}>agents</span> underneath.</>} />
          </h2>
          <p className="lede" style={{ color: 'rgba(250,247,240,0.78)', marginTop: 20, maxWidth: 480 }}>
            <L
              mn="Andaa бол зүгээр нэг chatbot биш. Module бүр чиний өмнөөс ажилладаг бие даасан ухаалаг agent — Gmail уншина, торгууль шалгана, төлбөр хянана. Бид олон agentic AI шийдлийг нэг дор цуглуулж, Монголын хамгийн ухаалаг туслахыг бүтээж байна."
              en="Andaa isn't just a chatbot. Each module is its own smart agent working for you — reading Gmail, checking fines, watching bills. We're bringing many agentic AI solutions into one place to build Mongolia's smartest assistant."
            />
          </p>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 26 }}>
            {[{mn:'Идэвхтэй ажилладаг',en:'Proactive'},{mn:'Монголд тохирсон',en:'Mongolian context'},{mn:'Module тасралтгүй нэмэгднэ',en:'More modules monthly'}].map((t,i)=>(
              <span key={i} style={{ padding: '8px 14px', borderRadius: 999, background: 'rgba(250,247,240,0.08)', border: '1px solid rgba(250,247,240,0.16)', fontSize: 13, fontWeight: 500 }}>
                <L mn={t.mn} en={t.en} />
              </span>
            ))}
          </div>
        </div>

        {/* orbit */}
        <div className="reveal d2" style={{ justifySelf: 'center', position: 'relative', width: 'min(92vw, 480px)', aspectRatio: '1 / 1' }}>
          {/* dotted connectors */}
          <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
            <circle cx="50" cy="50" r="40" fill="none" stroke="rgba(250,247,240,0.14)" strokeWidth="0.4" strokeDasharray="1.5 1.5" />
            {pos.map((p, i) => (
              <line key={i} x1="50" y1="50" x2={p.x} y2={p.y} stroke="rgba(250,247,240,0.16)" strokeWidth="0.4" strokeDasharray="1.2 1.2" />
            ))}
          </svg>
          {/* center character — outer div owns the centering transform; inner owns the breathe animation. (Animations set `transform` and would otherwise clobber translate(-50%,-50%).) */}
          <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', zIndex: 2 }}>
            <div className="breathe">
              <BigAndaa size={132} expression="happy" holding={null} />
            </div>
          </div>
          {/* ring chips */}
          {ring.map((m, i) => (
            <div key={i} style={{ position: 'absolute', top: `${pos[i].y}%`, left: `${pos[i].x}%`, transform: 'translate(-50%,-50%)', zIndex: 3 }}>
              <div className="bob" style={{ animationDelay: `${i * 0.4}s` }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <div style={{ width: 54, height: 54, borderRadius: 16, background: 'var(--cream)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 8px 20px rgba(0,0,0,0.3)' }}>
                  <Icon name={m.icon} size={26} color="var(--purple)" />
                </div>
                <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--cream)', whiteSpace: 'nowrap' }}><L mn={m.mn} en={m.en} /></span>
              </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Proof — big editorial numbers, off-grid ───────────────────────
function V2Proof() {
  return (
    <section style={{ padding: 'clamp(50px,7vw,110px) clamp(20px,5vw,72px)', background: 'var(--sage-soft)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div className="reveal" style={{ maxWidth: 560, marginBottom: 'clamp(30px,4vw,56px)' }}>
          <span className="kicker" style={{ color: '#1f5b40' }}><L mn="Бодит үр дүн" en="Real results" /></span>
          <h2 className="big" style={{ marginTop: 16 }}><L mn={<>Тоо нь <span className="hl-sage hl">өөрөө ярьдаг.</span></>} en={<>The numbers <span className="hl-sage hl">do the talking.</span></>} /></h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 'clamp(20px,3vw,40px)' }}>
          {[
            { n: '12,000+', mn: 'мартагдалгүй сануулга', en: 'reminders kept', off: 0 },
            { n: '92%', mn: 'хэрэглэгч 1 сар хадгалдаг', en: 'stay after 30 days', off: 28 },
            { n: '2,400+', mn: 'Монгол гэр бүл', en: 'Mongolian families', off: 0 },
            { n: '4.8★', mn: 'Messenger үнэлгээ', en: 'Messenger rating', off: 28 },
          ].map((s, i) => (
            <div key={i} className={`reveal d${(i%4)+1}`} style={{ marginTop: s.off }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(44px,5.5vw,76px)', letterSpacing: '-0.04em', lineHeight: 0.9, color: 'var(--ink)' }}>{s.n}</div>
              <div style={{ marginTop: 10, fontSize: 14, color: '#1f5b40', fontWeight: 500 }}><L mn={s.mn} en={s.en} /></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Founder — warm, real photo ────────────────────────────────────
function V2Founder() {
  return (
    <section id="story" style={{ padding: 'clamp(60px,9vw,140px) clamp(20px,5vw,72px)', background: 'var(--cream)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }}>
        <div className="reveal" style={{ position: 'relative' }}>
          <PhotoSlot mn="real photo — founder + family, warm light" en="real photo — founder + family, warm light" h={440} radius={28} />
          <div className="bob" style={{ position: 'absolute', bottom: -18, right: -10, background: 'var(--sun)', borderRadius: 18, padding: '12px 16px', boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', gap: 8, transform: 'rotate(-3deg)' }}>
            <AndaaPeek size={32} />
            <span style={{ fontWeight: 600, fontSize: 13 }}><L mn="Анд, founder" en="And, founder" /></span>
          </div>
        </div>
        <div className="reveal d2">
          <span className="kicker" style={{ color: 'var(--coral)' }}><L mn="Бидний түүх" en="Our story" /></span>
          <blockquote style={{ margin: '18px 0 0', fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(24px,3vw,36px)', lineHeight: 1.2, letterSpacing: '-0.02em' }}>
            <L
              mn={<>“Хүүхдийнхээ витаминыг би <span className="underliney">өөрөө мартдаг.</span> Тэгээд ойлгосон — ээжүүд бараг бүгд тэгдэг. Andaa тийм нэг найз хэрэгтэй гэж бүтсэн.”</>}
              en={<>“I forget my own kid's vitamin. Then I realized — <span className="underliney">every mom does.</span> Andaa was built to be the friend who doesn't.”</>}
            />
          </blockquote>
          <p className="lede" style={{ marginTop: 24 }}>
            <L mn="Монгол хэлээр, Монгол гэр бүлд зориулж бүтээсэн. Шинэ найз нэмэх, шинэ апп татах шаардлагагүй — Andaa зүгээр л Messenger-д байдаг." en="Built and thought through in Mongolian. No new friend to add, no new app — Andaa just lives in your Messenger." />
          </p>
        </div>
      </div>
    </section>
  );
}

// ─── Pricing — playful cards ───────────────────────────────────────
function V2Pricing() {
  const tiers = [
    { name: { mn: 'Анхан', en: 'Free' }, price: '0₮', sub: { mn: 'үргэлж', en: 'always' }, ic: 'smile', rot: -1.5,
      bullets: [{ mn: '20 зурвас / өдөр', en: '20 messages / day' }, { mn: 'Үндсэн сануулга, жагсаалт', en: 'Core reminders + lists' }, { mn: 'Монгол / Англи хэл', en: 'Mongolian / English' }] },
    { name: { mn: 'Pro', en: 'Pro' }, price: '22,000₮', sub: { mn: '/ сар', en: '/ mo' }, featured: true, ic: 'sparkles', rot: 0,
      bullets: [{ mn: '80 зурвас / өдөр', en: '80 messages / day' }, { mn: 'Зураг, дуу, вэб хайлт', en: 'Images, voice, search' }, { mn: 'Агуулгыг мэдрэх өнгө аяс', en: 'Mood-aware tone' }, { mn: 'Хязгааргүй санах ой', en: 'Unlimited memory' }] },
    { name: { mn: 'Гэр бүл VIP', en: 'Family VIP' }, price: '100,000₮', sub: { mn: '/ сар · 5 хүртэл', en: '/ mo · up to 5' }, ic: 'family', rot: 1.5,
      bullets: [{ mn: 'Бүх гишүүн Pro эрхтэй', en: 'Pro for everyone' }, { mn: 'Гэр бүлийн хуанли нэг дор', en: 'Shared family calendar' }, { mn: 'Хүүхдэд аюулгүй горим', en: 'Kid-safe mode' }, { mn: 'Хувийн тохиргоо, тэргүүлэх дэмжлэг', en: 'White-glove setup + priority support' }] },
  ];
  return (
    <section id="price" style={{ padding: 'clamp(60px,9vw,140px) clamp(20px,5vw,72px)', background: 'var(--mist-soft)', position: 'relative' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div className="reveal" style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto clamp(40px,5vw,64px)' }}>
          <span className="kicker" style={{ color: 'var(--purple)' }}><L mn="Тариф" en="Pricing" /></span>
          <h2 className="big" style={{ marginTop: 16 }}><L mn={<>Танд тохирох <span className="hl">багц.</span></>} en={<>A plan that <span className="hl">fits.</span></>} /></h2>
          <p className="lede" style={{ marginTop: 16 }}><L mn="Бүгд 14 хоног үнэгүй. Карт шаардахгүй." en="All plans start 14 days free. No card." /></p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24, alignItems: 'stretch' }}>
          {tiers.map((t, i) => (
            <div key={i} className={`reveal d${i+1}`} style={{ transform: `rotate(${t.rot}deg)` }}>
              <div style={{
                height: '100%',
                background: t.featured ? 'var(--purple)' : '#fff',
                color: t.featured ? '#fff' : 'var(--ink)',
                border: t.featured ? 'none' : '1px solid var(--mist)',
                borderRadius: 26, padding: 30, position: 'relative',
                boxShadow: t.featured ? '0 24px 50px rgba(91,79,217,0.3)' : 'var(--shadow-sm)',
                transform: t.featured ? 'scale(1.04)' : 'none',
              }}>
                {t.featured && (
                  <span style={{ position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%) rotate(-2deg)', background: 'var(--sun)', color: 'var(--ink)', padding: '6px 14px', borderRadius: 999, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 12, display: 'flex', gap: 6, alignItems: 'center', whiteSpace: 'nowrap' }}>
                    <Icon name="heart" size={12} strokeWidth={2.4} /><L mn="Хамгийн их хайрладаг" en="Most loved" />
                  </span>
                )}
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ width: 38, height: 38, borderRadius: 11, background: t.featured ? 'rgba(255,255,255,0.18)' : 'var(--purple-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name={t.ic} size={20} color={t.featured ? '#fff' : 'var(--purple)'} />
                  </span>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, margin: 0, color: 'inherit' }}><L mn={t.name.mn} en={t.name.en} /></h3>
                </div>
                <div style={{ marginTop: 20, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 42, letterSpacing: '-0.03em', color: t.featured ? 'var(--sun)' : 'var(--purple)' }}>{t.price}</span>
                  <span style={{ fontSize: 13, color: t.featured ? 'rgba(255,255,255,0.7)' : 'var(--slate)' }}><L mn={t.sub.mn} en={t.sub.en} /></span>
                </div>
                <div style={{ margin: '22px 0', height: 1, background: t.featured ? 'rgba(255,255,255,0.16)' : 'var(--mist)' }} />
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 26 }}>
                  {t.bullets.map((b, j) => (
                    <div key={j} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                      <Icon name="check" size={17} color={t.featured ? 'var(--sun)' : 'var(--sage)'} strokeWidth={2.6} style={{ flexShrink: 0, marginTop: 2 }} />
                      <span style={{ fontSize: 14, color: t.featured ? '#fff' : 'var(--ink)' }}><L mn={b.mn} en={b.en} /></span>
                    </div>
                  ))}
                </div>
                <button className={t.featured ? 'btn btn-cream' : 'btn btn-ghost'} style={{ width: '100%', justifyContent: 'center' }}>
                  <L mn="Эхлүүлэх" en="Get started" /><Icon name="arrow" size={16} />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Final CTA — character waving goodbye ──────────────────────────
function V2CTA() {
  return (
    <section style={{ padding: 'clamp(40px,6vw,80px) clamp(20px,5vw,72px)' }}>
      <div className="reveal" style={{ maxWidth: 1180, margin: '0 auto', background: 'var(--ink)', color: 'var(--cream)', borderRadius: 36, padding: 'clamp(48px,7vw,96px) clamp(28px,5vw,72px)', position: 'relative', overflow: 'hidden' }}>
        <div className="dotbg-light" style={{ position: 'absolute', inset: 0, opacity: 0.4 }} />
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 32, alignItems: 'center' }}>
          <div>
            <h2 className="big" style={{ color: '#fff' }}>
              <L mn={<>Маргаашийн юмаа<br/>Andaa-д <span style={{ color: 'var(--sun)' }}>өнөөдөр</span> өг.</>} en={<>Hand tomorrow<br/>to Andaa <span style={{ color: 'var(--sun)' }}>today.</span></>} />
            </h2>
            <p className="lede" style={{ color: 'rgba(250,247,240,0.78)', marginTop: 20 }}>
              <L mn="14 хоног үнэгүй. Картын мэдээлэл шаардахгүй. Messenger дотроос л эхэлнэ." en="14 days free. No card. Starts right inside Messenger." />
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap' }}>
              <button className="btn btn-cream"><Icon name="msgs" size={18} /><L mn="Messenger-д нээх" en="Open in Messenger" /></button>
              <button className="btn btn-ghost" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }}><L mn="Тарифыг харах" en="See pricing" /></button>
            </div>
          </div>
          <div className="breathe" style={{ justifySelf: 'center' }}>
            <BigAndaa size={260} expression="wave" holding="heart" />
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ────────────────────────────────────────────────────────
function V2Footer() {
  const cols = [
    { t: { mn: 'Бүтээгдэхүүн', en: 'Product' }, links: [{mn:'Andaa',en:'Andaa',href:'/'},{mn:'Түгээмэл асуулт',en:'FAQ',href:'faq.html'},{mn:'AI харьцуулалт',en:'AI comparison',href:'mongol-ai.html'}] },
    { t: { mn: 'Компани', en: 'Company' }, links: [{mn:'Agent AI LLC',en:'Agent AI LLC',href:'https://agentai.mn',ext:true},{mn:'Andaa тухай',en:'About Andaa',href:'about.html'},{mn:'Холбогдох',en:'Contact',href:'contact.html'}] },
    { t: { mn: 'Тусламж', en: 'Support' }, links: [{mn:'Тусламжийн төв',en:'Help center',href:'faq.html'},{mn:'Нууцлал',en:'Privacy',href:'privacy.html'},{mn:'Үйлчилгээний нөхцөл',en:'Terms',href:'terms.html'}] },
  ];
  return (
    <footer style={{ background: 'var(--cream)', padding: 'clamp(48px,6vw,80px) clamp(20px,5vw,72px) 40px', borderTop: '1px solid var(--mist)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 40 }}>
        <div style={{ gridColumn: '1 / -1', maxWidth: 340 }}>
          <Logo size={34} />
          <p style={{ marginTop: 14, color: 'var(--slate)', fontSize: 14 }}><L mn="Монгол AI анд. Гэр бүлийн ачааг буулгана." en="Your Mongolian AI friend. Family load, lifted." /></p>
        </div>
        {cols.map((c, i) => (
          <div key={i}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, marginBottom: 14 }}><L mn={c.t.mn} en={c.t.en} /></div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.links.map((l, j) => <a key={j} href={l.href || '#'} {...(l.ext ? { target: '_blank', rel: 'noopener' } : {})} style={{ fontSize: 14, color: 'var(--slate)', textDecoration: 'none' }}><L mn={l.mn} en={l.en} /></a>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1180, margin: '48px auto 0', paddingTop: 24, borderTop: '1px solid var(--mist)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--slate)', letterSpacing: '0.06em' }}>
        <span>© 2026 <a href="https://agentai.mn" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'underline', textUnderlineOffset: '2px', textDecorationColor: 'var(--mist)' }}>Agent AI LLC</a> · Ulaanbaatar</span>
        <span><L mn="Монголд хөгжүүлсэн" en="Developed in Mongolia" /></span>
      </div>
    </footer>
  );
}

Object.assign(window, { V2Conversation, V2Modules, V2Agentic, V2Proof, V2Founder, V2Pricing, V2CTA, V2Footer });