const Nav = () => (
  <nav className="nav">
    <div className="nav-inner">
      <a href="#" className="logo">
        <span className="logo-mark"><Sparkle size={20} /></span>
        Rankly
      </a>
      <div className="nav-links">
        <a href="#features">Resources</a>
        <a href="#features">Support</a>
        <a href="#pricing">Pricing</a>
        <a href="#contact">Contact</a>
      </div>
      <div className="nav-right">
        <a href="#" className="btn-signin">Sign In</a>
        <a href="#" className="btn-pill">Sign Up <ArrowRight /></a>
        <button className="menu-btn" aria-label="Menu">
          <svg width="16" height="16" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
        </button>
      </div>
    </div>
  </nav>
);

function App() {
  return (
    <>
      <div className="grain" />
      <Nav />
      <Hero />
      <Features />
      <Stats />
      <Pricing />
      <Testimonials />
      <FAQ />
      <Footer />
    </>
  );
}

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