// ===== Page: Beranda (Home) =====
function PageBeranda() {
  return (
    <>
      <HeroSection />
      <QuickFacts />
      <ZonesSection />
      <HighlightFauna />
      <ExperiencePlan />
      <TicketsTeaser />
      <Testimonials />
      <CTAFinal />
    </>
  );
}

function HeroSection() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 10, marginBottom: 20 }}>
              <span className="chip green"><i className="fa-solid fa-leaf"></i> Konservasi Nusantara</span>
              <span className="chip yellow"><i className="fa-solid fa-star"></i> 4.8 / 5</span>
            </div>
            <h1>
              Jelajahi <strong>rimba</strong>, savana &amp;<br />
              kanopi <em>Indonesia</em> dalam<br />
              <span className="y">satu hari</span>.
            </h1>
            <p className="hero-sub">
              BatamZoo adalah rumah bagi 150+ satwa dari Sumatera hingga Papua —
              dirancang untuk pengalaman keluarga yang aman, edukatif, dan tidak terlupakan.
            </p>
            <div className="hero-cta">
              <L to="tiket" className="btn btn-primary btn-lg">
                Beli Tiket Mulai Rp65.000 →
              </L>
              <L to="fauna" className="btn btn-ghost btn-lg">
                Lihat 150+ Satwa
              </L>
            </div>
            <div className="hero-stats">
              <div className="hero-stat">
                <span className="n" style={{ color: "var(--blue)" }}>150+</span>
                <span className="l">Spesies satwa</span>
              </div>
              <div className="hero-stat">
                <span className="n" style={{ color: "var(--green)" }}>18 ha</span>
                <span className="l">Lahan hijau</span>
              </div>
              <div className="hero-stat">
                <span className="n" style={{ color: "#C58900" }}>6</span>
                <span className="l">Zona tematik</span>
              </div>
              <div className="hero-stat">
                <span className="n">12</span>
                <span className="l">Daily shows</span>
              </div>
            </div>
          </div>
          <div style={{ position: "relative" }}>
            <PH
              tint="green"
              ratio="4/5"
              style={{ borderRadius: "var(--r-xl)" }}
              label="HERO PHOTO — keluarga melihat gajah dari deck savana, golden hour"
            />
            {/* Floating cards */}
            <div className="card" style={{
              position: "absolute", left: -28, bottom: 64,
              padding: 16, width: 200, display: "flex", gap: 12, alignItems: "center"
            }}>
              <Icon name="shower" box="yellow-solid" boxSize={44} fontSize={20} className="ic-circle" />
              <div>
                <div style={{ fontWeight: 700, fontSize: 14 }}>Mandi Gajah</div>
                <div style={{ fontSize: 12, color: "var(--ink-2)" }}>Setiap pagi · 09:00</div>
              </div>
            </div>
            <div className="card" style={{
              position: "absolute", right: -20, top: 48,
              padding: 14, width: 220
            }}>
              <div style={{ fontSize: 12, color: "var(--ink-2)", marginBottom: 6 }}>Hari ini · Buka</div>
              <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 8 }}>08:30 — 17:30 WIB</div>
              <div style={{ display: "flex", gap: 4 }}>
                {[1, 2, 3, 4, 5].map(i => (
                  <div key={i} style={{
                    flex: 1, height: 6, borderRadius: 3,
                    background: i <= 3 ? "var(--green)" : "var(--blue-soft)"
                  }} />
                ))}
              </div>
              <div style={{ fontSize: 11, color: "var(--ink-2)", marginTop: 6 }}>Tingkat keramaian: Sedang</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function QuickFacts() {
  const items = [
    { ic: "ticket", t: "Tiket online", d: "Lewati antrean, scan langsung di gate" },
    { ic: "square-parking", t: "Parkir luas", d: "800 mobil + EV charging" },
    { ic: "wheelchair", t: "Ramah difabel", d: "Jalur kursi roda di semua zona" },
    { ic: "utensils", t: "Halal", d: "Sertifikasi MUI untuk semua resto" }
  ];
  return (
    <section style={{ padding: "0 0 24px" }}>
      <div className="container">
        <div style={{
          background: "white",
          borderRadius: "var(--r-lg)",
          padding: "28px 32px",
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 24,
          boxShadow: "var(--shadow)",
          border: "1px solid var(--line)"
        }} className="quick-facts">
          {items.map((it, i) => (
            <div key={i} style={{ display: "flex", gap: 14, alignItems: "center" }}>
              <Icon name={it.ic} box="cream" boxSize={48} fontSize={20} />
              <div>
                <div style={{ fontWeight: 700, fontSize: 15 }}>{it.t}</div>
                <div style={{ fontSize: 13, color: "var(--ink-2)" }}>{it.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .quick-facts { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 560px) {
          .quick-facts { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function ZonesSection() {
  return (
    <section className="section">
      <div className="container">
        <SectionHeader
          eyebrow="6 Zona Tematik"
          title="Setiap zona, dunia tersendiri"
          sub="Berjalanlah dari savana terbuka hingga kanopi hutan hujan, dilengkapi keeper-talk reguler dan area interaktif."
          action={<L to="fasilitas" className="btn btn-ghost">Peta lengkap <i className="fa-solid fa-arrow-right"></i></L>}
        />
        <div className="grid-3">
          {ZONES.map((z, i) => (
            <div key={i} className="card hoverable" style={{ padding: 28 }}>
              <Icon
                name={z.icon}
                box={z.warna}
                boxSize={64}
                fontSize={28}
                style={{ borderRadius: 18, marginBottom: 20 }}
              />
              <h3 style={{ marginBottom: 10 }}>{z.nama}</h3>
              <p style={{ color: "var(--ink-2)", fontSize: 14.5, margin: 0 }}>{z.isi}</p>
              <L to="fauna" style={{
                marginTop: 18, display: "inline-flex", alignItems: "center", gap: 6,
                fontWeight: 600, fontSize: 14, color: "var(--blue)"
              }}>
                Lihat satwa di zona ini <i className="fa-solid fa-arrow-right"></i>
              </L>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HighlightFauna() {
  const highlights = FAUNA.slice(0, 4);
  return (
    <section className="section" style={{ background: "var(--cream-warm)", borderRadius: 0 }}>
      <div className="container">
        <SectionHeader
          eyebrow="Bintang BatamZoo"
          title="Bertemu fauna langka Nusantara"
          sub="Empat dari 150+ koleksi satwa kami — masing-masing punya cerita konservasi tersendiri."
          action={<L to="fauna" className="btn btn-blue">Semua Fauna <i className="fa-solid fa-arrow-right"></i></L>}
        />
        <div className="grid-4">
          {highlights.map(f => (
            <FaunaCard key={f.slug} fauna={f} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FaunaCard({ fauna }) {
  return (
    <L to={"fauna/" + fauna.slug} className="card hoverable fauna-card">
      <PH
        tint={fauna.kelas === "Aves" ? "blue" : fauna.kelas === "Reptil" ? "green" : "yellow"}
        ratio="4/3"
        style={{ borderRadius: 0, borderLeft: 0, borderRight: 0, borderTop: 0 }}
        label={"FOTO " + fauna.nama.toUpperCase()}
      />
      <div className="fauna-meta">
        <h3>{fauna.nama}</h3>
        <div className="latin">{fauna.latin}</div>
        <div className="fauna-tags">
          <span className="chip green">{fauna.kelas}</span>
          <span className="chip yellow">{fauna.konservasi}</span>
        </div>
      </div>
    </L>
  );
}

function ExperiencePlan() {
  const items = [
    { t: "Tiba & Check-in", d: "08:30 — Pintu Utama Hang Lekiu. Scan QR, ambil ID Band anak." , ic: "1"},
    { t: "Pagi: Zona Savana", d: "09:00 — Mandi gajah, foto bareng zebra & rusa." , ic: "2"},
    { t: "Edu Center", d: "10:30 — Keeper talk konservasi Sumatera." , ic: "3"},
    { t: "Makan Siang", d: "12:00 — Savanna Resto dengan view jerapah." , ic: "4"},
    { t: "Sore: Aviary & Reptil", d: "14:00 — Walk-in aviary, feeding komodo 13:00." , ic: "5"},
    { t: "Souvenir & Pulang", d: "16:30 — Rimba Souvenir Shop, exit melalui photo zone." , ic: "6"}
  ];
  return (
    <section className="section">
      <div className="container">
        <SectionHeader
          eyebrow="Rencanakan Hari Anda"
          title="Itinerary 1 hari di BatamZoo"
          sub="Saran rute dari tim BatamZoo. Bisa dimulai dari zona manapun — peta tersedia di gate."
        />
        <div className="grid-3">
          {items.map((it, i) => (
            <div key={i} className="card" style={{ padding: 28, position: "relative" }}>
              <div style={{
                position: "absolute", top: 24, right: 24,
                width: 36, height: 36, borderRadius: "50%",
                background: "var(--navy)", color: "var(--yellow)",
                display: "grid", placeItems: "center", fontWeight: 800,
                fontFamily: "var(--font-display)"
              }}>{it.ic}</div>
              <h4 style={{ marginBottom: 8, paddingRight: 48 }}>{it.t}</h4>
              <p style={{ margin: 0, fontSize: 14.5, color: "var(--ink-2)" }}>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TicketsTeaser() {
  return (
    <section className="section" style={{ background: "var(--navy)", color: "white" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }} className="teaser-grid">
          <div>
            <div className="eyebrow" style={{ color: "var(--yellow)", marginBottom: 16 }}>TIKET ONLINE</div>
            <h2 style={{ color: "white", marginBottom: 20 }}>
              Lewati antrean.<br />
              Hemat hingga <span style={{ color: "var(--yellow)" }}>23%</span>.
            </h2>
            <p style={{ color: "#B9C7DE", fontSize: 18, maxWidth: 460 }}>
              Pesan tiket online minimum 1 jam sebelum kunjungan, scan QR di gate utama,
              dan langsung masuk ke fast-lane khusus.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
              <L to="tiket" className="btn btn-primary btn-lg">Beli Tiket <i className="fa-solid fa-arrow-right"></i></L>
              <L to="faq" className="btn btn-light btn-lg">Cek FAQ</L>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {TICKETS.slice(0, 3).map((t, i) => (
              <div key={i} style={{
                background: t.featured ? "var(--yellow)" : "rgba(255,255,255,0.06)",
                color: t.featured ? "var(--navy)" : "white",
                borderRadius: 16, padding: 22,
                display: "flex", justifyContent: "space-between", alignItems: "center",
                border: "1px solid " + (t.featured ? "transparent" : "rgba(255,255,255,0.12)")
              }}>
                <div>
                  <div style={{ fontSize: 13, opacity: t.featured ? 0.7 : 0.6, marginBottom: 4 }}>
                    {t.featured ? <><i className="fa-solid fa-star"></i> Paling Hemat</> : t.cat === "weekday" ? "Weekday" : "Weekend"}
                  </div>
                  <div style={{ fontWeight: 700, fontSize: 17 }}>{t.nama}</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div style={{
                    fontFamily: "var(--font-display)",
                    fontWeight: 700, fontSize: 24
                  }}>{rupiah(t.harga)}</div>
                  {t.asli && (
                    <div style={{ fontSize: 12, textDecoration: "line-through", opacity: 0.6 }}>
                      {rupiah(t.asli)}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .teaser-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
    </section>
  );
}

function Testimonials() {
  const reviews = [
    { name: "Putri & Keluarga", from: "Tanjung Pinang", text: "Pertama kali ajak anak-anak ke BatamZoo, mereka betah seharian. Edu Center-nya membuat anak saya tertarik sains konservasi.", stars: 5 },
    { name: "Mr. Tan", from: "Singapore", text: "Easily one of the most well-organised zoos in the region. Halal F&B and clean facilities — perfect for a day trip from Singapore via ferry.", stars: 5 },
    { name: "Komunitas Foto Batam", from: "Batam", text: "Spot fotonya banyak dan estetik. Aviary walk-in jadi favorit kami karena bisa dekat dengan rangkong tanpa kaca penghalang.", stars: 5 }
  ];
  return (
    <section className="section">
      <div className="container">
        <SectionHeader
          eyebrow="Suara Pengunjung"
          title="500+ ulasan bintang 5 tahun ini"
          align="center"
        />
        <div className="grid-3">
          {reviews.map((r, i) => (
            <div key={i} className="card" style={{ padding: 28 }}>
              <div style={{ color: "var(--yellow)", fontSize: 18, marginBottom: 14 }}>
                {Array.from({length: r.stars}).map((_,k) => <i key={k} className="fa-solid fa-star"></i>)}
              </div>
              <p style={{ fontSize: 16, color: "var(--navy)", lineHeight: 1.6, marginTop: 0 }}>
                "{r.text}"
              </p>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--line)" }}>
                <div style={{
                  width: 40, height: 40, borderRadius: "50%",
                  background: "var(--cream-warm)", display: "grid", placeItems: "center",
                  fontWeight: 700, fontSize: 14, color: "var(--navy)"
                }}>{r.name[0]}</div>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>{r.name}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-2)" }}>{r.from}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTAFinal() {
  return (
    <section style={{ padding: "0 0 80px" }}>
      <div className="container">
        <div style={{
          background: "linear-gradient(135deg, var(--blue) 0%, var(--green) 100%)",
          borderRadius: "var(--r-xl)",
          padding: "64px 56px",
          color: "white",
          position: "relative",
          overflow: "hidden"
        }}>
          <div style={{
            position: "absolute", right: -80, top: -80,
            width: 360, height: 360, borderRadius: "50%",
            background: "rgba(255,199,59,0.25)"
          }}></div>
          <div style={{
            position: "absolute", right: 80, bottom: -120,
            width: 240, height: 240, borderRadius: "50%",
            background: "rgba(255,255,255,0.1)"
          }}></div>
          <div style={{ position: "relative", zIndex: 2, maxWidth: 640 }}>
            <h2 style={{ color: "white", marginBottom: 16 }}>
              Siap untuk petualangan rimba Anda?
            </h2>
            <p style={{ fontSize: 19, opacity: 0.92, marginBottom: 32 }}>
              Tiket online berlaku 14 hari. Bisa dijadwal ulang H-1 tanpa biaya.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <L to="tiket" className="btn btn-primary btn-lg">Beli Tiket Sekarang <i className="fa-solid fa-arrow-right"></i></L>
              <L to="kontak" className="btn btn-light btn-lg">Hubungi Tim Kami</L>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PageBeranda });