// Shift for Good — page sections
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS, useMemo: useMemoF } = React;

// Resolve an asset to its bundled blob URL (set up by the standalone bundler
// via <meta name="ext-resource-dependency">) or fall back to the on-disk path
// so the un-bundled source keeps working unchanged.
function sfgRes(id, fallback) {
  return (typeof window !== "undefined" && window.__resources && window.__resources[id]) || fallback;
}

// ── Stockfoto placeholder block (gradient + grain) ─────────────
function SfgPhoto({ tone = "warm", tag, src, children, style, flat = false }) {
  const tones = {
    warm: "linear-gradient(135deg, #F9CB40 0%, #FE664E 50%, #C84028 100%)",
    purple: "linear-gradient(135deg, #8B82FF 0%, #685DFD 50%, #2A20B0 100%)",
    coral: "linear-gradient(135deg, #FFB69E 0%, #FE664E 60%, #8E2E1F 100%)",
    dusk: "linear-gradient(160deg, #FF9D6E 0%, #C24766 50%, #3E2E66 100%)",
    sage: "linear-gradient(135deg, #C9D894 0%, #4B8C5A 60%, #1E3B2A 100%)",
    night: "linear-gradient(135deg, #4439DD 0%, #1C1828 60%, #000 100%)",
    sun: "linear-gradient(135deg, #FFE76A 0%, #F9CB40 50%, #DD7D54 100%)",
    plum: "linear-gradient(135deg, #DB9E85 0%, #8E2E1F 50%, #24115A 100%)"
  };
  return (
    <div className="sfg-photo" style={{ ...style, background: tones[tone] || tones.warm }}>
      {src && <img src={src} alt={tag || ""} loading="lazy" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} onError={(e) => { e.currentTarget.style.display = "none"; }} />}
      {!flat && <div className="wash" />}
      <div className="grain" />
      {tag && <div className="sfg-photo-tag">{tag}</div>}
      {children}
    </div>);
}

// ── Nav ────────────────────────────────────────────────────────
function SfgNav({ onJump }) {
  const links = [
  { id: "nu", label: "Wat speelt er" },
  { id: "krijg", label: "Wat krijg je" },
  { id: "groep", label: "Met je crew" }];

  return (
    <nav className="sfg-nav">
      <a href="#top" className="sfg-nav-logo" onClick={(e) => {e.preventDefault();onJump("top");}}>
        <img src={sfgRes("logoWordmark", "/assets/goodshift-logo.png")} alt="GoodShift" height="26" style={{ display: "block", height: 26, width: "auto" }} />
      </a>
      <div className="sfg-nav-links">
        {links.map((l) =>
        <a key={l.id} href={`#${l.id}`} onClick={(e) => {e.preventDefault();onJump(l.id);}}>{l.label}</a>
        )}
        <button className="sfg-nav-cta" onClick={() => onJump("doe-mee")}>Ik doe mee</button>
      </div>
    </nav>);
}

// ── Animated counter (used in hero) ────────────────────────────
function useCountUp(target, durMs = 1600) {
  const [v, setV] = useStateS(0);
  useEffectS(() => {
    let start = null;let raf;
    const tick = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / durMs);
      const eased = 1 - Math.pow(1 - p, 3);
      setV(Math.floor(target * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target]);
  return v;
}
function fmt(n) {return n.toLocaleString("nl-NL");}

function HeroCounter() {
  const mensen = useCountUp(2184);
  return (
    <div className="sfg-hero-counter">
      <div className="hc-tick"><span className="dot" /><span>live</span></div>
      <div className="hc-stat">
        <span className="num">{fmt(mensen)}</span>
        <span className="lbl">jongeren doen al mee</span>
      </div>
    </div>);
}

// ── HERO — split, with embedded signup card ────────────────────
function SfgHero({ variant, onJump }) {
  const bgs = {
    foto: { tone: "dusk", tag: "Shift for good campagne", img: "/images/hero.jpg" },
    split: { tone: "coral", tag: "Sfeerbeeld — Sleep out 2025", img: "/images/hero-split.jpg" },
    bold: { tone: "purple", tag: "Sfeerbeeld — Festival crew Utrecht", img: "/images/hero-bold.jpg" },
    illu: { tone: "sun", tag: "Sfeerbeeld — Strandcleanup, Zandvoort", img: "/images/hero-illu.jpg" }
  };
  const bg = bgs[variant] || bgs.foto;
  return (
    <section className="sfg-hero sfg-hero-split" id="top">
      <SfgPhoto tone={bg.tone} tag={bg.tag} src={bg.img} style={{ position: "absolute", inset: 0 }} />
      <div className="sfg-hero-veil" />
      <div className="sfg-container sfg-hero-content">
        <div className="sfg-hero-left">
          <span className="sfg-hero-eyebrow">shift for good</span>
          <h1>Shift for good.<br /><span className="underline">Movement van goed doen.</span></h1>
          <p className="sub">Word onderdeel van een beweging van jongeren die iets willen doen voor een betere wereld. Samen, op jouw manier — klein of groot, eenmalig of structureel.</p>
          <HeroCounter />
        </div>
        <div className="sfg-hero-right" id="doe-mee">
          <div className="sfg-hero-formhead">
            <span className="sfg-hero-formhead-eyebrow">in 60 sec</span>
          </div>
          <SfgForm />
        </div>
      </div>
    </section>);
}

// ── Section: WAT SPEELT ER NU ──────────────────────────────────
// `impact` maps to the form's step-3 categories (Doen/Doneren/Kopen/Leren/
// Helpen) so we can filter on it AND reorder tiles to match what a member
// picked in the signup. `href` makes each tile click out to the partner.
// `impact` = de filtercategorie. Deze komt 1-op-1 overeen met de "Wat past bij
// jou?"-opties uit het hero-formulier, zodat tegels handmatig gefilterd kunnen
// worden én automatisch op volgorde komen na het invullen van het formulier.
// Sponsorloop / Actie / Inzamelactie vallen allemaal onder "Doen".
// `pin: true` houdt een tegel altijd op de eerste pagina (eerste 6).
const SFG_ACTION_ITEMS = [
{ tag: "Open call", tagType: "", partner: "GoodShift", tone: "purple", slot: "act-start", img: "/assets/actions/act-start.jpg", ph: "Beeld — Start je eigen actie", title: "Start je eigen actie", body: "Haal, samen of alleen, geld op voor een zelfgekozen goed doel.", meta: ["Online", "doorlopend"], type: "Actie", impact: "Doen", pin: true, href: "https://goodshift.nl/action" },
{ tag: "Live nu", tagType: "live", partner: "ActionAid", tone: "sage", slot: "act-actionaid", ph: "Beeld — Feminist Climate Academy", title: "Feminist Climate Academy", body: "Meld je nu gratis aan en leer samen hoe je in actie komt!", meta: ["Den Haag/Amsterdam", "8 sept t/m 1 dec 2026"], type: "Leren", impact: "Leren", href: "https://actionaid.nl/doe-mee/feminist-climate-academy/" },
{ tag: "Open call", tagType: "", partner: "Sheltersuit", tone: "dusk", slot: "act-sheltersuit", img: "/assets/actions/act-sheltersuit.jpg", ph: "Foto — Sheltersuit Sleep Out", title: "Sheltersuit Sleep Out", body: "Eén nacht buiten slapen: steun mensen die geen keuze hebben.", meta: ["Deelnemende steden", "doorlopend"], type: "Actie", impact: "Doen", href: "https://sleepout.sheltersuit.com/" },
{ tag: "Binnenkort", tagType: "soon", partner: "Cordaid", tone: "sun", slot: "act-cordaid", ph: "Foto — Cordaid Beach Challenge", title: "Cordaid Beach Challenge", body: "Een wandeling op het strand om geld op te halen voor mensen in nood.", meta: ["Scheveningen", "10 okt 2026"], type: "Inzamelactie", impact: "Doen", href: "https://cordaidbeachchallenge.nl/" },
{ tag: "Doorlopend", tagType: "", partner: "GoodShift", tone: "night", slot: "act-doneren", img: "/assets/actions/act-doneren.jpg", ph: "Beeld — Doneer direct", title: "Doneer direct", body: "Doneer eenvoudig en snel via web of via app als je jouw impact wilt volgen.", meta: ["goodshift.nl"], type: "Doneren", impact: "Doneren", pin: true, href: "https://goodshift.nl/charities" },
{ tag: "Binnenkort", tagType: "soon", partner: "MetaKids", tone: "plum", slot: "act-metakids", ph: "Foto — MetaKids Team Challenge", title: "MetaKids Team Challenge", body: "Obstacle Run in Utrecht binnenstad: individueel of in teams.", meta: ["Utrecht", "8 nov 2026"], type: "Sponsorloop", impact: "Doen", href: "https://metakids.nl/nieuws/nieuwe-obstacle-run-in-utrecht-voor-kinderen-met-metabole-ziekten/" },
{ tag: "Live nu", tagType: "live", partner: "Adopteer Regenwoud", tone: "sage", slot: "act-regenwoud", ph: "Foto — regenwoud", title: "Adopteer Regenwoud", body: "€2,50 = 1 m² regenwoud beschermd! Adopteer zelf of geef kado.", meta: ["Costa Rica", "doorlopend"], type: "Doneren", impact: "Doneren", href: "https://www.adopteerregenwoud.nl/" },
{ tag: "Doorlopend", tagType: "", partner: "VluchtelingenWerk", tone: "coral", slot: "act-vluchtelingenwerk", ph: "Beeld — Samen Leven poster", title: "Samen Leven-poster", body: "Laat zien dat samen sterker is! Ontvang 'm digitaal of per post.", meta: ["Online", "doorlopend"], type: "Je stem laten horen", impact: "Je stem laten horen", href: "https://actie.vluchtelingenwerk.nl/2026-poster" },
{ tag: "Doorlopend", tagType: "", partner: "Rode Kruis", tone: "coral", slot: "act-rodekruis", ph: "Foto — EHBO", title: "EHBO & reanimatie", body: "Leer hoe je hulp verleent in verschillende situaties, aan baby's, kinderen of volwassenen.", meta: ["Online of klassikaal", "doorlopend"], type: "Leren", impact: "Leren", href: "https://shop.rodekruis.nl/ehbo-cursussen" },
{ tag: "Open call", tagType: "", partner: "Strong Babies", tone: "sun", slot: "act-strongbabies", ph: "Foto — Sterke start loop", title: "Sterke start loop", body: "Dé run voor iedereen die de allerkleinsten een sterke start wil geven.", meta: ["Zevenhuizen", "15 nov 2026"], type: "Sponsorloop", impact: "Doen", href: "https://www.strongbabies.nl/help-mee/evenementen/sterkestartloop/evenementeninformatie" },
{ tag: "Open call", tagType: "", partner: "Right To Play", tone: "sun", slot: "act-rtp", ph: "Foto — Right To Play", title: "PLAY clinic", body: "Ga met collega's minstens 1,5 uur sportief aan de slag onder leiding van een inspirerende (oud) topsporter.", meta: ["Clinic", "doorlopend"], type: "Team beleving", impact: "Team beleving", href: "https://righttoplay.nl/nl/national-offices/national-office-netherlands/landing-pages/play-experiences/play-clinics/play-clinic-met-een-topsporter/" },
{ tag: "Open call", tagType: "", partner: "Greenpeace", tone: "sage", slot: "act-greenpeace", ph: "Foto — Greenpeace actieloods", title: "Rondleiding actieloods", body: "Krijg als donateur of actievoerder een uniek inkijkje in de loods met protestmaterialen.", meta: ["Amsterdam", "op aanvraag"], type: "Team beleving", impact: "Team beleving", interest: true },
{ tag: "Doorlopend", tagType: "", partner: "SailWise", tone: "night", slot: "act-sailwise", ph: "Foto — Roeiclinic", title: "Roeiclinic van wereldkampioen", body: "Doe als bedrijf een donatie en krijg een roeiclinic met collega's.", meta: ["Op aanvraag"], type: "Team beleving", impact: "Team beleving", interest: true },
{ tag: "Doorlopend", tagType: "", partner: "Shift for good", tone: "purple", slot: "act-speelmee", noImg: true, ph: "Beeld — Speel mee en win", title: "Speel mee en win", body: "Maak kans op unieke prijzen! Door mee te spelen draag je bij aan jouw favoriete goede doelen.", meta: ["i.s.m. Nederlandse Loterij", "doorlopend"], type: "Doen", impact: "Doen", pin: true, href: "" },
{ tag: "Live nu", tagType: "live", partner: "KiKa", tone: "plum", slot: "act-kika", ph: "Foto — Run for KiKa", title: "Run for KiKa", body: "Kies jouw favoriete afstand en Run for KiKa-locatie.", meta: ["4 locaties", "2026"], type: "Sponsorloop", impact: "Doen", href: "https://www.runforkika.nl/" }];

const SFG_PER_PAGE = 6;

// ── Interesse-modal: e-mail achterlaten bij een actie (tegels 12 & 13) ──
function SfgInterestModal({ actie, onClose }) {
  const [email, setEmail] = useStateS("");
  const [sending, setSending] = useStateS(false);
  const [done, setDone] = useStateS(false);
  const [err, setErr] = useStateS(false);
  if (!actie) return null;
  const submit = async () => {
    if (!email) return;
    setErr(false);
    setSending(true);
    const r = await sendSignup({
      subject: "Interesse via actietegel: " + actie,
      from_name: "Shift for Good website",
      type: "interesse",
      actie: actie,
      email: email
    });
    setSending(false);
    if (r.ok || r.skipped) { setDone(true); } else { setErr(true); }
  };
  return (
    <div className="sfg-modal-backdrop" onClick={onClose}>
      <div className="sfg-modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 480 }}>
        <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">
            <h3>Gelukt!</h3>
            <p className="sfg-success-sub">Bedankt voor je interesse in "{actie}". We nemen zo snel mogelijk contact met je op.</p>
            <div className="sfg-success-actions">
              <button className="sfg-btn sfg-btn-orange" onClick={onClose}>Sluiten</button>
            </div>
          </div>
        :
        <div>
            <span className="sfg-action-type" style={{ marginBottom: 8, display: "inline-block" }}>Interesse</span>
            <h3 className="sfg-form-q">{actie}</h3>
            <p className="sfg-form-hint">Laat je e-mailadres achter en wij nemen zo snel mogelijk contact met je op voor meer informatie.</p>
            <input className="sfg-input" type="email" placeholder="jouw@email.nl" value={email} onChange={(e) => setEmail(e.target.value)} style={{ marginTop: 14 }} />
            <button className="sfg-btn sfg-btn-orange sfg-btn-lg" onClick={submit} disabled={!email || sending} style={{ marginTop: 14, width: "100%" }}>
              {sending ? "Bezig met versturen…" : "Verstuur"}
            </button>
            {err && <p className="sfg-error" style={{ textAlign: "center", marginTop: 10 }}>Er ging iets mis. Probeer het nog eens.</p>}
          </div>
        }
      </div>
    </div>);
}

// ── Lead-modal: vóór het doorklikken naar een externe URL eerst (optioneel)
//    een e-mailadres vragen. E-mail is optioneel; je kan altijd doorklikken. ──
function SfgLeadModal({ actie, onClose }) {
  const [email, setEmail] = useStateS("");
  const [sending, setSending] = useStateS(false);
  if (!actie) return null;
  const emailOk = /.+@.+\..+/.test(email);

  const proceed = async () => {
    // E-mail is optioneel: alleen versturen als er iets geldigs staat.
    if (emailOk) {
      setSending(true);
      try {
        await sendSignup({
          subject: "Interesse via actietegel: " + actie.title,
          from_name: "Shift for Good website",
          type: "lead-interesse",
          actie: actie.title,
          email: email,
          doorgestuurd_naar: actie.href || ""
        });
      } catch (e) {}
      setSending(false);
    }
    if (actie.href) window.open(actie.href, "_blank", "noopener");
    onClose();
  };

  return (
    <div className="sfg-modal-backdrop" onClick={onClose}>
      <div className="sfg-modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 480 }}>
        <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-action-type" style={{ marginBottom: 8, display: "inline-block" }}>Op de hoogte blijven?</span>
        <h3 className="sfg-form-q">{actie.title}</h3>
        <p className="sfg-form-hint">Laat je e-mailadres achter als je op de hoogte wilt blijven van hoe je kan deelnemen aan de Shift for Good beweging.</p>
        <input className="sfg-input" type="email" placeholder="jouw@email.nl (optioneel)" value={email}
          onChange={(e) => setEmail(e.target.value)} onKeyDown={(e) => e.key === "Enter" && proceed()} style={{ marginTop: 14 }} />
        <p className="sfg-form-hint" style={{ marginTop: 8 }}>Je e-mailadres invullen is optioneel — je gaat sowieso door naar de pagina.</p>
        <button className="sfg-btn sfg-btn-orange sfg-btn-lg" onClick={proceed} disabled={sending} style={{ marginTop: 14, width: "100%" }}>
          {sending ? "Even geduld…" : "Ga door"}
          <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>);
}

function SfgActions() {
  const [filter, setFilter] = useStateS("Alles");
  const [page, setPage] = useStateS(0);
  const [prefs, setPrefs] = useStateS([]); // impact categories from signup
  const [interestActie, setInterestActie] = useStateS(null);
  const [leadActie, setLeadActie] = useStateS(null);

  // Read what the member picked in the signup (step 3) to reorder tiles.
  useEffectS(() => {
    try {
      const raw = localStorage.getItem("sfg-signup");
      if (raw) { const d = JSON.parse(raw); if (Array.isArray(d.fit)) setPrefs(d.fit); }
    } catch (e) {}
  }, []);

  // Filter chips: only categories that actually have tiles.
  const present = [];
  SFG_ACTION_ITEMS.forEach((it) => { if (!present.includes(it.impact)) present.push(it.impact); });
  const order = ["Doen", "Je stem laten horen", "Doneren", "Leren", "Helpen", "Actie voeren", "Team beleving"];
  const filters = ["Alles", ...order.filter((c) => present.includes(c))];

  // Volgorde: vastgezette tegels (pin) altijd eerst, dan de tegels die matchen
  // met wat iemand in het formulier koos, dan de rest (stabiele sortering).
  const sorted = useMemoF(() => {
    const rank = (it) => it.pin ? 0 : (prefs.length && prefs.includes(it.impact) ? 1 : 2);
    return SFG_ACTION_ITEMS
      .map((it, i) => ({ it, i, r: rank(it) }))
      .sort((a, b) => a.r - b.r || a.i - b.i)
      .map((x) => x.it);
  }, [prefs]);

  const visible = filter === "Alles" ? sorted : sorted.filter((it) => it.impact === filter);
  const pageCount = Math.max(1, Math.ceil(visible.length / SFG_PER_PAGE));
  const safePage = Math.min(page, pageCount - 1);
  const pageItems = visible.slice(safePage * SFG_PER_PAGE, safePage * SFG_PER_PAGE + SFG_PER_PAGE);

  const pickFilter = (f) => { setFilter(f); setPage(0); };
  const activate = (it) => {
    if (it.interest) setInterestActie(it.title);
    else if (it.href) setLeadActie({ title: it.title, href: it.href });
  };

  return (
    <section className="sfg-section" id="nu">
      <div className="sfg-container">
        <div className="sfg-section-head">
          <div>
            <span className="sfg-eyebrow">wat speelt er nu?</span>
            <h2 className="sfg-h1">Kijk wat je nu<br />al kan doen.</h2>
          </div>
          <p className="sfg-lead">Er gebeurt al van alles waar je aan bij kan dragen — kies wat bij je past.</p>
        </div>

        <div className="sfg-action-filters" role="tablist">
          {filters.map((f) =>
          <button key={f} type="button" className="sfg-filter" aria-pressed={filter === f} onClick={() => pickFilter(f)}>{f}</button>
          )}
          {prefs.length > 0 && filter === "Alles" &&
          <span className="sfg-filter-hint">Op volgorde van jouw voorkeuren</span>}
        </div>

        <div className="sfg-actions">
          {pageItems.map((it) =>
          <div className={`sfg-action${it.venki ? " is-venki" : ""}`} key={it.slot} role="link" tabIndex={0}
            onClick={() => activate(it)} onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && activate(it)}>
              <image-slot id={it.slot} src={it.noImg ? sfgRes(it.slot, "") : sfgRes(it.slot, it.img || `/assets/actions/${it.slot}.png`)} placeholder={it.ph} shape="rect"
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%", zIndex: 0 }}></image-slot>
              <div className="sfg-action-grad" />
              <div className="sfg-action-top">
                <span className={`sfg-action-tag ${it.tagType}`}>{it.tag}</span>
                <span className="sfg-action-partner">{it.partner}</span>
              </div>
              <div className="sfg-action-body">
                <span className="sfg-action-type">{it.type}</span>
                <h4>{it.title}</h4>
                <p>{it.body}</p>
                {it.note && <span className="sfg-action-note"><span className="dot" />{it.note}</span>}
                <div className="sfg-action-meta">
                  {it.meta.map((m, j) => <React.Fragment key={j}>
                    {j > 0 && <span className="dot" />}<span>{m}</span>
                  </React.Fragment>)}
                  <span className="sfg-action-go" aria-hidden="true">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
                  </span>
                </div>
              </div>
            </div>
          )}
        </div>

        {pageCount > 1 &&
        <div className="sfg-pager">
          <button className="sfg-pager-arrow" disabled={safePage === 0} onClick={() => setPage(safePage - 1)} aria-label="Vorige">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M15 6l-6 6 6 6" /></svg>
          </button>
          <div className="sfg-pager-dots">
            {Array.from({ length: pageCount }).map((_, i) =>
            <button key={i} className="sfg-pager-dot" data-on={i === safePage} onClick={() => setPage(i)} aria-label={`Pagina ${i + 1}`} />)}
          </div>
          <button className="sfg-pager-arrow" disabled={safePage === pageCount - 1} onClick={() => setPage(safePage + 1)} aria-label="Volgende">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M9 6l6 6-6 6" /></svg>
          </button>
        </div>}
      </div>
      <SfgInterestModal actie={interestActie} onClose={() => setInterestActie(null)} />
      <SfgLeadModal actie={leadActie} onClose={() => setLeadActie(null)} />
    </section>);
}

// ── Section: WAT KRIJG JE TERUG ────────────────────────────────
function SfgRewards() {
  const concept = [
  { icon: "users", h: "Je hoort erbij", p: "Een community van mensen die hetzelfde willen. Lokaal én landelijk." },
  { icon: "spark", h: "Energie", p: "Mensen, momenten en ervaringen die je herinneren waarom je dit doet." },
  { icon: "wave", h: "Beweging", p: "Je actie staat niet op zichzelf — duizenden anderen doen mee." },
  { icon: "shift", h: "Iets om naar uit te kijken", p: "Sleep outs, festivals, drops, kleine acties die groot uitpakken." }];

  return (
    <section className="sfg-section bg-purple" id="krijg">
      <div className="sfg-container">
        <div className="sfg-section-head">
          <div>
            <span className="sfg-eyebrow">wat krijg je terug?</span>
            <h2 className="sfg-h1">Vooral mensen,<br />momenten en mojo.</h2>
          </div>
          <p className="sfg-lead" style={{ color: "rgba(255,255,255,0.92)" }}>
            Onderdeel van de movement, gezamenlijke impact, ervaringen en good vibes.
          </p>
        </div>
        <div className="sfg-rewards-concept">
          {concept.map((c) =>
          <div className="sfg-reward-card" key={c.h}>
              <div className="glyph"><RewardGlyph type={c.icon} /></div>
              <div>
                <h4>{c.h}</h4>
                <p>{c.p}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

function RewardGlyph({ type }) {
  if (type === "users") return <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="8" r="3" /><circle cx="17" cy="9" r="2.4" /><path d="M3 19c0-3 2.5-5 6-5s6 2 6 5M14 19c0-2.2 1.6-3.8 4-3.8s3.5 1.4 3.5 3.8" /></svg>;
  if (type === "spark") return <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2 7 7 1-5.2 4.5 1.6 7L12 18l-5.4 3.5 1.6-7L3 10l7-1z" /></svg>;
  if (type === "wave") return <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M2 12c3-4 5-4 8 0s5 4 8 0M2 17c3-4 5-4 8 0s5 4 8 0M2 7c3-4 5-4 8 0s5 4 8 0" /></svg>;
  return <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><circle cx="6" cy="6" r="2.6" /><circle cx="18" cy="6" r="2.6" /><rect x="3" y="11" width="18" height="6" rx="3" /><circle cx="6" cy="18" r="2.6" /><circle cx="18" cy="18" r="2.6" /></svg>;
}

// ── Section: GROUP CTA ─────────────────────────────────────────
function SfgGroup({ onOpenGroup }) {
  return (
    <section className="sfg-section bg-soft" id="groep">
      <div className="sfg-container">
        <div className="sfg-group-cta">
          <div style={{ position: "relative", zIndex: 1 }}>
            <ul className="sfg-group-tags">
              <li>Team</li><li>Vereniging</li><li>Bedrijf</li><li>School</li>
            </ul>
            <h2 className="sfg-h1" style={{ color: "var(--gs-white)" }}>Doe samen<br />iets goeds.</h2>
            <p style={{ fontFamily: "var(--gs-font-body)", fontSize: 18, fontWeight: 500, lineHeight: 1.45, color: "rgba(255,255,255,0.85)", maxWidth: 540, margin: "16px 0 0" }}>
              Voor groepen hebben we een aparte route — wij organiseren samen met jullie een actie of event. Van een sleep out met je studievereniging tot een teamuitje dat er ook echt toe doet.
            </p>
            <div style={{ marginTop: 28, display: "flex", flexWrap: "wrap", gap: 10 }}>
              <button className="sfg-btn sfg-btn-yellow sfg-btn-lg" onClick={onOpenGroup}>
                Doe mee als groep
                <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 style={{ position: "relative", zIndex: 1 }}>
            <SfgPhoto tone="purple" src="/images/groep-sleepout.jpg" style={{ aspectRatio: "1/1", borderRadius: 24 }} />
          </div>
        </div>
      </div>
    </section>);
}

// ── Section: SAMEN MET (rotating logo carousel) ────────────────
// Elke partner toont z'n logo uit /assets/partners/<slug>.png. Zolang die PNG
// er nog niet is (of niet laadt), valt de chip terug op de naam als tekst.
const SFG_PARTNERS = [
  { name: "Dierenbescherming", slug: "dierenbescherming" },
  { name: "KiKa", slug: "kika" },
  { name: "KWF", slug: "kwf" },
  { name: "Nierstichting", slug: "nierstichting" },
  { name: "Reumazorg", slug: "reumazorg" },
  { name: "Aidsfonds", slug: "aidsfonds" },
  { name: "Parkinsonfonds", slug: "parkinsonfonds" },
  { name: "Support Casper", slug: "support-casper" },
  { name: "113", slug: "113" },
  { name: "Spieren voor Spieren", slug: "spieren-voor-spieren" },
  { name: "Strong Babies", slug: "strong-babies" },
  { name: "Metakids", slug: "metakids" },
  { name: "War Child", slug: "war-child" },
  { name: "Artsen Zonder Grenzen", slug: "artsen-zonder-grenzen" },
  { name: "Rode Kruis", slug: "rode-kruis" },
  { name: "Cordaid", slug: "cordaid" },
  { name: "ActionAid", slug: "actionaid" },
  { name: "The Hunger Project", slug: "the-hunger-project" },
  { name: "Right To Play", slug: "right-to-play" },
  { name: "SOS Kinderdorpen", slug: "sos-kinderdorpen" },
  { name: "Free Press Unlimited", slug: "free-press-unlimited" },
  { name: "Greenpeace", slug: "greenpeace" },
  { name: "Plastic Soup", slug: "plastic-soup" },
  { name: "Trees for All", slug: "trees-for-all" },
  { name: "Adopteer regenwoud", slug: "adopteer-regenwoud" },
  { name: "NL Talentenfonds", slug: "nl-talentenfonds" },
  { name: "Sheltersuit", slug: "sheltersuit" },
  { name: "IT4Kids", slug: "it4kids" },
  { name: "Room For Change", slug: "room-for-change" },
  { name: "Nederlands Jeugdontbijt", slug: "nederlands-jeugdontbijt" },
  { name: "De Luisterlijn", slug: "de-luisterlijn" },
  { name: "Kind en Brandwond", slug: "kind-en-brandwond" },
  { name: "KidsRights", slug: "kidsrights" },
  { name: "Sailwise", slug: "sailwise" },
  { name: "Make A Wish", slug: "make-a-wish" },
  { name: "De Zonnebloem", slug: "de-zonnebloem" }];

function SfgPartnerChip({ name, slug }) {
  const [logo, setLogo] = useStateS(true);
  return (
    <span className="sfg-partner-chip">
      {logo ?
        <img className="sfg-partner-logo" src={`/assets/partners/${slug}.png`} alt={name} loading="lazy"
          onError={() => setLogo(false)} /> :
        name}
    </span>);
}

function SfgPartners() {
  const loop = [...SFG_PARTNERS, ...SFG_PARTNERS];
  return (
    <div className="sfg-partners">
      <div className="sfg-container">
        <h2 className="sfg-partners-title">Samen met 50+ goede doelen</h2>
      </div>
      <div className="sfg-marquee" aria-hidden="false">
        <div className="sfg-marquee-track">
          {loop.map((p, i) => <SfgPartnerChip key={i} name={p.name} slug={p.slug} />)}
        </div>
      </div>
    </div>);
}

// ── FAQ ────────────────────────────────────────────────────────
function SfgFaq() {
  const items = [
  { q: "Kost het iets om mee te doen?", a: "Nee. Inschrijven is gratis. Jij beslist zelf hoe je wilt mee doen, klein of groot, eenmalig of structureel." },
  { q: "Wat is de relatie met GoodShift?", a: "Shift for Good is de campagne- en community-vlag van GoodShift. GoodShift (.nl) is het donatieplatform — daar regel je je donaties, eenmalig of maandelijks. Shift for Good is de plek waar je samen met anderen iets doet, los van of je doneert." },
  { q: "Wat doen jullie met mijn gegevens?", a: "Heel weinig. We slaan op wat je in het formulier zet en gebruiken het alleen om jou te matchen met acties en de nieuwsbrief te sturen. Geen verkoop, geen tracking pixels van derden. Volledige privacyverklaring onderaan de pagina." },
  { q: "Hoe stop ik?", a: "Eén klik in de footer van iedere mail, of stuur 'stop' naar hello@goodshift.nl. Klaar. We schrappen je gegevens binnen 14 dagen." },
  { q: "Ik ben jonger dan 18, mag ik meedoen?", a: "Ja, vanaf 16. Voor sommige acties (sleep out, festival) hebben we toestemming van een ouder/voogd nodig — dat regelen we per actie, niet bij inschrijven." },
  { q: "Kan ik meedoen met een groep?", a: "Ja, daar hebben we een aparte route voor — zie 'Doe samen iets goeds' hierboven. Wij organiseren dan samen met jullie een actie of branded event." },
  { q: "Komt er ook een app?", a: "Nog niet. Voor het lid worden en meedoen houden we het simpel via deze site en via mail. De GoodShift app gebruik je voor het daadwerkelijke doneren." }];

  const [open, setOpen] = useStateS(0);
  return (
    <section className="sfg-section bg-soft" id="faq">
      <div className="sfg-container">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <span className="sfg-eyebrow">vragen die we vaker krijgen</span>
          <h2 className="sfg-h1" style={{ marginTop: 8 }}>Eerst dit even.</h2>
        </div>
        <div className="sfg-faq">
          {items.map((it, i) =>
          <div key={i} className="sfg-faq-item" data-open={open === i ? "true" : "false"}>
              <button className="sfg-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="ico">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M8 2v12M2 8h12" /></svg>
                </span>
              </button>
              <div className="sfg-faq-a">{it.a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

// ── BOTTOM RECAP CTA — repeat conversion after scroll ──────────
function SfgRecap({ onJump }) {
  return (
    <section className="sfg-section sfg-section-sm bg-ink">
      <div className="sfg-container" style={{ textAlign: "center" }}>
        <span className="sfg-eyebrow" style={{ background: "rgba(255,255,255,0.15)", color: "var(--gs-yellow)" }}>nog steeds aan het twijfelen?</span>
        <h2 className="sfg-h1" style={{ color: "var(--gs-white)", marginTop: 14 }}>
          Probeer het uit.<br />
          <span style={{ color: "var(--gs-yellow)" }}>Je zit nergens aan vast.</span>
        </h2>
        <div style={{ marginTop: 28, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <button className="sfg-btn sfg-btn-orange sfg-btn-lg" onClick={() => onJump("top")}>
            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>
    </section>);
}

// ── Footer ─────────────────────────────────────────────────────
function SfgFooter() {
  return (
    <footer className="sfg-footer">
      <div className="sfg-container">
        <div className="sfg-footer-top">
          <div>
            <img src={sfgRes("logoWordmarkWhite", "/assets/goodshift-logo-white.png")} alt="GoodShift" height="30" style={{ display: "block", height: 30, width: "auto" }} />
            <p style={{ fontFamily: "var(--gs-font-body)", fontSize: 15, color: "rgba(255,255,255,0.7)", lineHeight: 1.5, marginTop: 18, maxWidth: 360 }}>
              Shift for Good is de campagne- en communitylaag van GoodShift. Voor iedereen die wil bijdragen — op je eigen manier.
            </p>
          </div>
          <div>
            <h5>De beweging</h5>
            <ul>
              <li><a href="#nu">Wat speelt er nu</a></li>
              <li><a href="#krijg">Wat krijg je terug</a></li>
              <li><a href="#groep">Met je crew</a></li>
              <li><a href="#faq">Vragen</a></li>
            </ul>
          </div>
          <div>
            <h5>Doneren</h5>
            <ul>
              <li><a href="https://www.goodshift.nl">www.goodshift.nl ↗</a></li>
              <li><a href="https://goodshift.nl/goede-doelen">Goede doelen</a></li>
              <li><a href="https://goodshift.nl/goede-doelen">GoodShift giftcard gebruiken</a></li>
              <li><a href="https://www.goodshift.nl">Over GoodShift</a></li>
            </ul>
          </div>
          <div>
            <h5>Volg ons</h5>
            <ul>
              <li><a href="https://www.instagram.com/wearegoodshift/" target="_blank" rel="noreferrer">Instagram</a></li>
              <li><a href="#">TikTok</a></li>
              <li><a href="https://www.linkedin.com/company/wearegoodshift/" target="_blank" rel="noreferrer">LinkedIn</a></li>
              <li><a href="mailto:hello@goodshift.nl">Contact: hello@goodshift.nl</a></li>
            </ul>
          </div>
        </div>
        <div className="sfg-footer-bottom">
          <div>© 2026 Shift for Good · onderdeel van Stichting GoodShift · CBF erkend</div>
          <div style={{ display: "flex", gap: 20 }}>
            <a href="#">Privacy</a>
            <a href="#">Cookies</a>
            <a href="#">Voorwaarden</a>
          </div>
        </div>
      </div>
    </footer>);
}

// ── Section: MEDE MOGELIJK GEMAAKT DOOR (Nederlandse Loterij) ────
function SfgNLLoterij() {
  return (
    <section className="sfg-section sfg-section-sm" id="mogelijk">
      <div className="sfg-container">
        <div className="sfg-nl-band">
          <div className="sfg-nl-copy">
            <span className="sfg-eyebrow">mede mogelijk gemaakt door</span>
            <h2 className="sfg-h2" style={{ marginTop: 10 }}>Nederlandse Loterij</h2>
            <p>
              Al jaren geeft de Nederlandse Loterij een groot deel van de opbrengst terug aan de
              samenleving, de sport en goede doelen — jaarlijks tientallen miljoenen. Vanuit diezelfde
              missie steunen ze <strong>shift for good</strong>: om samen een beweging van jongeren te
              bouwen die iets willen doen voor een betere wereld.
            </p>
            <div className="sfg-nl-stats">
              <div className="sfg-nl-stat">
                <span className="num">&euro;200,6 mln</span>
                <span className="lbl">afgedragen aan sport, goede doelen &amp; samenleving in 2025</span>
              </div>
              <div className="sfg-nl-stat">
                <span className="num">18</span>
                <span className="lbl">goede doelen die zij structureel steunen</span>
              </div>
            </div>
            <div className="sfg-nl-actions">
              <a className="sfg-btn sfg-btn-purple" href="https://www.nederlandseloterij.nl" target="_blank" rel="noreferrer">
                Over Nederlandse Loterij
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
              </a>
              <span className="sfg-nl-note">Supporter van kansen — voor heel Nederland</span>
            </div>
          </div>
          <div className="sfg-nl-logo">
            <span className="sfg-nl-logo-label">partner</span>
            <image-slot id="nl-loterij-logo" src={sfgRes("nl-loterij-logo", "/assets/nl-loterij.png")} placeholder="Logo Nederlandse Loterij" shape="rounded" radius="14"
              style={{ width: "100%", height: 150, display: "block" }}></image-slot>
          </div>
        </div>
      </div>
    </section>);
}

Object.assign(window, { SfgPhoto, SfgNav, SfgHero, SfgActions, SfgRewards, SfgGroup, SfgPartners, SfgFaq, SfgRecap, SfgFooter, SfgNLLoterij });
