/* ============================================================
   Contact
   ============================================================ */

function Contact({ go }) {
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState("");
  const [form, setForm] = useState({
    name: "", role: "", org: "", email: "", vertical: "", scope: "", notes: ""
  });

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

  const submit = async (e) => {
    e.preventDefault();
    setError("");
    setSending(true);
    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: "e89ab788-724d-4279-b6f7-dcf41ff3d289",
          subject: `EpiphanyEngine briefing request — ${form.org || form.name}`,
          from_name: "EpiphanyEngine website",
          name: form.name,
          role: form.role,
          organization: form.org,
          email: form.email,
          vertical: form.vertical,
          engagement: form.scope,
          notes: form.notes,
        }),
      });
      const data = await res.json();
      if (!res.ok || !data.success) throw new Error(data.message || `HTTP ${res.status}`);
      setSubmitted(true);
      window.scrollTo({ top: 0, behavior: "smooth" });
    } catch (err) {
      setError("Something went wrong sending your message. Please email axiom@i4aneye.com directly.");
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="page-enter">
      <section style={{ paddingTop: 80, paddingBottom: 0 }}>
        <div className="shell">
          <div className="bracketed" style={{ marginBottom: 28 }}>CONTACT · ENTERPRISE BRIEFING</div>
          <h1 className="heading-xl" style={{ maxWidth: "22ch", marginBottom: 28 }}>
            A <em style={{ color: "var(--accent)", fontStyle: "italic" }}>forty-minute</em> conversation. Half is your situation. Half is what the Axiom would do with it.
          </h1>
          <p className="lede" style={{ marginBottom: 40 }}>
            No deck. No sales motion. You bring a problem you actually carry; we bring the
            framework. You leave with a derivation you could show your board.
          </p>
          <div className="rule"></div>
        </div>
      </section>

      <section>
        <div className="shell">
          {submitted ? (
            <div className="contact-confirm" style={{ margin: "80px auto", maxWidth: 640 }}>
              <div className="ring"></div>
              <div className="uppercase-label" style={{ marginBottom: 14 }}>Received</div>
              <h2 className="heading-lg" style={{ marginBottom: 18 }}>
                Thank you, {form.name || "—"}.
              </h2>
              <p className="body-text" style={{ margin: "0 auto", maxWidth: "50ch" }}>
                A member of the EpiphanyEngine team will reach out within one business day
                to schedule your briefing. We read what you sent. We won't waste your time.
              </p>
              <div style={{ marginTop: 32 }}>
                <button className="btn btn-ghost" onClick={() => { setSubmitted(false); setForm({ name: "", role: "", org: "", email: "", vertical: "", scope: "", notes: "" }); }}>
                  Send another message
                </button>
              </div>
            </div>
          ) : (
            <div className="contact-grid">
              <form className="contact-form" onSubmit={submit}>
                <div className="field-row">
                  <div className="field">
                    <label>Your name</label>
                    <input required value={form.name} onChange={update("name")} placeholder="Jane Doe" />
                  </div>
                  <div className="field">
                    <label>Role</label>
                    <input required value={form.role} onChange={update("role")} placeholder="Chief Strategy Officer" />
                  </div>
                </div>
                <div className="field-row">
                  <div className="field">
                    <label>Organization</label>
                    <input required value={form.org} onChange={update("org")} placeholder="Acme Industries" />
                  </div>
                  <div className="field">
                    <label>Work email</label>
                    <input required type="email" value={form.email} onChange={update("email")} placeholder="jane@acme.com" />
                  </div>
                </div>
                <div className="field">
                  <label>Vertical</label>
                  <select required value={form.vertical} onChange={update("vertical")}>
                    <option value="">Select your industry</option>
                    {VERTICALS.map(v => (
                      <option key={v.id} value={v.id}>{v.name}</option>
                    ))}
                    <option value="other">Other</option>
                  </select>
                </div>
                <div className="field">
                  <label>Engagement type</label>
                  <select required value={form.scope} onChange={update("scope")}>
                    <option value="">Select engagement type</option>
                    <option>Executive briefing (40 min)</option>
                    <option>Architecture review (2 hr)</option>
                    <option>Pilot scoping conversation</option>
                    <option>Research partnership</option>
                    <option>Press / analyst</option>
                  </select>
                </div>
                <div className="field">
                  <label>The problem you're carrying</label>
                  <textarea
                    value={form.notes}
                    onChange={update("notes")}
                    placeholder="Tell us, in one paragraph, the decision you can't currently defend the way you'd like to."
                  />
                </div>
                <div style={{ marginTop: 12 }}>
                  <button type="submit" className="btn" disabled={sending}>
                    {sending ? "Sending…" : <>Send · request briefing <span className="arrow">→</span></>}
                  </button>
                </div>
                {error && (
                  <p style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.08em", color: "var(--accent)", lineHeight: 1.6, marginTop: 12 }}>
                    {error}
                  </p>
                )}
                <p style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em", color: "var(--ink-3)", lineHeight: 1.6, marginTop: 8 }}>
                  WE REPLY WITHIN ONE BUSINESS DAY. CONVERSATIONS ARE COVERED BY MUTUAL NDA ON REQUEST.
                </p>
              </form>

              <aside className="contact-aside">
                <div className="contact-aside-item">
                  <h4>Email</h4>
                  <p><a href="mailto:axiom@i4aneye.com">axiom@i4aneye.com</a></p>
                </div>
                <div className="contact-aside-item">
                  <h4>Locations</h4>
                  <p style={{ fontSize: 17, lineHeight: 1.6 }}>
                    Toronto · Boston · Singapore<br />
                    <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-3)", textTransform: "uppercase" }}>
                      I4ANEYE INC. · NAICS 541710
                    </span>
                  </p>
                </div>
                <div style={{
                  marginTop: 48,
                  padding: 28,
                  border: "1px solid var(--rule)",
                  background: "var(--bg-elev)",
                }}>
                  <div className="uppercase-label" style={{ marginBottom: 12, color: "var(--accent)" }}>What to expect</div>
                  <ol style={{ paddingLeft: 18, margin: 0, color: "var(--ink-2)", fontSize: 14, lineHeight: 1.7 }}>
                    <li>Reply within one business day.</li>
                    <li>Pre-briefing intake — 15 min, asynchronous.</li>
                    <li>The 40-minute session, with the architect on call.</li>
                    <li>A written derivation, sent within 48 hours.</li>
                  </ol>
                </div>
              </aside>
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

window.Contact = Contact;