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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0d7180",
  "highlight": "#e0a43b",
  "headFont": "Space Grotesk",
  "bodyFont": "Hanken Grotesk",
  "corners": "round",
  "spacing": 104,
  "baseSize": 17,
  "showTopbar": true,
  "showSmilePath": true,
  "showComfort": true
}/*EDITMODE-END*/;

const RADII = {
  crisp: ["4px", "6px"],
  soft:  ["16px", "12px"],
  round: ["26px", "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 + '", 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.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 sp = document.getElementById("why");
  if (sp) sp.setAttribute("data-hidden", String(!t.showSmilePath));
  const cm = document.getElementById("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 (teal)"
        value={t.accent}
        options={["#0d7180", "#085e68", "#34a2b4", "#15808a", "#1c3d5a", "#2a6cb0"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakColor
        label="Book Now (highlight)"
        value={t.highlight}
        options={["#e0a43b", "#eaaf3f", "#e8884a", "#df6b4f", "#1f9d6b", "#0d7180"]}
        onChange={(v) => setTweak("highlight", v)}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Headings"
        value={t.headFont}
        options={["Space Grotesk", "Bricolage Grotesque", "Fredoka", "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} 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="SmilePath™ roadmap (Sec 2)" value={t.showSmilePath} onChange={(v) => setTweak("showSmilePath", v)} />
      <TweakToggle label="Comfort Menu (Sec 7)" value={t.showComfort} onChange={(v) => setTweak("showComfort", v)} />
    </TweaksPanel>
  );
}

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