// Shift for Good — forms
// Funnel (per brief): doe je mee? → wat gaat je aan het hart? → wat past bij jou?
//   → hoe mogen we je noemen? → hé [naam], doe je mee? (e-mail) → akkoord → welkom.
// "Nee" branch offers a soft exit + share. Progress is persisted to localStorage
// (stand-in for the movement database).
const { useState: useStateF, useMemo: useMemoF } = React;

const SHARE_URL = "www.shiftforgood.nl";
const SHARE_HREF = "https://www.shiftforgood.nl";

// ───────────────────────────────────────────────────────────────
// AANMELDINGEN — Web3Forms
// Haal je access key op via https://web3forms.com (vul je ontvangst-e-mailadres
// in, de key komt in je mail) en plak die hieronder. Tot dat moment werkt het
// formulier wel (je ziet het "welkom"-scherm), maar wordt er niets verstuurd.
const WEB3FORMS_ACCESS_KEY = "51f9b64c-25af-49b8-b89d-6b5a72acef74";

async function sendSignup(payload) {
  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 }) {
  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">
      {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>);
}

// ── Share popup (copyable link, web + mobile) ──────────────────
function SfgSharePopup({ open, onClose }) {
  const [copied, setCopied] = useStateF(false);
  const [title, setTitle] = useStateF("Ik doe mee met Shift for Good 💪");
  const [desc, setDesc] = useStateF("Een beweging van jongeren die iets willen doen voor een betere wereld. Op jouw manier — klein of groot. Doe je mee?");
  if (!open) return null;

  const copy = async () => {
    try { await navigator.clipboard.writeText(SHARE_HREF); } catch (e) {}
    setCopied(true); setTimeout(() => setCopied(false), 1800);
  };
  const nativeShare = async () => {
    if (navigator.share) {
      try { await navigator.share({ title, text: desc, url: SHARE_HREF }); } catch (e) {}
    } else { copy(); }
  };

  return (
    <div className="sfg-modal-backdrop" onClick={onClose}>
      <div className="sfg-modal sfg-modal-share" 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>
        <span className="sfg-eyebrow">deel met iemand anders</span>
        <h2 className="sfg-h2" style={{ marginTop: 10 }}>Geef het door.</h2>
        <p className="sfg-share-intro">Eén bericht en je trekt iemand mee de beweging in. Pas de tekst gerust aan.</p>

        {/* general shareable post — editable title + description */}
        <div className="sfg-share-card">
          <div className="sfg-share-card-media">
            <SfgLogo color="white" size={26} />
          </div>
          <div className="sfg-share-card-body">
            <input className="sfg-share-title" value={title} onChange={(e) => setTitle(e.target.value)} aria-label="Titel van je post" />
            <textarea className="sfg-share-desc" value={desc} rows={3} onChange={(e) => setDesc(e.target.value)} aria-label="Omschrijving van je post" />
            <span className="sfg-share-url">{SHARE_URL}</span>
          </div>
        </div>

        <div className="sfg-share-linkrow">
          <span className="sfg-share-link">{SHARE_URL}</span>
          <button className={`sfg-btn ${copied ? "sfg-btn-green" : "sfg-btn-primary"}`} onClick={copy}>
            {copied ?
            <><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><polyline points="4 12 10 18 20 6" /></svg>Gekopieerd</> :
            <>Kopieer link</>}
          </button>
        </div>
        <button className="sfg-btn sfg-btn-outline sfg-btn-block sfg-share-native" onClick={nativeShare}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" /><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4" /></svg>
          Delen via…
        </button>
      </div>
    </div>);
}

// ── Signup: yes/no first, enrich, then capture, then consent ───
const SFG_THEMES = ["Armoede", "Cultuur", "Dierenwelzijn", "Gezondheid", "Mentale gezondheid", "Mensenrechten", "Gelijke kansen & inclusiviteit", "Klimaat & Natuur", "Noodhulp", "Onderwijs", "Sport"];
const SFG_ALGEMEEN = ["Allemaal belangrijk", "Geen voorkeur"];
const SFG_FIT = ["Doen", "Je stem laten horen", "Doneren", "Leren", "Helpen", "Actie voeren", "Team beleving"];

function SfgForm({ compact = false }) {
  const [phase, setPhase] = useStateF("intro"); // intro | themas | fit | naam | email | akkoord | done | nee
  const [vals, setVals] = useStateF({
    naam: "", email: "", themas: [], algemeen: "", fit: [], akkoord: false
  });
  const [touched, setTouched] = useStateF(false);
  const [shareOpen, setShareOpen] = useStateF(false);
  const set = (k, v) => setVals((s) => ({ ...s, [k]: v }));

  const voornaam = vals.naam.trim().split(" ")[0] || "shifter";
  const emailOk = /.+@.+\..+/.test(vals.email);
  const nameOk = vals.naam.trim().length >= 2;

  const persist = (stage, override = {}) => {
    try { localStorage.setItem("sfg-signup", JSON.stringify({ ...vals, ...override, stage, ts: Date.now() })); } catch (e) {}
  };

  // "Ga terug" — terug naar de vorige stap; ingevulde gegevens blijven staan.
  const prevPhase = { themas: "intro", fit: "themas", naam: "fit", email: "naam", akkoord: "email" };
  const goBack = () => { setTouched(false); const p = prevPhase[phase]; if (p) setPhase(p); };

  const toggleTheme = (t) =>
    setVals((s) => {
      const has = s.themas.includes(t);
      return { ...s, algemeen: "", themas: has ? s.themas.filter((x) => x !== t) : [...s.themas, t] };
    });
  const pickAlgemeen = (a) =>
    setVals((s) => ({ ...s, algemeen: s.algemeen === a ? "" : a, themas: [] }));
  const toggleFit = (t) =>
    setVals((s) => ({ ...s, fit: s.fit.includes(t) ? s.fit.filter((x) => x !== t) : [...s.fit, t] }));

  const goEmail = () => { setTouched(true); if (!nameOk) return; persist("naam"); setTouched(false); setPhase("email"); };
  const goAkkoord = () => { setTouched(true); if (!emailOk) return; persist("email"); setTouched(false); setPhase("akkoord"); };
  const finish = async () => {
    persist("done", { akkoord: true });
    await sendSignup({
      subject: "Nieuwe aanmelding — Shift for Good",
      from_name: "Shift for Good website",
      naam: vals.naam,
      email: vals.email,
      wat_gaat_je_aan_het_hart: (vals.themas || []).join(", "),
      thema_voorkeur: vals.algemeen || "",
      wat_past_bij_jou: (vals.fit || []).join(", "),
      akkoord: "ja"
    });
    setPhase("done");
  };

  // ── DONE (welkom) ──
  if (phase === "done") {
    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, {voornaam}.</h2>
          <p className="sfg-success-sub">
            Super dat jij nu onderdeel bent van Shift for Good. Samen maken we meer impact.
          </p>
          <div className="sfg-success-actions">
            <a href="#nu" className="sfg-btn sfg-btn-orange">Check wat er speelt →</a>
            <button className="sfg-btn sfg-btn-outline" onClick={() => setShareOpen(true)}>Deel met iemand anders</button>
          </div>
        </div>
        <SfgSharePopup open={shareOpen} onClose={() => setShareOpen(false)} />
      </div>);
  }

  // ── NEE (soft exit) ──
  if (phase === "nee") {
    return (
      <div className={`sfg-form-card ${compact ? "sfg-form-card-compact" : ""}`}>
        <div className="sfg-success">
          <div className="sfg-success-mark soft">
            <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 21s-7-4.6-9.3-9C1 8.5 2.7 5 6 5c2 0 3.2 1.2 4 2.4C10.8 6.2 12 5 14 5c3.3 0 5 3.5 3.3 7-2.3 4.4-9.3 9-9.3 9" /></svg>
          </div>
          <h2>Helemaal goed.</h2>
          <p className="sfg-success-sub">
            Geen druk — je bent altijd welkom. Kijk gerust eerst eens rond wat er nu al speelt, of stuur het door naar iemand voor wie het wél het juiste moment is.
          </p>
          <div className="sfg-success-actions">
            <a href="#nu" className="sfg-btn sfg-btn-primary">Toch nog even kijken →</a>
            <button className="sfg-btn sfg-btn-outline" onClick={() => setShareOpen(true)}>Deel met iemand anders</button>
          </div>
          <button className="sfg-skip" style={{ marginTop: 6 }} onClick={() => { setPhase("intro"); }}>Terug</button>
        </div>
        <SfgSharePopup open={shareOpen} onClose={() => setShareOpen(false)} />
      </div>);
  }

  // ── Wrapper with progress for the multi-step part ──
  const stepOrder = ["intro", "themas", "fit", "naam", "email", "akkoord"];
  const stepNo = stepOrder.indexOf(phase);

  return (
    <div className={`sfg-form-card ${compact ? "sfg-form-card-compact" : ""}`}>
      {phase !== "intro" &&
      <div className="sfg-profile-head">
        <span className="sfg-form-chip">
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.8" strokeLinecap="round"><polyline points="3 9 7 13 13 4" /></svg>
          Je bent goed bezig
        </span>
        <div className="sfg-pdots">
          {[1, 2, 3, 4, 5].map((d) => <span key={d} className="dot" data-on={d <= stepNo} />)}
        </div>
      </div>}

      {/* STEP 1 — doe je mee? */}
      {phase === "intro" &&
      <div>
        <h3 className="sfg-form-q">Doe je mee?</h3>
        <p className="sfg-form-hint">Je zit nergens aan vast. Dit is een eerste klik.</p>
        <div className="sfg-form-nav-stacked" style={{ marginTop: 22 }}>
          <button className="sfg-btn sfg-btn-orange sfg-btn-lg sfg-btn-block" onClick={() => { persist("intro-yes"); setPhase("themas"); }}>
            Ja, ik doe mee
            <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>
          <button className="sfg-btn sfg-btn-soft sfg-btn-block" onClick={() => { persist("intro-no"); setPhase("nee"); }}>
            Nee, nog niet voor mij
          </button>
        </div>
      </div>}

      {/* STEP 2 — wat gaat je aan het hart? */}
      {phase === "themas" &&
      <div>
        <h3 className="sfg-form-q">Wat gaat je aan het hart?</h3>
        <p className="sfg-form-hint">Selecteer zoveel je wilt.</p>
        <div className="sfg-pills">
          {SFG_THEMES.map((t) =>
          <button key={t} type="button" className="sfg-pill" aria-pressed={vals.themas.includes(t)} onClick={() => toggleTheme(t)}>
              <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>{t}</span>
            </button>)}
        </div>
        {SFG_ALGEMEEN.map((a) =>
        <button key={a} type="button" className="sfg-pill sfg-pill-wide" aria-pressed={vals.algemeen === a} onClick={() => pickAlgemeen(a)}>
          <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>{a}</span>
        </button>)}
        <div className="sfg-form-nav">
          <div style={{ display: "flex", gap: 4 }}>
            <button className="sfg-skip" onClick={goBack}>Ga terug</button>
            <button className="sfg-skip" onClick={() => { persist("themas"); setPhase("fit"); }}>Sla over</button>
          </div>
          <button className="sfg-btn sfg-btn-primary" onClick={() => { persist("themas"); setPhase("fit"); }}>
            Volgende
            <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>
      </div>}

      {/* STEP 3 — wat past bij jou? */}
      {phase === "fit" &&
      <div>
        <h3 className="sfg-form-q">Wat past bij jou?</h3>
        <p className="sfg-form-hint">Als inspiratie — alles draagt bij.</p>
        <div className="sfg-pills">
          {SFG_FIT.map((t) =>
          <button key={t} type="button" className="sfg-pill" aria-pressed={vals.fit.includes(t)} onClick={() => toggleFit(t)}>
              <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>{t}</span>
            </button>)}
        </div>
        <div className="sfg-form-nav">
          <div style={{ display: "flex", gap: 4 }}>
            <button className="sfg-skip" onClick={goBack}>Ga terug</button>
            <button className="sfg-skip" onClick={() => { persist("fit"); setPhase("naam"); }}>Sla over</button>
          </div>
          <button className="sfg-btn sfg-btn-primary" onClick={() => { persist("fit"); setPhase("naam"); }}>
            Volgende
            <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>
      </div>}

      {/* STEP 5 — hoe mogen we je noemen? */}
      {phase === "naam" &&
      <div>
        <h3 className="sfg-form-q">Hoe mogen we je noemen?</h3>
        <p className="sfg-form-hint">Leuk je te leren kennen.</p>
        <input className={`sfg-input ${touched && !nameOk ? "error" : ""}`} placeholder="Je naam" autoFocus
          value={vals.naam} onChange={(e) => set("naam", e.target.value)} onKeyDown={(e) => e.key === "Enter" && goEmail()} />
        {touched && !nameOk && <p className="sfg-error">Vul even je naam in.</p>}
        <div className="sfg-form-nav" style={{ marginTop: 18 }}>
          <button className="sfg-skip" onClick={goBack}>Ga terug</button>
          <button className="sfg-btn sfg-btn-primary" onClick={goEmail}>
            Volgende
            <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>
      </div>}

      {/* STEP 6 — hé [naam], doe je mee? (e-mail) */}
      {phase === "email" &&
      <div>
        <h3 className="sfg-form-q">Hé {voornaam}, doe je mee met shift for good?</h3>
        <p className="sfg-form-hint">We houden je graag op de hoogte, no strings attached.</p>
        <input className={`sfg-input ${touched && !emailOk ? "error" : ""}`} placeholder="naam@email.nl" type="email" autoFocus
          value={vals.email} onChange={(e) => set("email", e.target.value)} onKeyDown={(e) => e.key === "Enter" && goAkkoord()} />
        {touched && !emailOk && <p className="sfg-error">Vul een geldig e-mailadres in.</p>}
        <div className="sfg-form-nav" style={{ marginTop: 18 }}>
          <button className="sfg-skip" onClick={goBack}>Ga terug</button>
          <button className="sfg-btn sfg-btn-primary" onClick={goAkkoord}>
            Volgende
            <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>
      </div>}

      {/* STEP 7 — akkoord */}
      {phase === "akkoord" &&
      <div>
        <h3 className="sfg-form-q">Bijna. Even afvinken.</h3>
        <p className="sfg-form-hint">Kijk daarna snel verder wat er al speelt.</p>
        <label className="sfg-checkbox" style={{ marginTop: 18 }}>
          <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="https://goodshift.nl/privacy" target="_blank" rel="noreferrer">privacyverklaring</a> en weet dat ik op elk moment kan stoppen.</span>
        </label>
        <div className="sfg-form-nav" style={{ marginTop: 22 }}>
          <button className="sfg-skip" onClick={goBack}>Ga terug</button>
          <button className="sfg-btn sfg-btn-orange sfg-btn-lg" onClick={finish} disabled={!vals.akkoord}>
            Ik doe mee
            <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>
        </div>
      </div>}
    </div>);
}

// ── Group form (modal) ────────────────────────────────────────
function SfgGroupModal({ open, onClose }) {
  const [vals, setVals] = useStateF({
    soort: null, naam: "", aantal: null, wat: null, thema: "", wanneer: null, datum: "",
    contact: "", email: "", tel: "", akkoord: false
  });
  const [done, setDone] = useStateF(false);
  if (!open) return null;
  const set = (k, v) => setVals({ ...vals, [k]: v });

  // Stand-in: this is where the submission is routed to hello@goodshift.nl.
  const submit = async () => {
    try { localStorage.setItem("sfg-group", JSON.stringify({ ...vals, to: "hello@goodshift.nl", ts: Date.now() })); } catch (e) {}
    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,
      aantal: vals.aantal || "",
      wat_willen_jullie: vals.wat || "",
      thema: vals.thema || "",
      wanneer: vals.wanneer || "",
      datum: vals.datum || "",
      contactpersoon: vals.contact,
      email: vals.email,
      telefoon: vals.tel,
      akkoord: vals.akkoord ? "ja" : "nee"
    });
    setDone(true);
  };

  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 nemen binnen 3 werkdagen contact met je op 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 nemen binnen 3 werkdagen contact op 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", "Anders"]} value={vals.soort} onChange={(v) => set("soort", v)} />
              </Field>
              <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="Met hoeveel zijn jullie?">
                <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?" hint="Optioneel.">
                <input className="sfg-input" placeholder="Bijv. een sleep out, een teamuitje met impact, of we denken graag mee" value={vals.wat || ""} onChange={(e) => set("wat", e.target.value)} />
              </Field>
              <Field label="Voor welk thema of goed doel?" hint="Optioneel.">
                <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={["Datum invullen", "Moeten we nog bepalen"]} value={vals.wanneer} onChange={(v) => set("wanneer", v)} />
                {vals.wanneer === "Datum invullen" &&
                <input className="sfg-input" type="date" style={{ marginTop: 12 }} value={vals.datum} onChange={(e) => set("datum", e.target.value)} />}
              </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" hint="Optioneel.">
                <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="https://goodshift.nl/privacy" target="_blank" rel="noreferrer">privacyverklaring</a> en wil graag contact.</span>
              </label>
              <button className="sfg-btn sfg-btn-primary sfg-btn-lg" onClick={submit} disabled={!vals.akkoord || !vals.email}>
                Verstuur
                <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>
            </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, SfgSharePopup, PillRow });