// app.jsx — Tweaks panel for the 32Shine homepage.
// Applies all theme values to CSS variables on :root so the whole page re-skins live.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#80D4E9",
  "headFont": "Montserrat",
  "bodyFont": "Mulish",
  "corners": "crisp",
  "spacing": 112,
  "baseSize": 17,
  "showTopbar": true,
  "showComfort": true
}/*EDITMODE-END*/;

const RADII = {
  crisp: ["4px", "3px"],
  soft:  ["14px", "10px"],
  round: ["26px", "999px"],
};

function applyTweaks(t) {
  const r = document.documentElement;
  r.style.setProperty("--accent", t.accent);
  r.style.setProperty("--highlight", t.accent);
  r.style.setProperty("--star", t.accent);
  r.style.setProperty("--font-head", '"' + t.headFont + '", system-ui, sans-serif');
  r.style.setProperty("--font-body", '"' + t.bodyFont + '", system-ui, sans-serif');
  r.style.setProperty("--fs-base", t.baseSize + "px");
  r.style.setProperty("--section-pad", t.spacing + "px");
  const [card, btn] = RADII[t.corners] || RADII.crisp;
  r.style.setProperty("--radius-card", card);
  r.style.setProperty("--radius-btn", btn);
  const tb = document.getElementById("topbar");
  if (tb) tb.setAttribute("data-hidden", String(!t.showTopbar));
  const cm = document.getElementById("sec-comfort");
  if (cm) cm.setAttribute("data-hidden", String(!t.showComfort));
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand color" />
      <TweakColor
        label="Accent / Book Now (ice)"
        value={t.accent}
        options={["#80D4E9", "#5CC4DE", "#9AD9C5", "#A8B4D6", "#C9A56A", "#E3E5E8"]}
        onChange={(v) => setTweak("accent", v)}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Headings"
        value={t.headFont}
        options={["Montserrat", "Poppins", "Jost", "Inter Tight"]}
        onChange={(v) => setTweak("headFont", v)}
      />
      <TweakSelect
        label="Body"
        value={t.bodyFont}
        options={["Mulish", "Work Sans", "Hanken Grotesk"]}
        onChange={(v) => setTweak("bodyFont", v)}
      />
      <TweakSlider
        label="Base text size" value={t.baseSize} min={15} max={19} step={1} unit="px"
        onChange={(v) => setTweak("baseSize", v)}
      />

      <TweakSection label="Shape & spacing" />
      <TweakRadio
        label="Corners" value={t.corners}
        options={["crisp", "soft", "round"]}
        onChange={(v) => setTweak("corners", v)}
      />
      <TweakSlider
        label="Section spacing" value={t.spacing} min={72} max={144} step={4} unit="px"
        onChange={(v) => setTweak("spacing", v)}
      />

      <TweakSection label="Sections" />
      <TweakToggle label="Top announcement bar" value={t.showTopbar} onChange={(v) => setTweak("showTopbar", v)} />
      <TweakToggle label="Comfort Menu (Sec 6)" value={t.showComfort} onChange={(v) => setTweak("showComfort", v)} />
    </TweaksPanel>
  );
}

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