function Beranda({ onNavigate }) {
  const { Button, Icon, Badge, Card, SectionHeading, StatItem, LevelCard, TimelineStep, InfoBlock, ProfileCard, QuoteCard, PhotoSlot, HillDivider } = DS;
  const step = (i) => ({ animationDelay: i * 90 + "ms" });
  return (
    <main>
      {/* hero — the page's one orchestrated motion moment */}
      <section style={{ background: "var(--bg-page)", padding: "var(--section-y) 0 var(--space-10)", position: "relative", overflow: "hidden" }}>
        <Container>
          <div className="hero-grid">
            <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-5)", alignItems: "flex-start" }}>
              <span className="tkm-enter" style={step(0)}><Badge tone="joy" dot>Pendaftaran 2026/2027 dibuka</Badge></span>
              <h1 className="tkm-enter hero-title" style={step(1)}>Sekolah pertama yang bikin anak ingin kembali besok</h1>
              <p className="tkm-enter hero-lead" style={step(2)}>
                TK Islam Al-Muhajirin di Cipanas. Halaman sejuk di kaki gunung, guru yang mengenal nama anak sejak hari pertama, dan hari yang selalu ditutup dengan doa.
              </p>
              <div className="tkm-enter hero-cta" style={step(3)}>
                <Button size="lg" href={WA} icon={<Icon name="message-circle" size={20} />}>Tanya PPDB via WhatsApp</Button>
                <Button size="lg" variant="secondary" onClick={() => onNavigate({ label: "Program" })}>Lihat program</Button>
              </div>
              <p className="tkm-enter" style={{ ...step(4), fontSize: "var(--text-sm)", color: "var(--text-muted)", display: "flex", gap: 8, alignItems: "center" }}>
                <Icon name="clock" size={16} style={{ color: "var(--green-500)" }} />
                Dibalas di hari yang sama, Senin–Sabtu 08.00–16.00
              </p>
            </div>
            <div className="tkm-enter--pop hero-photo" style={step(3)}>
              <PhotoSlot ratio="4 / 5" label="Anak-anak di halaman sekolah, cahaya pagi" />
              <div className="hero-chip">
                <Icon name="sprout" size={20} style={{ color: "var(--green-500)" }} />
                <span>Kebun mini di halaman belakang</span>
              </div>
            </div>
          </div>
        </Container>
      </section>

      {/* strip 4 angka */}
      <HillDivider height={56} fill="var(--green-500)" />
      <section style={{ background: "var(--green-500)", padding: "var(--space-4) 0 var(--space-12)" }}>
        <Container>
          <div className="stat-strip">
            <StatItem tone="onbrand" value="12" label="Tahun mendampingi anak Cipanas" />
            <StatItem tone="onbrand" value="3" label="Jenjang, dari kelompok bermain sampai TK B" />
            <StatItem tone="joy" className="tkm-stat--onbrand" value="1 : 8" label="Satu guru untuk delapan anak" />
            <StatItem tone="onbrand" value="18" label="Anak per kelas, tidak lebih" />
          </div>
        </Container>
      </section>
      <HillDivider height={48} fill="var(--green-500)" flip />

      {/* tiga kartu jenjang */}
      <Section id="jenjang">
        <SectionHeading align="center" size="lg" title="Tiga jenjang, satu suasana"
          body="Anak masuk sesuai usianya. Guru, halaman, dan cara mendampinginya tetap sama hangatnya." />
        <div className="level-grid">
          <LevelCard name="Kelompok Bermain" age="Usia 3–4 tahun"
            points={["Kelas 07.30–09.30", "Bermain terarah, belum ada tugas tulis", "Mengenal wudu dan doa harian"]}
            footer={<Button variant="ghost" href={WA}>Tanya kuota</Button>} />
          <LevelCard name="TK A" age="Usia 4–5 tahun" tone="brand" shape="leafAlt" badge="Paling banyak dicari"
            points={["Kelas 07.30–10.30", "Mengenal huruf dan angka lewat permainan", "Iqra bertahap, tanpa dipaksa"]}
            footer={<Button variant="onbrand" href={WA}>Tanya kuota</Button>} />
          <LevelCard name="TK B" age="Usia 5–6 tahun"
            points={["Kelas 07.30–10.30", "Siap masuk SD: menulis, berhitung, bercerita", "Hafalan surat pendek dan doa"]}
            footer={<Button variant="ghost" href={WA}>Tanya kuota</Button>} />
        </div>
      </Section>

      {/* blok program unggulan */}
      <Section tone="tint" id="program">
        <div className="prog-grid">
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-6)" }}>
            <SectionHeading size="lg" title="Yang membuat harinya berbeda"
              body="Empat kebiasaan yang kami jaga setiap hari, bukan acara tahunan." />
            <div className="prog-list">
              {[
                ["sprout", "Kebun mini", "Setiap kelompok punya bedeng sendiri. Anak menanam, menyiram, lalu memanen kangkungnya."],
                ["book-open", "Iqra harian", "Dua puluh menit, kelompok kecil, satu guru mendampingi empat anak."],
                ["footprints", "Jalan pagi Kamis", "Berjalan ke kebun teh di ujung jalan, mengenal apa yang tumbuh di sekitarnya."],
                ["hand-heart", "Adab sebelum akademik", "Salam, berbagi bekal, membereskan mainan sendiri."],
              ].map(([icon, title, body]) => (
                <Card key={title} shape="round" elevation="flat" style={{ border: "2px solid var(--border-soft)", display: "flex", gap: "var(--space-4)" }}>
                  <span className="prog-icon"><Icon name={icon} size={22} /></span>
                  <div>
                    <h3 style={{ marginBottom: 4 }}>{title}</h3>
                    <p style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)" }}>{body}</p>
                  </div>
                </Card>
              ))}
            </div>
          </div>
          <div className="prog-photos">
            <PhotoSlot ratio="3 / 4" shape="leaf" label="Anak menyiram kebun mini" />
            <PhotoSlot ratio="1 / 1" shape="leafAlt" label="Kelompok Iqra bersama guru" />
          </div>
        </div>
      </Section>

      {/* timeline jadwal harian */}
      <Section>
        <div className="jadwal-grid">
          <div>
            <SectionHeading title="Satu hari di Al-Muhajirin"
              body="Jadwal TK A. Kelompok bermain pulang dua jam lebih awal." />
            <div style={{ marginTop: "var(--space-8)" }}>
              <TimelineStep marker="1" time="07.30" title="Sambut pagi di halaman" body="Baris, salam kepada guru, satu lagu bersama." />
              <TimelineStep marker="2" time="08.00" title="Lingkaran pagi" body="Doa, bercerita tentang kabar hari ini, menghitung teman yang hadir." />
              <TimelineStep marker="3" time="08.30" title="Iqra kelompok kecil" body="Empat anak, satu guru, dua puluh menit." />
              <TimelineStep marker="4" time="09.00" title="Bekal bersama" body="Anak membuka bekalnya sendiri dan berbagi dengan teman sebangku." tone="joy" />
              <TimelineStep marker="5" time="09.30" title="Bermain terarah atau ke kebun" body="Berganti setiap hari: balok, air dan pasir, atau menyiram bedeng." />
              <TimelineStep marker="6" time="10.30" title="Doa pulang" body="Guru menyerahkan anak langsung kepada penjemput." />
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
            <InfoBlock title="Jam sekolah" icon="clock">
              <ul>
                <li>Kelompok Bermain — 07.30–09.30</li>
                <li>TK A &amp; TK B — 07.30–10.30</li>
                <li>Jumat pulang 09.30</li>
              </ul>
            </InfoBlock>
            <PhotoSlot ratio="4 / 3" label="Lingkaran pagi di dalam kelas" />
          </div>
        </div>
      </Section>

      {/* kartu guru */}
      <Section tone="sunken">
        <SectionHeading align="center" title="Guru yang menemani setiap hari"
          body="Delapan guru, semuanya tinggal di Cipanas dan sekitarnya." />
        <div className="guru-grid">
          <ProfileCard name="Bu Nia" role="Guru TK A" badge="8 tahun di Al-Muhajirin" note="Suka mengajar lewat lagu dan tepuk." photoLabel="Foto Bu Nia" />
          <ProfileCard name="Bu Ratih" role="Guru TK B" badge="Kepala sekolah" note="Menyiapkan anak masuk SD tanpa membuatnya takut sekolah." photoLabel="Foto Bu Ratih" />
          <ProfileCard name="Bu Sari" role="Guru Kelompok Bermain" note="Paling sabar menemani anak yang baru pertama ditinggal orang tua." photoLabel="Foto Bu Sari" />
          <ProfileCard name="Pak Deden" role="Guru Iqra" badge="Sejak 2016" note="Mengajar Iqra dengan pelan, satu huruf sehari juga tidak apa-apa." photoLabel="Foto Pak Deden" />
        </div>
      </Section>

      {/* testimoni */}
      <Section>
        <SectionHeading align="center" title="Kata orang tua" />
        <div className="quote-grid">
          <QuoteCard name="Ibu Wulan" meta="Ibu dari Rafi, TK B"
            quote="Anak saya yang tadinya menempel terus, sekarang masuk kelas sendiri sambil melambaikan tangan. Gurunya telaten sekali." />
          <QuoteCard name="Bapak Andri" meta="Ayah dari Zahra, TK A"
            quote="Saya suka karena setiap sore ada kabar singkat lewat WhatsApp: hari ini Zahra makan apa, main apa, belajar apa." />
          <QuoteCard name="Ibu Neneng" meta="Ibu dari Alif, Kelompok Bermain"
            quote="Jaraknya dekat dari rumah, halamannya luas, dan anak saya jadi mau bangun pagi tanpa dibujuk." />
        </div>
      </Section>

      {/* CTA PPDB */}
      <HillDivider height={64} fill="var(--green-500)" shape="ridge" />
      <section style={{ background: "var(--green-500)", padding: "var(--space-6) 0 var(--section-y)" }}>
        <Container narrow>
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-6)", alignItems: "center", textAlign: "center" }}>
            <SectionHeading align="center" size="lg" onBrand title="Ada yang ingin ditanyakan soal PPDB?"
              body="Kirim satu pesan WhatsApp. Kami balas di hari yang sama, dan Anda boleh datang melihat kelas kapan saja pada jam sekolah." />
            <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-4)", justifyContent: "center" }}>
              <Button size="lg" variant="onbrand" href={WA} icon={<Icon name="message-circle" size={20} />}>Chat WhatsApp sekarang</Button>
              <Button size="lg" variant="ghost" onClick={() => onNavigate({ label: "PPDB" })} style={{ color: "var(--cream-050)" }}>Lihat alur pendaftaran</Button>
            </div>
            <p style={{ fontSize: "var(--text-sm)", color: "rgba(255,253,246,.8)" }}>Jl. Raya Cipanas No. 00, Cipanas, Cianjur</p>
          </div>
        </Container>
      </section>
    </main>
  );
}
window.Beranda = Beranda;