// Main app — wires nav, sections, tweaks panel, and theme switching

const { useState, useEffect, useRef } = React;

const Nav = ({ onWaitlist }) => (
  <nav className="nav">
    <div className="nav-inner">
      <div className="brand">
        <div className="brand-mark" />
        <div>
          <div className="brand-name">GRAPHYTI</div>
          <div className="brand-sub mono">3D Synthetic Data Sandbox</div>
        </div>
      </div>
      <div className="nav-links">
        <a href="#scenes">Scenes</a>
        <a href="#verticals">Who It's For</a>
        <a href="#app">Sandbox</a>
        <a href="#demo">Demo</a>
        <a href="#features">Engine</a>
        <a href="#founders">Team</a>
        <a className="nav-cta mono" href="#waitlist" onClick={(e) => { e.preventDefault(); onWaitlist(); }}>Join Waitlist →</a>
      </div>
    </div>
  </nav>
);

const App = () => {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const waitlistRef = useRef(null);

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
  }, [t.theme]);

  useEffect(() => {
    document.body.classList.toggle('no-grid', !t.showGrid);
    document.body.classList.toggle('no-scanlines', !t.showScanlines);
    document.body.classList.toggle('no-stars', !t.showStars);
  }, [t.showGrid, t.showScanlines, t.showStars]);

  const scrollToWaitlist = () => {
    const el = document.getElementById('waitlist');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <>
      <Nav onWaitlist={scrollToWaitlist} />
      <Hero onWaitlist={scrollToWaitlist} />
      <Marquee />
      <RecoveredFootage />
      <FeaturedReel />
      <TwoVerticals />
      <AppPreview />
      <Demo />
      <Features />
      <Founders />
      <Waitlist formRef={waitlistRef} />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio
          label="Accent"
          value={t.theme}
          options={['pink', 'violet', 'cyan']}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakSection label="Backdrop" />
        <TweakToggle
          label="Starfield"
          value={t.showStars}
          onChange={(v) => setTweak('showStars', v)}
        />
        <TweakToggle
          label="Grid"
          value={t.showGrid}
          onChange={(v) => setTweak('showGrid', v)}
        />
        <TweakToggle
          label="Scanlines"
          value={t.showScanlines}
          onChange={(v) => setTweak('showScanlines', v)}
        />
      </TweaksPanel>
    </>
  );
};

const styleEl = document.createElement('style');
styleEl.textContent = `
  body.no-grid .grid-bg { display: none; }
  body.no-scanlines .scanlines { display: none; }
  body.no-stars .galaxy-bg::before, body.no-stars .galaxy-bg::after { display: none; }
`;
document.head.appendChild(styleEl);

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