/* App root */

function App() {
  const HERO_IDX = 0;
  const OVERLAY = 0.7;
  const ACCENT = '#36A14D';
  const HERO_TINT_RGB = '0,20,40';
  const SECTION_ORDER = [
    'about', 'thesis', 'gdl-vs-llm', 'platform', 'pipeline',
    'case-studies', 'team', 'research', 'talks', 'contact',
  ];

  React.useEffect(() => {
    document.documentElement.style.setProperty('--site-accent', ACCENT);
    document.documentElement.style.setProperty('--hero-tint', HERO_TINT_RGB);
    // Clear any stale state left over from the old Tweaks panel
    try {
      localStorage.removeItem('lb-tweaks');
      localStorage.removeItem('lb-tweaks-v');
    } catch {}
  }, []);

  const sectionMap = {
    about: <About accentVar={ACCENT}/>,
    thesis: <Thesis accentVar={ACCENT}/>,
    'gdl-vs-llm': <GdlVsLlm accentVar={ACCENT}/>,
    platform: <Platform accentVar={ACCENT}/>,
    pipeline: <Pipeline accentVar={ACCENT}/>,
    'case-studies': <CaseStudies accentVar={ACCENT}/>,
    team: <Team accentVar={ACCENT}/>,
    research: <Research accentVar={ACCENT}/>,
    talks: <Talks accentVar={ACCENT}/>,
    contact: <Contact accentVar={ACCENT}/>,
  };

  return (
    <>
      <Header accentVar={ACCENT}/>
      <Hero variantIdx={HERO_IDX} overlay={OVERLAY} accentVar={ACCENT} accentMode="green"/>
      {SECTION_ORDER.map(id => <React.Fragment key={id}>{sectionMap[id]}</React.Fragment>)}
      <Footer/>
    </>
  );
}
window.App = App;