// home-tweaks.jsx — Tweaks for the Friendly Smiles home page (locked palette)

const HOME_DEFAULTS = /*EDITMODE-BEGIN*/{
  "display": "BD Supper",
  "cta": "#ffdf92",
  "hero": "#057bd2",
  "spacing": 96,
  "showTicker": true
}/*EDITMODE-END*/;

function applyHomeTweaks(t) {
  const r = document.documentElement;
  r.style.setProperty("--display", '"' + t.display + '", system-ui, sans-serif');
  r.style.setProperty("--head", '"' + t.display + '", system-ui, sans-serif');
  r.style.setProperty("--cta", t.cta);
  // readable text on the CTA pill
  const hx = (t.cta || "").replace("#", "");
  if (hx.length === 6) {
    const lum = (0.299*parseInt(hx.slice(0,2),16) + 0.587*parseInt(hx.slice(2,4),16) + 0.114*parseInt(hx.slice(4,6),16)) / 255;
    r.style.setProperty("--cta-ink", lum > 0.6 ? "#2644a0" : "#fffff5");
  }
  r.style.setProperty("--azure", t.hero);
  r.style.setProperty("--accent", t.hero);
  r.style.setProperty("--pad", t.spacing + "px");
  const tk = document.getElementById("ticker");
  if (tk) tk.setAttribute("data-hidden", String(!t.showTicker));
}

function App() {
  const [t, setTweak] = useTweaks(HOME_DEFAULTS);
  React.useEffect(() => { applyHomeTweaks(t); }, [t]);
  return (
    <TweaksPanel>
      <TweakSection label="Type" />
      <TweakSelect label="Display font" value={t.display}
        options={["BD Supper", "Fredoka", "Poppins", "Mulish", "Hanken Grotesk"]}
        onChange={(v) => setTweak("display", v)} />

      <TweakSection label="Color" />
      <TweakColor label="CTA button" value={t.cta}
        options={["#ffdf92", "#548454", "#92c8cd", "#057bd2"]}
        onChange={(v) => setTweak("cta", v)} />
      <TweakColor label="Hero / accent" value={t.hero}
        options={["#057bd2", "#2644a0", "#395a3d", "#548454"]}
        onChange={(v) => setTweak("hero", v)} />

      <TweakSection label="Layout" />
      <TweakSlider label="Section spacing" value={t.spacing} min={56} max={140} step={4} unit="px"
        onChange={(v) => setTweak("spacing", v)} />
      <TweakToggle label="Trust ticker" value={t.showTicker} onChange={(v) => setTweak("showTicker", v)} />
    </TweaksPanel>
  );
}

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