// Shift for Good — page sections (post-NOA rewrite)
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

// ── Stockfoto placeholder block (gradient + grain) ─────────────
function SfgPhoto({ tone = "warm", tag, src, alt, children, style }) {
  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
          className="sfg-photo-img"
          src={src}
          alt={alt || ""}
          loading="lazy"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
          onError={(e) => { e.currentTarget.style.display = "none"; }}
        />
      }
      <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: "hoe", label: "Hoe werkt 't" },
  { id: "krijg", label: "Wat krijg je" }];

  return (
    <nav className="sfg-nav">
      <a href="#top" className="sfg-nav-logo" onClick={(e) => {e.preventDefault();onJump("top");}}>
        <SfgLogo size={34} />
      </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(5247);
  const acties = useCountUp(21);
  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 className="hc-divider" />
      <div className="hc-stat small">
        <span className="num">{fmt(acties)}</span>
        <span className="lbl">acties dit kwartaal</span>
      </div>
    </div>);
}

// ── HERO — split, with embedded signup card ────────────────────
function SfgHero({ variant, headline, onJump }) {
  const headlines = {
    doe: <>Doe mee. <br /><span className="underline">Op jouw manier.</span></>,
    in: <>Are you <span className="underline">in?</span></>,
    rekenen: <>Kunnen we op <br /><span className="underline">jou</span> rekenen?</>,
    maat: <>De maat <br />is <span className="underline">vol</span>.</>
  };
  const subs = {
    doe: "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.",
    in: "We zoeken jongeren die niet wachten op morgen. Acties, donaties, vrijwilligerswerk — kies straks zelf wat past. Eerst even hier inschrijven.",
    rekenen: "Een beweging van jongeren die iets willen doen voor een betere wereld. Voor wat jou raakt, op jouw tempo. Zonder verplichting, zonder gedoe.",
    maat: "De wereld staat in brand. Genoeg jongeren willen iets doen — wij zoeken jullie. Eén klik, één formulier, één beweging."
  };
  const bgs = {
    foto: { tone: "dusk", tag: "Sfeerbeeld — Pride march Amsterdam, 2025", img: "/images/hero-pride.jpg" },
    split: { tone: "coral", tag: "Sfeerbeeld — Sleep out 2025", img: "/images/hero-sleepout.jpg" },
    bold: { tone: "purple", tag: "Sfeerbeeld — Festival crew Utrecht", img: "/images/hero-festival.jpg" },
    illu: { tone: "sun", tag: "Sfeerbeeld — Strandcleanup, Zandvoort", img: "/images/hero-strand.jpg" }
  };
  const bg = bgs[variant] || bgs.foto;
  const h = headlines[headline] || headlines.doe;
  const s = subs[headline] || subs.doe;
  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"><span className="dot"></span>shift for good</span>
          <h1>{h}</h1>
          <p className="sub">{s}</p>
          <HeroCounter />
          <div className="sfg-hero-actions">
            <button className="sfg-btn sfg-btn-orange sfg-btn-lg" onClick={() => onJump("doe-mee")}>
              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-ghost sfg-btn-lg" onClick={() => onJump("hoe")}>
              Meer weten
            </button>
          </div>
        </div>
        <div className="sfg-hero-right" id="doe-mee">
          <div className="sfg-hero-formhead">
            <span className="sfg-hero-formhead-eyebrow">in 60 seconden</span>
            <h2>Doe mee.</h2>
          </div>
          <SfgForm />
        </div>
      </div>
    </section>);
}

// ── Section: WAT SPEELT ER NU (pushed higher per NOA) ──────────
function SfgActions() {
  // Tip: vervang elke `href` door de echte actie-/partnerpagina zodra die er is.
  // Standaard verwijzen ze nu naar het aanmeldformulier (#doe-mee).
  const items = [
  { tag: "Live nu", tagType: "live", partner: "Sheltersuit", tone: "dusk", img: "/images/actie-sleepout.jpg", href: "#doe-mee", title: "Sheltersuit Sleep Out", body: "Eén nacht buiten slapen — voor de mensen die geen keuze hebben.", meta: ["Amsterdam", "21 nov 2026"], type: "Actie" },
  { tag: "Live nu", tagType: "live", partner: "Right To Play", tone: "sun", img: "/images/actie-vlaggen.jpg", href: "#doe-mee", title: "Peace-actie: vlaggen", body: "Koop een limited-edition vlag. Volledige opbrengst naar speelplekken in AZC's.", meta: ["Online", "Op = op"], type: "Iets kopen" },
  { tag: "Open call", tagType: "", partner: "Greenpeace", tone: "sage", img: "/images/actie-strand.jpg", href: "#doe-mee", title: "Strandschoonmaak XXL", body: "Tien stranden, één zaterdag. Vind een crew bij jou in de buurt.", meta: ["Hele kust", "Q1 2027"], type: "Vrijwilligerswerk" },
  { tag: "Binnenkort", tagType: "soon", partner: "Metakids", tone: "plum", img: "/images/actie-run.jpg", href: "#doe-mee", title: "Run for Meta", body: "10K hardlopen voor kinderen met een metabole ziekte. Solo of met je crew.", meta: ["Rotterdam", "5 dec 2026"], type: "Sponsorloop" },
  { tag: "Doorlopend", tagType: "", partner: "Rode Kruis", tone: "coral", img: "/images/actie-winterhulp.jpg", href: "#doe-mee", title: "Winterhulp WhatsApp", body: "Help in een paar uur per week mensen die in de kou zitten — vanaf je telefoon.", meta: ["Online", "Doorlopend"], type: "Vrijwilligerswerk" },
  { tag: "Live nu", tagType: "live", partner: "GoodShift", tone: "night", img: "/images/actie-doneren.jpg", href: "https://www.goodshift.nl", title: "Doneer eenmalig", body: "Steun een goed doel dat bij jou past. Eénmalig of als maandelijks ritueel.", meta: ["goodshift.nl", "↗"], type: "Doneren" }];

  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">Doe direct<br />ergens aan mee.</h2>
          </div>
          <p className="sfg-lead">Lopende en aankomende acties. Doneren, kopen, sponsorlopen, vrijwilligerswerk — kies wat bij je past. </p>
        </div>
        <div className="sfg-actions">
          {items.map((it, i) =>
          <a className="sfg-action" key={i} href={it.href}
             target={it.href.startsWith("http") ? "_blank" : undefined}
             rel={it.href.startsWith("http") ? "noreferrer" : undefined}
             style={{ textDecoration: "none", color: "inherit" }}>
              <SfgPhoto tone={it.tone} src={it.img} style={{ position: "absolute", inset: 0 }} />
              <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>
                <div className="sfg-action-meta">
                  {it.meta.map((m, j) => <React.Fragment key={j}>
                    {j > 0 && <span className="dot" />}<span>{m}</span>
                  </React.Fragment>)}
                </div>
              </div>
            </a>
          )}
        </div>
        <div className="sfg-actions-footer">
          <a className="sfg-btn sfg-btn-outline" href="#doe-mee">Bekijk alle acties →</a>
        </div>
      </div>
    </section>);
}

// ── Section: HOE WERKT HET — subtieler, kleinere strip ─────────
function SfgHow() {
  const steps = [
  { num: "01", h: "Schrijf je in", p: "Vier vragen, niks verplicht. Daarna ben je officieel onderdeel van shift for good." },
  { num: "02", h: "Wij inspireren en faciliteren", p: "We sturen je acties die bij passen." },
  { num: "03", h: "Doe mee.", p: "Je kiest zelf wat je doet. Eénmalig of regelmatig — geen oordeel." }];

  return (
    <section className="sfg-section sfg-section-sm bg-soft" id="hoe">
      <div className="sfg-container">
        <div className="sfg-how-head">
          <span className="sfg-eyebrow">hoe werkt 't?</span>
          <h2 className="sfg-h2">Heel kort.</h2>
        </div>
        <div className="sfg-how-mini">
          {steps.map((s) =>
          <div className="sfg-how-step" key={s.num}>
              <span className="num">{s.num}</span>
              <div>
                <h4>{s.h}</h4>
                <p>{s.p}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </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." }];

  const goodies = ["WhatsApp community", "Maandelijkse nieuwsbrief", "Sticker + tote bag", "Winacties", "Ervaringen & events", "Member drops", "Kortingen", "Impact overzichten"];
  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 className="sfg-rewards-concrete">
          <span className="label">Plus, tastbaar:</span>
          {goodies.map((g) => <span key={g} className="sfg-chip-row">{g}</span>)}
        </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 (eigen pagina, uit hoofdfunnel) ─────────
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}>
                Naar groepsformulier
                <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" tag="Foto — Studievereniging Sleep out 2025" style={{ aspectRatio: "1/1", borderRadius: 24 }} />
          </div>
        </div>
      </div>
    </section>);
}

// ── Section: SAMEN MET (logos strip) ───────────────────────────
function SfgPartners() {
  const partners = ["Right To Play", "Greenpeace", "Rode Kruis", "Nierstichting", "Free Press Unlimited", "Metakids", "War Child", "Oxfam Novib", "KWF", "Sheltersuit", "Vogelbescherming", "Artsen zonder Grenzen", "KiKa", "Plan International", "Save the Children", "Cliniclowns", "Hartstichting", "Diabetes Fonds"];
  return (
    <div className="sfg-partners">
      <div className="sfg-container">
        <p className="sfg-partners-title">Samen met 50+ goede doelen</p>
        <div className="sfg-partners-grid">
          {partners.map((p) => <div key={p} className="sfg-partner">{p}</div>)}
        </div>
      </div>
    </div>);
}

// ── FAQ ────────────────────────────────────────────────────────
function SfgFaq() {
  const items = [
  { q: "Kost het iets om mee te doen?", a: "Nee. Inschrijven is gratis. Je beslist zelf of, hoeveel en wanneer je doneert — en dat doe je via www.goodshift.nl, het donatieplatform. Onze acties brengen soms losse kosten met zich mee (festivalticket, sleep out kit), maar dat staat altijd helder bij de actie zelf." },
  { q: "Moet ik iets?", a: "Nee. Je hoeft geen actie te doen om lid te zijn. Sommige mensen zijn vooral betrokken, andere doen 1x per jaar mee, andere zijn er elk weekend. Allemaal goed." },
  { 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 matchen te helpen met acties en de nieuwsbrief te sturen. Geen verkoop, geen tracking pixels van derden. Volledige privacyverklaring onderaan de pagina." },
  { q: "Hoeveel mailtjes ga ik krijgen?", a: "Maximaal één per maand de nieuwsbrief. Daarnaast soms iets als er een actie bij je past — gemiddeld twee à drie keer per kwartaal. Je kunt dat zelf bijstellen in elke mail." },
  { q: "Hoe stop ik?", a: "Eén klik in de footer van iedere mail, of stuur 'stop' naar hello@shiftforgood.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: "Wat is een 'action stamp'?", a: "Een digitaal stempeltje dat je krijgt na elke actie waaraan je meedoet. Voor nu visualiseren we ze per actie; later komt er een persoonlijke pagina waar je ze verzamelt." },
  { q: "Komt er ook een app?", a: "Nog niet. Voor het lid worden + acties houden we het simpel via deze site en de community-chat. 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 }}>
          Alle beetjes helpen.<br />
          <span style={{ color: "var(--gs-yellow)" }}>Doe mee.</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>
            <SfgLogo color="white" size={42} />
            <p style={{ fontFamily: "var(--gs-font-body)", fontSize: 15, color: "rgba(255,255,255,0.7)", lineHeight: 1.5, marginTop: 18, maxWidth: 360 }}>
              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="#hoe">Hoe werkt 't</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://www.goodshift.nl">Goede doelen</a></li>
              <li><a href="https://www.goodshift.nl">Giftcard inwisselen</a></li>
              <li><a href="https://www.goodshift.nl">Over GoodShift</a></li>
            </ul>
          </div>
          <div>
            <h5>Volg ons</h5>
            <ul>
              <li><a href="#">Instagram</a></li>
              <li><a href="#">TikTok</a></li>
              <li><a href="#">LinkedIn</a></li>
              <li><a href="mailto:hello@shiftforgood.nl">hello@shiftforgood.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>);
}

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