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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#3d6a48",
  "highlight": "#B85C38",
  "headFont": "Newsreader",
  "bodyFont": "DM Sans",
  "corners": "soft",
  "spacing": 104,
  "baseSize": 17,
  "showTopbar": true,
  "showComfort": false
}/*EDITMODE-END*/;

const RADII = {
  crisp: ["4px", "6px"],
  soft:  ["16px", "12px"],
  round: ["28px", "999px"],
};

function applyTweaks(t) {
  const r = document.documentElement;
  r.style.setProperty("--accent", t.accent);
  r.style.setProperty("--highlight", t.highlight);
  r.style.setProperty("--font-head", '"' + t.headFont + '", Georgia, 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.soft;
  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 (logo green)"
        value={t.accent}
        options={["#3d6a48", "#2f5a40", "#4a7355", "#5a7d52", "#2f4f5c"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakColor
        label="Book Now (highlight)"
        value={t.highlight}
        options={["#B85C38", "#C97A45", "#C4873D", "#D4A843", "#3e5663"]}
        onChange={(v) => setTweak("highlight", v)}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Headings"
        value={t.headFont}
        options={["Newsreader", "Spectral", "Lora", "Source Serif 4"]}
        onChange={(v) => setTweak("headFont", v)}
      />
      <TweakSelect
        label="Body"
        value={t.bodyFont}
        options={["Hanken Grotesk", "Mulish", "Work Sans"]}
        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={64} 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 />);