function Program() {
  const { SectionHeading, Tabs, TimelineStep, Card, Icon, InfoBlock, Badge, Button, PhotoSlot } = DS;
  const [jenjang, setJenjang] = React.useState("TK A");
  const jadwal = {
    "Kelompok Bermain": [
      ["07.30", "Sambut pagi di halaman", "Baris, salam, satu lagu."],
      ["08.00", "Lingkaran pagi", "Doa dan bercerita."],
      ["08.30", "Bermain terarah", "Balok, air dan pasir, atau kebun."],
      ["09.00", "Bekal bersama", "Anak membuka bekalnya sendiri."],
      ["09.30", "Doa pulang", "Diserahkan langsung ke penjemput."],
    ],
    "TK A": [
      ["07.30", "Sambut pagi di halaman", "Baris, salam, satu lagu."],
      ["08.00", "Lingkaran pagi", "Doa dan menghitung teman yang hadir."],
      ["08.30", "Iqra kelompok kecil", "Empat anak, satu guru."],
      ["09.00", "Bekal bersama", "Berbagi dengan teman sebangku."],
      ["09.30", "Mengenal huruf lewat permainan", "Kartu huruf, pasir, dan lagu."],
      ["10.30", "Doa pulang", "Diserahkan langsung ke penjemput."],
    ],
    "TK B": [
      ["07.30", "Sambut pagi di halaman", "Baris, salam, satu lagu."],
      ["08.00", "Lingkaran pagi", "Bercerita di depan teman, satu anak per hari."],
      ["08.30", "Iqra dan hafalan surat pendek", "Kelompok kecil bergilir."],
      ["09.00", "Bekal bersama", "Membereskan tempat makan sendiri."],
      ["09.30", "Menulis, berhitung, bercerita", "Persiapan masuk SD."],
      ["10.30", "Doa pulang", "Diserahkan langsung ke penjemput."],
    ],
  };
  return (
    <main>
      <Section>
        <SectionHeading as="h1" size="lg" title="Program dan jadwal harian"
          body="Setiap jenjang punya ritme sendiri, tapi urutannya selalu sama: bermain di halaman, lingkaran pagi, Iqra, bekal, lalu kegiatan inti." />
        <div style={{ marginTop: "var(--space-8)", display: "flex", flexWrap: "wrap", gap: "var(--space-4)", alignItems: "center" }}>
          <Tabs items={Object.keys(jadwal)} value={jenjang} onChange={setJenjang} />
          <Badge tone="info" dot>{jenjang === "Kelompok Bermain" ? "Pulang 09.30" : "Pulang 10.30"}</Badge>
        </div>
        <div className="jadwal-grid" style={{ marginTop: "var(--space-8)" }}>
          <div>
            {jadwal[jenjang].map(([time, title, body], i) => (
              <TimelineStep key={time} marker={String(i + 1)} time={time} title={title} body={body} tone={title.startsWith("Bekal") ? "joy" : "green"} />
            ))}
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
            <InfoBlock title="Kegiatan mingguan" icon="calendar-days">
              <ul>
                <li>Selasa — salat dhuha berjamaah</li>
                <li>Kamis — jalan pagi ke kebun teh</li>
                <li>Sabtu — kelas bersama orang tua, dua kali sebulan</li>
              </ul>
            </InfoBlock>
            <PhotoSlot ratio="4 / 3" label="Kegiatan jalan pagi hari Kamis" />
            <Card shape="round" tone="tint" elevation="flat" style={{ border: "2px solid var(--border-soft)" }}>
              <h3 style={{ marginBottom: 6 }}>Ingin tahu detail satu kegiatan?</h3>
              <p style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", marginBottom: "var(--space-4)" }}>Tanyakan langsung, guru kelas yang akan menjawab.</p>
              <Button href={WA} icon={<Icon name="message-circle" size={18} />}>Tanya lewat WhatsApp</Button>
            </Card>
          </div>
        </div>
      </Section>
    </main>
  );
}
window.Program = Program;