/* Main app — hash-based routing */
const { useState, useEffect } = React;

function useHashRoute() {
  const parse = () => {
    const h = window.location.hash.replace(/^#\/?/, '').split('/')[0];
    return h || '';
  };
  const [route, setRoute] = useState(parse());
  useEffect(() => {
    const on = () => setRoute(parse());
    window.addEventListener('hashchange', on);
    return () => window.removeEventListener('hashchange', on);
  }, []);
  const go = (r) => {
    window.location.hash = '#/' + r;
    window.scrollTo({ top: 0, behavior: 'instant' });
    setRoute(r);
  };
  return [route, go];
}

function App() {
  const [route, go] = useHashRoute();

  let page;
  switch (route) {
    case 'about':    page = <About />; break;
    case 'projects': page = <Projects />; break;
    case 'blog':     page = <Blog />; break;
    case 'contact':  page = <Contact />; break;
    default:         page = <Home go={go} />;
  }

  return (
    <React.Fragment>
      <Background />
      <div className="shell">
        <Nav route={route} go={go} />
        <main key={route}>{page}</main>
      </div>
      <footer className="footer">
        <div className="footer-grid">
          <div className="footer-mark">
            KAVY<br/>UPADHYAY
          </div>
          <div className="footer-col">
            <h4>Navigate</h4>
            <a href="#/about" onClick={(e) => { e.preventDefault(); go('about'); }}>About</a>
            <a href="#/projects" onClick={(e) => { e.preventDefault(); go('projects'); }}>Projects</a>
            <a href="#/blog" onClick={(e) => { e.preventDefault(); go('blog'); }}>Blog</a>
            <a href="#/contact" onClick={(e) => { e.preventDefault(); go('contact'); }}>Contact</a>
          </div>
          <div className="footer-col">
            <h4>Elsewhere</h4>
            <a href="https://github.com/ItsSypher" target="_blank" rel="noreferrer">GitHub ↗</a>
            <a href="https://www.linkedin.com/in/kavy/" target="_blank" rel="noreferrer">LinkedIn ↗</a>
            <a href="mailto:upadhyaykavy@gmail.com">Email ↗</a>
          </div>
        </div>
        <div className="footer-base">
          <span>© 2026 KAVY UPADHYAY · ALL RIGHTS RESERVED</span>
          <span>BUILT WITH PRECISION ·</span>
        </div>
      </footer>
    </React.Fragment>
  );
}

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