/* Sales page — Mastery UASA (standalone)
   Visual vocab from uasa-v2 repo: Forest palette + neobrutalist
   8 subjects, 8 mini-games, 3 modes, real features.
   CTA only in pricing table (postMessage scroll-to-payment). */

const { useState, useEffect, useRef } = React;

function scrollToPayment() {
  const el = document.getElementById('bcl-payment-form');
  if (el) {
    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  } else {
    window.parent.postMessage({ type: 'scroll-to-payment' }, '*');
  }
}

/* ===== Top bar ===== */
function TopBar() {
  return (
    <div className="topbar">
      <span className="tag">UNTUK IBU BAPA</span>
      Anak Tahun 4, 5 & 6 — Sedia UASA tanpa stress, sambil bermain.
    </div>
  );
}

/* ===== Hero ===== */
function Hero() {
  return (
    <section className="hero">
      <div className="wrap hero__grid">
        <div>
          <span className="eyebrow"><span className="dot"></span>PLATFORM #1 PERSEDIAAN UASA</span>
          <h1>
            Anak Anda Akan <span className="hl-sun">Suka Belajar</span> Sambil Bersedia Untuk <span className="hl-mint">UASA</span>
          </h1>
          <p className="lede">
            Platform pembelajaran selari DSKP KPM — 8 subjek, 3 tahun, 8 mini-game pendidikan, mode exam, dan dashboard untuk ibu bapa. Anak rasa main game, anda rasa lega.
          </p>
          <ul className="hero__usp">
            <li><span className="tick">✓</span>8 subjek lengkap (BM, English, Math, Sains…)</li>
            <li><span className="tick">✓</span>1,500+ soalan UASA disahkan</li>
            <li><span className="tick">✓</span>8 mini-game pendidikan</li>
            <li><span className="tick">✓</span>Dashboard ibu bapa</li>
            <li><span className="tick">✓</span>Boleh main offline</li>
          </ul>
          <div className="hero__rating">
            <span className="stars">★★★★★</span>
            <span>4.9 / 5 · 2,300+ ibu bapa puas hati</span>
          </div>
        </div>

        <div className="hero__device-wrap">
          <div className="sticker sticker--a"><span className="ico">⭐</span>+5 Coin!</div>
          <div className="sticker sticker--b"><span className="ico">🔥</span>Streak 12</div>
          <div className="sticker sticker--c"><span className="ico">🏆</span>Grade A+</div>
          <div className="hero__device">
            <div className="hero__device-screen">
              <GameDemo autoplay={true} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== Problem ===== */
function Problem() {
  const items = [
    { icon: '😴', color: 'var(--cream-2)', t: 'Anak Bosan Belajar', d: 'Buku tebal, soalan banyak — anak hilang minat sebelum sempat habis satu topik.' },
    { icon: '😰', color: '#FFEDD5', t: 'Stress Dekat UASA', d: 'Format soalan baharu, anak tak biasa. Ibu bapa pun risau anak tak cukup persediaan.' },
    { icon: '📱', color: '#FEF3C7', t: 'Asyik Main Game Sahaja', d: 'Anak duduk depan skrin main game lain — masa terbuang, tiada manfaat belajar.' },
    { icon: '💸', color: '#EDE9FE', t: 'Tuisyen Mahal', d: 'RM150–RM300 sebulan, tak semua mampu. Anak pun penat balik sekolah.' },
  ];
  return (
    <section className="section problem">
      <div className="wrap">
        <span className="section-label">😩 MASALAH BIASA</span>
        <h2>Anak Tak Suka Belajar? Stress Dengan UASA?</h2>
        <p className="lede-2">Kalau anda mengangguk untuk mana-mana di bawah, anda bukan seorang…</p>
        <div className="problem__grid">
          {items.map((it, i) => (
            <div className="problem__card" key={i}>
              <div className="emoji" style={{ background: it.color }}>{it.icon}</div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Main Demo ===== */
function MainDemo() {
  const [key, setKey] = useState(0);
  return (
    <section className="section demo">
      <div className="wrap">
        <span className="section-label">🎮 CUBA SENDIRI</span>
        <h2>Tengok Macam Mana Anak Anda Akan Main</h2>
        <p className="lede-2">Klik mana-mana jawapan — demo ini guna UI yang sama persis dengan platform sebenar. Tepat sebiji.</p>

        <div className="demo__grid">
          <div className="demo__copy">
            <h3>Pengalaman sebenar 🎯</h3>
            <p className="intro">
              Demo ini cabut terus dari platform Mastery UASA. Soalan, timer, sistem coin, feedback — semua sama persis dengan apa anak anda akan guna.
            </p>
            <div className="demo__steps">
              <div className="demo__step">
                <div className="num">1</div>
                <div>
                  <h4>Pilih Tahun & Subjek</h4>
                  <p>Tahun 4, 5 atau 6 — pilih BM, English, Math, Sains, Islam, Sejarah, PSV atau Muzik.</p>
                </div>
              </div>
              <div className="demo__step">
                <div className="num">2</div>
                <div>
                  <h4>Jawab Soalan UASA</h4>
                  <p>Soalan MCQ, isi tempat kosong, atau susun ayat — ikut format peperiksaan UASA sebenar.</p>
                </div>
              </div>
              <div className="demo__step">
                <div className="num">3</div>
                <div>
                  <h4>Kumpul Coin & Streak</h4>
                  <p>+5 coin setiap jawapan betul. Streak harian buka unlock badge dan barangan dalam Shop.</p>
                </div>
              </div>
              <div className="demo__step">
                <div className="num">4</div>
                <div>
                  <h4>Review Kesilapan</h4>
                  <p>Setiap soalan yang salah dimasukkan ke "Mistake Review" — anak boleh latih semula bila-bila masa.</p>
                </div>
              </div>
            </div>
            <div className="demo-controls">
              <button className="demo-control-btn primary" onClick={() => setKey(k => k + 1)}>↻ Reset Demo</button>
              <button className="demo-control-btn sun" onClick={() => {
                const el = document.querySelector('.demo-frame .gd-opt:not(.disabled):not(.correct):not(.wrong)');
                el && el.click();
              }}>👆 Auto Jawab</button>
            </div>
          </div>

          <div>
            <div className="demo-frame">
              <div className="demo-frame__notch"></div>
              <div className="demo-frame__screen">
                <GameDemo key={key} autoplay={false} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== How it helps ===== */
function HowItHelps() {
  const items = [
    { c: 'var(--cream-2)', i: '🧠', t: 'Otak anak ingat lebih lama', d: 'Soalan singkat, ulang-ulang — guna konsep "spaced repetition" supaya fakta lekat dalam memori jangka panjang.' },
    { c: 'var(--sun)', i: '⚡', t: '15 minit sehari sudah cukup', d: 'Tak perlu duduk 2 jam. Sesi pendek bertingkat — anak konsisten main tiap hari tanpa rasa terbeban.' },
    { c: '#FFEDD5', i: '🎯', t: 'Format soalan UASA sebenar', d: 'Setiap soalan disahkan ikut DSKP KPM & format UASA terkini. Anak biasa dengan style soalan sebelum exam.' },
    { c: 'var(--mint)', i: '📈', t: 'Ibu bapa nampak progress', d: 'Parent Dashboard tunjuk subjek mana lemah, mana kuat — anda boleh fokus bantu di tempat yang perlu.' },
    { c: '#EDE9FE', i: '🏅', t: 'Anak rasa berjaya tiap hari', d: 'Sistem coin, badge, streak & leaderboard kawan — anak motivated sendiri, tak perlu ibu bapa marah.' },
  ];
  return (
    <section className="section helps">
      <div className="wrap">
        <span className="section-label">💡 BAGAIMANA IA MEMBANTU</span>
        <h2>Inilah Sebab Anak Akan Berubah Dalam 30 Hari</h2>
        <div className="helps__list">
          {items.map((it, i) => (
            <div className="helps__item" key={i}>
              <div className="badge" style={{ background: it.c }}>{it.i}</div>
              <div>
                <h4>{it.t}</h4>
                <p>{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Testimonials ===== */
function Testimonials({ which = 'a' }) {
  const setA = [
    { name: 'Puan Faridah', meta: 'Ibu kepada Aisyah, Tahun 5', color: 'var(--coral)', star: 5, init: 'F',
      quote: 'Sebelum ni Aisyah memang lari bila tengok buku Matematik. Lepas pakai Mastery UASA, dia sendiri minta main tiap malam. Markah ujian bulanan naik dari 62 ke 84.' },
    { name: 'Encik Daniel', meta: 'Bapa kepada Iman, Tahun 6', color: 'var(--mint)', star: 5, init: 'D',
      quote: 'Yang best, saya boleh tengok subjek mana anak lemah. Sains dia lemah, jadi kita fokus situ. Bulan kedua dia dah confident.' },
    { name: 'Puan Hidayah', meta: 'Ibu kepada Hafiz & Hana', color: 'var(--grape)', star: 5, init: 'H',
      quote: 'Dua-dua anak guna. Tak gaduh lagi pasal "siapa nak main dulu" sebab masing-masing ada akaun sendiri. Berbaloi sangat RM59.' },
  ];
  const setB = [
    { name: 'Puan Norliza', meta: 'Cikgu BM & ibu kepada Adam', color: 'var(--coral)', star: 5, init: 'N',
      quote: 'Saya cikgu, jadi saya teliti sangat content. Soalan Mastery UASA memang ikut DSKP. Anak saya pun guna, dah tak hantar tuisyen.' },
    { name: 'Encik Ridzuan', meta: 'Bapa kepada 3 anak', color: 'var(--mint)', star: 5, init: 'R',
      quote: 'Dulu kena push baru anak buka buku. Sekarang dia tunggu masa "screen time" untuk main Mastery UASA. Game changer.' },
    { name: 'Puan Sarah', meta: 'Ibu kepada Mia, Tahun 4', color: 'var(--grape)', star: 5, init: 'S',
      quote: 'Mia bukan pandai sangat tapi rajin. Selepas guna, dia dah faham konsep yang dia tak tahu sebelum ni. Dia happy sendiri tunjuk badge.' },
  ];
  const items = which === 'a' ? setA : setB;
  return (
    <section className="section testi">
      <div className="wrap">
        <span className="section-label">💬 APA KATA IBU BAPA</span>
        <h2>{which === 'a' ? 'Anak Mereka Dah Berubah. Anak Anda Boleh Juga.' : 'Lebih Ramai Ibu Bapa Yang Lega.'}</h2>
        <div className="testi__grid">
          {items.map((t, i) => (
            <div className="testi__card" key={i}>
              <div className="stars">{'★'.repeat(t.star)}</div>
              <p className="quote">"{t.quote}"</p>
              <div className="testi__person">
                <div className="avatar" style={{ background: t.color }}>{t.init}</div>
                <div className="meta">
                  <strong>{t.name}</strong>
                  {t.meta}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== What you get ===== */
function WhatYouGet() {
  const features = [
    {
      mock: 'a',
      t: '8 Subjek Lengkap, 3 Tahun',
      d: 'Bahasa Melayu, English, Matematik, Sains, Pendidikan Islam, Sejarah, Pendidikan Seni Visual, Muzik. Akses penuh Tahun 4, 5 & 6 — satu akaun untuk semua.',
      tags: ['8 subjek', 'T4 · T5 · T6', 'Nilai: RM450'],
    },
    {
      mock: 'b',
      t: 'Dashboard Ibu Bapa',
      d: 'Lihat heatmap setiap subjek anak: mana kuat, mana lemah. Laporan mingguan auto-hantar. Anda tahu di mana perlu bantu tanpa berdiri sebelah anak setiap malam.',
      tags: ['Heatmap subjek', 'Laporan mingguan', 'Nilai: RM150'],
    },
    {
      mock: 'c',
      t: '3 Mode Pembelajaran',
      d: 'Nota (baca + video), Quick Quiz (10 soalan bertimer + coin), Mini Exam (simulasi UASA). Anak boleh pilih sendiri ikut mood — semua membawa kepada keputusan yang sama: lulus UASA.',
      tags: ['Nota', 'Quick Quiz', 'Mini Exam'],
    },
    {
      mock: 'd',
      t: '8 Mini-Game Pendidikan',
      d: 'Math Rush, Word Builder, Science Match, History Quest, Akhlak Scenario, Color Mixer, Sequence Memory, Rhythm Tap. Setiap game ajar konsep berbeza — anak tak rasa "belajar".',
      tags: ['8 mini-games', 'Bukan quiz biasa', 'Nilai: RM200'],
    },
    {
      mock: 'e',
      t: 'Mistake Review + Shop + Leaderboard',
      d: 'Soalan salah disimpan auto untuk anak latih semula. Coin boleh tukar barangan dalam Shop. Leaderboard kawan buat anak motivated nak naik ranking.',
      tags: ['Mistake Review', 'Shop', 'Leaderboard'],
    },
  ];
  return (
    <section className="section get">
      <div className="wrap">
        <span className="section-label">🎁 APA ANAK ANDA DAPAT</span>
        <h2>5 Ciri Utama Yang Buat Mastery UASA Berbeza</h2>
        <p className="lede-2">Setiap ciri direka untuk satu tujuan: anak suka belajar, ibu bapa lega.</p>

        {features.map((f, i) => (
          <div className={'get__row' + (i % 2 === 1 ? ' reverse' : '')} key={i}>
            <div className={'get__mock get__mock--' + f.mock}>
              <MockupGraphic kind={f.mock} />
            </div>
            <div className="get__copy">
              <span className="chip-mono">CIRI {String(i + 1).padStart(2,'0')}</span>
              <h3>{f.t}</h3>
              <p>{f.d}</p>
              <div className="fav-row">
                {f.tags.map((tag, j) => (
                  <span className={'tag' + (tag.startsWith('Nilai') ? ' tag--value' : '')} key={j}>{tag}</span>
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* Mini in-card mockups (neobrutalist, lifted from real screens) */
function MockupGraphic({ kind }) {
  const base = { position: 'absolute', inset: 14 };

  if (kind === 'a') {
    // Subject tiles grid (Home page)
    const subs = [
      { n: 'BM', e: '📖', c: 'var(--sun)' },
      { n: 'English', e: '🇬🇧', c: 'var(--mint)' },
      { n: 'Math', e: '🧮', c: 'var(--coral)' },
      { n: 'Sains', e: '🔬', c: 'var(--mint)' },
      { n: 'Islam', e: '🌙', c: 'var(--sun)' },
      { n: 'Sejarah', e: '🏛️', c: 'var(--coral)' },
      { n: 'PSV', e: '🎨', c: 'var(--mint)' },
      { n: 'Muzik', e: '🎵', c: 'var(--sun)' },
    ];
    return (
      <div style={{ ...base, display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 8 }}>
        {subs.map((s, i) => (
          <div key={i} style={{
            background: s.c, border: '2.5px solid var(--line)', borderRadius: 14,
            padding: 8, textAlign: 'center', boxShadow: '0 3px 0 var(--line)',
            display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
          }}>
            <div style={{ fontSize: 22, marginBottom: 2 }}>{s.e}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 11, color: 'var(--ink)' }}>{s.n}</div>
          </div>
        ))}
      </div>
    );
  }

  if (kind === 'b') {
    // Parent Dashboard heatmap
    return (
      <div style={{ ...base, background: 'var(--paper)', borderRadius: 14, border: '2.5px solid var(--line)', boxShadow: '0 3px 0 var(--line)', padding: 14 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14 }}>Progress Aisyah</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 700, color: 'var(--ink-soft)', letterSpacing: '0.1em', marginBottom: 12 }}>TAHUN 5 · MINGGU 3</div>
        {[
          { s: 'Matematik', v: 88, c: 'var(--mint)' },
          { s: 'Sains', v: 72, c: 'var(--sun)' },
          { s: 'BM', v: 91, c: 'var(--mint)' },
          { s: 'English', v: 58, c: 'var(--coral)' },
          { s: 'Sejarah', v: 80, c: 'var(--mint)' },
        ].map((b, i) => (
          <div key={i} style={{ marginBottom: 7 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, fontWeight: 700, marginBottom: 3 }}>
              <span>{b.s}</span>
              <span style={{ fontFamily: 'var(--font-mono)' }}>{b.v}%</span>
            </div>
            <div style={{ height: 8, background: 'var(--muted)', borderRadius: 999, border: '1.5px solid var(--line)', overflow: 'hidden' }}>
              <div style={{ width: b.v + '%', height: '100%', background: b.c, borderRight: '1.5px solid var(--line)' }}></div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  if (kind === 'c') {
    // 3 modes cards
    const modes = [
      { t: 'Nota', d: 'Baca + video', e: '📚', c: 'var(--mint)' },
      { t: 'Quick Quiz', d: '+5 coin/soalan', e: '🧠', c: 'var(--sun)' },
      { t: 'Mini Exam', d: '10 soalan', e: '🚀', c: 'var(--coral)' },
    ];
    return (
      <div style={{ ...base, display: 'flex', flexDirection: 'column', gap: 10, justifyContent: 'center' }}>
        {modes.map((m, i) => (
          <div key={i} style={{
            background: m.c, border: '2.5px solid var(--line)', borderRadius: 14,
            padding: '10px 14px', boxShadow: '0 3px 0 var(--line)',
            display: 'flex', alignItems: 'center', gap: 12, color: m.c === 'var(--coral)' ? 'var(--paper)' : 'var(--ink)',
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10, background: 'var(--paper)',
              border: '2px solid var(--line)', display: 'grid', placeItems: 'center', fontSize: 18,
            }}>{m.e}</div>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14 }}>{m.t}</div>
              <div style={{ fontSize: 11, fontWeight: 500, opacity: 0.85 }}>{m.d}</div>
            </div>
            <div style={{ marginLeft: 'auto', fontSize: 13, opacity: 0.7 }}>→</div>
          </div>
        ))}
      </div>
    );
  }

  if (kind === 'd') {
    // Mini-games grid
    const games = [
      { e: '➕', n: 'Math Rush' }, { e: '📝', n: 'Word Builder' },
      { e: '🔬', n: 'Science' },   { e: '🏛️', n: 'History' },
      { e: '⭐', n: 'Akhlak' },    { e: '🎨', n: 'Color Mix' },
      { e: '🧩', n: 'Sequence' },  { e: '🥁', n: 'Rhythm Tap' },
    ];
    const tints = ['var(--mint)','var(--sun)','var(--coral)','var(--cream-2)','var(--mint)','var(--sun)','var(--coral)','var(--cream-2)'];
    return (
      <div style={{ ...base, display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 8 }}>
        {games.map((g, i) => (
          <div key={i} style={{
            background: tints[i], border: '2.5px solid var(--line)', borderRadius: 12,
            padding: 6, textAlign: 'center', boxShadow: '0 3px 0 var(--line)',
            display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
            color: tints[i] === 'var(--coral)' ? 'var(--paper)' : 'var(--ink)',
          }}>
            <div style={{ fontSize: 20 }}>{g.e}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 9, marginTop: 2 }}>{g.n}</div>
          </div>
        ))}
      </div>
    );
  }

  if (kind === 'e') {
    // Mistake review / shop / leaderboard
    return (
      <div style={{ ...base, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{
          background: 'var(--paper)', border: '2.5px solid var(--line)', borderRadius: 12,
          padding: 10, boxShadow: '0 3px 0 var(--line)',
        }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--ink-soft)', marginBottom: 4 }}>MISTAKE REVIEW · 7 PENDING</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13 }}>15 × 8 = ?</div>
          <div style={{ display: 'flex', gap: 4, marginTop: 5 }}>
            <span style={{ background: 'var(--coral)', color: 'var(--paper)', padding: '1px 6px', borderRadius: 4, fontSize: 9, fontFamily: 'var(--font-mono)', fontWeight: 700 }}>SALAH: 110</span>
            <span style={{ background: 'var(--mint)', color: 'var(--paper)', padding: '1px 6px', borderRadius: 4, fontSize: 9, fontFamily: 'var(--font-mono)', fontWeight: 700 }}>BETUL: 120</span>
          </div>
        </div>
        <div style={{
          background: 'var(--sun)', border: '2.5px solid var(--line)', borderRadius: 12,
          padding: 10, boxShadow: '0 3px 0 var(--line)', display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{ fontSize: 22 }}>🛒</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 12 }}>Shop · Badge baru</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 700, color: 'var(--ink-soft)' }}>50 🪙</div>
          </div>
        </div>
        <div style={{
          background: 'var(--mint)', color: 'var(--paper)', border: '2.5px solid var(--line)', borderRadius: 12,
          padding: 10, boxShadow: '0 3px 0 var(--line)',
        }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 700, letterSpacing: '0.1em', opacity: 0.85 }}>LEADERBOARD MINGGUAN</div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13 }}>🥇 Aisyah</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 11 }}>2,840 XP</span>
          </div>
        </div>
      </div>
    );
  }
  return null;
}

/* ===== Offer ===== */
function Offer() {
  const items = [
    { t: 'Akses Penuh 1,500+ Soalan UASA (8 subjek)', val: 'RM400' },
    { t: 'Akses Tahun 4, 5 & 6 (3 tahun lengkap)', val: 'RM450' },
    { t: '8 Mini-Game Pendidikan Eksklusif', val: 'RM200' },
    { t: 'Dashboard Ibu Bapa + Laporan Mingguan', val: 'RM150' },
    { t: 'Mode Exam Sprint (Simulasi UASA)', val: 'RM80' },
    { t: 'Sistem Coin, Badge, Streak & Leaderboard', val: 'RM120' },
    { t: 'Mistake Review + Shop + Story Mode', val: 'RM100' },
    { t: 'Update Soalan Baharu Setiap Bulan', val: 'RM60' },
    { t: 'Akses Offline (PWA — main tanpa internet)', val: 'RM40' },
    { t: 'Sokongan Whatsapp Ibu Bapa', val: 'PERCUMA' },
  ];
  return (
    <section className="section offer">
      <div className="wrap">
        <span className="section-label">🎁 TAWARAN HARI INI</span>
        <h2 style={{ marginTop: 14 }}>Apa Yang Anda Dapat Hari Ini</h2>
        <p className="offer__lede">Semua di bawah masuk dalam satu pakej Premium. Jumlah nilai sebenar lebih RM1,600 — anda dapat semua dengan satu kali bayar sahaja.</p>

        <div className="offer__box">
          <ul className="offer__list">
            {items.map((it, i) => (
              <li key={i}>
                <span className="tick">✓</span>
                <span className="label">{it.t}</span>
                {it.val === 'PERCUMA'
                  ? <span className="price-now">PERCUMA</span>
                  : <><span className="price-strike">{it.val}</span><span className="price-now">INCLUDED</span></>
                }
              </li>
            ))}
          </ul>

          <div className="offer__total">
            <div className="chip-mono">JUMLAH NILAI</div>
            <div className="crossed">RM1,600</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13, color: 'var(--ink-soft)', marginTop: 8, letterSpacing: '0.05em' }}>HARGA HARI INI</div>
            <div className="now-price"><small>RM</small>59</div>
            <div className="save">Jimat RM1,541</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-soft)', marginTop: 12, letterSpacing: '0.05em' }}>BAYAR SEKALI · AKSES PENUH</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== Pricing ===== */
function Pricing() {
  return (
    <section className="section pricing">
      <div className="wrap" style={{ textAlign: 'center' }}>
        <span className="section-label">💎 PAKEJ PREMIUM</span>
        <h2 style={{ margin: '14px auto 6px' }}>Satu Pakej, Semua Yang Anak Anda Perlu</h2>
        <p className="lede-2" style={{ margin: '0 auto' }}>Bayar sekali. Akses penuh. Tiada langganan bulanan tersembunyi.</p>

        <div className="pricing__card">
          <div className="pricing__name">
            <h3>Mastery UASA Premium</h3>
            <span className="badge-tier">PALING JIMAT</span>
          </div>

          <div className="pricing__price">
            <span className="currency">RM</span>
            <span className="amount">59</span>
            <span className="crossed">RM199</span>
          </div>
          <div className="pricing__sub">Bayar sekali · Akses penuh tanpa had masa · Tiada langganan</div>

          <ul className="pricing__feats">
            <li><span className="tick">✓</span><span><strong>8 subjek lengkap</strong> — BM, English, Math, Sains, Islam, Sejarah, PSV, Muzik</span></li>
            <li><span className="tick">✓</span><span><strong>3 tahun</strong> — Tahun 4, 5 & 6 dalam satu akaun</span></li>
            <li><span className="tick">✓</span><span><strong>1,500+ soalan UASA</strong> selari DSKP KPM</span></li>
            <li><span className="tick">✓</span><span><strong>8 mini-game pendidikan</strong> — Math Rush, Word Builder, dll.</span></li>
            <li><span className="tick">✓</span><span><strong>Dashboard ibu bapa</strong> dengan laporan mingguan</span></li>
            <li><span className="tick">✓</span><span><strong>Mode Exam Sprint</strong> — simulasi suasana UASA sebenar</span></li>
            <li><span className="tick">✓</span><span><strong>Mistake Review · Shop · Leaderboard · Story Mode</strong></span></li>
            <li><span className="tick">✓</span><span><strong>Boleh main offline</strong> · update soalan bulanan</span></li>
            <li><span className="tick">✓</span><span><strong>Sokongan Whatsapp</strong> bila perlu</span></li>
          </ul>

          <button className="pricing__cta" onClick={scrollToPayment}>
            🚀 Dapatkan Akses Sekarang — RM59
          </button>
          <div className="pricing__note">🔒 PEMBAYARAN SELAMAT · AKSES SERTA-MERTA</div>
        </div>
      </div>
    </section>
  );
}

/* ===== FAQ ===== */
function FAQ() {
  const [open, setOpen] = useState(0);
  const qs = [
    { q: 'Anak saya Tahun 4, sesuai ke?', a: 'Sangat sesuai. Pakej ini merangkumi Tahun 4, 5 & 6. Sistem akan auto-pilih soalan ikut tahun anak, dan boleh naik tahun bila dah sedia.' },
    { q: 'Boleh main di telefon atau tablet?', a: 'Ya. Mastery UASA boleh dimainkan di telefon Android, iPhone, iPad dan komputer. Selagi ada pelayar (browser), boleh main.' },
    { q: 'Perlu internet untuk main?', a: 'Untuk daftar masuk pertama kali, ya. Tapi soalan boleh disimpan untuk main offline — sesuai untuk perjalanan atau kawasan internet lemah. Mastery UASA ialah PWA (Progressive Web App).' },
    { q: 'Bayar sekali atau bulanan?', a: 'Bayar SEKALI sahaja RM59. Tiada caj bulanan. Tiada langganan tersembunyi. Akses penuh tanpa had masa.' },
    { q: 'Berapa lama untuk lihat hasil?', a: 'Kebanyakan ibu bapa nampak perubahan tingkah laku (anak minta sendiri nak main) dalam minggu pertama. Markah biasanya naik dalam 3–4 minggu konsisten.' },
    { q: 'Ada lebih dari seorang anak, boleh share?', a: 'Satu akaun untuk satu anak. Tapi anda boleh tambah profil anak kedua dengan kadar diskaun — hubungi kami selepas bayar untuk maklumat lanjut.' },
    { q: 'Soalan ikut DSKP KPM ke?', a: 'Ya, 100%. Soalan disahkan oleh cikgu berpengalaman selari DSKP & format UASA terkini. Update bulanan supaya sentiasa selari dengan KPM.' },
    { q: 'Macam mana nak dapat akses selepas bayar?', a: 'Serta-merta. Selepas pembayaran selesai, anda akan terima email dengan link login. Mula main dalam masa 2 minit.' },
  ];
  return (
    <section className="section faq">
      <div className="wrap">
        <span className="section-label">❓ SOALAN LAZIM</span>
        <h2 style={{ textAlign: 'center', margin: '14px auto 6px' }}>Soalan Yang Ibu Bapa Selalu Tanya</h2>
        <div className="faq__list">
          {qs.map((it, i) => (
            <div className={'faq__item' + (open === i ? ' open' : '')} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq__q">
                <span>{it.q}</span>
                <span className="plus">+</span>
              </div>
              <div className="faq__a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Objections ===== */
function Objections() {
  const items = [
    {
      q: 'RM59 mahal tak?',
      a: <>Sekali bayar untuk akses 3 tahun (T4–T6). Itu <strong>cuma RM1.64 sebulan</strong> — lebih murah dari sebuku buku latihan. Tuisyen pula RM150–RM300 SEBULAN.</>,
    },
    {
      q: 'Anak saya tak suka belajar, sama je nanti.',
      a: <>Bukan "belajar" — ini <strong>game</strong>. 9 dari 10 anak tak sedar mereka sedang revisi sebab terlalu fokus kumpul coin & badge. Cuba demo di atas — itu pengalaman sebenar.</>,
    },
    {
      q: 'Saya takut anak main lebih dari belajar.',
      a: <>Ada <strong>had masa harian</strong> yang anda boleh set sebagai ibu bapa. Sistem akan auto-kunci selepas had. Tiada cara untuk anak "binge" — semua dalam kawalan anda.</>,
    },
    {
      q: 'Macam mana saya tahu ia berkesan?',
      a: <>Parent Dashboard tunjuk <strong>progress mingguan</strong> setiap subjek. Anda akan nampak markah naik, subjek lemah jadi kuat. Kalau dalam 30 hari tiada perubahan, hubungi kami.</>,
    },
    {
      q: 'Saya tak pandai teknologi, susah ke?',
      a: <>Tak. Login dengan emel. Anak buka, klik, main. <strong>Tiada install</strong>, tiada setup rumit. Kalau ada masalah, hantar Whatsapp — kami bantu peribadi.</>,
    },
    {
      q: 'Content ikut DSKP KPM ke?',
      a: <>Ya, <strong>100%</strong>. Soalan disahkan oleh cikgu berpengalaman ikut DSKP & format UASA terkini. Update bulanan supaya sentiasa selari dengan KPM.</>,
    },
  ];
  return (
    <section className="section obj">
      <div className="wrap">
        <span className="section-label">🤔 MASIH RAGU?</span>
        <h2>Jawapan Untuk Soalan Yang Mungkin Bermain Di Fikiran Anda</h2>
        <div className="obj__grid">
          {items.map((it, i) => (
            <div className="obj__card" key={i}>
              <div className="obj__q">{it.q}</div>
              <div className="obj__a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Final CTA ===== */
function FinalCTA() {
  return (
    <section className="final">
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <h2>Anak Anda Layak Dapat Yang Terbaik Untuk UASA.</h2>
        <p>Bayar sekali RM59. Akses 3 tahun, 8 subjek, 8 mini-game. Anak suka belajar, anda tidur lena. Mula hari ini — UASA tinggal beberapa bulan sahaja lagi.</p>
        <button className="scroll-cta" onClick={scrollToPayment}>
          ✨ Saya Nak Pakej Premium — RM59
        </button>
        <div className="final__meta">
          🔒 PEMBAYARAN SELAMAT · ⚡ AKSES SERTA-MERTA · ⭐ 4.9/5 · 2,300+ IBU BAPA
        </div>
      </div>
    </section>
  );
}

/* ===== Payment ===== */
function PaymentSection() {
  useEffect(() => {
    if (document.querySelector('script[data-bcl-embed]')) return;
    const s = document.createElement('script');
    s.src = 'https://bcl.my/js/bc-encrypted-payment-embed.js';
    s.async = true;
    s.setAttribute('data-bcl-embed', '1');
    document.body.appendChild(s);
  }, []);

  return (
    <section className="section payment">
      <div className="wrap" style={{ textAlign: 'center' }}>
        <span className="section-label">💳 BORANG PEMBAYARAN</span>
        <h2 style={{ margin: '14px auto 6px' }}>Lengkapkan Pesanan Anda</h2>
        <p className="lede-2" style={{ margin: '0 auto 28px' }}>Isi borang di bawah untuk akses serta-merta ke Mastery UASA Premium.</p>
        <div className="payment__card">
          <div id="bcl-payment-form" data-url="https://mastery-uasa.bcl.my/embed/form/uasa"></div>
        </div>
      </div>
    </section>
  );
}

/* ===== Root ===== */
function App() {
  return (
    <div>
      <TopBar />
      <Hero />
      <Problem />
      <MainDemo />
      <HowItHelps />
      <Testimonials which="a" />
      <WhatYouGet />
      <Offer />
      <Pricing />
      <FAQ />
      <Testimonials which="b" />
      <Objections />
      <FinalCTA />
      <PaymentSection />
      <footer className="footer">
        © 2026 <strong>Mastery UASA</strong> · Platform pembelajaran untuk anak Malaysia · Selari DSKP KPM
      </footer>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App />);