// ===== Page: Fasilitas =====
function PageFasilitas({ slug }) {
  if (slug) {
    const fas = FASILITAS.find(f => f.slug === slug);
    if (!fas) return <NotFound />;
    return <FasilitasDetail fas={fas} />;
  }
  return <FasilitasList />;
}

function FasilitasList() {
  const [cat, setCat] = useState("Semua");
  const kategoris = ["Semua", ...new Set(FASILITAS.map(f => f.kategori))];
  const filtered = cat === "Semua" ? FASILITAS : FASILITAS.filter(f => f.kategori === cat);
  return (
    <>
      <PageHead
        crumb="Beranda · Fasilitas"
        title="Fasilitas BatamZoo"
        sub="12+ fasilitas pendukung agar liburan keluarga Anda nyaman, aman, dan menyenangkan dari pagi sampai sore."
        tone="yellow"
      />
      <section className="section">
        <div className="container">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 36 }}>
            {kategoris.map(k => (
              <button
                key={k}
                onClick={() => setCat(k)}
                className={"btn " + (cat === k ? "btn-blue" : "btn-ghost")}
                style={{ padding: "10px 18px", fontSize: 14 }}
              >{k}</button>
            ))}
          </div>
          <div className="grid-3">
            {filtered.map(fas => (
              <L key={fas.slug} to={"fasilitas/" + fas.slug} className="card hoverable" style={{ padding: 0, display: "block" }}>
                <PH
                  tint={fas.kategori === "Kuliner" ? "yellow" :
                        fas.kategori === "Edukasi" ? "blue" : "green"}
                  ratio="16/10"
                  style={{ borderRadius: 0, border: 0 }}
                  label={"FOTO " + fas.nama.toUpperCase()}
                />
                <div style={{ padding: 24 }}>
                  <span className="chip blue" style={{ marginBottom: 12 }}>{fas.kategori}</span>
                  <h3 style={{ marginTop: 8, marginBottom: 8 }}>{fas.nama}</h3>
                  <p style={{ fontSize: 14.5, color: "var(--ink-2)", margin: 0, lineHeight: 1.55 }}>
                    {fas.deskripsi.substring(0, 110)}…
                  </p>
                  <div style={{
                    marginTop: 18, paddingTop: 18,
                    borderTop: "1px solid var(--line)",
                    display: "flex", justifyContent: "space-between", alignItems: "center"
                  }}>
                    <span style={{ fontSize: 12, color: "var(--ink-2)" }}><i className="fa-regular fa-clock"></i> {fas.jam}</span>
                    <span style={{ fontSize: 13, fontWeight: 600, color: "var(--blue)" }}>Detail <i className="fa-solid fa-arrow-right"></i></span>
                  </div>
                </div>
              </L>
            ))}
          </div>
        </div>
      </section>

      <MapSection />
    </>
  );
}

function FasilitasDetail({ fas }) {
  const tint = fas.kategori === "Kuliner" ? "yellow" :
               fas.kategori === "Edukasi" ? "blue" : "green";
  const related = FASILITAS.filter(f => f.slug !== fas.slug).slice(0, 3);
  return (
    <>
      <section style={{ background: "var(--yellow-soft)", padding: "40px 0 24px" }}>
        <div className="container">
          <div style={{ fontSize: 13, color: "#7A5400", fontWeight: 500, marginBottom: 0, display: "flex", gap: 8 }}>
            <L to="beranda">Beranda</L><span>›</span>
            <L to="fasilitas">Fasilitas</L><span>›</span>
            <span style={{ color: "var(--navy)" }}>{fas.nama}</span>
          </div>
        </div>
      </section>

      <section style={{ padding: "32px 0", background: "var(--yellow-soft)" }}>
        <div className="container">
          <div className="detail-grid">
            <PH
              tint={tint}
              ratio="5/4"
              style={{ borderRadius: "var(--r-xl)" }}
              label={"FOTO " + fas.nama.toUpperCase()}
            />
            <div>
              <span className="chip dark" style={{ marginBottom: 16 }}>{fas.kategori}</span>
              <h1 style={{ fontSize: "clamp(36px, 4.5vw, 52px)", marginBottom: 16, marginTop: 12 }}>{fas.nama}</h1>
              <p className="lead" style={{ marginBottom: 28 }}>{fas.deskripsi}</p>

              <div style={{
                background: "white", borderRadius: "var(--r-lg)",
                padding: 24, border: "1px solid var(--line)",
                marginBottom: 24
              }}>
                <div style={{
                  display: "flex", gap: 16, alignItems: "center",
                  paddingBottom: 16, marginBottom: 16,
                  borderBottom: "1px solid var(--line)"
                }}>
                  <Icon name="clock" box="green" boxSize={44} fontSize={18} style={{ borderRadius: 12 }} />
                  <div>
                    <div style={{ fontSize: 12, color: "var(--ink-2)" }}>Jam Operasional</div>
                    <div style={{ fontWeight: 700 }}>{fas.jam}</div>
                  </div>
                </div>
                <div style={{ fontSize: 13, color: "var(--ink-2)", marginBottom: 12, fontWeight: 600 }}>FITUR & FASILITAS</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                  {fas.fitur.map((f, i) => (
                    <li key={i} style={{ display: "flex", gap: 10, fontSize: 14.5, alignItems: "flex-start" }}>
                      <i className="fa-solid fa-circle-check" style={{ color: "var(--green)", marginTop: 4 }}></i>
                      {f}
                    </li>
                  ))}
                </ul>
              </div>

              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <L to="tiket" className="btn btn-primary">Beli Tiket <i className="fa-solid fa-arrow-right"></i></L>
                <button className="btn btn-ghost">{fas.cta}</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Fasilitas Lain" title="Eksplor fasilitas lainnya" />
          <div className="grid-3">
            {related.map(f => (
              <L key={f.slug} to={"fasilitas/" + f.slug} className="card hoverable">
                <PH
                  tint={f.kategori === "Kuliner" ? "yellow" : f.kategori === "Edukasi" ? "blue" : "green"}
                  ratio="16/10"
                  style={{ borderRadius: 0, border: 0 }}
                  label={f.nama.toUpperCase()}
                />
                <div style={{ padding: 20 }}>
                  <span className="chip yellow" style={{ marginBottom: 8 }}>{f.kategori}</span>
                  <h4 style={{ marginTop: 10, fontSize: 18 }}>{f.nama}</h4>
                </div>
              </L>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function MapSection() {
  return (
    <section className="section" style={{ background: "var(--blue-soft)" }}>
      <div className="container">
        <SectionHeader
          eyebrow="Peta BatamZoo"
          title="Tata letak 18 hektar"
          sub="Peta interaktif dengan 6 zona dan 12+ fasilitas. Unduh PDF untuk dibawa saat kunjungan."
          action={<button className="btn btn-blue">Unduh Peta (PDF)</button>}
        />
        <PH
          tint="blue"
          ratio="16/8"
          style={{ borderRadius: "var(--r-xl)", background: "white", border: "1px solid var(--line)" }}
        >
          <div style={{ textAlign: "center" }}>
            <Icon name="map-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" }}>
              PETA INTERAKTIF — 18 ha · 6 zona · 12+ fasilitas
            </div>
          </div>
        </PH>
      </div>
    </section>
  );
}

Object.assign(window, { PageFasilitas, MapSection });