/* Veterans Deserve Better — veterans' survey + share your story (Netlify Forms) */
const { useState: useS4 } = React;

const ERAS = ["Post-9/11 (2001–present)", "Gulf War (1990–2001)", "Cold War / peacetime", "Vietnam era", "Other / prefer not to say"];
const REPS = ["A VSO representative", "An attorney", "A claims agent", "Filed directly with the VA", "Haven't filed yet"];
const RATING = ["Very good", "Good", "Mixed", "Poor", "Very poor"];

function Survey({ ink, paper, accent }) {
  const [open, setOpen] = useS4(false);
  const [done, setDone] = useS4(false);
  const [q, setQ] = useS4({ era: "", filed: "", rep: "", denied: "", informed: "", rating: "", notes: "", email: "", state: "" });
  const set = (k) => (e) => setQ((p) => ({ ...p, [k]: e.target.value }));
  const pick = (k, v) => setQ((p) => ({ ...p, [k]: v }));
  const submit = (e) => {
    e.preventDefault();
    submitToNetlify("survey", q);
    setDone(true);
  };

  const Chips = ({ k, options }) => (
    <div className="vdb-sv__chips">
      {options.map((o) => (
        <button type="button" key={o} onClick={() => pick(k, o)}
          className={`vdb-chip ${q[k] === o ? "is-on" : ""}`}
          style={{ borderColor: q[k] === o ? accent : ink + "2e", background: q[k] === o ? accent + "16" : "transparent", color: ink }}>
          {o}
        </button>
      ))}
    </div>
  );

  if (done) {
    return (
      <article className="vdb-twoup__card" style={{ borderColor: accent }}>
        <Eyebrow accent={accent}>Veterans' survey</Eyebrow>
        <h3 className="vdb-twoup__h">On the record. Thank you.</h3>
        <p className="vdb-twoup__d">Your response is aggregated with the others and anonymised before it appears in anything we publish or hand to a congressional office. If you left an email we'll tell you when the findings are out.</p>
        <a href="#campaign" className="vdb-btn vdb-btn--outline" style={{ color: ink, borderColor: ink + "33" }}>Back to the campaign<Arrow s={12} /></a>
      </article>
    );
  }

  return (
    <article className={`vdb-twoup__card ${open ? "is-open" : ""}`} style={{ borderColor: open ? accent : ink + "1f" }} id="survey">
      <Eyebrow accent={accent}>Veterans' survey</Eyebrow>
      <h3 className="vdb-twoup__h">Eight minutes that become part of the record.</h3>
      <p className="vdb-twoup__d">Tell us about your experience with VSOs, claims representation, and the VA. Responses are aggregated and anonymised, and they inform every brief we hand to a congressional office.</p>
      {!open ? (
        <button className="vdb-btn vdb-btn--solid" onClick={() => setOpen(true)} style={{ background: ink, color: paper }}>Take the survey<Arrow s={12} /></button>
      ) : (
        <form className="vdb-sv" onSubmit={submit}>
          <div className="vdb-sv__q">
            <span className="vdb-sv__l">1 · When did you serve?</span>
            <Chips k="era" options={ERAS} />
          </div>
          <div className="vdb-sv__q">
            <span className="vdb-sv__l">2 · Have you filed a VA disability claim?</span>
            <Chips k="filed" options={["Yes", "In progress", "No", "Prefer not to say"]} />
          </div>
          <div className="vdb-sv__q">
            <span className="vdb-sv__l">3 · Who helped you file?</span>
            <Chips k="rep" options={REPS} />
          </div>
          <div className="vdb-sv__q">
            <span className="vdb-sv__l">4 · Was a claim of yours ever denied?</span>
            <Chips k="denied" options={["Yes", "No", "Not sure"]} />
          </div>
          <div className="vdb-sv__q">
            <span className="vdb-sv__l">5 · Did you feel you had enough information to choose the right representative?</span>
            <Chips k="informed" options={["Yes", "Somewhat", "No"]} />
          </div>
          <div className="vdb-sv__q">
            <span className="vdb-sv__l">6 · How would you rate the support you received?</span>
            <Chips k="rating" options={RATING} />
          </div>
          <label className="vdb-sv__q">
            <span className="vdb-sv__l">7 · Anything else we should know? <em>optional</em></span>
            <textarea value={q.notes} onChange={set("notes")} rows="3" maxLength="600" placeholder="In your own words." style={{ borderColor: ink + "2e" }} />
          </label>
          <div className="vdb-sv__row">
            <label className="vdb-sv__q">
              <span className="vdb-sv__l">State <em>optional</em></span>
              <div className="vdb-select" style={{ borderColor: ink + "2e" }}>
                <select value={q.state} onChange={set("state")}>
                  <option value="">Prefer not to say</option>
                  {STATES.map(([ab, name]) => <option key={ab} value={name}>{name}</option>)}
                </select>
                <span className="vdb-select__chev" aria-hidden>▾</span>
              </div>
            </label>
            <label className="vdb-sv__q">
              <span className="vdb-sv__l">Email <em>optional — for the findings</em></span>
              <input type="email" value={q.email} onChange={set("email")} placeholder="you@example.com" style={{ borderColor: ink + "2e" }} />
            </label>
          </div>
          <button type="submit" className="vdb-btn vdb-btn--solid" style={{ background: ink, color: paper }}>Submit my response<Arrow s={12} /></button>
          <p className="vdb-sv__fine">Anonymous unless you give us an email. We never sell or rent responses, and nothing identifying is published without your written permission.</p>
        </form>
      )}
    </article>
  );
}

function ShareStory({ ink, paper, accent }) {
  const [open, setOpen] = useS4(false);
  const [done, setDone] = useS4(false);
  const [s, setS] = useS4({ name: "", email: "", state: "", story: "", permission: "anon" });
  const set = (k) => (e) => setS((p) => ({ ...p, [k]: e.target.value }));
  const submit = (e) => { e.preventDefault(); submitToNetlify("story", s); setDone(true); };

  if (done) {
    return (
      <article className="vdb-twoup__card" style={{ borderColor: accent }} id="story">
        <Eyebrow accent={accent}>Share your story</Eyebrow>
        <h3 className="vdb-twoup__h">Received. We read every one.</h3>
        <p className="vdb-twoup__d">Someone will read your account within a few business days. We will not publish any part of it, or your name, without asking you first and getting it in writing.</p>
        <a href="#library" className="vdb-btn vdb-btn--outline" style={{ color: ink, borderColor: ink + "33" }}>Browse the resource library<Arrow s={12} /></a>
      </article>
    );
  }

  return (
    <article className={`vdb-twoup__card ${open ? "is-open" : ""}`} style={{ borderColor: open ? accent : ink + "1f" }} id="story">
      <Eyebrow accent={accent}>Share your story</Eyebrow>
      <h3 className="vdb-twoup__h">Your experience is primary source material.</h3>
      <p className="vdb-twoup__d">If something happened to you inside the claims or representation process, we want the account on the record. You control whether your name is ever attached to it.</p>
      {!open ? (
        <button className="vdb-btn vdb-btn--outline" onClick={() => setOpen(true)} style={{ color: ink, borderColor: ink + "33" }}>Submit your story<Arrow s={12} /></button>
      ) : (
        <form className="vdb-sv" onSubmit={submit}>
          <label className="vdb-sv__q">
            <span className="vdb-sv__l">What happened? <em>required</em></span>
            <textarea value={s.story} onChange={set("story")} rows="6" required maxLength="4000" placeholder="Dates, organisations, and what was said or done are the most useful details. Take as much room as you need." style={{ borderColor: ink + "2e" }} />
          </label>
          <div className="vdb-sv__row">
            <label className="vdb-sv__q">
              <span className="vdb-sv__l">Name <em>optional</em></span>
              <input value={s.name} onChange={set("name")} placeholder="First and last, or initials" style={{ borderColor: ink + "2e" }} />
            </label>
            <label className="vdb-sv__q">
              <span className="vdb-sv__l">Email <em>required — so we can follow up</em></span>
              <input type="email" value={s.email} onChange={set("email")} required placeholder="you@example.com" style={{ borderColor: ink + "2e" }} />
            </label>
          </div>
          <fieldset className="vdb-sv__q vdb-radios">
            <span className="vdb-sv__l">If we ever want to publish this</span>
            <div className="vdb-radios__row">
              {[["anon", "Anonymously only"], ["initials", "Initials and state"], ["named", "You may use my name"], ["ask", "Ask me first"]].map(([v, l]) => (
                <label key={v} className={`vdb-chip ${s.permission === v ? "is-on" : ""}`} style={{ borderColor: s.permission === v ? accent : ink + "2e", background: s.permission === v ? accent + "16" : "transparent" }}>
                  <input type="radio" name="permission" value={v} checked={s.permission === v} onChange={set("permission")} />
                  {l}
                </label>
              ))}
            </div>
          </fieldset>
          <button type="submit" className="vdb-btn vdb-btn--solid" style={{ background: ink, color: paper }}>Send my account<Arrow s={12} /></button>
          <p className="vdb-sv__fine">We will never publish your account or name without written permission, whatever you select above. If your account involves an active claim, talk to your representative before sharing details publicly.</p>
        </form>
      )}
    </article>
  );
}

Object.assign(window, { Survey, ShareStory });