// Shift for Good — main app (post-NOA reorder)
const { useState: useStateA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "foto",
  "headline": "doe"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [groupOpen, setGroupOpen] = useStateA(false);

  const jump = (id) => {
    if (id === "top") { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.pageYOffset - 70;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };

  return (
    <div className="sfg-page">
      <SfgNav onJump={jump}/>
      <SfgHero variant={tweaks.heroVariant} headline={tweaks.headline} onJump={jump}/>
      <SfgActions/>
      <SfgHow/>
      <SfgRewards/>
      <SfgGroup onOpenGroup={() => setGroupOpen(true)}/>
      <SfgPartners/>
      <SfgFaq/>
      <SfgShareables/>
      <SfgRecap onJump={jump}/>
      <SfgFooter/>

      <SfgGroupModal open={groupOpen} onClose={() => setGroupOpen(false)}/>

      <TweaksPanel title="Tweaks" defaultOpen={false}>
        <TweakSection title="Headline">
          <TweakSelect label="Variant" value={tweaks.headline} options={[
            {value: "doe",     label: "Doe iets goeds. Op jouw shift."},
            {value: "in",      label: "Are you in?"},
            {value: "rekenen", label: "Kunnen we op jou rekenen?"},
            {value: "maat",    label: "De maat is vol."},
          ]} onChange={v => setTweak("headline", v)}/>
        </TweakSection>
        <TweakSection title="Hero sfeerbeeld">
          <TweakSelect label="Achtergrond" value={tweaks.heroVariant} options={[
            {value: "foto",  label: "Pride Amsterdam (paars-roze)"},
            {value: "split", label: "Sleep Out (coral)"},
            {value: "bold",  label: "Festival crew (paars)"},
            {value: "illu",  label: "Strand cleanup (zon)"},
          ]} onChange={v => setTweak("heroVariant", v)}/>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);