// App.jsx — production root. Renders the Prototype fullscreen (no design canvas wrapper).
// State for active page, reel modal, and theme lives inside Prototype.

const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp } = React;

const ACCENT = '#0052ff';

function Prototype({ accent = ACCENT, initialPage = 'home' }) {
  const [page, setPage] = useStateApp(initialPage);
  const [reelOpen, setReelOpen] = useStateApp(false);
  const [theme, setTheme] = useStateApp('light');

  const artboardRef = useRefApp(null);
  const [scrolled, setScrolled] = useStateApp(false);

  const onNavigate = (p) => {
    if (p === 'reel') { setReelOpen(true); return; }
    setPage(p);
    if (artboardRef.current) artboardRef.current.scrollTop = 0;
  };
  const onToggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark');

  useEffectApp(() => {
    const el = artboardRef.current;
    if (!el) return;
    const onScroll = () => setScrolled(el.scrollTop > 360);
    el.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  // Nav is hidden by default on case study landings; reveals on scroll.
  const isCaseStudy = page === 'case-23-springs' || page === 'case-299-park' || page === 'case-cadillac' || page === 'case-batting-lab' || page === 'case-jackson-wang';
  const navHidden = isCaseStudy && !scrolled;

  const isDarkTheme = theme === 'dark';
  const navVariant = isDarkTheme ? 'dark' : 'light';

  // Theme tokens. Surfaces: --ak-bg (page), --ak-bg-2 (alt section), --ak-bg-3 (deep/inverse hero block).
  // Text: --ak-fg (primary), --ak-fg-2 (muted). Lines/strokes: --ak-line.
  // In dark mode, the inverse "deep" section becomes the LIGHT card so visual rhythm survives.
  const themeVars = isDarkTheme ? {
    '--ak-bg':     '#0a0b0d',
    '--ak-bg-2':   '#111316',
    '--ak-bg-3':   '#fff',
    '--ak-fg':     '#fff',
    '--ak-fg-2':   'rgba(255,255,255,0.62)',
    '--ak-fg-on3': '#0a0b0d',
    '--ak-fg-2-on3': '#5b616e',
    '--ak-line':   'rgba(255,255,255,0.12)',
    '--ak-line-on3': 'rgba(91,97,110,0.16)',
    '--ak-logo-filter': 'invert(1)',
  } : {
    '--ak-bg':     '#fff',
    '--ak-bg-2':   '#f6f7f9',
    '--ak-bg-3':   '#0a0b0d',
    '--ak-fg':     '#0a0b0d',
    '--ak-fg-2':   '#5b616e',
    '--ak-fg-on3': '#fff',
    '--ak-fg-2-on3': 'rgba(255,255,255,0.6)',
    '--ak-line':   'rgba(91,97,110,0.16)',
    '--ak-line-on3': 'rgba(255,255,255,0.10)',
    '--ak-logo-filter': 'none',
  };

  return (
    <div ref={artboardRef}
         data-theme={theme}
         style={{
           ...themeVars,
           width: '100%', height: '100%',
           overflowY: 'auto', overflowX: 'hidden',
           background: 'var(--ak-bg)',
           color: 'var(--ak-fg)',
           position: 'relative',
           transition: 'background 320ms cubic-bezier(0.2,0.6,0.2,1), color 320ms',
         }}>
      <Nav onNavigate={onNavigate} current={page} variant={navVariant}
           theme={theme} onToggleTheme={onToggleTheme} hidden={navHidden} />
      <div key={page} style={{ animation: 'akFadeIn 320ms cubic-bezier(0.2,0.6,0.2,1)' }}>
        {page === 'home'    && <LandingA onNavigate={onNavigate} onOpenReel={() => setReelOpen(true)} accent={accent} />}
        {page === 'work'    && <WorkPage onNavigate={onNavigate} />}
        {page === 'about'   && <AboutPage onNavigate={onNavigate} />}
        {page === 'play'    && <PlayPage />}
        {page === 'contact' && <ContactPage />}
        {page === 'case-23-springs' && <CaseStudyA onNavigate={onNavigate} />}
        {page === 'case-299-park'   && <CaseStudy299Park onNavigate={onNavigate} />}
        {page === 'case-cadillac'   && <CaseStudyCadillac onNavigate={onNavigate} />}
        {page === 'case-batting-lab' && <CaseStudyBattingLab onNavigate={onNavigate} />}
        {page === 'case-jackson-wang' && <CaseStudyJacksonWang onNavigate={onNavigate} />}
      </div>
      <Footer onNavigate={onNavigate} />
      {reelOpen && <ReelOverlay onClose={() => setReelOpen(false)} />}
    </div>
  );
}

function App() {
  useEffectApp(() => {
    document.documentElement.style.setProperty('--ak-blue', ACCENT);
  }, []);

  return <Prototype accent={ACCENT} />;
}

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