// app.jsx - Tweaks panel for the Act 2 AI Solutions site.
// Applies palette, font pairing, density, headline variant via root attributes.

const { useEffect } = React;

const PALETTES = {
  sky: ["#2563eb", "#06b6d4", "#8b5cf6"],
  aurora: ["#6d4aff", "#ec4899", "#06b6d4"],
  mint: ["#0d9488", "#f59e0b", "#06b6d4"],
};

const FONT_LABELS = {
  modern: "Modern · Geist",
  editorial: "Editorial · Instrument + Geist",
  geometric: "Geometric · Sora",
};

const HEADLINES = {
  practical: "Make AI practical…",
  bridge: "AI access → productivity",
  workflows: "Built around your workflows",
};

function applyTweaks(t) {
  const root = document.documentElement;
  root.setAttribute("data-palette", t.palette);
  root.setAttribute("data-font", t.font);
  root.setAttribute("data-density", t.density);

  // Headline variant: swap which <span data-headline> is visible
  document.querySelectorAll("[data-headline-target] [data-headline]").forEach((el) => {
    el.hidden = el.getAttribute("data-headline") !== t.headline;
  });

  // Section toggles
  document.querySelectorAll('[data-section="trust"]').forEach((el) => {
    el.style.display = t.showTrust ? "" : "none";
  });
  document.querySelectorAll('[data-section="sprint-price"]').forEach((el) => {
    el.style.display = t.showSprintPrice ? "" : "none";
  });
}

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

  // Apply on every change, including first paint
  useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakColor
        label="Palette"
        value={PALETTES[t.palette]}
        options={[PALETTES.sky, PALETTES.aurora, PALETTES.mint]}
        onChange={(arr) => {
          const name = Object.keys(PALETTES).find(
            (k) => PALETTES[k][0] === arr[0]
          );
          if (name) setTweak("palette", name);
        }}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Font pairing"
        value={t.font}
        options={[
          { value: "modern", label: "Modern · Geist" },
          { value: "editorial", label: "Editorial · Instrument Serif + Geist" },
          { value: "geometric", label: "Geometric · Sora" },
        ]}
        onChange={(v) => setTweak("font", v)}
      />

      <TweakSection label="Hero" />
      <TweakSelect
        label="Headline"
        value={t.headline}
        options={[
          { value: "practical", label: "Make AI practical across your business" },
          { value: "bridge", label: "From AI access to AI productivity" },
          { value: "workflows", label: "AI adoption, built around your workflows" },
        ]}
        onChange={(v) => setTweak("headline", v)}
      />

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

      <TweakSection label="Sections" />
      <TweakToggle
        label="Trust strip"
        value={t.showTrust}
        onChange={(v) => setTweak("showTrust", v)}
      />
      <TweakToggle
        label="Sprint price"
        value={t.showSprintPrice}
        onChange={(v) => setTweak("showSprintPrice", v)}
      />
    </TweaksPanel>
  );
}

// Apply defaults synchronously before React mounts so first paint isn't wrong
try { applyTweaks(TWEAK_DEFAULTS); } catch (e) {}

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