/* JETX — TEMPORARY CONTACT page (review build)
   Same contact form (wired to Web3Forms) but uses the temp shell so the
   nav/footer don't link to unreleased pages. */
const { useState: useStateCT } = React;

function TempContactBody() {
  const [form, setForm] = useStateCT({ name: "", email: "", org: "", interest: "General inquiry", message: "" });
  const [sent, setSent] = useStateCT(false);
  const [sending, setSending] = useStateCT(false);
  const [error, setError] = useStateCT("");
  const onChange = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || sending) return;
    setSending(true);
    setError("");
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          access_key: "9b95ee5f-ae74-4213-b1de-fa4482cc1c7c",
          subject: `JETX site \u2014 ${form.interest} \u2014 ${form.name}`,
          from_name: "JETX Website",
          name: form.name,
          email: form.email,
          organization: form.org,
          interest: form.interest,
          message: form.message,
        }),
      });
      const data = await res.json();
      if (data.success) setSent(true);
      else setError(data.message || "Something went wrong. Please email us directly.");
    } catch (err) {
      setError("Network error. Please email us directly.");
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="section contact-wrap" id="contact" data-screen-label="Contact" style={{ borderTop: "none" }}>
      <div className="shell">
        <window.Reveal className="contact-grid">
          <div className="contact-left">
            <span className="eyebrow">Get in touch</span>
            <h2 className="h1" style={{ marginTop: 24 }}>Let's talk.</h2>
            <p className="p-lg" style={{ maxWidth: 480, marginTop: 24 }}>
              We'd love to hear from you.
            </p>

            <div className="contact-meta">
              <div>
                <div className="label">Email</div>
                <div className="val"><a href="mailto:info@jetxus.com">info@jetxus.com</a></div>
              </div>
            </div>

            <div style={{ marginTop: 40, display: "flex", gap: 12 }}>
              {[
                { l: "X", href: "https://twitter.com/JETXAERO", g: "𝕏" },
                { l: "LinkedIn", href: "https://www.linkedin.com/company/jetxus/", g: "in" },
                { l: "YouTube", href: "https://www.youtube.com/channel/UC3EqOdS30VVZnpXG4Lb_88Q", g: "▶" },
                { l: "Instagram", href: "https://www.instagram.com/jetx_us/", g: "◳" },
              ].map((s) => (
                <a key={s.l} href={s.href} target="_blank" rel="noreferrer" className="contact-social" aria-label={s.l}>{s.g}</a>
              ))}
            </div>
          </div>

          {sent ? (
            <div className="form-ok">
              <div style={{ marginBottom: 12, fontSize: 11, letterSpacing: "0.22em", color: "var(--fg-3)" }}>MESSAGE RECEIVED</div>
              <div style={{ fontSize: 22, fontFamily: "var(--font-display)", textTransform: "uppercase", marginBottom: 12 }}>Thank you, {form.name.split(" ")[0]}.</div>
              <div style={{ color: "var(--fg-2)", fontFamily: "var(--font-body)", letterSpacing: 0, fontSize: 15, lineHeight: 1.6 }}>
                We'll reply from info@jetxus.com. For anything time-sensitive, email us directly.
              </div>
              <button className="btn" style={{ marginTop: 24 }} onClick={() => { setSent(false); setForm({ name: "", email: "", org: "", interest: "General inquiry", message: "" }); }}>
                <span>Send another</span><span className="arrow">→</span>
              </button>
            </div>
          ) : (
            <form className="form" onSubmit={submit}>
              <div className="field-row">
                <div className="field"><label>Name</label><input type="text" value={form.name} onChange={onChange("name")} required /></div>
                <div className="field"><label>Email</label><input type="email" value={form.email} onChange={onChange("email")} required /></div>
              </div>
              <div className="field"><label>Organization</label><input type="text" value={form.org} onChange={onChange("org")} /></div>
              <div className="field">
                <label>I'm interested in</label>
                <select value={form.interest} onChange={onChange("interest")}>
                  <option>General inquiry</option>
                  <option>Propulsion technology</option>
                  <option>Partnership</option>
                  <option>Investment</option>
                  <option>Aircraft / parts</option>
                  <option>Charter / consulting</option>
                </select>
              </div>
              <div className="field"><label>Message</label><textarea rows="4" value={form.message} onChange={onChange("message")} placeholder="How can we help?" /></div>
              {error ? (
                <div style={{ color: "var(--fg-2)", fontFamily: "var(--font-body)", fontSize: 14, marginBottom: 16 }}>{error}</div>
              ) : null}
              <button type="submit" className="form-submit" disabled={sending}><span>{sending ? "Sending\u2026" : "Send message"}</span><span style={{ marginLeft: 24 }}>{sending ? "" : "\u2192"}</span></button>
            </form>
          )}
        </window.Reveal>
      </div>
    </section>
  );
}

function TempContactPage() {
  return (
    <React.Fragment>
      <window.SubHero crumb="Get in touch" title="Contact" lede="Reach out and we'll get back to you." image="assets/concepts/contact-hero.png" flip />
      <TempContactBody />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <window.TempShell withCTA={false} nav="back"><TempContactPage /></window.TempShell>
);