function Contact() {
  const [form, setForm] = React.useState({
    school: "", contact: "", role: "", phone: "", email: "", location: "", program: "", message: "",
  });
  const [submitted, setSubmitted] = React.useState(false);

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const onSubmit = (e) => {
    e.preventDefault();
    
    const whatsappMessage = `Halo GH Gambit, saya ingin mendiskusikan kerja sama sekolah.

*Detail Informasi:*
• Nama Sekolah: ${form.school}
• Nama Kontak: ${form.contact}
• Jabatan/Peran: ${form.role || "-"}
• WhatsApp: ${form.phone}
• Email: ${form.email}
• Lokasi: ${form.location || "-"}

*Pesan:*
${form.message || "-"}

Terima kasih.`;

    const encodedMessage = encodeURIComponent(whatsappMessage);
    const whatsappUrl = `https://wa.me/6281398699869?text=${encodedMessage}`;
    
    // Open WhatsApp in a new tab
    window.open(whatsappUrl, "_blank");
    
    // Show success message on the website
    setSubmitted(true);
  };

  return (
    <main className="page-enter" data-screen-label="Contact">
      <PageHeader
        number="06"
        eyebrow="Kontak"
        title="Bawa Pengembangan Basket Profesional ke Sekolah Anda."
        subtitle="Hubungi GH Gambit Basketball Club untuk mendiskusikan bagaimana GH Gambit School Development dapat membantu mengembangkan program basket di sekolah Anda."
      />

      <section className="section" style={{ paddingTop: 40, paddingBottom: 60 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.3fr", gap: 60, alignItems: "start" }} className="contact-grid">
            {/* LEFT — Contact info */}
            <div>
              <Reveal>
                <div style={{ position: "sticky", top: 120 }}>
                  <p className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal)", margin: "0 0 18px 0" }}>HUBUNGI LANGSUNG</p>

                  <div style={{ display: "flex", flexDirection: "column", gap: 4, borderTop: "1px solid var(--line)" }}>
                    <div style={{ padding: "22px 0", borderBottom: "1px solid var(--line)" }}>
                      <p className="mono" style={{ margin: 0, fontSize: 10, letterSpacing: "0.22em", color: "var(--fg-muted)" }}>WHATSAPP</p>
                      <a href="https://wa.me/6281398699869" target="_blank" rel="noreferrer" className="display" style={{ display: "block", marginTop: 8, fontSize: 36, color: "var(--fg)" }}>
                        0813 9869 9869
                      </a>
                    </div>
                    <div style={{ padding: "22px 0", borderBottom: "1px solid var(--line)" }}>
                      <p className="mono" style={{ margin: 0, fontSize: 10, letterSpacing: "0.22em", color: "var(--fg-muted)" }}>EMAIL</p>
                      <a href="mailto:ghgambit.basketball@gmail.com" style={{ display: "block", marginTop: 8, fontSize: 17, color: "var(--fg)", wordBreak: "break-all" }}>
                        ghgambit.basketball@gmail.com
                      </a>
                    </div>
                    <div style={{ padding: "22px 0", borderBottom: "1px solid var(--line)" }}>
                      <p className="mono" style={{ margin: 0, fontSize: 10, letterSpacing: "0.22em", color: "var(--fg-muted)" }}>MARKAS PUSAT</p>
                      <p style={{ margin: "8px 0 0", fontSize: 16, color: "var(--fg)", lineHeight: 1.55 }}>
                        <strong style={{ color: "var(--burgundy)" }}>Gelora Hady Depok</strong><br />
                        Tempat Latihan Utama Pemain Klub<br />
                        Kota Depok, Jawa Barat
                      </p>
                      <a
                        href="https://maps.app.goo.gl/ZCxHBaHVf2J2UoU27"
                        target="_blank"
                        rel="noreferrer"
                        style={{ display: "inline-block", marginTop: 12, color: "var(--teal)", fontSize: 13, fontWeight: 600, borderBottom: "1px solid var(--teal)" }}
                      >
                        Buka di Google Maps ↗
                      </a>
                    </div>
                    <div style={{ padding: "22px 0", borderBottom: "1px solid var(--line)" }}>
                      <p className="mono" style={{ margin: 0, fontSize: 10, letterSpacing: "0.22em", color: "var(--fg-muted)" }}>JAM RESPON</p>
                      <p style={{ margin: "8px 0 0", fontSize: 16, color: "var(--fg)", lineHeight: 1.55 }}>
                        Senin – Sabtu<br />09:00 – 21:00 WIB
                      </p>
                    </div>
                    <div style={{ padding: "22px 0" }}>
                      <p className="mono" style={{ margin: 0, fontSize: 10, letterSpacing: "0.22em", color: "var(--fg-muted)" }}>INSTAGRAM</p>
                      <a href="https://www.instagram.com/ghgambit.basketball/" target="_blank" rel="noreferrer" style={{ display: "block", marginTop: 8, fontSize: 17, color: "var(--fg)", fontWeight: 600 }}>
                        @ghgambit.basketball
                      </a>
                    </div>
                  </div>

                  <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 12 }}>
                    <Button variant="teal" href="https://wa.me/6281398699869" target="_blank">Hubungi via WhatsApp</Button>
                    <Button variant="primary" href="https://www.instagram.com/ghgambit.basketball/" target="_blank">Follow Instagram</Button>
                  </div>
                </div>
              </Reveal>
            </div>

            {/* RIGHT — Form */}
            <Reveal delay={120}>
              <div style={{ border: "1px solid var(--line-strong)", background: "var(--bg-elev)", padding: 36, position: "relative", overflow: "hidden" }}>
                <span className="watermark" style={{ fontSize: 180, right: -30, top: -30, color: "var(--fg)" }}>FORM</span>

                <div style={{ position: "relative" }}>
                  <p className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal)", margin: "0 0 8px" }}>CONSULTATION FORM</p>
                  <h2 className="h2" style={{ margin: 0 }}>Diskusikan kerja sama dengan sekolah Anda.</h2>

                  {submitted ? (
                    <div style={{ marginTop: 40, padding: 28, border: "1px solid var(--teal)", background: "rgba(20,184,166,0.08)", display: "flex", gap: 18, alignItems: "flex-start" }}>
                      <span style={{ flex: "0 0 auto", width: 36, height: 36, border: "1px solid var(--teal)", color: "var(--teal)", display: "grid", placeItems: "center" }}>
                        <svg width="14" height="11" viewBox="0 0 14 11" stroke="currentColor" strokeWidth="1.6" fill="none">
                          <path d="M1 5.5 L5 9.5 L13 1" />
                        </svg>
                      </span>
                      <div>
                        <p className="mono" style={{ margin: 0, fontSize: 10, letterSpacing: "0.22em", color: "var(--teal)" }}>SENT</p>
                        <p style={{ margin: "10px 0 0", fontSize: 16, lineHeight: 1.6, color: "var(--fg)" }}>
                          Terima kasih. Tim kami akan menghubungi Anda untuk mendiskusikan peluang kerja sama sekolah.
                        </p>
                        <button
                          onClick={() => { setSubmitted(false); setForm({ school: "", contact: "", role: "", phone: "", email: "", location: "", program: "", message: "" }); }}
                          style={{ marginTop: 18, background: "transparent", border: "none", color: "var(--teal)", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", cursor: "pointer", padding: 0 }}
                        >
                          Kirim Pesan Lain →
                        </button>
                      </div>
                    </div>
                  ) : (
                    <form onSubmit={onSubmit} style={{ marginTop: 32, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="form-grid">
                      <div style={{ gridColumn: "1 / -1" }}>
                        <label>Nama Sekolah *</label>
                        <input required type="text" value={form.school} onChange={update("school")} placeholder="SMA / SMP / Sekolah Anda" />
                      </div>
                      <div>
                        <label>Nama Kontak *</label>
                        <input required type="text" value={form.contact} onChange={update("contact")} placeholder="Nama lengkap" />
                      </div>
                      <div>
                        <label>Jabatan / Peran</label>
                        <input type="text" value={form.role} onChange={update("role")} placeholder="Kepala Sekolah / Pembina / Yayasan" />
                      </div>
                      <div>
                        <label>Nomor WhatsApp *</label>
                        <input required type="tel" value={form.phone} onChange={update("phone")} placeholder="0812 xxxx xxxx" />
                      </div>
                      <div>
                        <label>Email *</label>
                        <input required type="email" value={form.email} onChange={update("email")} placeholder="sekolah@email.com" />
                      </div>
                      <div style={{ gridColumn: "1 / -1" }}>
                        <label>Lokasi Sekolah</label>
                        <input type="text" value={form.location} onChange={update("location")} placeholder="Kota / Kecamatan" />
                      </div>

                      <div style={{ gridColumn: "1 / -1" }}>
                        <label>Pesan</label>
                        <textarea rows="5" value={form.message} onChange={update("message")} placeholder="Ceritakan kondisi program basket sekolah Anda, jumlah siswa, jadwal latihan, dan target yang ingin dicapai." />
                      </div>
                      <div style={{ gridColumn: "1 / -1", marginTop: 8, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 14 }}>
                        <p style={{ margin: 0, fontSize: 12, color: "var(--fg-muted)", maxWidth: 360, lineHeight: 1.55 }}>
                          Dengan mengirim, Anda setuju kami menghubungi Anda untuk diskusi kerja sama sekolah.
                        </p>
                        <button type="submit" className="btn btn-primary">
                          <span>Kirim Permintaan</span>
                          <span className="arrow" aria-hidden="true">→</span>
                        </button>
                      </div>
                    </form>
                  )}
                </div>
              </div>
            </Reveal>
          </div>
        </div>

        <style>{`
          @media (max-width: 1000px) { .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
          @media (max-width: 700px) { .form-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* MAP SECTION */}
      <section style={{ paddingBottom: 100 }}>
        <div className="container">
          <Reveal>
            <div style={{ borderRadius: 20, overflow: "hidden", border: "1px solid var(--line-strong)", boxShadow: "0 24px 60px -18px rgba(0,0,0,0.1)", height: 500 }}>
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3965.04673327514!2d106.7906234!3d-6.3879711!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69e9369b7f8219%3A0xe906f184b1362236!2sGelora%20Hady%20Depok!5e0!3m2!1sen!2sid!4v1778928896410!5m2!1sen!2sid"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                allowFullScreen=""
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              ></iframe>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

window.Contact = Contact;