/* Nav.jsx */

function Nav({ active, onNav }) {
  const [open, setOpen] = React.useState(false);
  const go = (id) => { setOpen(false); onNav(id); };
  const item = (id, label) => (
    <a
      href={"#" + id}
      className={active === id ? "active" : ""}
      onClick={(e) => { e.preventDefault(); go(id); }}
    >{label}</a>
  );
  return (
    <React.Fragment>
      <div className="notice-bar">
        Now accepting cases for the 2026 trial calendar — <a href="#contact" onClick={(e) => { e.preventDefault(); go('contact'); }}>request a review</a>
      </div>
      <header className={"site-nav" + (open ? " is-open" : "")}>
        <Container>
          <div className="nav-inner">
            <a className="brand-lockup" href="#home" onClick={(e) => { e.preventDefault(); go('home'); }}>
              <img className="mark" src="../../assets/logo-monogram.svg" alt="" />
              <div>
                <div className="wm">Carolina Oncology Review</div>
                <div className="wm-sub">Charleston, SC</div>
              </div>
            </a>
            <nav className="nav-links">
              {item('home', 'Home')}
              {item('services', 'Services')}
              {item('about', 'About')}
              {item('contact', 'Contact')}
            </nav>
            <Button variant="primary" className="nav-cta" href="#contact" onClick={(e) => { e.preventDefault(); go('contact'); }}>Request a review</Button>
            <button
              type="button"
              className="nav-toggle"
              aria-label={open ? "Close menu" : "Open menu"}
              aria-expanded={open}
              onClick={() => setOpen(o => !o)}
            >
              <span className="nav-toggle-bar"></span>
              <span className="nav-toggle-bar"></span>
              <span className="nav-toggle-bar"></span>
            </button>
          </div>
          <div className="nav-drawer" hidden={!open}>
            {item('home', 'Home')}
            {item('services', 'Services')}
            {item('about', 'About')}
            {item('contact', 'Contact')}
            <Button variant="primary" href="#contact" onClick={(e) => { e.preventDefault(); go('contact'); }}>Request a review</Button>
          </div>
        </Container>
      </header>
    </React.Fragment>
  );
}

Object.assign(window, { Nav });