/* global React, ReactDOM, Nav, Hero, Problem, Shift, Timeline, Model, Today, EarlyAccess, TweaksPanel, useTweaks, TweakSection, TweakSlider, TweakColor */

const { useState, useEffect } = React;

function App() {
  const [tweaks, setTweak] = useTweaks(window.__TWEAKS_DEFAULTS__);
  const [highlight, setHighlight] = useState(null);

  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--accent', tweaks.accent);
    r.style.setProperty('--bg', tweaks.background);
    r.style.setProperty('--surface', tweaks.surface);
    r.style.setProperty('--ink', tweaks.ink);
    document.body.style.background = tweaks.background;
  }, [tweaks.accent, tweaks.background, tweaks.surface, tweaks.ink]);

  // Sticky CTA visibility: show after hero, hide at access section
  const [showCta, setShowCta] = useState(false);
  useEffect(() => {
    function onScroll() {
      const y = window.scrollY;
      const access = document.getElementById('access');
      const accessTop = access ? access.offsetTop - window.innerHeight * 0.6 : Infinity;
      setShowCta(y > 600 && y < accessTop);
    }
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  function goAccess() {
    const el = document.getElementById('access');
    if (el) window.scrollTo({ top: el.offsetTop - 40, behavior: 'smooth' });
  }

  return (
    <div>
      <Nav />
      <Hero tweaks={tweaks} highlight={highlight} />
      <Problem />
      <Shift />
      <Timeline />
      <Model onHover={setHighlight} />
      <Today highlight={highlight} />
      <EarlyAccess />

      {/* Sticky CTA */}
      <button
        onClick={goAccess}
        className="sticky-cta"
        style={{
          opacity: showCta ? 1 : 0,
          transform: showCta ? 'translateY(0)' : 'translateY(20px)',
          pointerEvents: showCta ? 'auto' : 'none',
        }}
      >
        <span className="dot"></span> Request access
      </button>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakColor label="Accent" value={tweaks.accent} onChange={(v) => setTweak('accent', v)} />
        <TweakColor label="Background" value={tweaks.background} onChange={(v) => setTweak('background', v)} />
        <TweakColor label="Surface" value={tweaks.surface} onChange={(v) => setTweak('surface', v)} />
        <TweakColor label="Ink" value={tweaks.ink} onChange={(v) => setTweak('ink', v)} />
        <TweakSection label="Motion" />
        <TweakSlider label="Scroll motion" min={0} max={2} step={0.1} value={tweaks.motionIntensity} onChange={(v) => setTweak('motionIntensity', v)} />
      </TweaksPanel>

      <div className="version-badge">beboosted.app · v0.4.2 · cohort 42</div>
    </div>
  );
}

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