// app.jsx — single-scroll portfolio: room hero + stacked sections, fixed nav.

const SECTIONS = [
{ id: 'about', label: 'About', Page: () => window.AboutPage() },
{ id: 'experience', label: 'Experience', Page: () => window.ExperiencePage() },
{ id: 'projects', label: 'Projects', Page: () => window.ProjectsPage() },
{ id: 'awards', label: 'Awards', Page: () => window.AwardsPage() },
{ id: 'skills', label: 'Skills', Page: () => window.SkillsPage() },
{ id: 'contact', label: 'Contact', Page: () => window.ContactPage() }];


// nav adds a 'My Workspace' entry that returns to the room hero
const NAV = [{ id: 'home', label: 'My Workspace' }, ...SECTIONS.map((s) => ({ id: s.id, label: s.label }))];

const DISPLAY_FONTS = {
  'Roca Two': "'Roca Two', Georgia, 'Times New Roman', serif",
  'Georgia': "Georgia, 'Times New Roman', serif",
  'DM Serif': "'DM Serif Display', Georgia, serif",
  'Spectral': "'Spectral', Georgia, serif",
  'Helvetica': "'Helvetica Neue', Helvetica, Arial, sans-serif"
};
const ACCENTS = {
  'BC Gold': null,
  'Maroon': 'oklch(0.58 0.14 24)',
  'Figma': '#7c5cff',
  'Teal': 'oklch(0.72 0.10 190)'
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "labelStyle": "clean",
  "displayFont": "Roca Two",
  "accent": "BC Gold"
} /*EDITMODE-END*/;

const NAV_H = 60;
function scrollToId(id) {
  if (id === 'home') {window.scrollTo({ top: 0, behavior: 'smooth' });return;}
  const el = document.getElementById('sec-' + id) || document.getElementById(id);
  if (el) {
    const y = el.getBoundingClientRect().top + window.scrollY - NAV_H;
    window.scrollTo({ top: y, behavior: 'smooth' });
  }
}

function SiteNav({ active, scrolled }) {
  return (
    <nav className={'site-nav' + (scrolled ? ' scrolled' : '')}>
      <div className="sn-links">
        {NAV.map((s) =>
        <button key={s.id} className={'sn-link' + (active === s.id ? ' active' : '')}
        onClick={() => scrollToId(s.id)}>{s.label}</button>
        )}
      </div>
    </nav>);

}

function Hero({ t, toggleTheme }) {
  return (
    <header className="hero" data-screen-label="Hero">
      <div className="identity">
        <div className="welcome-eyebrow">Welcome
          <svg className="welcome-swash" viewBox="0 0 120 12" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" aria-hidden="true">
            <path d="M3 8C25 3 70 2 117 6" />
          </svg>
        </div>
        <h1>Sofi Le</h1>
        <p className="hero-tagline">I build intelligent systems and solve real-world problems
          at the intersection of AI, software, hardware, and the natural world.</p>
        <ul className="tagline-list">
          <li>
            <span className="disc-ico" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <path d="M8.5 4.5A2.5 2.5 0 0 0 6 7a2.5 2.5 0 0 0-1.8 4.2A2.5 2.5 0 0 0 5.5 16a2.5 2.5 0 0 0 3 2.4 2 2 0 0 0 3-1.7V6.2a2 2 0 0 0-3-1.7Z" />
                <path d="M15.5 4.5A2.5 2.5 0 0 1 18 7a2.5 2.5 0 0 1 1.8 4.2A2.5 2.5 0 0 1 18.5 16a2.5 2.5 0 0 1-3 2.4 2 2 0 0 1-3-1.7V6.2a2 2 0 0 1 3-1.7Z" />
              </svg>
            </span>AI Systems
          </li>
          <li>
            <span className="disc-ico" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9 7l-5 5 5 5" /><path d="M15 7l5 5-5 5" />
              </svg>
            </span>Software Engineering
          </li>
          <li>
            <span className="disc-ico" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="currentColor" stroke="none">
                <path d="M13 2 4.6 13.2a.6.6 0 0 0 .5 1H10l-1 7.2a.5.5 0 0 0 .9.4l8.5-11.4a.6.6 0 0 0-.5-1H13l1.4-6.9a.5.5 0 0 0-.9-.4Z" />
              </svg>
            </span>Electrical Engineering
          </li>
          <li>
            <span className="disc-ico" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 21v-9" />
                <path d="M12 13C12 9 9 6.5 4.5 6.5 4.5 10.5 7.5 13 12 13Z" />
                <path d="M12 12.5c0-3.2 2.4-5.2 6-5.2 0 3.2-2.4 5.2-6 5.2Z" />
              </svg>
            </span>Agricultural Engineering
          </li>
        </ul>
        <button className="explore-btn" onClick={() => scrollToId('projects')}>Scroll to Explore <span className="eb-arrow">↓</span></button>
      </div>
      <Room
        labelStyle={t.labelStyle}
        lampOn={t.dark}
        onNavigate={scrollToId}
        onToggleTheme={toggleTheme} />
      
      <div className="explore-float" aria-hidden="true">
        Explore my workspace!
        <span className="ef-arrow">↓</span>
      </div>
    </header>);

}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = React.useState('about');
  const [scrolled, setScrolled] = React.useState(false);

  // theme + tweak-driven CSS vars
  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-theme', t.dark ? 'dark' : 'light');
    root.style.setProperty('--display', DISPLAY_FONTS[t.displayFont] || DISPLAY_FONTS['Roca Two']);
    const a = ACCENTS[t.accent];
    if (a) root.style.setProperty('--accent', a);else
    root.style.removeProperty('--accent');
  }, [t.dark, t.displayFont, t.accent]);

  // scroll spy (active nav) + reveal-on-scroll, one observer set
  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 24);
      if (window.scrollY < window.innerHeight * 0.55) setActive('home');
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();

    const spy = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && window.scrollY >= window.innerHeight * 0.55) setActive(e.target.id.replace('sec-', ''));
      });
    }, { rootMargin: '-45% 0px -50% 0px' });

    const reveal = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {e.target.classList.add('in');reveal.unobserve(e.target);}
      });
    }, { rootMargin: '0px 0px -12% 0px' });

    document.querySelectorAll('.scroll-section').forEach((el) => {spy.observe(el);reveal.observe(el);});
    document.querySelectorAll('.fade-item').forEach((el) => reveal.observe(el));
    return () => {window.removeEventListener('scroll', onScroll);spy.disconnect();reveal.disconnect();};
  }, []);

  const toggleTheme = () => setTweak('dark', !t.dark);

  return (
    <React.Fragment>
      <SiteNav active={active} scrolled={scrolled} />
      <Hero t={t} toggleTheme={toggleTheme} />
      {SECTIONS.map((s) =>
      <section key={s.id} id={'sec-' + s.id} className="scroll-section reveal" data-screen-label={s.label}>
          {s.Page()}
        </section>
      )}

      <TweaksPanel>
        <TweakSection label="Room labels" />
        <TweakRadio label="Label style" value={t.labelStyle}
        options={['clean', 'figma']} onChange={(v) => setTweak('labelStyle', v)} />
        <TweakSection label="Theme" />
        <TweakToggle label="Dark (lamp off)" value={t.dark} onChange={(v) => setTweak('dark', v)} />
        <TweakColor label="Accent / glow" value={t.accent === 'BC Gold' ? '#b58a35' : ACCENTS[t.accent] || '#b58a35'}
        options={['#b58a35', 'oklch(0.58 0.14 24)', '#7c5cff', 'oklch(0.72 0.10 190)']}
        onChange={(v) => {
          const key = { '#b58a35': 'BC Gold' }[v] || Object.keys(ACCENTS).find((k) => ACCENTS[k] === v) || 'BC Gold';
          setTweak('accent', key);
        }} />
        <TweakSection label="Typography" />
        <TweakSelect label="Display font" value={t.displayFont}
        options={Object.keys(DISPLAY_FONTS)} onChange={(v) => setTweak('displayFont', v)} />
      </TweaksPanel>
    </React.Fragment>);

}

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