function ContactPage({ tweaks }) {
  const [form, setForm] = React.useState({
    name: "", email: "", organization: "", inquiryType: "", message: ""
  });
  const [showToast, setShowToast] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

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

  const [errorMsg, setErrorMsg] = React.useState("");
  const submit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    setSubmitting(true);
    setErrorMsg("");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          organization: form.organization || undefined,
          inquiryType: form.inquiryType || "other",
          message: form.message,
        }),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || "Failed to send. Please try again.");
      }
      setShowToast(true);
      setForm({ name: "", email: "", organization: "", inquiryType: "", message: "" });
      setTimeout(() => setShowToast(false), 3200);
    } catch (err) {
      setErrorMsg(err.message || "Failed to send. Please try again.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="page" data-screen-label="06 Contact">
      <section className="ihero">
        <div className="container">
          <div className="ihero-grid ihero-grid--solo">
            <div>
              <Reveal>
                <h1 style={{ fontFamily: "Newsreader" }}>
                  Contact America First Defense<br />
                  <span className="em"></span>
                </h1>
              </Reveal>
              <Reveal delay={100}>
                <p className="ihero-sub ihero-sub--bright">
                  Interested in our technologies? Tell us about your organization
                  and what you're looking for.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section className={window.sClass("contact-form", tweaks)} data-section-id="contact-form">
        <div className="container">
          <h2 className="form-section-title">Inquiry Form</h2>
          <div className="contact-grid" style={{ marginTop: 32 }}>
            <Reveal>
              <form onSubmit={submit} className="form-grid">
                <div className="field half">
                  <label>// Name</label>
                  <input type="text" placeholder="Your name" value={form.name} onChange={update("name")} required />
                </div>
                <div className="field half">
                  <label>// Email</label>
                  <input type="email" placeholder="your.email@example.com" value={form.email} onChange={update("email")} required />
                </div>
                <div className="field">
                  <label>// Organization (Optional)</label>
                  <input type="text" placeholder="Your company or organization" value={form.organization} onChange={update("organization")} />
                </div>
                <div className="field">
                  <label>// Inquiry Type</label>
                  <select value={form.inquiryType} onChange={update("inquiryType")}>
                    <option value="">— Select inquiry type —</option>
                    <option value="licensing">Technology Licensing</option>
                    <option value="partnership">Partnership Opportunity</option>
                    <option value="investment">Investment Inquiry</option>
                    <option value="technical">Technical Information</option>
                    <option value="media">Media / Press</option>
                    <option value="other">Other</option>
                  </select>
                </div>
                <div className="field">
                  <label>// Message</label>
                  <textarea placeholder="Tell us about your interest in our technologies..." value={form.message} onChange={update("message")} required />
                </div>
                <div className="field" style={{ marginTop: 16 }}>
                  <button type="submit" className={tweaks.accent === "crimson" ? "btn btn-crimson" : "btn"} disabled={submitting}>
                    {submitting ? "Transmitting…" : <>Send Inquiry <Arr /></>}
                  </button>
                  {errorMsg ? <div style={{ marginTop: 12, color: "#ff8a80", fontSize: 13 }}>{errorMsg}</div> : null}
                </div>
              </form>
            </Reveal>
            <Reveal delay={120}>
              <div className="info-stack">
                <div className="info-block">
                  <div className="label">01 GENERAL</div>
                  <h4>General Inquiries</h4>
                  <p>For general inquiries, please use the contact form or reach out directly via email.</p>
                </div>
                <div className="info-block">
                  <div className="label">02 GOVERNMENT</div>
                  <h4>Government & Defense</h4>
                  <p>For government and defense agency inquiries, please include your organization and contact details.</p>
                </div>
                <div className="info-block">
                  <div className="label">03 INVESTORS</div>
                  <h4>Investor Relations</h4>
                  <p>For investment inquiries and partnership opportunities, please use the form above with subject "Investment Inquiry".</p>
                </div>
                <div className="info-block">
                  <div className="label">04 PRESS</div>
                  <h4>Media & Press</h4>
                  <p>Members of the press may submit inquiries via the form above with subject "Media".</p>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

            <section className={window.ctaClass("contact-cta", tweaks)} data-section-id="contact-cta">
        <div className="topo-bg" />
        <div className="container" style={{ textAlign: "center" }}>
          <div className="cta-inner" style={{ marginTop: 40, display: "flex", flexDirection: "column", alignItems: "center" }}>
            <Reveal>
              <h2 style={{ color: "rgb(255, 255, 255)" }}>
                Ready to defend America <span className="em" style={{ color: "rgb(241, 241, 241)" }}>together</span>.
              </h2>
              <p style={{
                fontFamily: "var(--font-display)", fontWeight: 300,
                fontSize: 18, lineHeight: 1.5,
                maxWidth: 540, marginTop: 20, marginLeft: "auto", marginRight: "auto", textAlign: "center", color: "rgb(255, 255, 255)"
              }}>
                Partner with America First Defense.AI. Contact us to learn more.
              </p>
            </Reveal>
            <Reveal delay={120}>
              <div className="cta-actions" style={{ marginTop: 12, justifyContent: "center" }}>
                <a href="#/contact" className={tweaks?.accent === "crimson" ? "btn btn-crimson" : "btn"}>
                  Contact <Arr />
                </a>
                <a href="#/mission" className="btn btn-ghost">
                  Read Mission <Arr />
                </a>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <div className={`toast ${showToast ? "show" : ""}`}>
        ✓ Inquiry transmitted. Thank you.
      </div>
    </div>);

}

Object.assign(window, { ContactPage });