const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#6fb4ff",
  "theme": "dark",
  "motion": 1
}/*EDITMODE-END*/;

const ACCENT_PRESETS = [
  ["#e87c3a", "Warm orange"],
  ["#9fd14a", "Electric lime"],
  ["#6fb4ff", "Sky blue"],
  ["#f0f0ea", "Chalk white"],
  ["#ff5a5a", "Signal red"],
];

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

  React.useEffect(() => {
    document.body.classList.toggle('light', t.theme === 'light');
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--accent-ink', t.theme === 'light' ? '#f3ecdf' : '#1a0f00');
  }, [t.theme, t.accent]);

  // Scroll reveal
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('is-in'); });
    }, { threshold: 0.12 });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  // Magnetic cursor
  React.useEffect(() => {
    const c = document.getElementById('cursor');
    if (!c) return;
    const mv = (e) => {
      c.style.left = e.clientX + 'px';
      c.style.top = e.clientY + 'px';
    };
    const over = (e) => {
      if (e.target.closest && e.target.closest('a, button, .btn, .incl-item, .process-step, .browser, .portfolio-link')) {
        c.classList.add('big');
      } else {
        c.classList.remove('big');
      }
    };
    window.addEventListener('mousemove', mv);
    window.addEventListener('mouseover', over);
    return () => {
      window.removeEventListener('mousemove', mv);
      window.removeEventListener('mouseover', over);
    };
  }, []);

  return (
    <>
      <div id="cursor"></div>
      <window.Nav />
      <window.Hero />
      <window.Marquee />
      <window.Included />
      <window.Process />
      <window.Compare />
      <window.Portfolio />
      <window.About />
      <window.Contact />
      <window.Footer />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Theme" />
        <window.TweakRadio
          label="Mode"
          value={t.theme}
          options={['dark', 'light']}
          onChange={(v) => setT('theme', v)}
        />

        <window.TweakSection label="Accent color" />
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6, padding: '2px 0'}}>
          {ACCENT_PRESETS.map(([hex, name]) => (
            <button
              key={hex}
              onClick={() => setT('accent', hex)}
              title={name}
              style={{
                aspectRatio: '1',
                background: hex,
                border: t.accent === hex ? '2px solid #29261b' : '1px solid rgba(0,0,0,0.15)',
                borderRadius: 6,
                cursor: 'pointer',
                padding: 0,
              }}
            />
          ))}
        </div>

        <window.TweakSection label="Motion" />
        <window.TweakSlider
          label="Intensity"
          value={t.motion}
          min={0} max={2} step={0.1}
          onChange={(v) => setT('motion', v)}
        />
      </window.TweaksPanel>
    </>
  );
}

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