// Formak landing — Tweaks island. Mounts the panel and applies choices to the
// static page (body[data-hero/data-motion], --accent vars, headline copy).
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "split",
  "accent": ["#16C2F3", "#7BE4FF"],
  "motion": true,
  "headline": "lab"
}/*EDITMODE-END*/;

const HEADLINES = {
  lab:   'Turn any clip into a <span class="fk-hl">biomechanics lab.</span>',
  see:   'See the <span class="fk-hl">movement</span> behind the performance.',
  read:  'Your motion, <span class="fk-hl">measured</span> — frame by frame.'
};

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

  useEffect(() => { document.body.dataset.hero = t.hero; }, [t.hero]);
  useEffect(() => { document.body.dataset.motion = t.motion ? 'on' : 'off'; }, [t.motion]);
  useEffect(() => {
    const a = Array.isArray(t.accent) ? t.accent : [t.accent, t.accent];
    document.documentElement.style.setProperty('--accent', a[0]);
    document.documentElement.style.setProperty('--accent-2', a[1] || a[0]);
  }, [t.accent]);
  useEffect(() => {
    const h = document.querySelector('h1[data-headline]');
    if (h && HEADLINES[t.headline] && !window.__i18nActive) h.innerHTML = HEADLINES[t.headline];
  }, [t.headline]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero direction" />
      <TweakRadio
        label="Layout" value={t.hero}
        options={[{ value: 'split', label: 'Split' }, { value: 'bleed', label: 'Bleed' }, { value: 'instrument', label: 'Lab' }]}
        onChange={(v) => setTweak('hero', v)} />
      <TweakSelect
        label="Headline" value={t.headline}
        options={[{ value: 'lab', label: 'Biomechanics lab' }, { value: 'see', label: 'See the movement' }, { value: 'read', label: 'Motion, measured' }]}
        onChange={(v) => setTweak('headline', v)} />

      <TweakSection label="Signal hue" />
      <TweakColor
        label="Accent" value={t.accent}
        options={[['#16C2F3', '#7BE4FF'], ['#0BA0CE', '#3FD3FA'], ['#3FD3FA', '#9CEBFF']]}
        onChange={(v) => setTweak('accent', v)} />

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

const mount = document.createElement('div');
document.body.appendChild(mount);
ReactDOM.createRoot(mount).render(<App />);