/* ============================================================
   Omnion.Dev — Tweaks bridge (React island)
   Maps panel controls onto the vanilla page via CSS vars + OmnionApp.
   ============================================================ */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVisual": "terminal",
  "heroHeadline": "0",
  "accent": ["#10B981", "#00C896"],
  "treatment": "glow"
}/*EDITMODE-END*/;

const VISUAL_OPTIONS = [
  { value: "terminal", label: "Terminal" },
  { value: "dashboard", label: "Dashboard" },
  { value: "chat", label: "Chat flow" },
  { value: "architecture", label: "Architecture" }
];

const HEADLINE_OPTIONS = [
  { value: "0", label: "01 · Scale / Crescer" },
  { value: "1", label: "02 · Future / Futuro" },
  { value: "2", label: "03 · Growth / Crescimento" },
  { value: "3", label: "04 · Leading / Nível" }
];

const ACCENT_PALETTES = [
  ["#10B981", "#00C896"], // emerald (brand)
  ["#00C896", "#34d399"], // mint
  ["#06b6d4", "#22d3ee"], // teal
  ["#6366f1", "#818cf8"]  // indigo
];

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

  // accent color
  useEffect(() => {
    const [a, h] = Array.isArray(t.accent) ? t.accent : ACCENT_PALETTES[0];
    document.documentElement.style.setProperty('--accent', a);
    document.documentElement.style.setProperty('--accent-hover', h);
  }, [t.accent]);

  // glow treatment
  useEffect(() => {
    document.documentElement.style.setProperty('--glow', t.treatment === 'minimal' ? '0.16' : '1');
  }, [t.treatment]);

  // hero visual
  useEffect(() => {
    if (window.OmnionApp) window.OmnionApp.setViz(t.heroVisual);
  }, [t.heroVisual]);

  // hero headline
  useEffect(() => {
    if (window.OmnionApp) window.OmnionApp.setHeadline(parseInt(t.heroHeadline, 10) || 0);
  }, [t.heroHeadline]);

  return (
    <TweaksPanel>
      <TweakSection label="Hero" />
      <TweakSelect
        label="Headline"
        value={t.heroHeadline}
        options={HEADLINE_OPTIONS}
        onChange={(v) => setTweak('heroHeadline', v)}
      />
      <TweakSelect
        label="Visual"
        value={t.heroVisual}
        options={VISUAL_OPTIONS}
        onChange={(v) => setTweak('heroVisual', v)}
      />
      <TweakSection label="Accent treatment" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={ACCENT_PALETTES}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakRadio
        label="Glow"
        value={t.treatment}
        options={["glow", "minimal"]}
        onChange={(v) => setTweak('treatment', v)}
      />
    </TweaksPanel>
  );
}

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