/* global React */

const Nav = () => {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);

  React.useEffect(() => {
    document.body.classList.toggle("nav-open", open);
    return () => document.body.classList.remove("nav-open");
  }, [open]);

  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#top" className="brand" onClick={close}>
          <div className="brand-mark">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M3 21V9l9-6 9 6v12" />
              <path d="M9 21V12h6v9" />
            </svg>
          </div>
          <div>
            <div className="brand-name">Fillmore Construction</div>
            <div className="brand-tag">Murphys, California · Est. 1978</div>
          </div>
        </a>

        <div className="nav-links">
          <a href="#services" onClick={close}>Services</a>
          <a href="#about" onClick={close}>About</a>
          <a href="#gallery" onClick={close}>Projects</a>
<a href="#faq" onClick={close}>FAQ</a>
          <a href="tel:+12097281234" className="nav-phone" onClick={close}>(209) 728‑1234</a>
          <a href="#quote" className="nav-cta" onClick={close} style={{ color: "rgb(244, 235, 221)", fontSize: "12px", width: "92.4688px" }}>Get an estimate</a>
        </div>

        <button className="nav-toggle" onClick={() => setOpen((o) => !o)} aria-label="Toggle menu">
          <span></span><span></span><span></span>
        </button>
      </div>
    </nav>);

};

window.Nav = Nav;