// ===== Page: Fauna (List + Detail) =====
function PageFauna({ slug }) {
  if (slug) {
    const fauna = FAUNA.find(f => f.slug === slug);
    if (!fauna) return <NotFound />;
    return <FaunaDetail fauna={fauna} />;
  }
  return <FaunaList />;
}

function FaunaList() {
  const [filter, setFilter] = useState("Semua");
  const [search, setSearch] = useState("");
  const classes = ["Semua", "Mamalia", "Aves", "Reptil"];
  const filtered = FAUNA.filter(f =>
    (filter === "Semua" || f.kelas === filter) &&
    (search === "" || f.nama.toLowerCase().includes(search.toLowerCase()) ||
     f.latin.toLowerCase().includes(search.toLowerCase()))
  );
  return (
    <>
      <PageHead
        crumb="Beranda · Fauna"
        title="Detail Fauna BatamZoo"
        sub="150+ satwa Nusantara & dunia. Klik salah satu untuk melihat habitat, konservasi, dan jadwal showtime."
        tone="green"
      />
      <section className="section">
        <div className="container">
          {/* Filter bar */}
          <div style={{
            display: "flex", justifyContent: "space-between",
            alignItems: "center", marginBottom: 36, flexWrap: "wrap", gap: 16
          }}>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {classes.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={{ position: "relative", minWidth: 260 }}>
              <input
                placeholder="Cari satwa..."
                value={search}
                onChange={e => setSearch(e.target.value)}
                style={{
                  width: "100%", padding: "12px 16px 12px 42px",
                  borderRadius: 999, border: "1px solid var(--line)",
                  fontFamily: "inherit", fontSize: 14, background: "white"
                }}
              />
              <i className="fa-solid fa-magnifying-glass" style={{
                position: "absolute", left: 16, top: "50%",
                transform: "translateY(-50%)", color: "var(--ink-2)"
              }}></i>
            </div>
          </div>

          <div style={{ fontSize: 13, color: "var(--ink-2)", marginBottom: 24 }}>
            Menampilkan {filtered.length} satwa
          </div>

          <div className="grid-4">
            {filtered.map(f => <FaunaCard key={f.slug} fauna={f} />)}
          </div>

          {filtered.length === 0 && (
            <div style={{ textAlign: "center", padding: 80, color: "var(--ink-2)" }}>
              Tidak ada satwa yang cocok dengan pencarian Anda.
            </div>
          )}
        </div>
      </section>
    </>
  );
}

function FaunaDetail({ fauna }) {
  const related = FAUNA.filter(f => f.kelas === fauna.kelas && f.slug !== fauna.slug).slice(0, 3);
  return (
    <>
      <section style={{ background: "var(--green-soft)", padding: "40px 0 24px" }}>
        <div className="container">
          <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--green-deep)", fontWeight: 500, marginBottom: 20 }}>
            <L to="beranda">Beranda</L>
            <span>›</span>
            <L to="fauna">Fauna</L>
            <span>›</span>
            <span style={{ color: "var(--navy)" }}>{fauna.nama}</span>
          </div>
        </div>
      </section>

      <section style={{ padding: "32px 0 24px", background: "var(--green-soft)" }}>
        <div className="container">
          <div className="detail-grid">
            <div>
              <PH
                tint="green"
                ratio="5/4"
                style={{ borderRadius: "var(--r-xl)" }}
                label={"FOTO UTAMA " + fauna.nama.toUpperCase()}
              />
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginTop: 12 }}>
                {[1, 2, 3].map(i => (
                  <PH key={i} tint="green" ratio="4/3" style={{ borderRadius: var_r() }} label={"FOTO " + i} />
                ))}
              </div>
            </div>
            <div>
              <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
                <span className="chip dark">{fauna.zona}</span>
                <span className="chip yellow">{fauna.konservasi}</span>
              </div>
              <h1 style={{ fontSize: "clamp(36px, 4.5vw, 52px)", marginBottom: 8 }}>{fauna.nama}</h1>
              <div style={{ fontStyle: "italic", color: "var(--ink-2)", fontSize: 17, marginBottom: 24 }}>{fauna.latin}</div>
              <p className="lead" style={{ marginBottom: 28 }}>{fauna.deskripsi}</p>

              <div style={{
                background: "white", borderRadius: "var(--r-lg)",
                padding: "8px 24px", border: "1px solid var(--line)"
              }}>
                <KV k="Kelas" v={fauna.kelas} />
                <KV k="Habitat asli" v={fauna.habitat} />
                <KV k="Diet" v={fauna.diet} />
                <KV k="Panjang/Tinggi" v={fauna.panjang} />
                <KV k="Berat" v={fauna.berat} />
                <KV k="Umur" v={fauna.umur} />
                <KV k="Populasi liar" v={fauna.populasi} last />
              </div>

              <div style={{
                marginTop: 24,
                padding: 20,
                background: "var(--yellow-soft)",
                borderRadius: "var(--r-lg)",
                display: "flex", gap: 16, alignItems: "center"
              }}>
                <Icon name="clapperboard" box="yellow-solid" boxSize={52} fontSize={22} style={{ borderRadius: 14 }} />
                <div>
                  <div style={{ fontSize: 12, color: "#7A5400", fontWeight: 600, letterSpacing: ".08em" }}>SHOWTIME</div>
                  <div style={{ fontWeight: 700, fontSize: 16 }}>{fauna.showtime}</div>
                </div>
              </div>

              <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
                <L to="tiket" className="btn btn-primary">Beli Tiket untuk Bertemu <i className="fa-solid fa-arrow-right"></i></L>
                <L to="fauna" className="btn btn-ghost"><i className="fa-solid fa-arrow-left"></i> Kembali</L>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="grid-2">
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Tahukah Anda?</div>
              <h2 style={{ marginBottom: 28 }}>3 fakta menarik</h2>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {fauna.fakta.map((f, i) => (
                  <div key={i} style={{
                    display: "flex", gap: 16, padding: 20,
                    background: "white", borderRadius: "var(--r-lg)",
                    border: "1px solid var(--line)"
                  }}>
                    <div style={{
                      width: 36, height: 36, borderRadius: "50%", flexShrink: 0,
                      background: "var(--blue)", color: "var(--yellow)",
                      display: "grid", placeItems: "center", fontWeight: 800, fontSize: 14,
                      fontFamily: "var(--font-display)"
                    }}>{i + 1}</div>
                    <p style={{ margin: 0, fontSize: 15.5, color: "var(--navy)" }}>{f}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Konservasi</div>
              <h2 style={{ marginBottom: 28 }}>Status: {fauna.konservasi}</h2>
              <div style={{
                background: "var(--navy)", color: "white",
                borderRadius: "var(--r-lg)", padding: 32,
                position: "relative", overflow: "hidden"
              }}>
                <div style={{
                  position: "absolute", top: -40, right: -40,
                  width: 200, height: 200, borderRadius: "50%",
                  background: "rgba(255,199,59,0.15)"
                }}></div>
                <div style={{ position: "relative", zIndex: 2 }}>
                  <p style={{ fontSize: 16, lineHeight: 1.7, color: "#D6E0F0", marginTop: 0 }}>
                    BatamZoo berpartisipasi dalam program konservasi eks-situ bersama BKSDA Kepulauan Riau.
                    5% dari setiap tiket Anda dialokasikan untuk program pelestarian habitat asli {fauna.nama}.
                  </p>
                  <div style={{
                    display: "flex", gap: 16, marginTop: 24,
                    paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.12)"
                  }}>
                    <div>
                      <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 32, color: "var(--yellow)" }}>5%</div>
                      <div style={{ fontSize: 12, color: "#B9C7DE" }}>dari tiap tiket</div>
                    </div>
                    <div>
                      <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 32, color: "var(--yellow)" }}>2.4M</div>
                      <div style={{ fontSize: 12, color: "#B9C7DE" }}>donasi 2025</div>
                    </div>
                  </div>
                  <L to="konservasi" style={{
                    marginTop: 24, display: "inline-flex", alignItems: "center",
                    gap: 6, color: "var(--yellow)", fontWeight: 600, fontSize: 14
                  }}>
                    Dukung program konservasi <i className="fa-solid fa-arrow-right"></i>
                  </L>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {related.length > 0 && (
        <section className="section" style={{ background: "var(--cream-warm)", paddingTop: 64 }}>
          <div className="container">
            <SectionHeader
              eyebrow="Satwa Serupa"
              title={"Lainnya dari kelas " + fauna.kelas}
              action={<L to="fauna" className="btn btn-ghost">Semua fauna <i className="fa-solid fa-arrow-right"></i></L>}
            />
            <div className="grid-3">
              {related.map(f => <FaunaCard key={f.slug} fauna={f} />)}
            </div>
          </div>
        </section>
      )}
    </>
  );
}

function KV({ k, v, last }) {
  return (
    <div className="kv-row" style={last ? { borderBottom: "none" } : {}}>
      <div className="k">{k}</div>
      <div className="v">{v}</div>
    </div>
  );
}

function var_r() {
  return "var(--r-lg)";
}

function NotFound() {
  return (
    <section className="section">
      <div className="container" style={{ textAlign: "center", padding: 80 }}>
        <h1>404</h1>
        <p className="lead">Halaman tidak ditemukan.</p>
        <L to="beranda" className="btn btn-primary">Kembali ke Beranda</L>
      </div>
    </section>
  );
}

Object.assign(window, { PageFauna, FaunaCard, NotFound });