// Shift for Good — forms (funnel rewritten per NOA feedback)
// Funnel: Wil je je inzetten? → Wat gaat je aan het hart? → Wat wil je doen?
//         → Hoe vaak? → Naam → Email → Akkoord
const { useState: useStateF, useMemo: useMemoF } = React;

// ───────────────────────────────────────────────────────────────
// AANMELDINGEN — waar gaan ze heen?
// 1. Ga naar https://web3forms.com, vul het e-mailadres in waar je de
//    aanmeldingen wilt ontvangen (bijv. hello@shiftforgood.nl).
// 2. Je krijgt een "access key" in je mail.
// 3. Plak die key hieronder, tussen de aanhalingstekens, en push naar GitHub.
// Tot dat moment werkt het formulier wél (je ziet het "gelukt"-scherm),
// maar wordt er nog NIETS verstuurd — dit MOET je dus invullen vóór livegang.
const WEB3FORMS_ACCESS_KEY = "51f9b64c-25af-49b8-b89d-6b5a72acef74";

async function sendSignup(payload) {
  // Nog geen key ingevuld? Niet verzenden, maar de gebruiker niet blokkeren.
  if (!WEB3FORMS_ACCESS_KEY || WEB3FORMS_ACCESS_KEY.indexOf("PLAK-HIER") === 0) {
    console.warn("[Shift for Good] Web3Forms access key ontbreekt — inzending NIET verstuurd:", payload);
    return { ok: false, skipped: 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: WEB3FORMS_ACCESS_KEY, ...payload })
    });
    const data = await res.json();
    return { ok: !!data.success, data };
  } catch (err) {
    console.error("[Shift for Good] Verzenden mislukt:", err);
    return { ok: false, error: err };
  }
}

function PillRow({ options, value, onChange, multi = false, big = false }) {
  const sel = multi ? value || [] : value;
  const toggle = (o) => {
    if (multi) {
      const cur = sel || [];
      onChange(cur.includes(o) ? cur.filter((x) => x !== o) : [...cur, o]);
    } else {
      onChange(o === sel ? null : o);
    }
  };
  const isOn = (o) => multi ? sel.includes(o) : sel === o;
  return (
    <div className={`sfg-pills ${big ? "sfg-pills-big" : ""}`}>
      {options.map((o) =>
      <button key={o} type="button" className="sfg-pill" aria-pressed={isOn(o)} onClick={() => toggle(o)}>
          <svg className="check" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round"><polyline points="3 9 7 13 13 4" /></svg>
          <span>{o}</span>
        </button>
      )}
    </div>);
}

// Off-ramp content shown when answer to Q1 = "Nee"
function OffRamp({ onReset }) {
  return (
    <div className="sfg-offramp">
      <div className="sfg-offramp-mark">
        <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M12 8v5M12 17h.01" /><circle cx="12" cy="12" r="9" /></svg>
      </div>
      <h3>Helder. Tot ergens anders.</h3>
      <p>Geen drama. Mocht je later toch iets willen doen — we zijn hier. Of stuur de pagina door naar iemand die wél wil meedoen.</p>
      <div className="sfg-offramp-actions">
        <button className="sfg-btn sfg-btn-outline" onClick={onReset}>Toch nog even kijken</button>
        <a className="sfg-btn sfg-btn-primary" href="https://www.goodshift.nl" target="_blank" rel="noreferrer">Naar GoodShift ↗</a>
      </div>
    </div>);
}

// ── The single shared funnel (used inline in hero) ─────────────
function SfgForm({ compact = false }) {
  // Step list reflects NOA notes
  const steps = [
  { id: "intent", title: "Wil je je inzetten?", hint: "Geen verplichting na ja — dit is een eerste klik." },
  { id: "thema", title: "Wat gaat je aan het hart?", hint: "Meer mag. We koppelen je later aan acties die hierbij passen.", multi: true,
    options: ["Klimaat & natuur", "Mensen in nood", "Mentale gezondheid", "Kinderen & jeugd", "Gelijke kansen", "Persvrijheid", "Dieren", "Dakloosheid"] },
  { id: "doe", title: "Wat wil je doen?", hint: "Meer mag — we matchen op alles dat je aanvinkt.", multi: true,
    options: ["Actie voeren", "Doneren", "Iets kopen (peace-actie)", "Sponsorloop", "Vrijwilligerswerk"] },
  { id: "hoe", title: "Hoe vaak wil je je inzetten?", hint: "Verandert later mee als je ergens niet meer in voelt.",
    options: ["1× per jaar", "Een paar keer per jaar", "Maandelijks", "Structureel / vaker"] },
  { id: "naam", title: "Hoe mogen we je noemen?", hint: "Eén veld — kies zelf hoeveel: 'Anna', 'Anna de Vries' of 'Anna V.'" },
  { id: "email", title: "Wat is je e-mailadres?", hint: "1× per maand een update, plus acties die bij jou passen." },
  { id: "akkoord", title: "Bijna. Even afvinken.", hint: "Daarna ben je officieel onderdeel van de beweging." }];


  const [stepIdx, setStepIdx] = useStateF(0);
  const [refused, setRefused] = useStateF(false);
  const [vals, setVals] = useStateF({
    intent: null, thema: [], doe: [], hoe: null,
    naam: "", email: "", privacy: false, news: true
  });
  const [submitted, setSubmitted] = useStateF(false);
  const [sending, setSending] = useStateF(false);
  const [sendError, setSendError] = useStateF(false);
  const [touched, setTouched] = useStateF({});
  const step = steps[stepIdx];
  const progress = stepIdx / (steps.length - 1) * 100;
  const set = (k, v) => setVals({ ...vals, [k]: v });

  const stepValid = useMemoF(() => {
    if (step.id === "intent") return !!vals.intent;
    if (step.id === "thema") return vals.thema.length > 0;
    if (step.id === "doe") return vals.doe.length > 0;
    if (step.id === "hoe") return !!vals.hoe;
    if (step.id === "naam") return vals.naam.trim().length >= 2;
    if (step.id === "email") return /.+@.+\..+/.test(vals.email);
    if (step.id === "akkoord") return vals.privacy;
    return true;
  }, [step, vals]);

  const next = async () => {
    setTouched({ ...touched, [step.id]: true });
    if (!stepValid) return;
    if (step.id === "intent" && vals.intent === "Nee") {setRefused(true);return;}
    if (stepIdx === steps.length - 1) {
      setSendError(false);
      setSending(true);
      const r = await sendSignup({
        subject: "Nieuwe aanmelding — Shift for Good",
        from_name: "Shift for Good website",
        naam: vals.naam,
        email: vals.email,
        themas: (vals.thema || []).join(", "),
        acties: (vals.doe || []).join(", "),
        frequentie: vals.hoe || "",
        nieuwsbrief: vals.news ? "ja" : "nee",
        privacy_akkoord: vals.privacy ? "ja" : "nee"
      });
      setSending(false);
      if (r.ok || r.skipped) {setSubmitted(true);} else {setSendError(true);}
      return;
    }
    setStepIdx(stepIdx + 1);
  };
  const back = () => setStepIdx(Math.max(0, stepIdx - 1));
  const reset = () => {
    setRefused(false);setSubmitted(false);setStepIdx(0);
    setVals({ intent: null, thema: [], doe: [], hoe: null, naam: "", email: "", privacy: false, news: true });
  };

  // Intent: enter pressed → next; for one-tap progression on big buttons
  const intentPick = (v) => {set("intent", v);setTimeout(() => {
      if (v === "Nee") {setRefused(true);} else
      {setStepIdx(1);}
    }, 120);};

  if (refused) {
    return <div className={`sfg-form-card ${compact ? "sfg-form-card-compact" : ""}`}><OffRamp onReset={reset} /></div>;
  }

  if (submitted) {
    return (
      <div className={`sfg-form-card ${compact ? "sfg-form-card-compact" : ""}`}>
        <div className="sfg-success">
          <div className="sfg-success-mark">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><polyline points="4 12 10 18 20 6" /></svg>
          </div>
          <h2>Welkom, {vals.naam.split(" ")[0] || "you"}.</h2>
          <p style={{ fontFamily: "var(--gs-font-body)", fontSize: 17, fontWeight: 500, color: "var(--gs-fg-secondary)", maxWidth: 420, margin: "0 auto 24px" }}>
            Check je inbox — daar staat de eerste actie die bij jou past.
          </p>
          <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
            <a href="#nu" className="sfg-btn sfg-btn-primary">Bekijk de acties →</a>
            <button className="sfg-btn sfg-btn-outline" onClick={reset}>Deel met iemand anders</button>
          </div>
        </div>
      </div>);
  }

  return (
    <div className={`sfg-form-card ${compact ? "sfg-form-card-compact" : ""}`}>
      <div className="sfg-progress"><div className="sfg-progress-bar" style={{ width: `${progress}%` }} /></div>
      <p className="sfg-form-step">Stap {stepIdx + 1}<span className="of"> · {steps.length}</span></p>
      <h3 className="sfg-form-q">{step.title}</h3>
      <p className="sfg-form-hint">{step.hint}</p>

      {step.id === "intent" &&
      <div className="sfg-intent-row">
          <button type="button" className="sfg-intent sfg-intent-yes" data-checked={vals.intent === "Ja"} onClick={() => intentPick("Ja")}>
            <span className="big">Ja</span>
            <span className="small">Ik doe mee.</span>
          </button>
          <button type="button" className="sfg-intent sfg-intent-no" data-checked={vals.intent === "Nee"} onClick={() => intentPick("Nee")}>
            <span className="big">Nee</span>
            <span className="small">Nog niet voor mij.</span>
          </button>
        </div>
      }

      {(step.id === "thema" || step.id === "doe" || step.id === "hoe") &&
      <PillRow options={step.options} value={vals[step.id]} multi={!!step.multi} onChange={(v) => set(step.id, v)} />
      }

      {step.id === "naam" &&
      <div>
          <input className={`sfg-input ${touched.naam && !stepValid ? "error" : ""}`} placeholder="Bijv. Anna de Vries"
        value={vals.naam} onChange={(e) => set("naam", e.target.value)}
        onKeyDown={(e) => e.key === "Enter" && next()} autoFocus />
          {touched.naam && !stepValid && <p className="sfg-error">Naam mag niet leeg zijn.</p>}
        </div>
      }

      {step.id === "email" &&
      <div>
          <input className={`sfg-input ${touched.email && !stepValid ? "error" : ""}`} placeholder="naam@email.nl" type="email"
        value={vals.email} onChange={(e) => set("email", e.target.value)}
        onKeyDown={(e) => e.key === "Enter" && next()} autoFocus />
          {touched.email && !stepValid && <p className="sfg-error">Vul een geldig e-mailadres in.</p>}
        </div>
      }

      {step.id === "akkoord" &&
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <label className="sfg-checkbox">
            <input type="checkbox" checked={vals.privacy} onChange={(e) => set("privacy", e.target.checked)} />
            <span className="box"><svg viewBox="0 0 16 16" fill="none" stroke="white" strokeWidth="2.6" strokeLinecap="round"><polyline points="3 9 7 13 13 4" /></svg></span>
            <span className="lbl">Ik ga akkoord met de <a href="#">privacyverklaring</a> en weet dat ik op elk moment kan stoppen.</span>
          </label>
          <label className="sfg-checkbox">
            <input type="checkbox" checked={vals.news} onChange={(e) => set("news", e.target.checked)} />
            <span className="box"><svg viewBox="0 0 16 16" fill="none" stroke="white" strokeWidth="2.6" strokeLinecap="round"><polyline points="3 9 7 13 13 4" /></svg></span>
            <span className="lbl">Stuur me de maandelijkse nieuwsbrief (max 1×/maand).</span>
          </label>
          {touched.akkoord && !vals.privacy && <p className="sfg-error">Akkoord op de privacyverklaring is verplicht.</p>}
        </div>
      }

      {/* Hide nav row for intent step (one-tap progression) */}
      {step.id !== "intent" &&
      <div className="sfg-form-nav">
          <button className="sfg-btn sfg-btn-outline" onClick={back} disabled={stepIdx === 0 || sending} style={{ opacity: stepIdx === 0 ? 0.3 : 1 }}>← Terug</button>
          <button className="sfg-btn sfg-btn-primary" onClick={next} disabled={sending}>
            {sending ? "Bezig met versturen…" : stepIdx === steps.length - 1 ? "Ik doe mee" : "Volgende"}
            {!sending && <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>}
          </button>
        </div>
      }
      {sendError &&
      <p className="sfg-error" style={{ marginTop: 12, textAlign: "center" }}>
        Er ging iets mis met versturen. Controleer je verbinding en probeer het nog eens.
      </p>
      }
    </div>);
}

// ── Group form (modal) ────────────────────────────────────────
function SfgGroupModal({ open, onClose }) {
  const [vals, setVals] = useStateF({
    soort: null, naam: "", stad: "", aantal: null, wat: null, thema: "", wanneer: null,
    contact: "", email: "", tel: "", akkoord: false
  });
  const [done, setDone] = useStateF(false);
  const [sending, setSending] = useStateF(false);
  const [err, setErr] = useStateF(false);
  const submitGroup = async () => {
    setErr(false);
    setSending(true);
    const r = await sendSignup({
      subject: "Nieuwe groepsinschrijving — Shift for Good",
      from_name: "Shift for Good website (groep)",
      type: "groepsinschrijving",
      groep_soort: vals.soort || "",
      groep_naam: vals.naam,
      stad: vals.stad,
      aantal: vals.aantal || "",
      wat_willen_jullie: vals.wat || "",
      thema: vals.thema,
      wanneer: vals.wanneer || "",
      contactpersoon: vals.contact,
      email: vals.email,
      telefoon: vals.tel,
      akkoord: vals.akkoord ? "ja" : "nee"
    });
    setSending(false);
    if (r.ok || r.skipped) {setDone(true);} else {setErr(true);}
  };
  if (!open) return null;
  const set = (k, v) => setVals({ ...vals, [k]: v });
  return (
    <div className="sfg-modal-backdrop" onClick={onClose}>
      <div className="sfg-modal" onClick={(e) => e.stopPropagation()}>
        <button className="sfg-modal-close" onClick={onClose} aria-label="Sluiten">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M4 4 L 16 16 M 16 4 L 4 16" /></svg>
        </button>
        {done ?
        <div className="sfg-success">
            <div className="sfg-success-mark">
              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><polyline points="4 12 10 18 20 6" /></svg>
            </div>
            <h2>Bedankt!</h2>
            <p style={{ fontFamily: "var(--gs-font-body)", fontSize: 18, fontWeight: 500, color: "var(--gs-fg-secondary)", maxWidth: 480, margin: "0 auto 28px" }}>
              We mailen je binnen 3 werkdagen om iets in te plannen.
            </p>
            <button className="sfg-btn sfg-btn-primary" onClick={onClose}>Sluiten</button>
          </div> :
        <>
            <span className="sfg-eyebrow">groepsinschrijving</span>
            <h2 className="sfg-h2" style={{ marginTop: 10 }}>Doe iets goeds met je crew</h2>
            <p style={{ fontFamily: "var(--gs-font-body)", fontSize: 16, color: "var(--gs-fg-secondary)", marginBottom: 28, maxWidth: 560 }}>
              Vertel ons even het belangrijkste. Wij mailen je binnen 3 werkdagen om iets in te plannen.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
              <Field label="Wat voor groep zijn jullie?">
                <PillRow options={["Team", "Vereniging", "Bedrijf", "School"]} value={vals.soort} onChange={(v) => set("soort", v)} />
              </Field>
              <div className="sfg-form-2col">
                <Field label="Naam van de groep">
                  <input className="sfg-input" placeholder="Bijv. studievereniging A.S.V. Gaudium" value={vals.naam} onChange={(e) => set("naam", e.target.value)} />
                </Field>
                <Field label="Stad">
                  <input className="sfg-input" placeholder="Amsterdam" value={vals.stad} onChange={(e) => set("stad", e.target.value)} />
                </Field>
              </div>
              <Field label="Hoeveel mensen schat je in?">
                <PillRow options={["Tot 5", "5 – 20", "20 – 50", "50 – 100", "100+"]} value={vals.aantal} onChange={(v) => set("aantal", v)} />
              </Field>
              <Field label="Wat willen jullie doen?">
                <PillRow options={["Groepsactie", "Branded event", "Allebei", "We denken graag mee"]} value={vals.wat} onChange={(v) => set("wat", v)} />
              </Field>
              <Field label="Voor welk thema of goed doel?" hint="Vul in wat je wilt — wij koppelen straks aan een matching partner.">
                <input className="sfg-input" placeholder="Bijv. dakloosheid, of Sheltersuit" value={vals.thema} onChange={(e) => set("thema", e.target.value)} />
              </Field>
              <Field label="Wanneer hebben jullie iets in gedachten?">
                <PillRow options={["Komende 2 maanden", "3 – 6 maanden", "Geen specifieke datum"]} value={vals.wanneer} onChange={(v) => set("wanneer", v)} />
              </Field>
              <div className="sfg-form-2col">
                <Field label="Naam contactpersoon">
                  <input className="sfg-input" placeholder="Voor- en achternaam" value={vals.contact} onChange={(e) => set("contact", e.target.value)} />
                </Field>
                <Field label="E-mailadres">
                  <input className="sfg-input" type="email" placeholder="naam@org.nl" value={vals.email} onChange={(e) => set("email", e.target.value)} />
                </Field>
              </div>
              <Field label="Telefoonnummer">
                <input className="sfg-input" type="tel" placeholder="06 12 34 56 78" value={vals.tel} onChange={(e) => set("tel", e.target.value)} />
              </Field>
              <label className="sfg-checkbox">
                <input type="checkbox" checked={vals.akkoord} onChange={(e) => set("akkoord", e.target.checked)} />
                <span className="box"><svg viewBox="0 0 16 16" fill="none" stroke="white" strokeWidth="2.6" strokeLinecap="round"><polyline points="3 9 7 13 13 4" /></svg></span>
                <span className="lbl">Ik ga akkoord met de <a href="#">privacyverklaring</a> en wil graag contact.</span>
              </label>
              <button className="sfg-btn sfg-btn-primary sfg-btn-lg" onClick={submitGroup} disabled={!vals.akkoord || !vals.email || sending}>
                {sending ? "Bezig met versturen…" : "Verstuur"}
                {!sending && <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>}
              </button>
              {err &&
              <p className="sfg-error" style={{ textAlign: "center" }}>
                Er ging iets mis met versturen. Probeer het nog eens.
              </p>
              }
            </div>
          </>
        }
      </div>
    </div>);
}

function Field({ label, hint, children }) {
  return (
    <div>
      <label style={{ display: "block", fontFamily: "var(--gs-font-display)", fontWeight: 700, fontSize: 17, marginBottom: 8, letterSpacing: "-0.01em" }}>{label}</label>
      {hint && <p style={{ fontFamily: "var(--gs-font-body)", fontSize: 14, color: "var(--gs-fg-secondary)", margin: "0 0 10px" }}>{hint}</p>}
      {children}
    </div>);
}

Object.assign(window, { SfgForm, SfgGroupModal, PillRow, OffRamp });