/* Tweaks app for the Home page — drives the vanilla DOM via tweak values.
   Loaded after tweaks-panel.jsx (which exports the controls to window). */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "nav": "split",
  "theme": "light",
  "accent": "#3E8EDE",
  "heroHeadline": "Operating systems for agencies & entrepreneurial teams.",
  "stickyNav": true
}/*EDITMODE-END*/;

// Curated accents → derived deep / tint shades that keep contrast on the surface.
const ACCENTS = {
  "#3E8EDE": { deep: "#2C72BD", tint: "#E3EFFB" },
  "#D8552A": { deep: "#BC4014", tint: "#F6E2D6" },
  "#2F6B4F": { deep: "#235540", tint: "#DCE8E1" },
  "#7048C4": { deep: "#56329E", tint: "#EBE2F7" }
};

// Base palette themes (accent applied separately, on top of either).
const THEMES = {
  light: {
    "--bg": "#F3F4F6", "--bg-deep": "#E9EBEF", "--surface": "#FFFFFF",
    "--surface-2": "#EDEFF2", "--ink": "#181B20", "--ink-2": "#3C4148",
    "--ink-soft": "#697079", "--line": "rgba(24,27,32,0.09)",
    "--line-strong": "rgba(24,27,32,0.15)"
  },
  beige: {
    "--bg": "#E9E3D6", "--bg-deep": "#E2DBCB", "--surface": "#FBF9F4",
    "--surface-2": "#F3EFE6", "--ink": "#15120D", "--ink-2": "#423D34",
    "--ink-soft": "#756F63", "--line": "rgba(21,18,13,0.10)",
    "--line-strong": "rgba(21,18,13,0.16)"
  }
};

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

  // Navigation layout: split (platforms surfaced) vs. single Solutions menu.
  React.useEffect(() => {
    document.documentElement.setAttribute('data-nav', t.nav);
  }, [t.nav]);

  // Base palette theme.
  React.useEffect(() => {
    const vars = THEMES[t.theme] || THEMES.light;
    const s = document.documentElement.style;
    Object.entries(vars).forEach(([k, v]) => s.setProperty(k, v));
  }, [t.theme]);

  // Accent color (+ derived shades) applied as CSS custom properties.
  React.useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS["#3E8EDE"];
    const s = document.documentElement.style;
    s.setProperty('--accent', t.accent);
    s.setProperty('--accent-deep', a.deep);
    s.setProperty('--accent-tint', a.tint);
  }, [t.accent]);

  // Editable hero headline.
  React.useEffect(() => {
    const h = document.querySelector('[data-hero-headline]');
    if (h) h.textContent = t.heroHeadline;
  }, [t.heroHeadline]);

  // Sticky vs. static top navigation.
  React.useEffect(() => {
    const nav = document.querySelector('.nav');
    if (nav) nav.style.position = t.stickyNav ? 'sticky' : 'relative';
  }, [t.stickyNav]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Navigation" />
      <TweakRadio label="Top menu" value={t.nav}
        options={[{ value: 'split', label: 'Split' }, { value: 'solutions', label: 'Solutions' }]}
        onChange={(v) => setTweak('nav', v)} />
      <TweakToggle label="Sticky on scroll" value={t.stickyNav}
        onChange={(v) => setTweak('stickyNav', v)} />

      <TweakSection label="Theme" />
      <TweakRadio label="Palette" value={t.theme}
        options={[{ value: 'light', label: 'Light' }, { value: 'beige', label: 'Beige' }]}
        onChange={(v) => setTweak('theme', v)} />
      <TweakColor label="Accent" value={t.accent}
        options={["#3E8EDE", "#D8552A", "#2F6B4F", "#7048C4"]}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Hero" />
      <TweakText label="Headline" value={t.heroHeadline}
        placeholder="Hero headline"
        onChange={(v) => setTweak('heroHeadline', v)} />
    </TweaksPanel>
  );
}

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