// app.jsx — Tweaks panel, Greenway Dental Centre landing page.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#23483A",
  "highlight": "#C29A4A",
  "headFont": "Newsreader",
  "bodyFont": "Hanken Grotesk",
  "corners": "crisp",
  "spacing": 104,
  "baseSize": 17,
  "showTopbar": true,
  "showComfort": true
}/*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.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" value={t.accent} options={["#23483A", "#1B3A2E", "#2F5D4A", "#325969"]} onChange={(v) => setTweak("accent", v)} />
      <TweakColor label="Book Now (highlight)" value={t.highlight} options={["#C29A4A", "#DFB645", "#A8822F", "#D4B06A"]} onChange={(v) => setTweak("highlight", v)} />

      <TweakSection label="Typography" />
      <TweakSelect label="Headings" value={t.headFont} options={["Newsreader", "Spectral", "Source Serif 4", "Hanken Grotesk"]} 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} onChange={(v) => setTweak("spacing", v)} unit="px" />

      <TweakSection label="Sections" />
      <TweakToggle label="Top 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 />);