/* Navigation
 *
 * Anchor links use the form `/#services` (root + hash) so they also work from
 * pages outside /index.html (e.g., /products and /products/<slug>). On the
 * home page the browser just scrolls to the section; on other pages it
 * navigates home first, then scrolls.
 */
const { useState: useStateNav } = React;

function Nav() {
  const [menuOpen, setMenuOpen] = useStateNav(false);
  const close = () => setMenuOpen(false);

  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="/" className="logo" style={{textDecoration:'none', color:'inherit'}}>
          <div className="logo-mark">o.</div>
          <span>onlyWA</span>
        </a>
        <div className="nav-links">
          <a href="/products">Products</a>
          <a href="/dealersaarthi">DealerSaarthi</a>
          <a href="/#process">How it works</a>
          <a href="/#demo">Live demo</a>
          <a href="/#pricing">Pricing</a>
          <a href="/#faq">FAQ</a>
        </div>
        <div className="nav-cta">
          <a href="/#contact" className="btn ghost sm">Contact</a>
          <a href="/#contact" className="btn primary sm">Book a call <Ic.arrow size={14} /></a>
          <button
            className={`hamburger${menuOpen ? ' open' : ''}`}
            aria-label="Toggle menu"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}
          >
            <span /><span /><span />
          </button>
        </div>
      </div>
      <div className={`mobile-menu${menuOpen ? ' open' : ''}`}>
        <a href="/products" onClick={close}>Products</a>
        <a href="/dealersaarthi" onClick={close}>DealerSaarthi</a>
        <a href="/#process" onClick={close}>How it works</a>
        <a href="/#demo" onClick={close}>Live demo</a>
        <a href="/#pricing" onClick={close}>Pricing</a>
        <a href="/#faq" onClick={close}>FAQ</a>
        <div className="mobile-cta">
          <a href="/#contact" className="btn primary" style={{ width: '100%', justifyContent: 'center' }} onClick={close}>
            Book a free call <Ic.arrow size={14} />
          </a>
        </div>
      </div>
    </nav>
  );
}
window.Nav = Nav;