const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2F5388",
  "highlight": "#1677AE",
  "headFont": "Montserrat",
  "bodyFont": "Nunito Sans",
  "spacing": 104,
  "showTopbar": true,
  "showComfort": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const r = document.documentElement;
  r.style.setProperty("--accent", t.accent);
  r.style.setProperty("--accent-ink", `color-mix(in srgb, ${t.accent} 78%, #0b1426)`);
  r.style.setProperty("--highlight", t.highlight);
  r.style.setProperty("--highlight-ink", `color-mix(in srgb, ${t.highlight} 80%, #0b1426)`);
  r.style.setProperty("--font-head", `"${t.headFont}", "Helvetica Neue", Arial, sans-serif`);
  r.style.setProperty("--font-body", `"${t.bodyFont}", system-ui, sans-serif`);
  r.style.setProperty("--section-pad", t.spacing + "px");
  const tb = document.getElementById("topbar");
  if (tb) tb.style.display = t.showTopbar ? "" : "none";
  const cm = document.getElementById("comfort");
  if (cm) cm.style.display = t.showComfort ? "" : "none";
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);
  return (
    <TweaksPanel>
      <TweakSection label="Brand color" />
      <TweakColor label="Navy (primary)" value={t.accent} options={["#2F5388", "#34568B", "#243F6B", "#1F1D36"]} onChange={(v) => setTweak("accent", v)} />
      <TweakColor label="Call button" value={t.highlight} options={["#1677AE", "#2F5388", "#0E6A9E", "#1F1D36"]} onChange={(v) => setTweak("highlight", v)} />
      <TweakSection label="Typography" />
      <TweakSelect label="Headings" value={t.headFont} options={["Montserrat", "Quicksand", "Nunito Sans"]} onChange={(v) => setTweak("headFont", v)} />
      <TweakSelect label="Body" value={t.bodyFont} options={["Nunito Sans", "Quicksand", "Montserrat"]} onChange={(v) => setTweak("bodyFont", v)} />
      <TweakSlider label="Section spacing" value={t.spacing} min={64} max={144} step={4} unit="px" onChange={(v) => setTweak("spacing", v)} />
      <TweakSection label="Sections" />
      <TweakToggle label="CDCP announcement bar" value={t.showTopbar} onChange={(v) => setTweak("showTopbar", v)} />
      <TweakToggle label="Comfort Menu" value={t.showComfort} onChange={(v) => setTweak("showComfort", v)} />
    </TweaksPanel>
  );
}

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