/* @jsx React.createElement */
/* Support — slim homepage block.
   The conviction pitch only. Three-tier table lives on /support.html.
   Ops Room is a one-line callout inside this section (no longer §08). */

function SupportPatreon() {
  return (
    <section className="vc-support" id="support">
      <div className="vc-support__inner">
        <div className="vc-support__rule" aria-hidden="true" />
        <div className="vc-eyebrow">§ &middot; READER&nbsp;SUPPORTED</div>
        <h2 className="vc-support__h2">No sponsors. No ads. One Patreon.</h2>
        <p className="vc-support__lede">
          The doctrine, the field notes, the ledger &mdash; all of it stays free, ad-free, and citation-honest because patrons keep it that way. If the work earns a place on your wall, return the favor.
        </p>
        <div className="vc-support__row">
          <a className="vc-cta vc-cta--lg" href="https://www.patreon.com/cw/VolunteerC2" target="_blank" rel="noopener">
            SUPPORT&nbsp;ON&nbsp;PATREON&nbsp;&rarr;
          </a>
        </div>
        <div className="vc-support__opsroom">
          <span className="vc-support__opsroom-lbl">THE&nbsp;WARDROOM&nbsp;&mdash;</span>
          <span>Patrons get the only place the conversation continues. Real AARs from real org leaders. Smaller room. Higher signal. Behind the paywall on purpose.</span>
        </div>
      </div>
    </section>
  );
}
window.SupportPatreon = SupportPatreon;

/* --------- Free debrief — demoted to a thin band, not a full section ---------
   Wired to Netlify Forms (form-name: "free-debrief"). The hidden static form
   in index.html is what Netlify's build-time detector picks up; this React
   form posts URL-encoded with form-name=free-debrief to "/" at runtime. */
const { useState: useStateFN } = React;

function FreeBriefBand() {
  const [email, setEmail] = useStateFN('');
  const [state, setState] = useStateFN('idle'); // idle | busy | done | error

  async function submit(e) {
    e.preventDefault();
    setState('busy');
    try {
      const body = new URLSearchParams({ 'form-name': 'free-debrief', email });
      const res = await fetch('/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: body.toString(),
      });
      if (!res.ok) throw new Error('upstream ' + res.status);
      setState('done');
    } catch (err) {
      setState('error');
    }
  }

  return (
    <section className="vc-band" id="subscribe">
      <div className="vc-band__inner">
        <div className="vc-band__copy">
          <span className="vc-band__lbl">FREE&nbsp;DEBRIEF</span>
          <span className="vc-band__txt">One brief, every Sunday at 0900Z. No round-ups, no &ldquo;5 things&rdquo;.</span>
        </div>
        {state !== 'done' ? (
          <form className="vc-band__form" onSubmit={submit} noValidate>
            <input
              type="email"
              name="email"
              required
              placeholder="callsign@yourdomain.com"
              value={email}
              onChange={e => setEmail(e.target.value)}
              className="vc-band__input"
              disabled={state === 'busy'}
              aria-label="Email address"
            />
            <button
              type="submit"
              className="vc-band__btn"
              disabled={state === 'busy' || !email}
            >
              {state === 'busy' ? 'SENDING…' : 'SUBSCRIBE →'}
            </button>
            {state === 'error' && (
              <span className="vc-band__err" role="alert">Couldn&rsquo;t subscribe. Try again in a minute.</span>
            )}
          </form>
        ) : (
          <div className="vc-band__ok">
            <span className="vc-pip vc-pip--ok" /> CONFIRMED &middot; we&rsquo;ll mail you when the first brief drops.
          </div>
        )}
      </div>
    </section>
  );
}
window.FreeBriefBand = FreeBriefBand;