/* NeuralVault — Portal.jsx
   Simple inquiry form. Direct, no investor/fund theater.
   Three building blocks → pick one, tell us about your project, we get back. */

const { useState } = React;

function InquiryPanel() {
  return (
    <div className="panel">
      {INQUIRY_PANEL.map((row) => (
        <div className="row" key={row.k}>
          <span>{row.k}</span>
          <span className="v">{row.v}</span>
        </div>
      ))}
    </div>
  );
}

function PortalSide() {
  return (
    <div className="portal-side">
      <div className="s-num mono">§03 — Get in touch</div>
      <h2 className="s-title" style={{ marginTop: 12 }}>
        Tell us what<br /><em>you're building</em>
      </h2>
      <p className="s-sub" style={{ marginTop: 20 }}>
        We work with a small number of companies and individuals at a time.
        Send a short note about what you're working on and which of the three
        fundamentals fits — we'll write back within two business days.
      </p>
      <InquiryPanel />
    </div>
  );
}

function InquiryForm() {
  const [values, setValues] = useState({
    name: "", email: "", company: "", service: "", notes: "",
  });
  const [phase, setPhase] = useState("idle"); // idle | sending | sent | error

  const set = (k) => (e) => setValues((v) => ({ ...v, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    setPhase("sending");
    try {
      const res = await fetch("/api/inquiry", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(values),
      });
      const data = await res.json();
      if (data.ok) {
        setPhase("sent");
        setTimeout(() => {
          setPhase("idle");
          setValues({ name: "", email: "", company: "", service: "", notes: "" });
        }, 4000);
      } else {
        setPhase("error");
        setTimeout(() => setPhase("idle"), 3500);
      }
    } catch {
      setPhase("error");
      setTimeout(() => setPhase("idle"), 3500);
    }
  };

  const submitLabel = {
    idle:    "Send inquiry",
    sending: "Sending…",
    sent:    "Sent ●",
    error:   "Error — try again",
  }[phase];

  return (
    <form className="inquiry" id="inquiryForm" autoComplete="off" onSubmit={submit}>
      <Field label="Your Name" name="name" value={values.name} onChange={set("name")} required />
      <Field label="Email" name="email" type="email" value={values.email} onChange={set("email")} required />
      <Field label="Company / Organization" name="company" value={values.company} onChange={set("company")} required />
      <Field
        label="Which fundamental"
        name="service"
        as="select"
        options={SERVICES}
        value={values.service}
        onChange={set("service")}
        required
      />
      <Field
        label="Tell us about your project"
        name="notes"
        as="textarea"
        full
        value={values.notes}
        onChange={set("notes")}
        required
      />

      <div className="form-actions">
        <span className="legal mono">
          We read every note. No newsletters, no follow-up loops.
        </span>
        <Button variant="primary" arrow type="submit" disabled={phase !== "idle"}>
          {submitLabel}
        </Button>
      </div>
    </form>
  );
}

function Portal() {
  return (
    <section className="s" id="portal" data-screen-label="04 Inquiry">
      <div className="wrap portal">
        <PortalSide />
        <InquiryForm />
      </div>
      <SectionRef pos="br" ref_="REF · INQ.01" />
    </section>
  );
}

Object.assign(window, { Portal, InquiryForm, PortalSide, InquiryPanel });