// ===== Page: Kontak Kami =====
function PageKontak() {
  const [form, setForm] = useState({ nama: "", email: "", topik: "umum", pesan: "" });
  const [sent, setSent] = useState(false);

  return (
    <>
      <PageHead
        crumb="Beranda · Kontak"
        title="Kontak Kami"
        sub="Tim kami siap membantu Senin–Minggu 08:00–18:00 WIB. Pertanyaan rombongan, kerjasama, atau lost & found."
      />

      <section className="section">
        <div className="container">
          <div className="grid-2">
            <div>
              <h2 style={{ marginBottom: 24 }}>Kirim pesan</h2>
              {sent ? (
                <div style={{
                  background: "var(--green-soft)", padding: 32,
                  borderRadius: "var(--r-lg)", textAlign: "center"
                }}>
                  <Icon name="check" box="green-solid" boxSize={64} fontSize={26} className="ic-circle" style={{ margin: "0 auto 16px" }} />
                  <h3 style={{ marginBottom: 8 }}>Pesan terkirim!</h3>
                  <p style={{ color: "var(--green-deep)", marginBottom: 20 }}>
                    Tim kami akan membalas dalam 1×24 jam ke email Anda.
                  </p>
                  <button className="btn btn-ghost" onClick={() => { setSent(false); setForm({ nama: "", email: "", topik: "umum", pesan: "" }); }}>
                    Kirim pesan lain
                  </button>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} className="card" style={{ padding: 32 }}>
                  <div className="field">
                    <label>Nama Lengkap *</label>
                    <input required value={form.nama} onChange={e => setForm({ ...form, nama: e.target.value })} />
                  </div>
                  <div className="field">
                    <label>Email *</label>
                    <input type="email" required value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} />
                  </div>
                  <div className="field">
                    <label>Topik *</label>
                    <select value={form.topik} onChange={e => setForm({ ...form, topik: e.target.value })}>
                      <option value="umum">Pertanyaan Umum</option>
                      <option value="rombongan">Tiket Rombongan & Sekolah</option>
                      <option value="kerjasama">Kerjasama / B2B</option>
                      <option value="media">Media & Press</option>
                      <option value="lost">Lost & Found</option>
                      <option value="komplain">Komplain / Saran</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Pesan Anda *</label>
                    <textarea required placeholder="Ceritakan apa yang bisa kami bantu..." value={form.pesan} onChange={e => setForm({ ...form, pesan: e.target.value })} />
                  </div>
                  <button type="submit" className="btn btn-primary btn-lg" style={{ width: "100%", justifyContent: "center" }}>
                    Kirim Pesan →
                  </button>
                </form>
              )}
            </div>

            <div>
              <h2 style={{ marginBottom: 24 }}>Informasi kontak</h2>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <ContactCard ic="location-dot" t="Alamat" lines={["Jl. Hang Lekiu KM 4", "Nongsa, Kota Batam", "Kepulauan Riau 29466"]} />
                <ContactCard ic="phone" t="Telepon" lines={["+62 778 711 2233 (Customer Care)", "+62 778 711 2244 (Reservasi Rombongan)"]} />
                <ContactCard ic="envelope" t="Email" lines={["halo@batamzoo.id", "rombongan@batamzoo.id (sekolah/grup)", "press@batamzoo.id (media)"]} />
                <ContactCard ic="clock" t="Jam Operasional Customer Care" lines={["Senin – Minggu: 08:00 – 18:00 WIB", "Respons WA dalam 30 menit (jam operasional)"]} />
                <ContactCard ic="comments" t="Media Sosial" lines={["@batamzoo.id (IG · TikTok)", "BatamZoo Official (YouTube · Facebook)"]} />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--cream-warm)" }}>
        <div className="container">
          <SectionHeader
            eyebrow="Lokasi"
            title="Mudah dijangkau dari mana saja di Batam"
            action={<a href="#" className="btn btn-blue">Buka di Google Maps <i className="fa-solid fa-arrow-right"></i></a>}
          />
          <PH
            tint="blue"
            ratio="16/7"
            style={{ borderRadius: "var(--r-xl)", background: "white" }}
          >
            <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" style={{ marginTop: 32 }}>
            <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)" />
          </div>
        </div>
      </section>
    </>
  );
}

function ContactCard({ ic, t, lines }) {
  return (
    <div className="card" style={{ padding: 24, display: "flex", gap: 16 }}>
      <Icon name={ic} box="yellow" boxSize={48} fontSize={20} style={{ borderRadius: 14 }} />
      <div>
        <div style={{ fontSize: 12, color: "var(--ink-2)", letterSpacing: ".08em", textTransform: "uppercase", fontWeight: 600, marginBottom: 6 }}>{t}</div>
        {lines.map((l, i) => (
          <div key={i} style={{ fontSize: 15, lineHeight: 1.6, color: "var(--navy)" }}>{l}</div>
        ))}
      </div>
    </div>
  );
}

function RouteCard({ icon, from, time, mode }) {
  return (
    <div className="card" style={{ padding: 24 }}>
      <Icon name={icon} box="blue" boxSize={48} fontSize={20} style={{ borderRadius: 14, marginBottom: 14 }} />
      <div style={{ fontSize: 12, color: "var(--ink-2)" }}>Dari</div>
      <div style={{ fontWeight: 700, fontSize: 17, marginBottom: 14 }}>{from}</div>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        paddingTop: 14, borderTop: "1px solid var(--line)"
      }}>
        <span style={{ fontSize: 13, color: "var(--ink-2)" }}>{mode}</span>
        <span style={{ fontWeight: 700, color: "var(--green-deep)" }}>± {time}</span>
      </div>
    </div>
  );
}

Object.assign(window, { PageKontak });