/* ============================================================
   Pintone Landing Page — Tweaks app
   Panel-only React app. Renders the Tweaks panel and applies each
   value to the existing (vanilla) page via effects. No main UI here.
   ============================================================ */
/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakToggle, TweakText, TweakRadio */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#319E95",
  "twoTone": true,
  "pilotLabel": "Request a demo",
  "pilotFlow": "popup",
  "showGetStarted": true,
  "getStartedLabel": "Get started"
}/*EDITMODE-END*/;

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

  // Brand accent — overrides the design-system --pt-teal token (and everything
  // derived from it: buttons, fills, icons, focus rings).
  React.useEffect(() => {
    document.documentElement.style.setProperty("--pt-teal", t.accent);
  }, [t.accent]);

  // Two-tone hero headline on/off
  React.useEffect(() => {
    document.body.classList.toggle("no-twotone", !t.twoTone);
  }, [t.twoTone]);

  // Primary CTA label on every pilot button
  React.useEffect(() => {
    document.querySelectorAll("[data-pilot]").forEach((b) => { b.textContent = t.pilotLabel; });
  }, [t.pilotLabel]);

  // Get-started button visibility + label
  React.useEffect(() => {
    document.querySelectorAll("[data-getstarted]").forEach((b) => {
      b.style.display = t.showGetStarted ? "" : "none";
      b.textContent = t.getStartedLabel;
    });
  }, [t.showGetStarted, t.getStartedLabel]);

  // Pilot flow — popup modal vs inline form section
  React.useEffect(() => {
    if (window.__setPilotFlow) window.__setPilotFlow(t.pilotFlow);
  }, [t.pilotFlow]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor label="Accent" value={t.accent}
                  options={["#319E95", "#055559", "#3E8CB5", "#86B9C0"]}
                  onChange={(v) => setTweak("accent", v)} />

      <TweakSection label="Hero" />
      <TweakToggle label="Two-tone headline" value={t.twoTone}
                   onChange={(v) => setTweak("twoTone", v)} />

      <TweakSection label="Calls to action" />
      <TweakText label="Demo button label" value={t.pilotLabel}
                 onChange={(v) => setTweak("pilotLabel", v)} />
      <TweakRadio label="Demo flow" value={t.pilotFlow}
                  options={["popup", "inline"]}
                  onChange={(v) => setTweak("pilotFlow", v)} />
      <TweakToggle label="Show ‘Get started’" value={t.showGetStarted}
                   onChange={(v) => setTweak("showGetStarted", v)} />
      <TweakText label="‘Get started’ label" value={t.getStartedLabel}
                 onChange={(v) => setTweak("getStartedLabel", v)} />
    </TweaksPanel>
  );
}

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