/* global React, ReactDOM */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#2263FA", "#FFFFFF", "#111827"],
  "headlineStyle": "manifesto",
  "showDiagram": true,
  "accentInItalics": true,
  "tickerSpeed": 60
}/*EDITMODE-END*/;

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

  // Apply palette as CSS variables
  useEffect(() => {
    const [accent, paper, ink] = t.palette;
    const root = document.documentElement;
    if (accent) root.style.setProperty('--accent', accent);
    if (paper)  root.style.setProperty('--paper-warm', paper);
    if (ink)    root.style.setProperty('--ink', ink);
    if (accent) {
      root.style.setProperty('--accent-soft',
        `color-mix(in oklch, ${accent} 28%, white)`);
    }
  }, [t.palette]);

  // Hero headline arrangement
  useEffect(() => {
    const h = document.querySelector('.headline');
    if (!h) return;
    const presets = {
      manifesto: [
        ["We don't help", false],
        ["companies <em>adopt AI.</em>", false],
        ["We help them stop", true],
        ["<em>wasting</em> human intelligence.", true],
      ],
      mantra: [
        ["Humans <em>decide.</em>", false],
        ["Agents coordinate.", true],
        ["Strategy <em>enforces</em>", false],
        ["itself.", true],
      ],
      thesis: [
        ["Strategy", false],
        ["<em>shows up</em>", true],
        ["on Monday.", false],
      ],
    };
    const lines = presets[t.headlineStyle] || presets.manifesto;
    h.innerHTML = lines
      .map(([txt, indent]) => `<span class="line ${indent ? 'indent' : ''}">${txt}</span>`)
      .join('');
  }, [t.headlineStyle]);

  // Diagram visibility
  useEffect(() => {
    const d = document.querySelector('.align-diagram');
    if (d) d.style.display = t.showDiagram ? '' : 'none';
  }, [t.showDiagram]);

  // Italic accent toggle
  useEffect(() => {
    document.querySelectorAll('em').forEach(em => {
      em.style.color = t.accentInItalics ? '' : 'var(--ink)';
    });
  }, [t.accentInItalics]);

  // Ticker speed
  useEffect(() => {
    const track = document.querySelector('.ticker-track');
    if (track) track.style.animationDuration = `${t.tickerSpeed}s`;
  }, [t.tickerSpeed]);

  const { TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakSlider } = window;

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette">
        <TweakColor
          label="Color story"
          value={t.palette}
          onChange={(v) => setTweak('palette', v)}
          options={[
            ['#2263FA', '#FFFFFF', '#111827'],  // Align-ify Blue (brand default)
            ['#FF9826', '#FFFFFF', '#111827'],  // Align-ify Orange accent
            ['#2263FA', '#F9FAFB', '#1E293B'],  // Blue + warm gray paper
            ['#FF9826', '#FFF7ED', '#1C1917'],  // Orange + warm cream
            ['#1E40AF', '#EFF6FF', '#0F172A'],  // Deep navy blue
            ['#111827', '#F9FAFB', '#111827'],  // Mono — ink as accent
          ]}
        />
      </TweakSection>

      <TweakSection title="Hero">
        <TweakRadio
          label="Headline"
          value={t.headlineStyle}
          onChange={(v) => setTweak('headlineStyle', v)}
          options={[
            { value: 'manifesto', label: 'Manifesto' },
            { value: 'mantra', label: 'Mantra' },
            { value: 'thesis', label: 'Thesis' },
          ]}
        />
        <TweakToggle
          label="Alignment diagram"
          value={t.showDiagram}
          onChange={(v) => setTweak('showDiagram', v)}
        />
        <TweakToggle
          label="Accent on italics"
          value={t.accentInItalics}
          onChange={(v) => setTweak('accentInItalics', v)}
        />
      </TweakSection>

      <TweakSection title="Motion">
        <TweakSlider
          label="Ticker speed (s/loop)"
          value={t.tickerSpeed}
          onChange={(v) => setTweak('tickerSpeed', v)}
          min={20}
          max={150}
          step={5}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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