function useRoute() {
  const read = () => (window.location.hash.replace(/^#/, '') || '/');
  const [path, setPath] = React.useState(read);
  React.useEffect(() => {
    const on = () => { setPath(read()); window.scrollTo({ top: 0, behavior: reduced() ? 'auto' : 'smooth' }); };
    window.addEventListener('hashchange', on);
    return () => window.removeEventListener('hashchange', on);
  }, []);
  return [path, p => { window.location.hash = p; }];
}

function NavBar({ path, go, openCmd }) {
  const [open, setOpen] = React.useState(false);
  const [w, setW] = React.useState(() => window.innerWidth);
  React.useEffect(() => {
    const on = () => setW(window.innerWidth);
    window.addEventListener('resize', on);
    return () => window.removeEventListener('resize', on);
  }, []);
  const narrow = w < 1000;
  const roomy = w >= 1180;
  const link = r => (
    <a key={r.path} href={'#' + r.path} aria-current={path === r.path ? 'page' : undefined}
      onClick={() => setOpen(false)}
      className="pf-sweep"
      style={{ font: 'var(--type-body-sm-medium)', textDecoration: 'none', padding: '4px 0', color: path === r.path ? 'var(--ink)' : 'var(--slate)' }}>{r.label}</a>
  );
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(255,255,255,.92)', backdropFilter: 'blur(8px)', borderBottom: '1px solid var(--hairline-soft)' }}>
      <div className="pf-wrap" style={{ height: 'var(--nav-height)', display: 'flex', alignItems: 'center', gap: 'var(--space-xl)' }}>
        <a href="#/" className="pf-nowrap" style={{ font: 'var(--type-body-md-medium)', letterSpacing: '.5px', color: 'var(--ink)', textDecoration: 'none' }}>{PROFILE.wordmark}</a>
        {!narrow && <nav aria-label="Main" style={{ display: 'flex', gap: 'var(--space-lg)', flex: 1 }}>{ROUTES.map(link)}</nav>}
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 'var(--space-sm)', alignItems: 'center' }}>
          {roomy && (
            <button onClick={openCmd} aria-label="Open command palette" className="pf-lift" style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--space-xs)', background: 'var(--surface)', border: '1px solid var(--hairline)', borderRadius: 'var(--radius-md)', padding: '9px 12px', cursor: 'pointer', font: 'var(--type-body-sm)', color: 'var(--steel)' }}>
              <Icon name="Search" size={15} />Jump to…<Kbd>⌘K</Kbd>
            </button>
          )}
          {!narrow && <Button variant="secondary" as="a" href={PROFILE.resumeUrl} download><Icon name="Download" size={15} />Résumé</Button>}
          <Button variant="primary" onClick={() => go('/contact')}>Contact</Button>
          {narrow && (
            <button onClick={openCmd} aria-label="Open command palette" style={{ background: 'none', border: '1px solid var(--hairline)', borderRadius: 'var(--radius-md)', width: 40, height: 40, display: 'grid', placeItems: 'center', cursor: 'pointer', color: 'var(--ink)' }}><Icon name="Search" size={17} /></button>
          )}
          {narrow && (
            <button onClick={() => setOpen(!open)} aria-expanded={open} aria-label="Toggle menu" style={{ background: 'none', border: '1px solid var(--hairline)', borderRadius: 'var(--radius-md)', width: 40, height: 40, display: 'grid', placeItems: 'center', cursor: 'pointer', color: 'var(--ink)' }}>
              <Icon name={open ? 'X' : 'Menu'} size={18} />
            </button>
          )}
        </div>
      </div>
      {narrow && open && (
        <nav aria-label="Main" className="pf-wrap" style={{ display: 'grid', gap: 'var(--space-md)', padding: '0 var(--container-gutter) var(--space-lg)' }}>{ROUTES.map(link)}</nav>
      )}
    </div>
  );
}

function BackToTop() {
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const s = () => setOn(window.scrollY > 600);
    window.addEventListener('scroll', s, { passive: true });
    return () => window.removeEventListener('scroll', s);
  }, []);
  return <button className={'pf-top' + (on ? ' is-on' : '')} onClick={() => window.scrollTo({ top: 0, behavior: reduced() ? 'auto' : 'smooth' })} aria-label="Back to top"><Icon name="ArrowUp" size={18} /></button>;
}

const PAGES = { '/': HomePage, '/about': AboutPage, '/skills': SkillsPage, '/projects': ProjectsPage, '/experience': ExperiencePage, '/education': EducationPage, '/contact': ContactPage };

function App() {
  const [path, go] = useRoute();
  const [cmd, setCmd] = React.useState(false);
  const Page = PAGES[path] || HomePage;
  return (
    <React.Fragment>
      <NavBar path={path} go={go} openCmd={() => setCmd(true)} />
      <ScrollProgress />
      <CommandPalette open={cmd} setOpen={setCmd} go={go} />
      <main id="main" key={path}>
        <Page go={go} />
        {path !== '/contact' && (
          <div className="pf-wrap" style={{ paddingBottom: 'var(--space-section-lg)' }}>
            <Reveal>
              <CtaBanner headline="Looking for an SDE / SWE role." actions={<React.Fragment><Button variant="dark" onClick={() => go('/contact')}>Get in touch</Button><Button variant="onCream" as="a" href={PROFILE.resumeUrl} download>Download résumé</Button></React.Fragment>}>
                Graduating in 2027 — open to SDE, SWE, and related placement roles from Summer 2027.
              </CtaBanner>
            </Reveal>
          </div>
        )}
      </main>
      <SunsetStripe height={12} style={{ margin: 0 }} />
      <SiteFooter brand={PROFILE.wordmark} columns={[
        { title: 'Pages', links: ['Home', 'About', 'Skills'] },
        { title: 'More', links: ['Projects', 'Experience', 'Education'] },
        { title: 'Elsewhere', links: PROFILE.socials.map(s => s.label) }
      ]} note={'© ' + new Date().getFullYear() + ' Harsh Kumar. Built on the Sunset Editorial design system.'} />
      <BackToTop />
    </React.Fragment>
  );
}

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