function Profil() {
  const { SectionHeading, Card, PhotoSlot, Icon, StatItem, Button } = DS;
  return (
    <main>
      <Section>
        <div className="prof-hero">
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-5)" }}>
            <SectionHeading as="h1" size="lg" title="Berdiri sejak 2014, di jalan yang sama"
              body="TK Islam Al-Muhajirin dimulai dari satu kelas di serambi masjid Al-Muhajirin. Sekarang tiga kelas, delapan guru, dan halaman yang cukup luas untuk berlarian sebelum masuk kelas." />
            <div style={{ display: "flex", gap: "var(--space-8)" }}>
              <StatItem value="2014" label="Tahun berdiri" />
              <StatItem value="240+" label="Alumni yang sudah masuk SD" />
            </div>
          </div>
          <PhotoSlot ratio="4 / 3" label="Bangunan sekolah dari halaman depan" />
        </div>
      </Section>
      <Section tone="tint">
        <SectionHeading title="Yang kami pegang" body="Tiga hal ini yang kami sepakati bersama para guru setiap awal tahun ajaran." />
        <div className="level-grid" style={{ marginTop: "var(--space-8)" }}>
          {[
            ["heart", "Anak merasa aman dulu", "Sebelum belajar apa pun, anak harus merasa dikenal. Guru hafal nama, kebiasaan, dan bekal kesukaan setiap anak."],
            ["sun", "Belajar sambil bermain", "Tidak ada lembar kerja di kelompok bermain. Huruf dan angka datang lewat lagu, balok, dan kebun."],
            ["moon-star", "Adab dibiasakan, bukan dihafal", "Salam, berbagi, membereskan mainan, dan salat dhuha berjamaah setiap Selasa."],
          ].map(([icon, title, body], i) => (
            <Card key={title} shape={i === 1 ? "leafAlt" : "leaf"}>
              <span className="prog-icon" style={{ marginBottom: "var(--space-4)" }}><Icon name={icon} size={22} /></span>
              <h3 style={{ marginBottom: 6 }}>{title}</h3>
              <p style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)" }}>{body}</p>
            </Card>
          ))}
        </div>
      </Section>
      <Section>
        <SectionHeading title="Sekolahnya dari dekat" body="Foto-foto berikut akan diganti dengan hasil foto asli sekolah." />
        <div className="gal-grid" style={{ marginTop: "var(--space-8)" }}>
          <PhotoSlot ratio="4 / 3" label="Ruang kelas TK A" />
          <PhotoSlot ratio="4 / 3" shape="leafAlt" label="Halaman bermain" />
          <PhotoSlot ratio="4 / 3" shape="leaf" label="Kebun mini" />
          <PhotoSlot ratio="4 / 3" shape="round" label="Musala anak" />
        </div>
        <div style={{ marginTop: "var(--space-8)" }}><Button href={WA} icon={<Icon name="message-circle" size={18} />}>Ingin datang melihat langsung?</Button></div>
      </Section>
    </main>
  );
}
window.Profil = Profil;