const { useState, useEffect, useRef, useMemo, useCallback } = React;
// Sticky nav with scroll-spy
function StickyNav() {
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState("hero");
  const [mobileOpen, setMobileOpen] = useState(false);

  const links = [
    { id: "story", label: "ბრენდი" },
    { id: "families", label: "მოდელები" },
    { id: "finder", label: "Find Your RFN" },
    { id: "tech", label: "ტექნოლოგია" },
    { id: "safety", label: "უსაფრთხოება" },
    { id: "faq", label: "FAQ" },
    { id: "contact", label: "კონტაქტი" }
  ];

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 60);
      // simple scroll-spy
      let cur = "hero";
      for (const l of links) {
        const el = document.getElementById(l.id);
        if (el && el.getBoundingClientRect().top < 140) cur = l.id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""} ${mobileOpen ? "mobile-open" : ""}`}>
      <div className="nav-inner">
        <a href="#hero" className="nav-logo" aria-label="RFN Georgia">
          <img src="assets/rfn-logo.svg" alt="RFN" />
          <span className="nav-logo-tag">GEORGIA</span>
        </a>

        <div className="nav-links">
          {links.map((l) => (
            <a
              key={l.id}
              href={`#${l.id}`}
              className={active === l.id ? "active" : ""}
              onClick={() => setMobileOpen(false)}
            >
              {l.label}
            </a>
          ))}
        </div>

        <div className="nav-right">
          <a href="https://zava.ge" target="_blank" rel="noreferrer" className="nav-cta">
            <span>Zava.ge</span>
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
              <path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
            </svg>
          </a>
          <button
            className="nav-burger"
            aria-label="Menu"
            onClick={() => setMobileOpen(!mobileOpen)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
    </nav>
  );
}

window.StickyNav = StickyNav;