const Nav = () => {
  const [activeSection, setActiveSection] = React.useState("approach");
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);

  const navItems = [
    { id: "approach", label: "Approach" },
    { id: "providers", label: "Providers" },
    { id: "specialties", label: "Specialties" },
    { id: "contact", label: "Contact" },
  ];

  React.useEffect(() => {
    const handleScroll = () => {
      let currentSection = "approach";

      navItems.forEach((item) => {
        const section = document.getElementById(item.id);

        if (section) {
          const sectionTop = section.offsetTop - 140;

          if (window.scrollY >= sectionTop) {
            currentSection = item.id;
          }
        }
      });

      setActiveSection(currentSection);
    };

    window.addEventListener("scroll", handleScroll);
    handleScroll();

    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const handleNavClick = (id) => {
    setActiveSection(id);
    setIsMenuOpen(false);
  };

  return (
    <nav className="nav">
      <div className="container nav__inner">
        <a
          className="nav__brand"
          href="#top"
          aria-label="Stonecrest Recruiting Home"
          onClick={() => setIsMenuOpen(false)}
        >
          <img
            className="nav__logo"
            src="assets/stonecrest-logo-header-transparent.png"
            alt="Stonecrest Recruiting"
          />
        </a>

        <div className="nav__links">
          {navItems.map((item) => (
            <a
              key={item.id}
              className={`nav__link ${activeSection === item.id ? "is-active" : ""}`}
              href={`#${item.id}`}
              onClick={() => handleNavClick(item.id)}
            >
              {item.label}
            </a>
          ))}
        </div>

        <div className="nav__cta">
          <a className="nav__phone" href="tel:6513321306">
            (651) 332-1306
          </a>

          <a
            className="btn btn--primary"
            href="#contact"
            onClick={() => handleNavClick("contact")}
          >
            BOOK A CALL
          </a>
        </div>

        <button
          className={`nav__hamburger ${isMenuOpen ? "is-open" : ""}`}
          type="button"
          aria-label="Toggle navigation menu"
          aria-expanded={isMenuOpen}
          onClick={() => setIsMenuOpen(!isMenuOpen)}
        >
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>

      <div className={`nav__mobile ${isMenuOpen ? "is-open" : ""}`}>
        {navItems.map((item) => (
          <a
            key={item.id}
            className={`nav__mobile-link ${activeSection === item.id ? "is-active" : ""}`}
            href={`#${item.id}`}
            onClick={() => handleNavClick(item.id)}
          >
            {item.label}
          </a>
        ))}

        <a
          className="btn btn--primary nav__mobile-btn"
          href="#contact"
          onClick={() => handleNavClick("contact")}
        >
          BOOK A CALL
        </a>
      </div>
    </nav>
  );
};

Object.assign(window, { Nav });