// nav.jsx — sticky nav with active section
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [active, setActive] = React.useState('hero');

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    const ids = ['hero','problem','how','calculator','features','pricing','faq'];
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) setActive(e.target.id);
        });
      },
      { rootMargin: '-45% 0px -50% 0px', threshold: 0 }
    );
    ids.forEach((id) => { const el = document.getElementById(id); if (el) obs.observe(el); });
    return () => obs.disconnect();
  }, []);

  const items = [
    { id: 'problem',   label: 'Problem' },
    { id: 'how',       label: 'Jak to działa' },
    { id: 'calculator',label: 'Ile tracisz' },
    { id: 'features',  label: 'Co dostajesz' },
    { id: 'pricing',   label: 'Cennik' },
    { id: 'faq',       label: 'FAQ' },
  ];

  return (
    <React.Fragment>
      <nav className={`nav ${scrolled ? 'is-scrolled' : ''}`}>
        <div className="container nav-inner">
          <a href="#hero" onClick={() => setMobileOpen(false)} aria-label="Gorilla Commerce & Solutions — strona główna">
            <Logo />
          </a>
          <div className="nav-links">
            {items.map((it) => (
              <a key={it.id} href={`#${it.id}`}
                 className={`nav-link ${active === it.id ? 'is-active' : ''}`}>
                {it.label}
              </a>
            ))}
          </div>
          <div className="nav-cta">
            <a className="muted nav-tel" href="tel:+48789022921">+48 789 022 921</a>
            <a className="btn btn-primary btn-sm" href="#contact">
              Umów rozmowę <ArrowRight size={12}/>
            </a>
          </div>
          <button
            className="nav-burger"
            aria-label="Menu"
            aria-expanded={mobileOpen}
            onClick={() => setMobileOpen(v => !v)}
          >
            <span /><span /><span />
          </button>
        </div>
      </nav>

      {/* mobile sheet */}
      <div className={`nav-sheet ${mobileOpen ? 'is-open' : ''}`} onClick={() => setMobileOpen(false)}>
        <div className="nav-sheet-inner" onClick={(e) => e.stopPropagation()}>
          {items.map((it) => (
            <a key={it.id} href={`#${it.id}`}
               onClick={() => setMobileOpen(false)}
               className={`nav-sheet-link ${active === it.id ? 'is-active' : ''}`}>
              {it.label} <ArrowRight size={14}/>
            </a>
          ))}
          <a className="btn btn-primary btn-lg" href="#contact" onClick={() => setMobileOpen(false)}>
            Umów rozmowę <ArrowRight size={14}/>
          </a>
        </div>
      </div>

      <style>{`
        .nav{
          position: sticky; top: 0; z-index: 50;
          padding: 14px 0;
          transition: background .2s, border-color .2s, padding .2s;
          border-bottom: 1px solid transparent;
        }
        .nav.is-scrolled{
          background: color-mix(in oklab, var(--bg) 70%, transparent);
          -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
          border-bottom-color: var(--line);
        }
        .nav-inner{
          display:flex; align-items:center; justify-content:space-between; gap:24px;
        }
        .nav-links{
          display:flex; align-items:center; gap:4px;
          padding: 4px;
          border-radius: 999px;
          border: 1px solid var(--line);
          background: rgba(255,255,255,.02);
        }
        .nav-link{
          padding: 8px 14px;
          font-size: 13.5px;
          color: var(--ink-2);
          border-radius: 999px;
          transition: color .2s, background .2s;
        }
        .nav-link:hover{ color: var(--ink); }
        .nav-link.is-active{
          color: var(--ink);
          background: rgba(255,255,255,.06);
        }
        .nav-cta{ display:flex; align-items:center; gap:14px; }
        .nav-tel{ font-size: 13.5px; }
        .nav-burger{
          display:none;
          background: transparent; border:1px solid var(--line);
          width:42px; height:42px; border-radius: 10px;
          flex-direction:column; align-items:center; justify-content:center; gap:4px;
        }
        .nav-burger span{
          width:18px; height:1.5px; background: var(--ink); display:block; border-radius: 1px;
          transition: transform .2s;
        }
        .nav-sheet{
          position: fixed; inset: 0;
          background: rgba(0,0,0,.55);
          -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
          z-index: 60;
          opacity:0; pointer-events:none;
          transition: opacity .25s;
        }
        .nav-sheet.is-open{ opacity:1; pointer-events:auto; }
        .nav-sheet-inner{
          position:absolute; top:0; right:0;
          width: min(360px, 92vw); height:100vh;
          background: var(--bg);
          border-left: 1px solid var(--line);
          padding: 88px 22px 24px;
          display:flex; flex-direction:column; gap:6px;
          transform: translateX(20px);
          opacity: 0;
          transition: transform .3s var(--ease-out), opacity .25s;
        }
        .nav-sheet.is-open .nav-sheet-inner{ transform: translateX(0); opacity: 1; }
        .nav-sheet-link{
          display:flex; align-items:center; justify-content:space-between;
          padding: 16px 14px; border-radius: 12px;
          font-size: 18px; color: var(--ink-2);
          border: 1px solid transparent;
        }
        .nav-sheet-link:hover, .nav-sheet-link.is-active{
          color: var(--ink); background: var(--surface); border-color: var(--line);
        }
        .nav-sheet .btn{ margin-top: 16px; }

        @media (max-width: 1024px){
          .nav-links{ display:none; }
        }
        @media (max-width: 720px){
          .nav-cta .btn{ display:none; }
          .nav-tel{ display:none; }
          .nav-burger{ display:flex; }
        }
      `}</style>
    </React.Fragment>
  );
}

window.Nav = Nav;