/* global React, Star, Icon */
const { useState: useStateC } = React;

const SUBJECTS = [
  "Registration or auditions",
  "Tuition & payments",
  "Show tickets",
  "Schedule or Family Hub",
  "Something else",
];

function ContactPage({ navigate }) {
  const [f, setF] = useStateC({ name: "", email: "", subject: "", message: "" });
  const [sending, setSending] = useStateC(false);
  const [done, setDone] = useStateC(false);
  const [error, setError] = useStateC("");

  const up = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const valid = f.name && /.+@.+\..+/.test(f.email) && f.message;

  const send = async () => {
    setSending(true);
    setError("");
    try {
      // In production: POST to your contact-form Worker URL
      // const res = await fetch("https://contact-form.YOUR-SUBDOMAIN.workers.dev", {
      //   method: "POST",
      //   headers: { "Content-Type": "application/json" },
      //   body: JSON.stringify(f),
      // });
      // if (!res.ok) throw new Error("Send failed");

      // Demo: simulate success after 1s
      await new Promise(r => setTimeout(r, 1000));
      setDone(true);
      window.scrollTo({ top: 0, behavior: "smooth" });
    } catch {
      setError("Something went wrong — please email us directly at hello@foothilltheatreworkshop.com");
    } finally {
      setSending(false);
    }
  };

  if (done) {
    return (
      <div className="wrap" style={{ paddingBlock: "clamp(48px,8vw,90px)", maxWidth: 600 }}>
        <div className="card pop" style={{ padding: "clamp(28px,5vw,52px)", textAlign: "center" }}>
          <div style={{ width: 72, height: 72, borderRadius: "50%", background: "var(--mint)", border: "var(--bd-ink)",
            display: "grid", placeItems: "center", margin: "0 auto 20px", boxShadow: "var(--shadow-sm)" }}>
            <Icon name="check" size={38} stroke={3} />
          </div>
          <h1 style={{ fontSize: "clamp(26px,4vw,40px)" }}>Message sent!</h1>
          <p className="muted" style={{ fontSize: 17, marginTop: 12, maxWidth: 420, margin: "12px auto 0" }}>
            We'll get back to you at <b style={{ color: "var(--ink)" }}>{f.email}</b> as soon as we can —
            usually within a day during the summer season.
          </p>
          <div className="row gap-12" style={{ justifyContent: "center", marginTop: 26, flexWrap: "wrap" }}>
            <button className="btn btn--gold btn--lg" onClick={() => navigate("home")}>Back home</button>
            <button className="btn btn--lg" onClick={() => { setDone(false); setF({ name: "", email: "", subject: "", message: "" }); }}>
              Send another
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="wrap" style={{ paddingBlock: "clamp(36px,6vw,72px)", maxWidth: 1000 }}>
      <div style={{ marginBottom: 30 }}>
        <span className="kicker"><Star size={13} fill="var(--gold-deep)" /> Get in touch</span>
        <h1 style={{ fontSize: "clamp(30px,4.5vw,52px)", marginTop: 10 }}>Contact us</h1>
      </div>

      <div className="contact-grid" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 24, alignItems: "start" }}>
        {/* Form */}
        <div className="card" style={{ padding: "clamp(22px,4vw,36px)" }}>
          <div className="form-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 16 }}>
            <div className="field"><label>Your name *</label>
              <input className="input" value={f.name} onChange={up("name")} placeholder="Jordan Reyes" /></div>
            <div className="field"><label>Email address *</label>
              <input className="input" value={f.email} onChange={up("email")} placeholder="you@email.com" /></div>
            <div className="field" style={{ gridColumn: "1 / -1" }}><label>Subject</label>
              <select className="select" value={f.subject} onChange={up("subject")}>
                <option value="">Select a topic…</option>
                {SUBJECTS.map(s => <option key={s}>{s}</option>)}
              </select>
            </div>
            <div className="field" style={{ gridColumn: "1 / -1" }}><label>Message *</label>
              <textarea className="textarea" value={f.message} onChange={up("message")} style={{ minHeight: 140 }}
                placeholder="What's on your mind? We're happy to help with registration questions, payment arrangements, scholarship inquiries, anything." />
            </div>
          </div>

          {error && (
            <div className="card" style={{ padding: "12px 16px", background: "var(--coral-tint)", marginBottom: 16, fontSize: 14 }}>
              {error}
            </div>
          )}

          <button className="btn btn--gold btn--lg" disabled={!valid || sending} onClick={send}
            style={{ width: "100%", justifyContent: "center" }}>
            {sending ? "Sending…" : <><Icon name="arrow" size={18} stroke={2.6} /> Send message</>}
          </button>

          <p className="muted" style={{ fontSize: 13, marginTop: 14, textAlign: "center" }}>
            Or email us directly at{" "}
            <a href="mailto:hello@foothilltheatreworkshop.com"
              style={{ color: "var(--gold-deep)", fontWeight: 600 }}>
              hello@foothilltheatreworkshop.com
            </a>
          </p>
        </div>

        {/* Sidebar */}
        <div style={{ display: "grid", gap: 16, position: "sticky", top: 90 }}>
          <div className="card" style={{ padding: 22, background: "var(--paper-2)" }}>
            <h3 style={{ fontSize: 18, marginBottom: 14 }}>Common questions</h3>
            {[
              { label: "Registration & auditions", icon: "user", id: "register" },
              { label: "Tuition & payments", icon: "card", id: "payment" },
              { label: "Show tickets", icon: "ticket", id: "tickets" },
              { label: "Family Hub & schedule", icon: "calendar", id: "hub" },
            ].map(q => (
              <button key={q.id} onClick={() => navigate(q.id)}
                style={{ width: "100%", textAlign: "left", border: 0, background: "none",
                  padding: "10px 4px", borderBottom: "1.5px solid var(--paper-2)",
                  display: "flex", alignItems: "center", gap: 10 }}>
                <Icon name={q.icon} size={17} color="var(--gold-deep)" />
                <span style={{ fontFamily: "var(--display)", fontWeight: 500, fontSize: 15 }}>{q.label}</span>
                <Icon name="chevron" size={15} color="var(--ink-soft)" style={{ marginLeft: "auto" }} />
              </button>
            ))}
          </div>

          <div className="card" style={{ padding: 22, background: "var(--white)" }}>
            <h3 style={{ fontSize: 17, marginBottom: 12 }}>Follow along</h3>
            <div style={{ display: "grid", gap: 10 }}>
              <a href="https://instagram.com/foothilltheatreworkshop" target="_blank" rel="noopener"
                className="btn btn--sm" style={{ justifyContent: "flex-start", textDecoration: "none" }}>
                <Icon name="play" size={16} color="var(--coral)" /> Instagram
              </a>
              <a href="https://facebook.com/foothilltheatreworkshop" target="_blank" rel="noopener"
                className="btn btn--sm" style={{ justifyContent: "flex-start", textDecoration: "none" }}>
                <Icon name="heart" size={16} color="var(--sky-deep)" /> Facebook
              </a>
            </div>
          </div>

          <div className="card" style={{ padding: 22, background: "var(--gold-tint)" }}>
            <div className="row gap-8" style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 15, marginBottom: 6 }}>
              <Icon name="pin" size={16} color="var(--gold-deep)" /> Where to find us
            </div>
            <p className="muted" style={{ fontSize: 13.5 }}>
              Rehearsals & performances at<br />
              <b style={{ color: "var(--ink)" }}>The School of Arts + Enterprise</b><br />
              North Campus · 375 S Main St<br />
              Pomona, CA 91766
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ContactPage });