/* Veterans Deserve Better — app shell + tweaks */
const { useEffect: useE } = React;

const VDB_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#151C24", "#F4F2EC", "#B0562C"],
  "markVariant": "auto",
  "showStripe": true
}/*EDITMODE-END*/;

const VDB_PALETTES = [
  ["#151C24", "#F4F2EC", "#B0562C"], // Ink / Document / Signal rust
  ["#101820", "#F2F1ED", "#8C6F3F"], // Ink / Bond / Archive brass
  ["#182028", "#EFEEE8", "#3E6B63"], // Ink / Newsprint / Verdigris
  ["#1B1A1F", "#F3F0EA", "#8A3A46"], // Charcoal / Manila / Oxblood
];

function App() {
  const [t, setTweak] = useTweaks(VDB_DEFAULTS);
  const [ink, paper, accent] = t.palette;

  useE(() => {
    const r = document.documentElement;
    r.style.setProperty("--ink", ink);
    r.style.setProperty("--paper", paper);
    r.style.setProperty("--accent", accent);
  }, [ink, paper, accent]);

  const p = { ink, paper, accent };

  return (
    <div className="vdb-root" style={{ background: paper, color: ink }}>
      {t.showStripe && <UtilityStripe {...p} />}
      <Header {...p} markVariant={t.markVariant} />
      <Hero {...p} markVariant={t.markVariant} />
      <Pillars {...p} />
      <VideoExplainer {...p} />
      <Campaign {...p} />
      <CongressLetter {...p} />
      <ResourceLibrary {...p} />
      <Research {...p} />
      <Newsroom {...p} />
      <Social {...p} />
      <Footer {...p} markVariant={t.markVariant} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakColor label="Palette" value={t.palette} options={VDB_PALETTES} onChange={(v) => setTweak("palette", v)} />
          <TweakRadio
            label="Mark cut"
            value={t.markVariant}
            options={[
              { value: "auto", label: "Auto" },
              { value: "rank", label: "3 stripe" },
              { value: "compact", label: "2 stripe" },
            ]}
            onChange={(v) => setTweak("markVariant", v)}
          />
        </TweakSection>
        <TweakSection title="Header">
          <TweakToggle label="Nonpartisan utility stripe" value={t.showStripe} onChange={(v) => setTweak("showStripe", v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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