// ===== Pages: Tentang, Galeri, FAQ, Edukasi, Lokasi, Konservasi =====

function PageTentang() {
  return (
    <>
      <PageHead crumb="Beranda · Tentang" title="Tentang BatamZoo" sub="Lebih dari kebun binatang — kami adalah rumah konservasi Nusantara di Pulau Batam." />

      <section className="section">
        <div className="container">
          <div className="detail-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Cerita Kami</div>
              <h2 style={{ marginBottom: 24 }}>Dari mimpi konservasi ke 18 hektar rimba kota</h2>
              <p className="lead">
                BatamZoo didirikan tahun 2018 oleh sekelompok pecinta satwa lokal yang prihatin
                dengan minimnya ruang edukasi konservasi di Kepulauan Riau. Mulai dari 4 hektar lahan
                bekas perkebunan karet, kami tumbuh menjadi rumah bagi 150+ spesies satwa.
              </p>
              <p style={{ color: "var(--ink-2)", fontSize: 16, lineHeight: 1.7 }}>
                Misi kami sederhana: menghadirkan pengalaman dekat dengan satwa Nusantara
                untuk semua usia, sambil mendanai program pelestarian habitat asli mereka.
                Setiap tiket yang Anda beli mendukung program ini.
              </p>
            </div>
            <PH tint="green" ratio="5/4" style={{ borderRadius: "var(--r-xl)" }} label="FOTO TIM & FOUNDER" />
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--blue)", color: "white" }}>
        <div className="container">
          <SectionHeader
            eyebrow={<span style={{ color: "var(--yellow)" }}>Nilai Kami</span>}
            title={<span style={{ color: "white" }}>Empat pilar BatamZoo</span>}
            align="center"
          />
          <div className="grid-4">
            {[
              { ic: "leaf", t: "Konservasi", d: "5% tiket disalurkan ke program pelestarian habitat asli." },
              { ic: "book-open", t: "Edukasi", d: "Setiap satwa memiliki info-graphic dan keeper talk reguler." },
              { ic: "heart", t: "Kesejahteraan", d: "Enclosure dirancang sesuai standard WAZA & SEAZA." },
              { ic: "people-roof", t: "Keluarga", d: "Aman, ramah anak, ramah difabel, halal & inklusif." }
            ].map((v, i) => (
              <div key={i} style={{ padding: 28, background: "rgba(255,255,255,0.08)", borderRadius: "var(--r-lg)", border: "1px solid rgba(255,255,255,0.12)" }}>
                <div style={{
                  width: 56, height: 56, borderRadius: 16,
                  background: "rgba(255,199,59,0.18)", color: "var(--yellow)",
                  display: "grid", placeItems: "center", fontSize: 22, marginBottom: 14
                }}><i className={"fa-solid fa-" + v.ic}></i></div>
                <h4 style={{ color: "white", fontSize: 18, marginBottom: 8 }}>{v.t}</h4>
                <p style={{ color: "#C9D6EF", fontSize: 14, margin: 0, lineHeight: 1.55 }}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Linimasa" title="Perjalanan kami" align="center" />
          <div style={{ position: "relative", maxWidth: 760, margin: "0 auto" }}>
            <div style={{ position: "absolute", left: 100, top: 0, bottom: 0, width: 2, background: "var(--line)" }}></div>
            {[
              { y: "2018", t: "BatamZoo lahir", d: "Mulai dari 4 hektar lahan bekas perkebunan karet, 25 spesies satwa." },
              { y: "2020", t: "Ekspansi 10 hektar", d: "Membuka Zona Savana & Zona Aviary walk-in pertama di Kepri." },
              { y: "2022", t: "Sertifikasi SEAZA", d: "Resmi terdaftar di Southeast Asian Zoos & Aquariums Association." },
              { y: "2024", t: "Edu Center & Reptile Dome", d: "Pusat edukasi dengan auditorium 80 kursi dan kubah reptil terbesar di Sumatera." },
              { y: "2026", t: "Hari Ini", d: "150+ spesies, 18 ha, 6 zona, 12+ fasilitas. Dan terus tumbuh." }
            ].map((m, i) => (
              <div key={i} style={{ display: "flex", gap: 32, marginBottom: 32, position: "relative" }}>
                <div style={{
                  width: 80, textAlign: "right", fontFamily: "var(--font-display)",
                  fontWeight: 700, fontSize: 22, color: "var(--blue)", flexShrink: 0
                }}>{m.y}</div>
                <div style={{
                  width: 18, height: 18, borderRadius: "50%",
                  background: "var(--yellow)", border: "4px solid var(--cream)",
                  flexShrink: 0, marginTop: 4, position: "relative", left: 11
                }}></div>
                <div style={{ paddingLeft: 12 }}>
                  <h4 style={{ marginBottom: 6, fontSize: 18 }}>{m.t}</h4>
                  <p style={{ color: "var(--ink-2)", fontSize: 14.5, margin: 0 }}>{m.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function PageGaleri() {
  const [filter, setFilter] = useState("Semua");
  const cats = ["Semua", "Fauna", "Fasilitas", "Pengunjung", "Behind the Scenes"];
  const tiles = Array.from({ length: 12 }, (_, i) => ({
    id: i,
    cat: ["Fauna", "Fasilitas", "Pengunjung", "Behind the Scenes"][i % 4],
    span: [1, 2, 1, 1, 2, 1, 1, 1, 2, 1, 1, 2][i] || 1,
    tint: ["green", "blue", "yellow"][i % 3]
  }));
  const shown = filter === "Semua" ? tiles : tiles.filter(t => t.cat === filter);
  return (
    <>
      <PageHead crumb="Beranda · Galeri" title="Galeri" sub="Momen-momen seru dari satwa, fasilitas, dan pengunjung BatamZoo." />
      <section className="section">
        <div className="container">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 32 }}>
            {cats.map(c => (
              <button
                key={c}
                onClick={() => setFilter(c)}
                className={"btn " + (filter === c ? "btn-blue" : "btn-ghost")}
                style={{ padding: "10px 18px", fontSize: 14 }}
              >{c}</button>
            ))}
          </div>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
            gridAutoRows: "200px", gap: 12
          }} className="gallery-grid">
            {shown.map(t => (
              <div key={t.id} className="gallery-tile" style={{
                gridColumn: t.span === 2 ? "span 2" : "span 1",
                gridRow: t.id % 5 === 0 ? "span 2" : "span 1"
              }}>
                <PH
                  tint={t.tint}
                  style={{ width: "100%", height: "100%", borderRadius: "var(--r-lg)" }}
                  label={t.cat.toUpperCase()}
                />
              </div>
            ))}
          </div>
          <div style={{ textAlign: "center", marginTop: 36 }}>
            <button className="btn btn-ghost btn-lg">Muat foto lainnya</button>
          </div>
        </div>
      </section>
      <style>{`@media (max-width: 700px) { .gallery-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
    </>
  );
}

function PageFAQ() {
  const [open, setOpen] = useState(0);
  return (
    <>
      <PageHead crumb="Beranda · FAQ" title="Pertanyaan Umum" sub="Tidak ketemu jawabannya? Hubungi tim kami di halaman Kontak." />
      <section className="section">
        <div className="container" style={{ maxWidth: 820 }}>
          {FAQ_DATA.map((f, i) => (
            <div
              key={i}
              className={"faq-item" + (open === i ? " open" : "")}
              onClick={() => setOpen(open === i ? -1 : i)}
            >
              <div className="faq-q">
                <span>{f.q}</span>
                <span className="ic"><i className="fa-solid fa-plus"></i></span>
              </div>
              <div className="faq-a">
                <p style={{ marginTop: 0, fontSize: 15.5, lineHeight: 1.7 }}>{f.a}</p>
              </div>
            </div>
          ))}
          <div style={{
            marginTop: 48, padding: 32,
            background: "var(--cream-warm)", borderRadius: "var(--r-lg)",
            textAlign: "center"
          }}>
            <h3 style={{ marginBottom: 12 }}>Masih ada pertanyaan?</h3>
            <p style={{ color: "var(--navy-soft)", marginBottom: 20 }}>Tim Customer Care kami siap membantu di jam operasional.</p>
            <L to="kontak" className="btn btn-primary">Hubungi Tim Kami <i className="fa-solid fa-arrow-right"></i></L>
          </div>
        </div>
      </section>
    </>
  );
}

function PageEdukasi() {
  const programs = [
    { t: "Study Tour Sekolah", lvl: "TK – SMA", d: "Tur edukasi terpandu 2 jam, dilengkapi worksheet aktivitas dan keeper talk eksklusif.", harga: "Mulai Rp55.000/anak (min. 20)", ic: "graduation-cap" },
    { t: "Junior Keeper Camp", lvl: "Usia 8–14", d: "Pengalaman 1 hari menjadi keeper junior — menyiapkan pakan, observasi, dan praktek lapangan.", harga: "Rp450.000/anak", ic: "paw" },
    { t: "Workshop Konservasi", lvl: "Umum", d: "Diskusi bulanan bersama ahli konservasi, pelepasliaran simulasi, dan field trip.", harga: "Free untuk Annual Pass", ic: "globe" },
    { t: "Birthday at the Zoo", lvl: "Anak-anak", d: "Paket ulang tahun bertema satwa: dekorasi, kue, animal encounter, dan goodie bag.", harga: "Mulai Rp3.500.000/paket", ic: "cake-candles" }
  ];
  return (
    <>
      <PageHead crumb="Beranda · Edukasi" title="Program Edukasi" sub="Belajar konservasi sambil bermain — program untuk sekolah, keluarga, dan komunitas." tone="green" />
      <section className="section">
        <div className="container">
          <div className="grid-2">
            {programs.map((p, i) => (
              <div key={i} className="card hoverable" style={{ padding: 32 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
                  <Icon name={p.ic} box="green" boxSize={56} fontSize={22} style={{ borderRadius: 16 }} />
                  <span className="chip yellow">{p.lvl}</span>
                </div>
                <h3 style={{ marginBottom: 10 }}>{p.t}</h3>
                <p style={{ color: "var(--ink-2)", fontSize: 14.5, lineHeight: 1.6 }}>{p.d}</p>
                <div style={{
                  marginTop: 20, paddingTop: 20,
                  borderTop: "1px solid var(--line)",
                  display: "flex", justifyContent: "space-between", alignItems: "center"
                }}>
                  <span style={{ fontWeight: 700, color: "var(--navy)" }}>{p.harga}</span>
                  <L to="kontak" className="btn btn-green btn-sm">Reservasi <i className="fa-solid fa-arrow-right"></i></L>
                </div>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 64, padding: 48,
            background: "var(--navy)", color: "white",
            borderRadius: "var(--r-xl)",
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center"
          }} className="edu-cta">
            <div>
              <div className="eyebrow" style={{ color: "var(--yellow)", marginBottom: 12 }}>UNTUK GURU</div>
              <h2 style={{ color: "white" }}>Bawa kelas Anda ke BatamZoo</h2>
              <p style={{ color: "#C9D6EF", marginTop: 16, fontSize: 16 }}>
                Kami menyediakan lesson plan siap pakai sesuai kurikulum Merdeka untuk
                jenjang SD–SMA. Hubungi tim edukasi minimal H-7.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
                <L to="kontak" className="btn btn-primary">Pesan Study Tour</L>
                <button className="btn btn-light">Unduh Brosur</button>
              </div>
            </div>
            <PH tint="blue" ratio="4/3" style={{ borderRadius: "var(--r-lg)" }} label="FOTO STUDY TOUR" />
          </div>
        </div>
      </section>
      <style>{`@media (max-width: 900px) { .edu-cta { grid-template-columns: 1fr !important; } }`}</style>
    </>
  );
}

function PageLokasi() {
  return (
    <>
      <PageHead crumb="Beranda · Lokasi" title="Lokasi & Akses" sub="Jl. Hang Lekiu KM 4, Nongsa, Batam. Mudah dijangkau dari bandara, pelabuhan, dan kawasan hotel." />
      <section className="section">
        <div className="container">
          <PH tint="blue" ratio="16/8" style={{ borderRadius: "var(--r-xl)", background: "white", marginBottom: 40 }}>
            <div style={{ textAlign: "center" }}>
              <Icon name="location-dot" box="blue-solid" boxSize={64} fontSize={26} className="ic-circle" style={{ margin: "0 auto 12px" }} />
              <div className="ph-label" style={{ display: "inline-block" }}>
                EMBED PETA — Jl. Hang Lekiu KM 4, Nongsa, Batam
              </div>
            </div>
          </PH>
          <div className="grid-3">
            <RouteCard icon="plane" from="Bandara Hang Nadim" time="35 menit" mode="Mobil / Taksi" />
            <RouteCard icon="ship" from="Ferry Terminal Batam Centre" time="25 menit" mode="Taksi / Grab" />
            <RouteCard icon="hotel" from="Kawasan Hotel Nongsa" time="10 menit" mode="Shuttle (PP)" />
            <RouteCard icon="car" from="Pusat Kota Batam (Nagoya)" time="40 menit" mode="Mobil" />
            <RouteCard icon="ship" from="Ferry Sekupang" time="50 menit" mode="Mobil / Taksi" />
            <RouteCard icon="bus" from="Halte Trans Batam Terdekat" time="5 menit jalan" mode="Bus + Jalan kaki" />
          </div>

          <div style={{ marginTop: 64 }}>
            <h2 style={{ marginBottom: 24 }}>Jam Operasional</h2>
            <div className="grid-2">
              <div className="card" style={{ padding: 32 }}>
                <h4 style={{ marginBottom: 16, fontSize: 18 }}>Hari Operasional</h4>
                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  {[
                    ["Senin – Kamis", "08:30 – 17:30 WIB"],
                    ["Jumat", "08:30 – 17:30 WIB"],
                    ["Sabtu", "08:00 – 18:00 WIB"],
                    ["Minggu & Libur Nasional", "08:00 – 18:00 WIB"]
                  ].map(([d, t]) => (
                    <div key={d} style={{ display: "flex", justifyContent: "space-between", paddingBottom: 12, borderBottom: "1px solid var(--line)" }}>
                      <span style={{ color: "var(--ink-2)" }}>{d}</span>
                      <span style={{ fontWeight: 700 }}>{t}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div className="card" style={{ padding: 32, background: "var(--yellow-soft)" }}>
                <h4 style={{ marginBottom: 16, fontSize: 18 }}>Tips Datang</h4>
                <ul style={{ paddingLeft: 18, color: "var(--navy-soft)", fontSize: 14.5, lineHeight: 1.8 }}>
                  <li>Datang pagi (08:30–10:00) untuk hindari panas siang.</li>
                  <li>Beli tiket online untuk fast-lane masuk.</li>
                  <li>Bawa topi, sunscreen, dan botol air minum.</li>
                  <li>Sepatu tertutup direkomendasikan untuk Zona Kanopi.</li>
                  <li>Pemesanan kereta keliling sebaiknya saat masuk gate.</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function PageKonservasi() {
  return (
    <>
      <PageHead crumb="Beranda · Konservasi" title="Program Konservasi" sub="Setiap tiket yang Anda beli, 5%-nya didedikasikan untuk pelestarian habitat asli satwa Nusantara." tone="green" />
      <section className="section">
        <div className="container">
          <div className="grid-3">
            {[
              { n: "2.4M", l: "Donasi 2025", c: "var(--green)" },
              { n: "12", l: "Program aktif", c: "var(--blue)" },
              { n: "47", l: "Satwa direhabilitasi", c: "#C58900" }
            ].map((s, i) => (
              <div key={i} className="card" style={{ padding: 32, textAlign: "center" }}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 48, color: s.c }}>{s.n}</div>
                <div style={{ color: "var(--ink-2)", fontSize: 15, marginTop: 4 }}>{s.l}</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 64 }}>
            <SectionHeader eyebrow="Program Aktif" title="Tiga fokus utama kami" />
            <div className="grid-3">
              {[
                { ic: "shield-halved", t: "Patroli Anti-Perburuan", d: "Mendukung tim BKSDA di lanskap Leuser & Kerinci-Seblat untuk patroli rutin." },
                { ic: "tree", t: "Reforestasi Bakau", d: "Menanam 10.000 pohon bakau di pesisir Batam untuk habitat buaya muara." },
                { ic: "dove", t: "Penangkaran Eks-situ", d: "Program penangkaran burung endemik untuk pelepasliaran di Papua & Sumba." }
              ].map((p, i) => (
                <div key={i} className="card" style={{ padding: 32 }}>
                  <Icon name={p.ic} box="green" boxSize={56} fontSize={22} style={{ borderRadius: 16, marginBottom: 14 }} />
                  <h4 style={{ marginBottom: 10, fontSize: 19 }}>{p.t}</h4>
                  <p style={{ color: "var(--ink-2)", fontSize: 14.5, margin: 0, lineHeight: 1.6 }}>{p.d}</p>
                </div>
              ))}
            </div>
          </div>

          <div style={{
            marginTop: 64, padding: "56px 48px",
            background: "linear-gradient(135deg, var(--green) 0%, var(--blue) 100%)",
            color: "white", borderRadius: "var(--r-xl)",
            textAlign: "center"
          }}>
            <h2 style={{ color: "white" }}>Ingin berdonasi lebih?</h2>
            <p style={{ fontSize: 18, opacity: 0.92, maxWidth: 540, margin: "16px auto 28px" }}>
              Setiap donasi langsung disalurkan ke program konservasi. Anda akan menerima laporan transparan tiap kuartal.
            </p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
              <button className="btn btn-primary btn-lg">Donasi Sekarang <i className="fa-solid fa-arrow-right"></i></button>
              <button className="btn btn-light btn-lg">Unduh Laporan 2025</button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { PageTentang, PageGaleri, PageFAQ, PageEdukasi, PageLokasi, PageKonservasi });