/* Tweaks app for the Tom Walton Urology home page.
   Renders ONLY the Tweaks panel; applies values to the existing static page
   via CSS custom properties + light DOM edits. Hidden entirely when Tweaks is off. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Antique Gold",
  "headingFont": "Cormorant Garamond",
  "radius": 8,
  "headline": "East Midlands\nUrologist & Robotic Surgeon",
  "heroBrightness": 100,
  "showTrustStrip": true
}/*EDITMODE-END*/;

/* Accent ramps — each redefines the gold scale used across the site. */
const ACCENT_RAMPS = {
  "Antique Gold": { 700:"#826619",600:"#977824",500:"#b08d4f",400:"#c6a96a",300:"#d8c193",200:"#e7d9b9",50:"#f5efe1" },
  "Warm Bronze":  { 700:"#7a4f24",600:"#8f5e2c",500:"#a9763f",400:"#c08a52",300:"#d2a679",200:"#e6cdb0",50:"#f6ece1" },
  "Petrol Teal":  { 700:"#155e63",600:"#1a7077",500:"#2c8a91",400:"#4aa3a9",300:"#82c2c6",200:"#bfe0e2",50:"#e6f3f3" },
  "Burgundy":     { 700:"#6f2233",600:"#862a3e",500:"#a13b50",400:"#b85a6e",300:"#d08f9d",200:"#e7c5cd",50:"#f7e9ec" }
};

const FONTS = {
  "Cormorant Garamond": { stack: '"Cormorant Garamond", Georgia, serif', google: null },
  "Playfair Display":   { stack: '"Playfair Display", Georgia, serif', google: "Playfair+Display:wght@500;600;700" },
  "Lora":               { stack: '"Lora", Georgia, serif', google: "Lora:wght@500;600;700" }
};

const loadedFonts = new Set();
function ensureFont(name) {
  const f = FONTS[name];
  if (!f || !f.google || loadedFonts.has(name)) return;
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = "https://fonts.googleapis.com/css2?family=" + f.google + "&display=swap";
  document.head.appendChild(link);
  loadedFonts.add(name);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement.style;
    const ramp = ACCENT_RAMPS[t.accent] || ACCENT_RAMPS["Antique Gold"];
    root.setProperty("--gold-700", ramp[700]);
    root.setProperty("--gold-600", ramp[600]);
    root.setProperty("--gold-500", ramp[500]);
    root.setProperty("--gold-400", ramp[400]);
    root.setProperty("--gold-300", ramp[300]);
    root.setProperty("--gold-200", ramp[200]);
    root.setProperty("--gold-50",  ramp[50]);
  }, [t.accent]);

  React.useEffect(() => {
    const f = FONTS[t.headingFont] || FONTS["Cormorant Garamond"];
    ensureFont(t.headingFont);
    document.documentElement.style.setProperty("--font-display", f.stack);
  }, [t.headingFont]);

  React.useEffect(() => {
    const root = document.documentElement.style;
    root.setProperty("--radius-md", t.radius + "px");
    root.setProperty("--radius-sm", Math.max(0, t.radius - 3) + "px");
    root.setProperty("--radius-lg", (t.radius + 6) + "px");
  }, [t.radius]);

  React.useEffect(() => {
    const el = document.querySelector(".hero__title");
    if (el) { el.style.whiteSpace = "pre-line"; el.textContent = t.headline; }
  }, [t.headline]);

  React.useEffect(() => {
    const img = document.querySelector(".hero__bg img");
    if (img) img.style.filter = "brightness(" + (t.heroBrightness / 100) + ")";
  }, [t.heroBrightness]);

  React.useEffect(() => {
    const strip = document.querySelector(".trust-strip");
    if (strip) strip.style.display = t.showTrustStrip ? "" : "none";
  }, [t.showTrustStrip]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand" />
      <TweakSelect label="Accent colour" value={t.accent}
        options={Object.keys(ACCENT_RAMPS)}
        onChange={(v) => setTweak("accent", v)} />
      <TweakSelect label="Heading font" value={t.headingFont}
        options={Object.keys(FONTS)}
        onChange={(v) => setTweak("headingFont", v)} />
      <TweakSlider label="Corner radius" value={t.radius} min={0} max={16} unit="px"
        onChange={(v) => setTweak("radius", v)} />

      <TweakSection label="Hero" />
      <TweakText label="Headline" value={t.headline}
        onChange={(v) => setTweak("headline", v)} />
      <TweakSlider label="Image brightness" value={t.heroBrightness} min={40} max={120} unit="%"
        onChange={(v) => setTweak("heroBrightness", v)} />
      <TweakToggle label="Show trust strip" value={t.showTrustStrip}
        onChange={(v) => setTweak("showTrustStrip", v)} />
    </TweaksPanel>
  );
}

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