// Hello World Academy — Landing Page
const { useState, useEffect, useRef } = React;

const SHEETS_WEBHOOK_URL = "https://script.google.com/macros/s/AKfycbyVphmsOqX7s3jNpH7RLHw-O6_v0SKQPQ2dI5fNG16VKZlnJCB1q4wcAFAf0zeaueBYAw/exec";

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "light",
  "accent": "neon",
  "density": "comfy",
  "showTerminalCursor": true
}/*EDITMODE-END*/;

const ACCENTS = {
  neon:   { c: "#7CDB3F", glow: "rgba(124,219,63,0.55)", ink: "#0d1f06", chip: "#0d1f06" },
  amber:  { c: "#F5A524", glow: "rgba(245,165,36,0.55)", ink: "#2a1a02", chip: "#2a1a02" },
  cyan:   { c: "#22D3EE", glow: "rgba(34,211,238,0.55)", ink: "#04212a", chip: "#04212a" },
  coral:  { c: "#FF6F61", glow: "rgba(255,111,97,0.55)", ink: "#2c0c08", chip: "#2c0c08" },
};

// ────────────────────────────────────────────────────────────────────────────
// Pixel logo — recreated from the photo as inline SVG so it scales crisply
// ────────────────────────────────────────────────────────────────────────────
function PixelLogo({ size = 72, lit = true, twoLine = true }) {
  // 5x7 pixel font dictionary (only letters we need)
  const F = {
    H:["10001","10001","10001","11111","10001","10001","10001"],
    E:["11111","10000","10000","11110","10000","10000","11111"],
    L:["10000","10000","10000","10000","10000","10000","11111"],
    O:["01110","10001","10001","10001","10001","10001","01110"],
    W:["10001","10001","10001","10101","10101","11011","10001"],
    R:["11110","10001","10001","11110","10100","10010","10001"],
    D:["11110","10001","10001","10001","10001","10001","11110"],
    A:["01110","10001","10001","11111","10001","10001","10001"],
    C:["01110","10001","10000","10000","10000","10001","01110"],
    M:["10001","11011","10101","10101","10001","10001","10001"],
    Y:["10001","10001","01010","00100","00100","00100","00100"],
    " ":["00000","00000","00000","00000","00000","00000","00000"],
  };
  const renderWord = (word, xOff, yOff, color) => {
    const cells = [];
    [...word].forEach((ch, i) => {
      const glyph = F[ch] || F[" "];
      glyph.forEach((row, ry) => {
        [...row].forEach((bit, rx) => {
          if (bit === "1") {
            cells.push(
              <rect key={`${ch}${i}-${rx}-${ry}`}
                x={xOff + i*6 + rx} y={yOff + ry}
                width={1} height={1} fill={color}/>
            );
          }
        });
      });
    });
    return cells;
  };
  const a = ACCENTS.neon.c;
  return (
    <svg viewBox="0 0 80 36" width={size} height={size*36/80} style={{display:"block"}}>
      <defs>
        <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="0.6" result="b"/>
          <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
      </defs>
      <g filter={lit ? "url(#glow)" : undefined}>
        {/* HELLO WORLD */}
        {renderWord("HELLO WORLD", 4, 2, a)}
        {twoLine && (
          <>
            {/* green bg pill behind ACADEMY */}
            <rect x={14} y={20} width={52} height={12} fill={a} rx={0.5}/>
            {renderWord("ACADEMY", 17, 22, "#0a1f02")}
          </>
        )}
      </g>
    </svg>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Typing terminal hero
// ────────────────────────────────────────────────────────────────────────────
function TypedTerminal({ accent, showCursor }) {
  const bodyRef = useRef(null);
  const lines = [
    { prompt: "$", text: "cd /sekolah", delay: 400 },
    { prompt: "#", text: "// diagnosing system...", delay: 300, dim: true },
    { prompt: ">", text: "Pendidikan kita sedang tidak baik-baik saja.", delay: 900, big: true },
    { prompt: ">", text: "Kami memperbaikinya — di Kota Batu.", delay: 1000, big: true, accent: true },
    { prompt: "$", text: "ls ./kurikulum/", delay: 350 },
    { prompt: " ", text: "coding/  robotics/  sakamoto/  pondasi-islam/", delay: 500, dim: true },
    { prompt: "$", text: "cat coding/modul-01.txt", delay: 350 },
    { prompt: " ", text: "→ Computational Thinking & Algorithmic Mindset", delay: 200, dim: true },
    { prompt: " ", text: "→ Game Dev di Scratch & Godot Engine", delay: 200, dim: true },
    { prompt: " ", text: "→ Artificial Intelligence & Prompt Engineering", delay: 500, dim: true },
    { prompt: "$", text: "run hello-world.academy --launch", delay: 400 },
    { prompt: "✓", text: "Pendaftaran gelombang pertama dibuka.", delay: 400, ok: true },
    { prompt: "$", text: "echo \"Kursi terbatas. Daftar sekarang.\"", delay: 300 },
    { prompt: " ", text: "Kursi terbatas. Daftar sekarang.", delay: 1200, accent: true },
  ];
  const [step, setStep] = useState(0);
  const [typed, setTyped] = useState("");
  const [loopKey, setLoopKey] = useState(0);
  const idxRef = useRef(0);

  useEffect(() => {
    if (step >= lines.length) {
      // pause at end, then restart loop
      const restart = setTimeout(() => {
        setStep(0);
        setLoopKey(k => k + 1);
      }, 2200);
      return () => clearTimeout(restart);
    }
    const line = lines[step];
    idxRef.current = 0;
    setTyped("");
    let cancelled = false;
    const type = () => {
      if (cancelled) return;
      const i = idxRef.current;
      if (i <= line.text.length) {
        setTyped(line.text.slice(0, i));
        idxRef.current = i + 1;
        const speed = line.big ? 42 : line.dim ? 14 : 22;
        setTimeout(type, speed);
      } else {
        setTimeout(() => setStep(s => s + 1), line.delay || 300);
      }
    };
    const start = setTimeout(type, step === 0 ? 600 : 140);
    return () => { cancelled = true; clearTimeout(start); };
  }, [step, loopKey]);

  // auto-scroll to bottom as lines appear
  useEffect(() => {
    if (bodyRef.current) {
      bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
    }
  }, [step, typed]);

  return (
    <div className="terminal" role="img" aria-label="Hello World Academy terminal">
      <div className="terminal__bar">
        <span className="terminal__dot" style={{background:"#ff5f57"}}/>
        <span className="terminal__dot" style={{background:"#ffbd2e"}}/>
        <span className="terminal__dot" style={{background:"#28c940"}}/>
        <span className="terminal__title">~/hello-world-academy — bash</span>
      </div>
      <div className="terminal__body" ref={bodyRef}>
        {lines.slice(0, step).map((l, i) => (
          <div key={`${loopKey}-${i}`} className={`tline ${l.big ? "tline--big" : ""} ${l.accent ? "tline--accent" : ""} ${l.ok ? "tline--ok" : ""} ${l.dim ? "tline--dim" : ""}`}>
            <span className="tline__prompt">{l.prompt}</span>
            <span className="tline__text">{l.text}</span>
          </div>
        ))}
        {step < lines.length && (
          <div className={`tline ${lines[step].big ? "tline--big" : ""} ${lines[step].accent ? "tline--accent" : ""} ${lines[step].ok ? "tline--ok" : ""} ${lines[step].dim ? "tline--dim" : ""}`}>
            <span className="tline__prompt">{lines[step].prompt}</span>
            <span className="tline__text">{typed}</span>
            {showCursor && <span className="tline__caret"/>}
          </div>
        )}
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Waitlist form
// ────────────────────────────────────────────────────────────────────────────
function WaitlistForm({ id = "form", compact = false }) {
  const [data, setData] = useState({ name: "", age: "", city: "Kota Batu", wa: "" });
  const [status, setStatus] = useState("idle"); // idle | loading | ok | error
  const [touched, setTouched] = useState({});

  const errors = {
    name: data.name.trim().length < 2 ? "Nama orang tua wajib diisi" : null,
    age: !data.age || +data.age < 3 || +data.age > 18 ? "Usia 3–18 tahun" : null,
    wa: !/^(\+?62|0)8\d{7,12}$/.test(data.wa.replace(/\s|-/g,"")) ? "Format: 08xx atau +628xx" : null,
  };
  const valid = !errors.name && !errors.age && !errors.wa;

  const submit = async (e) => {
    e.preventDefault();
    setTouched({ name: true, age: true, wa: true });
    if (!valid) return;
    setStatus("loading");
    try {
      const params = new URLSearchParams({
        name: data.name.trim(),
        age: data.age,
        city: data.city,
        wa: data.wa.replace(/\s|-/g, ""),
      });
      await fetch(SHEETS_WEBHOOK_URL, {
        method: "POST",
        mode: "no-cors",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: params.toString(),
      });
      setStatus("ok");
    } catch {
      setStatus("error");
    }
  };

  if (status === "ok") {
    return (
      <div className={`waitlist waitlist--success ${compact ? "waitlist--compact" : ""}`}>
        <div className="waitlist__check">
          <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="3">
            <path d="M5 12l5 5L20 7" strokeLinecap="square"/>
          </svg>
        </div>
        <div className="waitlist__title mono">// koneksi berhasil</div>
        <h3>Terima kasih, {data.name.split(" ")[0] || "Bapak/Ibu"}.</h3>
        <p>Kami akan menghubungi Anda secara pribadi via WhatsApp saat Hello World Academy resmi dibuka.</p>
        <div className="waitlist__meta mono">
          <span>BATCH: 2026 / GELOMBANG 01</span>
          <span>·</span>
          <span>STATUS: TERDAFTAR</span>
        </div>
      </div>
    );
  }

  return (
    <form id={id} className={`waitlist ${compact ? "waitlist--compact" : ""}`} onSubmit={submit} noValidate>
      <div className="waitlist__head">
        <span className="dot dot--accent"/>
        <span className="mono small">FORM_PENDAFTARAN.tsx</span>
      </div>
      <div className="waitlist__grid">
        <Field label="Nama Orang Tua" hint="Bapak / Ibu"
               error={touched.name && errors.name}
               input={<input type="text" placeholder="cth. Aulia Rahman"
                              value={data.name}
                              onChange={e=>setData(d=>({...d,name:e.target.value}))}
                              onBlur={()=>setTouched(t=>({...t,name:true}))}/>}/>
        <Field label="Usia Anak" hint="tahun"
               error={touched.age && errors.age}
               input={<input type="number" min="3" max="18" placeholder="9"
                              value={data.age}
                              onChange={e=>setData(d=>({...d,age:e.target.value}))}
                              onBlur={()=>setTouched(t=>({...t,age:true}))}/>}/>
        <Field label="Kota / Area" hint="Kota Batu, Malang, dst."
               input={<input type="text" placeholder="Kota Batu"
                              value={data.city}
                              onChange={e=>setData(d=>({...d,city:e.target.value}))}/>}/>
        <Field label="Nomor WhatsApp" hint="kami akan menghubungi via WA"
               error={touched.wa && errors.wa}
               input={<input type="tel" placeholder="08123456789"
                              value={data.wa}
                              onChange={e=>setData(d=>({...d,wa:e.target.value}))}
                              onBlur={()=>setTouched(t=>({...t,wa:true}))}/>}/>
      </div>
      <button className="btn btn--primary btn--block" type="submit" disabled={status==="loading"}>
        {status === "loading" ? (
          <><span className="spinner"/> Menyimpan…</>
        ) : (
          <>Daftarkan Anak Saya <span className="btn__arrow">→</span></>
        )}
      </button>
      <p className="waitlist__legal mono small">
        Data Anda aman. Tidak ada spam. Hanya pemberitahuan saat kelas dibuka.
      </p>
    </form>
  );
}

function Field({ label, hint, error, input }) {
  return (
    <label className={`field ${error ? "field--err" : ""}`}>
      <span className="field__label">
        <span>{label}</span>
        {hint && <span className="field__hint mono">{hint}</span>}
      </span>
      {input}
      {error && <span className="field__err mono">! {error}</span>}
    </label>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Curriculum cards
// ────────────────────────────────────────────────────────────────────────────
const CURRICULUM = [
  {
    code: "01",
    tag: "STEM",
    title: "Coding & Game Dev",
    blurb: "Anak membangun cerita interaktif dan game 2D — bukan menghafal teori.",
    bullets: ["Computational Thinking & Algorithmic Mindset", "Game Dev di Scratch & Godot Engine", "Artificial Intelligence & Prompt Engineering"],
    icon: "code",
  },
  {
    code: "02",
    tag: "Engineering",
    title: "Robotics",
    blurb: "Dari LED kerlap-kerlip ke robot yang terhubung internet.",
    bullets: ["Electronics 101 & Sensor", "Arduino / ESP32", "Mekanisme & IoT Smart Home"],
    icon: "chip",
  },
  {
    code: "03",
    tag: "Math",
    title: "Sakamoto & Sempoa",
    blurb: "Hitung mental cepat, logika kuat, fokus tajam.",
    bullets: ["Aritmatika Mental Sempoa", "Metode Sakamoto", "Analisis Data & Grafik"],
    icon: "abacus",
  },
  {
    code: "04",
    tag: "Karakter",
    title: "Pondasi Islam",
    blurb: "Adab dan akhlak terjalin setiap hari — bukan mata pelajaran terpisah.",
    bullets: ["Tahsin & Tahfidz", "Sirah & Adab", "Bahasa Arab fungsional"],
    icon: "moon",
  },
];

function CurriculumIcon({ kind }) {
  const stroke = "currentColor";
  switch (kind) {
    case "code":   return (<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke={stroke} strokeWidth="2"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5M14 5l-4 14"/></svg>);
    case "chip":   return (<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke={stroke} strokeWidth="2"><rect x="6" y="6" width="12" height="12" rx="1"/><path d="M9 6V3M12 6V3M15 6V3M9 21v-3M12 21v-3M15 21v-3M3 9h3M3 12h3M3 15h3M21 9h-3M21 12h-3M21 15h-3"/><rect x="10" y="10" width="4" height="4"/></svg>);
    case "abacus": return (<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke={stroke} strokeWidth="2"><rect x="3" y="4" width="18" height="16" rx="1"/><path d="M3 9h18M3 14h18"/><circle cx="8" cy="6.5" r="1" fill={stroke}/><circle cx="14" cy="6.5" r="1" fill={stroke}/><circle cx="10" cy="11.5" r="1" fill={stroke}/><circle cx="16" cy="11.5" r="1" fill={stroke}/><circle cx="7" cy="16.5" r="1" fill={stroke}/><circle cx="13" cy="16.5" r="1" fill={stroke}/></svg>);
    case "moon":   return (<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke={stroke} strokeWidth="2"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/><path d="M16 4l1 2 2 1-2 1-1 2-1-2-2-1 2-1z" fill={stroke} stroke="none"/></svg>);
    default: return null;
  }
}

function CurriculumCard({ item }) {
  const [open, setOpen] = useState(false);
  return (
    <article className={`ccard ${open ? "ccard--open" : ""}`} onClick={() => setOpen(o=>!o)}>
      <div className="ccard__top">
        <div className="ccard__icon"><CurriculumIcon kind={item.icon}/></div>
        <div className="ccard__meta mono">
          <span>MOD_{item.code}</span>
          <span className="ccard__tag">{item.tag}</span>
        </div>
      </div>
      <h3 className="ccard__title">{item.title}</h3>
      <p className="ccard__blurb">{item.blurb}</p>
      <ul className="ccard__list">
        {item.bullets.map((b,i) => (
          <li key={i}><span className="ccard__bullet mono">›</span>{b}</li>
        ))}
      </ul>
      <div className="ccard__more mono">
        <span>{open ? "tutup" : "lihat modul"}</span>
        <span className="ccard__arrow">{open ? "▴" : "▾"}</span>
      </div>
    </article>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Comparison table
// ────────────────────────────────────────────────────────────────────────────
const COMPARE = [
  { row: "Fokus utama", trad: "Nilai ujian & ijazah", us: "Skill nyata, portofolio & AI literacy" },
  { row: "Output kelas", trad: "Lembar jawaban", us: "Game, robot, proyek AI" },
  { row: "Matematika", trad: "Hafal rumus", us: "Sempoa + Sakamoto + analisis data" },
  { row: "Teknologi", trad: "Pelajaran TIK pasif", us: "Coding, AI, & Computational Thinking sejak SD" },
  { row: "Bahasa", trad: "Wajib semua, dangkal", us: "Inggris fungsional + Arab fungsional" },
  { row: "Karakter", trad: "Mata pelajaran terpisah", us: "Adab & akhlak terintegrasi" },
  { row: "Kelas", trad: "30+ siswa", us: "Maks. 12 siswa per kohor" },
];

function CompareTable() {
  return (
    <div className="compare">
      <div className="compare__head">
        <div className="compare__col compare__col--label"></div>
        <div className="compare__col compare__col--trad">
          <span className="mono small">SISTEM_LAMA</span>
          <span className="compare__h">Sekolah konvensional</span>
        </div>
        <div className="compare__col compare__col--us">
          <span className="mono small">HWA_v1</span>
          <span className="compare__h">Hello World Academy</span>
        </div>
      </div>
      {COMPARE.map((r, i) => (
        <div key={i} className="compare__row">
          <div className="compare__col compare__col--label">{r.row}</div>
          <div className="compare__col compare__col--trad">
            <span className="x">×</span>{r.trad}
          </div>
          <div className="compare__col compare__col--us">
            <span className="check">✓</span>{r.us}
          </div>
        </div>
      ))}
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Page
// ────────────────────────────────────────────────────────────────────────────
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = ACCENTS[tweaks.accent] || ACCENTS.neon;

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", accent.c);
    root.style.setProperty("--accent-glow", accent.glow);
    root.style.setProperty("--accent-ink", accent.ink);
    root.dataset.mode = tweaks.mode;
    root.dataset.density = tweaks.density;
  }, [tweaks, accent]);

  // smooth scroll
  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <div className="page">
      {/* NAV */}
      <header className="nav">
        <div className="nav__inner">
          <a className="nav__brand" href="#top" onClick={(e)=>{e.preventDefault();window.scrollTo({top:0,behavior:"smooth"});}}>
            <PixelLogo size={48}/>
            <span className="nav__brand-text">
              <span className="mono small">[ HWA ]</span>
              <span>Hello World Academy</span>
            </span>
          </a>
          <nav className="nav__links">
            <a onClick={(e)=>{e.preventDefault();scrollTo("manifesto");}} href="#manifesto">Mengapa</a>
            <a onClick={(e)=>{e.preventDefault();scrollTo("compare");}} href="#compare">Perbandingan</a>
            <a onClick={(e)=>{e.preventDefault();scrollTo("curriculum");}} href="#curriculum">Kurikulum</a>
          </nav>
          <button className="btn btn--ghost btn--sm btn--icon" onClick={()=>setTweak("mode", tweaks.mode==="dark" ? "light" : "dark")} title="Ganti tema">
            {tweaks.mode === "dark" ? "☀" : "☾"}
          </button>
          <button className="btn btn--ghost btn--sm" onClick={()=>scrollTo("waitlist")}>
            Daftar Waitlist <span className="btn__arrow">→</span>
          </button>
        </div>
      </header>

      {/* HERO */}
      <section className="hero" id="top">
        <div className="hero__inner">
          <div className="hero__left">
            <div className="hero__badges">
              <span className="badge"><span className="dot dot--accent"/> Pendaftaran 2026 dibuka</span>
              <span className="badge badge--ghost mono">KOTA BATU · MALANG RAYA</span>
            </div>
            <h1 className="hero__h">
              <span className="hero__h-mono">Pendidikan kita sedang tidak baik-baik saja.</span>
              <span className="hero__h-accent">Kami memperbaikinya — di Kota Batu.</span>
            </h1>
            <p className="hero__sub">
              Hello World Academy adalah homeschooling STEM untuk anak-anak yang akan tumbuh
              menjadi <em>creator</em>, <em>coder</em>, dan <em>engineer</em>. Kurikulum mengacu
              kurikulum Cambridge & computational thinking, dilengkapi kecakapan Artificial Intelligence, dengan pondasi keislaman yang terjalin setiap hari.
            </p>
            <div className="hero__cta">
              <button className="btn btn--primary" onClick={()=>scrollTo("waitlist")}>
                Gabung Waitlist via WhatsApp <span className="btn__arrow">→</span>
              </button>
              <button className="btn btn--ghost" onClick={()=>scrollTo("curriculum")}>
                Lihat Kurikulum
              </button>
            </div>
            <div className="hero__proof">
              <div className="hero__proof-item">
                <span className="hero__proof-num mono">12</span>
                <span className="hero__proof-lbl">siswa per kohor</span>
              </div>
              <div className="hero__proof-divider"/>
              <div className="hero__proof-item">
                <span className="hero__proof-num mono">4</span>
                <span className="hero__proof-lbl">pilar kurikulum</span>
              </div>
              <div className="hero__proof-divider"/>
              <div className="hero__proof-item">
                <span className="hero__proof-num mono">2026</span>
                <span className="hero__proof-lbl">gelombang pertama</span>
              </div>
            </div>
          </div>
          <div className="hero__right">
            <TypedTerminal accent={accent} showCursor={tweaks.showTerminalCursor}/>
            <div className="hero__sticker mono">
              <div className="hero__sticker-h">// gelombang_01</div>
              <div className="hero__sticker-b">Kursi terbatas. Hanya untuk keluarga di Kota Batu & Malang Raya.</div>
            </div>
          </div>
        </div>
        <div className="hero__ticker mono">
          <div className="hero__ticker-track">
            {Array.from({length: 3}).map((_,i)=>(
              <span key={i}>
                ▸ Coding sejak SD &nbsp; ▸ Robotics IoT &nbsp; ▸ Sempoa + Sakamoto &nbsp; ▸ Pondasi keislaman harian &nbsp; ▸ Kurikulum Cambridge &nbsp; ▸ Computational Thinking &nbsp; ▸ Artificial Intelligence &nbsp; ▸ Maks. 12 siswa &nbsp; ▸ Kota Batu, Jawa Timur &nbsp;u, Jawa Timur &nbsp;
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* MANIFESTO */}
      <section className="manifesto" id="manifesto">
        <div className="section__inner">
          <div className="eyebrow mono"><span className="dot dot--accent"/> // mengapa_kami_ada</div>
          <h2 className="section__h">
            Anak Anda bukan sedang dididik —<br/>
            mereka sedang dipersiapkan untuk dunia <s>lama</s> <span className="hl">yang sudah tidak ada.</span>
          </h2>
          <div className="manifesto__grid">
            <div className="manifesto__col">
              <p className="manifesto__lead">
                Sistem sekolah hari ini dibangun untuk era pabrik. Murid duduk diam, menghafal,
                dan diuji oleh angka. Padahal dunia anak Anda akan dibentuk oleh AI, otomasi,
                dan orang-orang yang tahu cara <em>membuat sesuatu</em>.
              </p>
              <p>
                Hello World Academy menghapus mata pelajaran yang tidak lagi relevan dan
                menggantinya dengan <strong>skill berdaya ungkit tinggi</strong>: coding, robotika,
                aritmatika mental, dan adab.
              </p>
            </div>
            <ul className="manifesto__list">
              <li>
                <span className="mono small num">01</span>
                <div>
                  <h4>Skill, bukan ijazah.</h4>
                  <p>Yang dinilai dunia adalah apa yang anak Anda bisa <em>bangun</em>, bukan stempel.</p>
                </div>
              </li>
              <li>
                <span className="mono small num">02</span>
                <div>
                  <h4>Computational thinking, bukan hafalan.</h4>
                  <p>Mengacu kurikulum Cambridge: computational thinking, menganalisis masalah, dan memanfaatkan Artificial Intelligence secara kritis.</p>
                </div>
              </li>
              <li>
                <span className="mono small num">03</span>
                <div>
                  <h4>Adab di atas ilmu.</h4>
                  <p>Pondasi keislaman terjalin setiap hari — adab dan akhlak hidup di setiap proyek, bukan jam pelajaran terpisah.</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </section>

      {/* COMPARE */}
      <section className="compare-sec" id="compare">
        <div className="section__inner">
          <div className="eyebrow mono"><span className="dot dot--accent"/> // perbandingan_jujur</div>
          <h2 className="section__h">
            Skill <span className="hl">&gt;</span> Ijazah.
          </h2>
          <p className="section__sub">
            Kami tidak anti-sekolah. Kami hanya jujur: ini yang Anda dapat di sini, yang
            sulit Anda dapat di tempat lain.
          </p>
          <CompareTable/>
        </div>
      </section>

      {/* CURRICULUM */}
      <section className="curr" id="curriculum">
        <div className="section__inner">
          <div className="eyebrow mono"><span className="dot dot--accent"/> // 4_pilar_kurikulum</div>
          <h2 className="section__h">Empat modul. Satu generasi pencipta.</h2>
          <p className="section__sub">
            Setiap minggu anak menyentuh keempat pilar — bukan terpisah-pisah, tapi terjalin
            dalam proyek nyata. Klik kartu untuk melihat modul.
          </p>
          <div className="curr__grid">
            {CURRICULUM.map(item => <CurriculumCard key={item.code} item={item}/>)}
          </div>
        </div>
      </section>

      {/* WAITLIST */}
      <section className="waitlist-sec" id="waitlist">
        <div className="section__inner waitlist-sec__inner">
          <div className="waitlist-sec__left">
            <div className="eyebrow mono"><span className="dot dot--accent"/> // gelombang_01 / 2026</div>
            <h2 className="section__h">
              Kursi gelombang pertama<br/>
              <span className="hl">terbatas 12 siswa.</span>
            </h2>
            <p className="section__sub">
              Daftarkan WhatsApp Anda. Kami akan menghubungi secara pribadi untuk sesi
              perkenalan dengan founder dan tur kurikulum — sebelum publik.
            </p>
            <ul className="waitlist-sec__list">
              <li><span className="check mono">✓</span> Sesi 1-on-1 dengan founder via WA call</li>
              <li><span className="check mono">✓</span> Akses awal ke jadwal & biaya</li>
              <li><span className="check mono">✓</span> Tidak ada komitmen — Anda bisa keluar kapan saja</li>
            </ul>
          </div>
          <div className="waitlist-sec__right">
            <WaitlistForm id="waitlist-form"/>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="footer">
        <div className="section__inner footer__inner">
          <div className="footer__brand">
            <PixelLogo size={56}/>
            <p className="mono small">
              © 2026 Hello World Academy.<br/>
              Kota Batu, Jawa Timur · Indonesia.
            </p>
          </div>
          <div className="footer__cols">
            <div>
              <h5 className="mono small">Akademi</h5>
              <a onClick={(e)=>{e.preventDefault();scrollTo("manifesto");}} href="#manifesto">Mengapa Kami Ada</a>
              <a onClick={(e)=>{e.preventDefault();scrollTo("curriculum");}} href="#curriculum">Kurikulum</a>
              <a onClick={(e)=>{e.preventDefault();scrollTo("waitlist");}} href="#waitlist">Waitlist</a>
            </div>
            <div>
              <h5 className="mono small">Hubungi</h5>
              <a href="https://wa.me/6285177551373" target="_blank" rel="noopener noreferrer">WhatsApp</a>
              <a href="mailto:hi.hello.world.academy@gmail.com">hi.hello.world.academy@gmail.com</a>
            </div>
          </div>
        </div>
        <div className="footer__bar mono small">
          <span>~/helloworld.academy</span>
          <span className="footer__bar-spacer">·</span>
          <span>build 2026.04 · gelombang_01</span>
          <span className="footer__bar-spacer">·</span>
          <span>made in Kota Batu</span>
        </div>
      </footer>

      {/* TWEAKS */}
      {typeof TweaksPanel !== "undefined" && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Tampilan">
            <TweakRadio
              label="Mode"
              value={tweaks.mode}
              onChange={v=>setTweak("mode", v)}
              options={[{value:"light",label:"Light"},{value:"dark",label:"Dark"}]}/>
            <TweakRadio
              label="Densitas"
              value={tweaks.density}
              onChange={v=>setTweak("density", v)}
              options={[{value:"comfy",label:"Nyaman"},{value:"tight",label:"Padat"}]}/>
          </TweakSection>
          <TweakSection title="Aksen">
            <TweakRadio
              label="Warna aksen"
              value={tweaks.accent}
              onChange={v=>setTweak("accent", v)}
              options={[
                {value:"neon",label:"Neon"},
                {value:"amber",label:"Amber"},
                {value:"cyan",label:"Cyan"},
                {value:"coral",label:"Coral"},
              ]}/>
          </TweakSection>
          <TweakSection title="Terminal">
            <TweakToggle
              label="Tampilkan kursor"
              value={tweaks.showTerminalCursor}
              onChange={v=>setTweak("showTerminalCursor", v)}/>
          </TweakSection>
        </TweaksPanel>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);