// Mount + theme toggle for portfolio. (Tweaks removed for export.)

function PortfolioApp() {
  // ── view theme: 'recruiter' (plain English) | 'developer' (terminal) ──
  const [theme, setThemeState] = React.useState(() => {
    try { return localStorage.getItem('pf-view') || 'developer'; } catch (e) { return 'developer'; }
  });
  const [showHint, setShowHint] = React.useState(false);

  const setTheme = React.useCallback((next) => {
    setThemeState(next);
    try { localStorage.setItem('pf-view', next); } catch (e) {}
    window.scrollTo({ top: 0, behavior: 'auto' });
  }, []);

  // body attribute drives theme-scoped CSS
  React.useEffect(() => {
    document.body.setAttribute('data-theme', theme);
  }, [theme]);

  // one-time gentle hint that the other view exists
  React.useEffect(() => {
    let seen = false;
    try { seen = localStorage.getItem('pf-hint-seen') === '1'; } catch (e) {}
    if (!seen) {
      setShowHint(true);
      try { localStorage.setItem('pf-hint-seen', '1'); } catch (e) {}
      const id = setTimeout(() => setShowHint(false), 6000);
      return () => clearTimeout(id);
    }
  }, []);

  if (theme === 'recruiter') {
    return (
      <React.Fragment>
        <ThemeSwitch theme={theme} setTheme={setTheme} showHint={showHint} />
        <RecruiterView />
      </React.Fragment>
    );
  }

  return (
    <React.Fragment>
      <ThemeSwitch theme={theme} setTheme={setTheme} showHint={showHint} />
      <Rail />
      <TopNav />
      <main id="app">
        <Hero />
        <Featured />
        <OtherProjects />
        <Stack view="cats" />
        <Experience />
        <About />
        <Contact />
        <Footer />
      </main>
    </React.Fragment>
  );
}

// Set the saved theme before React mounts so there's no flash
(function () {
  let v = 'developer';
  try { v = localStorage.getItem('pf-view') || 'developer'; } catch (e) {}
  document.body.setAttribute('data-theme', v);
})();

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