// App.jsx — composes the page and wires the Tweaks panel.

const ACCENTS = {
  'Stratavex Teal': ['#7BBDD6', '#5BA3C0', '#3B82A0'],
  'Steel Blue':     ['#8FB8E6', '#6E93C9', '#4E6FA0'],
  'Cyan Ice':       ['#7FD6D0', '#57B8B2', '#3A8F8A'],
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "speed": 1.2,
  "autoplay": true,
  "accent": ["#7BBDD6", "#5BA3C0", "#3B82A0"],
  "reduceMotion": false
}/*EDITMODE-END*/;

function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

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

  // apply accent palette
  React.useEffect(() => {
    const [bright, base, dim] = t.accent;
    const r = document.documentElement.style;
    r.setProperty('--accent-bright', bright);
    r.setProperty('--accent', base);
    r.setProperty('--accent-dim', dim);
    // keep alpha-derived tokens roughly in family
    const rgb = base.replace('#', '').match(/.{2}/g).map(h => parseInt(h, 16)).join(',');
    r.setProperty('--accent-surface', `rgba(${rgb},0.08)`);
    r.setProperty('--accent-border', `rgba(${rgb},0.18)`);
    r.setProperty('--ag-orch', bright);
    r.setProperty('--ag-marcus', base);
  }, [t.accent]);

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

  const accentName = Object.keys(ACCENTS).find(k => ACCENTS[k][1] === t.accent[1]) || 'Stratavex Teal';

  return (
    <React.Fragment>
      <CornerBrackets />
      <Navbar />
      <Hero />
      <div className="divider"></div>
      <Roster />
      <Console speed={t.speed} autoplay={t.autoplay} />
      <Quality />
      <ClosingCTA />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Playback" />
        <TweakSlider label="Animation speed" value={t.speed} min={0.5} max={2.5} step={0.1} unit="×"
                     onChange={(v) => setTweak('speed', v)} />
        <TweakToggle label="Autoplay in view" value={t.autoplay}
                     onChange={(v) => setTweak('autoplay', v)} />
        <TweakSection label="Appearance" />
        <TweakColor label="Accent" value={t.accent}
                    options={Object.values(ACCENTS)}
                    onChange={(v) => setTweak('accent', v)} />
        <TweakToggle label="Reduce motion" value={t.reduceMotion}
                     onChange={(v) => setTweak('reduceMotion', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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