// index-tweaks.jsx, light Tweaks panel for the home page.
// Lets you recolour the brand accent, optionally re-add a "Free
// Consultation" button to the (otherwise original/clean) menu bar,
// and toggle the floating contact buttons. Runs after js/site.js.

// Curated wellbeing accents, [mid, deep, bright], harmonious tone.
const ACCENTS = {
  Leaf:    ["#6bb74a", "#1f7a3a", "#6ceb63"],
  Teal:    ["#2a9d8f", "#1d6f64", "#5fd6c7"],
  Heather: ["#8a76c4", "#5f4b9e", "#bda9ec"],
  Clay:    ["#c8765a", "#9a4f38", "#e8a085"],
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#6bb74a", "#1f7a3a", "#6ceb63"],
  "navButton": false,
  "floaters": true
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const root = document.documentElement;
    const accent = Array.isArray(t.accent) ? t.accent : ACCENTS.Leaf;
    root.style.setProperty("--accent", accent[0]);
    root.style.setProperty("--accent-deep", accent[1]);
    root.style.setProperty("--accent-bright", accent[2]);
    root.setAttribute("data-accent", "on");

    // optional consultation button in the menu bar
    const nav = document.querySelector(".site-header .nav");
    if (nav) {
      let cta = nav.querySelector(".nav-cta");
      if (t.navButton && !cta) {
        cta = document.createElement("div");
        cta.className = "nav-cta";
        cta.innerHTML = '<a class="btn btn-primary" href="contact.html">Free Consultation</a>';
        nav.appendChild(cta);
      } else if (!t.navButton && cta) {
        cta.remove();
      }
    }

    const fl = document.querySelector(".floaters");
    if (fl) fl.style.display = t.floaters ? "" : "none";
  }, [t.accent, t.navButton, t.floaters]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand" />
      <TweakColor label="Accent" value={t.accent}
        options={Object.values(ACCENTS)}
        onChange={(v) => setTweak("accent", v)} />

      <TweakSection label="Menu bar" />
      <TweakToggle label="Consultation button" value={t.navButton}
        onChange={(v) => setTweak("navButton", v)} />
      <TweakToggle label="Floating contact buttons" value={t.floaters}
        onChange={(v) => setTweak("floaters", v)} />
    </TweaksPanel>
  );
}

// Mount after site.js has built the header.
(function mount() {
  if (!document.querySelector(".site-header .nav")) { requestAnimationFrame(mount); return; }
  ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<App />);
})();