function Ppdb() {
  const { SectionHeading, TimelineStep, InfoBlock, Card, Input, Select, Checkbox, Radio, Button, Icon, Badge, Dialog } = DS;
  const [open, setOpen] = React.useState(false);
  return (
    <main>
      <Section>
        <SectionHeading as="h1" size="lg" title="Pendaftaran siswa baru 2026/2027"
          body="Empat langkah, tanpa tes masuk. Sebagian besar orang tua menyelesaikannya dalam satu kali datang." />
        <div style={{ marginTop: "var(--space-5)" }}><Badge tone="joy" dot>Gelombang 1 dibuka sampai 28 Februari</Badge></div>
        <div className="jadwal-grid" style={{ marginTop: "var(--space-10)" }}>
          <div>
            <TimelineStep marker="1" time="Langkah 1" title="Kirim pesan WhatsApp" body="Sebutkan nama dan usia anak. Kami balas di hari yang sama." />
            <TimelineStep marker="2" time="Langkah 2" title="Datang melihat kelas" body="Kapan saja pada jam sekolah, 07.30–10.30. Anak boleh ikut masuk kelas." />
            <TimelineStep marker="3" time="Langkah 3" title="Isi formulir dan serahkan dokumen" body="Diisi di sekolah, dibantu guru. Tidak perlu diunduh atau dicetak." />
            <TimelineStep marker="4" time="Langkah 4" title="Anak resmi terdaftar" body="Anda menerima jadwal hari pertama dan daftar barang yang perlu dibawa." tone="joy" />
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
            <InfoBlock title="Dokumen yang perlu dibawa" icon="clipboard-list">
              <ul>
                <li>Fotokopi akta kelahiran anak</li>
                <li>Fotokopi kartu keluarga</li>
                <li>Dua lembar foto anak ukuran 3×4</li>
              </ul>
            </InfoBlock>
            <InfoBlock title="Biaya" icon="wallet">
              Rincian biaya pendaftaran dan SPP kami sampaikan lewat WhatsApp agar selalu yang terbaru.
              <div style={{ marginTop: "var(--space-3)" }}>
                <Button variant="secondary" size="sm" onClick={() => setOpen(true)}>Lihat contoh rincian</Button>
              </div>
            </InfoBlock>
            <InfoBlock title="Kuota per jenjang" icon="users">
              <ul>
                <li>Kelompok Bermain — 6 kursi</li>
                <li>TK A — 12 kursi</li>
                <li>TK B — 4 kursi</li>
              </ul>
            </InfoBlock>
          </div>
        </div>
      </Section>
      <Section tone="tint">
        <div className="form-grid">
          <div>
            <SectionHeading title="Atau tinggalkan pertanyaan di sini"
              body="Kami tetap membalas lewat WhatsApp. Formulir ini hanya supaya Anda tidak perlu mengetik ulang." />
            <p style={{ marginTop: "var(--space-5)", fontSize: "var(--text-sm)", color: "var(--text-muted)", display: "flex", gap: 8 }}>
              <Icon name="phone" size={18} style={{ color: "var(--green-500)" }} />
              0812 0000 0000 · Senin–Sabtu 08.00–16.00
            </p>
          </div>
          <Card shape="leaf">
            <div style={{ display: "grid", gap: "var(--space-4)" }}>
              <Input label="Nama anak" placeholder="Contoh: Aisyah Kirana" hint="Sesuai akta kelahiran" />
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-4)" }}>
                <Input label="Usia anak" placeholder="4 tahun" />
                <Select label="Jenjang yang dituju" options={["Kelompok Bermain", "TK A", "TK B"]} />
              </div>
              <Input label="Nomor WhatsApp Anda" placeholder="08xx xxxx xxxx" />
              <Input label="Pertanyaan" multiline placeholder="Misalnya: apakah masih ada kursi untuk TK A?" />
              <div style={{ display: "grid", gap: 2 }}>
                <Radio name="cara" label="Saya ingin berkunjung dulu" defaultChecked />
                <Radio name="cara" label="Cukup dijawab lewat WhatsApp" />
                <Checkbox label="Kirimkan juga rincian biaya" defaultChecked />
              </div>
              <Button block size="lg" icon={<Icon name="message-circle" size={20} />} href={WA}>Kirim lewat WhatsApp</Button>
            </div>
          </Card>
        </div>
      </Section>
      <Dialog open={open} title="Contoh rincian biaya" onClose={() => setOpen(false)}
        actions={<><Button href={WA}>Tanya biaya terbaru</Button><Button variant="ghost" onClick={() => setOpen(false)}>Tutup</Button></>}>
        Angka di bawah adalah contoh tampilan, bukan biaya sebenarnya. Sekolah akan mengisinya sebelum website terbit: uang pendaftaran, seragam dan buku, lalu SPP bulanan.
      </Dialog>
    </main>
  );
}
window.Ppdb = Ppdb;