// Finantregy — Tweaks panel
// Mounts a small React island that exposes a curated set of visual tweaks.
// All tweaks map to CSS custom properties or body classes; nothing in the
// main page depends on React.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C8A951",
  "heroStyle": "gradient",
  "density": "regular",
  "showHeroCard": true,
  "logoFItalic": true
}/*EDITMODE-END*/;

const HERO_BG = {
  gradient: "radial-gradient(120% 80% at 80% 0%, #163559 0%, #0A1628 55%, #06101e 100%)",
  duotone:  "linear-gradient(135deg, #0A1628 0%, #1B3A5C 100%)",
  solid:    "#0A1628",
  blueprint:"linear-gradient(180deg, #0A1628 0%, #112844 100%)"
};

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

  // === Apply tweaks to the page ===
  React.useEffect(() => {
    document.documentElement.style.setProperty("--gold", t.accent);
    // Recompute the deeper hover tone by darkening via a CSS color-mix when supported.
    document.documentElement.style.setProperty(
      "--gold-deep",
      `color-mix(in oklab, ${t.accent} 75%, #000 25%)`
    );
    document.documentElement.style.setProperty(
      "--gold-soft",
      `color-mix(in oklab, ${t.accent} 70%, #fff 30%)`
    );
  }, [t.accent]);

  React.useEffect(() => {
    const hero = document.querySelector(".hero");
    if (hero) hero.style.background = HERO_BG[t.heroStyle] || HERO_BG.gradient;
  }, [t.heroStyle]);

  React.useEffect(() => {
    const map = { compact: "72px", regular: "120px", spacious: "160px" };
    document.querySelectorAll(".section").forEach((s) => {
      s.style.paddingTop = map[t.density];
      s.style.paddingBottom = map[t.density];
    });
  }, [t.density]);

  React.useEffect(() => {
    document.querySelectorAll(".hero__side").forEach((el) => {
      el.style.display = t.showHeroCard ? "" : "none";
    });
  }, [t.showHeroCard]);

  React.useEffect(() => {
    document.querySelectorAll(".logo-f").forEach((el) => {
      el.style.fontStyle = t.logoFItalic ? "italic" : "normal";
    });
  }, [t.logoFItalic]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={["#C8A951", "#B8884B", "#D4B36A", "#0A1628", "#2E75B6"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakToggle
        label='Italic "F" in logo'
        value={t.logoFItalic}
        onChange={(v) => setTweak("logoFItalic", v)}
      />

      <TweakSection label="Hero" />
      <TweakSelect
        label="Background"
        value={t.heroStyle}
        options={[
          { value: "gradient",  label: "Radial gradient" },
          { value: "duotone",   label: "Duotone diagonal" },
          { value: "solid",     label: "Solid navy" },
          { value: "blueprint", label: "Blueprint" }
        ]}
        onChange={(v) => setTweak("heroStyle", v)}
      />
      <TweakToggle
        label="Show data card"
        value={t.showHeroCard}
        onChange={(v) => setTweak("showHeroCard", v)}
      />

      <TweakSection label="Layout" />
      <TweakRadio
        label="Density"
        value={t.density}
        options={["compact", "regular", "spacious"]}
        onChange={(v) => setTweak("density", v)}
      />
    </TweaksPanel>
  );
}

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