/* io-ai Tweaks — React island that drives the vanilla page via CSS vars + DOM.
   Loaded after React, Babel and tweaks-panel.jsx. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#FB9826", "#E2871F"],
  "heroArt": "orange",
  "headline": "Expert data for serious AI.",
  "reduceMotion": false
}/*EDITMODE-END*/;

const HERO_ART = {
  orange: "assets/render-hero.jpg",
  data:   "assets/data-flow.png",
  voxel:  "assets/render-voxel.jpg"
};

const HEADLINES = [
  "Expert data for serious AI.",
  "The data layer for frontier AI.",
  "Training data your models can trust.",
  "Expert-managed data, >97% accurate."
];

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

  // accent color (+ derived hover)
  React.useEffect(() => {
    const root = document.documentElement;
    const pair = Array.isArray(t.accent) ? t.accent : [t.accent, t.accent];
    root.style.setProperty('--accent', pair[0]);
    root.style.setProperty('--accent-hover', pair[1] || pair[0]);
  }, [t.accent]);

  // hero artwork
  React.useEffect(() => {
    const img = document.querySelector('.hero__art img');
    if (img) img.src = HERO_ART[t.heroArt] || HERO_ART.orange;
  }, [t.heroArt]);

  // headline copy (keeps the trailing-period accent)
  React.useEffect(() => {
    const h = document.querySelector('.hero__title');
    if (!h) return;
    const txt = (t.headline || '').replace(/\.+\s*$/, '');
    h.innerHTML = txt + '<span class="dot">.</span>';
  }, [t.headline]);

  // reduce motion
  React.useEffect(() => {
    document.body.classList.toggle('tw-reduce', !!t.reduceMotion);
  }, [t.reduceMotion]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor label="Accent" value={t.accent}
        options={[["#FB9826","#E2871F"], ["#3B6FE0","#2F5BC0"], ["#1F8A5B","#176D48"], ["#7A5AE0","#6244C4"]]}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Hero" />
      <TweakRadio label="Focal art" value={t.heroArt}
        options={["orange", "data", "voxel"]}
        onChange={(v) => setTweak('heroArt', v)} />
      <TweakSelect label="Headline" value={t.headline}
        options={HEADLINES}
        onChange={(v) => setTweak('headline', v)} />

      <TweakSection label="Motion" />
      <TweakToggle label="Reduce motion" value={t.reduceMotion}
        onChange={(v) => setTweak('reduceMotion', v)} />
    </TweaksPanel>
  );
}

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