// Contact — discreet, form-only
const { useState: useStateC } = React;

function Contact({ go }) {
  const [sent, setSent] = useStateC(false);
  const [form, setForm] = useStateC({
    org: "", email: "", type: "", desc: "", timeline: ""
  });
  const set = (k) => (e) => setForm(f => ({...f, [k]: e.target.value}));
  const submit = (e) => {
    e.preventDefault();
    const subject = encodeURIComponent(
      `Inquiry · ${form.org || 'Flight Reconstruction Group'}`
    );
    const body = encodeURIComponent(
      `Organisation: ${form.org}\n` +
      `Email: ${form.email}\n` +
      `Engagement type: ${form.type}\n` +
      `Timeline: ${form.timeline}\n\n` +
      `Description:\n${form.desc}\n`
    );
    window.location.href = `mailto:flightreconstructiongroup@gmail.com?subject=${subject}&body=${body}`;
    setSent(true);
  };

  return (
    <main>
      <PageHead
        index="§ Contact"
        title={<>A confidential<br/><em>line of enquiry.</em></>}
        sub="Correspondence is received in confidence. A response is returned within two working days, typically with a short list of clarifying questions. No automated follow-ups are sent."
        meta={["§ VI · CONTACT", "ENCRYPTED ON REQUEST"]}
      />

      <section className="contact-wrap">
        <div style={{position:'absolute', inset:0, opacity:0.3, pointerEvents:'none'}}>
          <PlottingGrid/>
        </div>

        <aside className="contact-side" style={{position:'relative', zIndex:2}}>
          <div>
            <span className="mono" style={{marginBottom:20, display:'block'}}>§ General lines</span>
            <div className="contact-aside">
              <div className="contact-aside-row">
                <span className="mono">INQUIRIES</span>
                <span className="contact-aside-val">flightreconstructiongroup@gmail.com</span>
              </div>
              <div className="contact-aside-row">
                <span className="mono">PRESS</span>
                <span className="contact-aside-val">flightreconstructiongroup@gmail.com</span>
              </div>
              <div className="contact-aside-row">
                <span className="mono">ENCRYPTED</span>
                <span className="contact-aside-val">PGP public key on request</span>
              </div>
              <div className="contact-aside-row">
                <span className="mono">HOURS</span>
                <span className="contact-aside-val">Mon – Fri · 08:00 – 18:00 UTC</span>
              </div>
            </div>
          </div>

          <p className="contact-note">
            Enquiries from opposing parties on matters where Flight Reconstruction Group
            is already retained are declined without reply.
          </p>

          <p className="contact-note">
            No personal contact information for principals is published.
            All correspondence is routed through the lines above.
          </p>
        </aside>

        <div style={{position:'relative', zIndex:2}}>
          {!sent ? (
            <>
              <span className="eyebrow" style={{marginBottom:28, display:'inline-flex'}}>Inquiry form · 05 fields</span>
              <h2 style={{
                fontFamily:'var(--f-serif)', fontWeight:300,
                fontSize:'clamp(32px, 3.5vw, 48px)', lineHeight:1.02,
                letterSpacing:'-0.022em', marginBottom: 40, maxWidth:'18ch'
              }}>
                Outline the matter.<br/><em>Nothing more than required.</em>
              </h2>

              <form className="form" onSubmit={submit}>
                <div className="form-row">
                  <div className="field">
                    <label>Organisation <span className="req">◆</span></label>
                    <input className="input" required value={form.org} onChange={set("org")}
                           placeholder="Firm, agency, or operator"/>
                  </div>
                  <div className="field">
                    <label>Email <span className="req">◆</span></label>
                    <input className="input" type="email" required value={form.email} onChange={set("email")}
                           placeholder="name@organisation.tld"/>
                  </div>
                </div>

                <div className="form-row">
                  <div className="field">
                    <label>Project type</label>
                    <select className="select" value={form.type} onChange={set("type")}>
                      <option value="">—</option>
                      <option value="recon">Reconstruction / Animation</option>
                      <option value="data">Flight Data Analysis</option>
                      <option value="litigation">Litigation Support</option>
                      <option value="investigation">Investigation Support</option>
                      <option value="safety">Safety / Operational</option>
                      <option value="media">Media / Documentary</option>
                      <option value="other">Other</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Timeline</label>
                    <select className="select" value={form.timeline} onChange={set("timeline")}>
                      <option value="">—</option>
                      <option>Immediate (≤ 2 weeks)</option>
                      <option>Near-term (≤ 2 months)</option>
                      <option>Scheduled (≥ 2 months)</option>
                      <option>Exploratory</option>
                    </select>
                  </div>
                </div>

                <div className="field">
                  <label>Brief description</label>
                  <textarea className="textarea" rows="4" value={form.desc} onChange={set("desc")}
                            placeholder="Scope in general terms. Redacted details are expected at this stage."/>
                </div>

                <div className="form-submit">
                  <p className="form-privacy">
                    Submissions are retained only for the purposes of reply.
                    No material is disclosed to third parties without instruction.
                  </p>
                  <button type="submit" className="btn btn-primary">
                    Transmit enquiry <span className="btn-arrow">→</span>
                  </button>
                </div>
              </form>
            </>
          ) : (
            <div className="contact-sent">
              <span className="eyebrow" style={{marginBottom:20, display:'inline-flex', color:'var(--accent)'}}>
                Receipt confirmed · ACK 14:32:08Z
              </span>
              <h2 style={{
                fontFamily:'var(--f-serif)', fontWeight:300,
                fontSize:'clamp(32px, 3.5vw, 48px)', lineHeight:1.02,
                letterSpacing:'-0.022em', maxWidth:'20ch'
              }}>
                Your enquiry<br/><em>has been received.</em>
              </h2>
              <p style={{color:'var(--paper-dim)', fontSize:15, lineHeight:1.65, maxWidth:'48ch'}}>
                A reply will follow within two working days from a
                Flight Reconstruction Group address. If correspondence does not arrive,
                it has been filtered; please resend from a different domain.
              </p>
              <div style={{display:'flex', gap:14, marginTop:12}}>
                <button className="btn btn-ghost" onClick={() => { setSent(false); setForm({org:"",email:"",type:"",desc:"",timeline:""}); }}>
                  Submit another
                </button>
                <button className="btn btn-ghost" onClick={() => go("home")}>
                  Return to index
                </button>
              </div>
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Contact });