function Galeri() {
  const { SectionHeading, Tag, PhotoSlot, Button, Icon, Card } = DS;
  const items = [
    ["Kegiatan harian", "Lingkaran pagi di kelas TK A", "4 / 3", "photo"],
    ["Kebun", "Menyiram bedeng kangkung", "1 / 1", "leaf"],
    ["Kegiatan harian", "Bekal bersama", "4 / 3", "leafAlt"],
    ["Acara", "Wisuda TK B 2025", "3 / 4", "leaf"],
    ["Kebun", "Panen pertama kelompok bermain", "4 / 3", "round"],
    ["Acara", "Jalan pagi ke kebun teh", "16 / 9", "photo"],
    ["Kegiatan harian", "Salat dhuha berjamaah", "1 / 1", "leafAlt"],
    ["Acara", "Kelas bersama orang tua", "4 / 3", "leaf"],
  ];
  const [filter, setFilter] = React.useState("Semua");
  const cats = ["Semua", "Kegiatan harian", "Kebun", "Acara"];
  const shown = filter === "Semua" ? items : items.filter((i) => i[0] === filter);
  return (
    <main>
      <Section>
        <SectionHeading as="h1" size="lg" title="Galeri kegiatan"
          body="Semua bingkai di bawah masih menunggu foto asli dari sekolah. Bentuk dan ukurannya sudah final." />
        <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-2)", margin: "var(--space-6) 0 var(--space-8)" }}>
          {cats.map((c) => <Tag key={c} selected={filter === c} onClick={() => setFilter(c)}>{c}</Tag>)}
        </div>
        <div className="gal-grid">
          {shown.map(([cat, label, ratio, shape]) => (
            <PhotoSlot key={label} ratio={ratio} shape={shape} label={label} />
          ))}
        </div>
        <Card shape="leafAlt" tone="tint" style={{ marginTop: "var(--space-10)", display: "flex", flexWrap: "wrap", gap: "var(--space-5)", alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <h3 style={{ marginBottom: 4 }}>Punya foto kegiatan anak Anda?</h3>
            <p style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)" }}>Kirimkan ke kami, akan kami tampilkan setelah izin dari orang tua.</p>
          </div>
          <Button href={WA} icon={<Icon name="image-up" size={18} />}>Kirim foto</Button>
        </Card>
      </Section>
    </main>
  );
}
window.Galeri = Galeri;