// site-nav.jsx — Reusable top navigation bar
// Used across all marketing pages. Includes theme toggle and active-link state.

const NAV_LINKS = [
  { label: 'How It Works', href: 'index.html#how-it-works' },
  { label: 'Pricing',      href: 'index.html#pricing' },
  { label: 'FAQ',          href: 'index.html#faq' },
  { label: 'Download',     href: 'Download.html' },
];

function SiteNav({ active, transparent = false }) {
  const T = window.useTokens();
  const { mobile } = window.useViewport();
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  // Close menu on escape / nav click
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      padding: mobile ? '12px 16px' : '14px 28px',
      background: transparent && !scrolled && !open
        ? 'transparent'
        : (T.floatBg || T.bg2),
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      borderBottom: `1px solid ${scrolled || open ? T.border : 'transparent'}`,
      transition: 'background 0.25s ease, border-color 0.25s ease',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: T.mono,
    }}>
      {/* Brand */}
      <a href="index.html" style={{
        display: 'flex', alignItems: 'center', gap: 10,
        textDecoration: 'none', color: T.text,
      }}>
        <svg width="22" height="22" viewBox="0 0 100 100">
          <path d="M50 4 L88 26 L88 74 L50 96 L12 74 L12 26 Z"
            fill="none" stroke="currentColor" strokeWidth="3" strokeLinejoin="round"/>
          <g transform="rotate(28 50 50)">
            <path d="M50 22 L54 50 L50 56 L46 50 Z" fill={T.amber}/>
            <path d="M50 78 L46 50 L50 44 L54 50 Z" fill="currentColor" opacity="0.7"/>
          </g>
          <circle cx="50" cy="50" r="2.5" fill="currentColor"/>
        </svg>
        <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: 2 }}>
          CAMPSITE SNIPER
        </span>
      </a>

      {mobile ? (
        <button
          aria-label={open ? 'Close menu' : 'Open menu'}
          onClick={() => setOpen(o => !o)}
          style={{
            background: 'transparent', border: `1px solid ${T.border}`,
            padding: '8px 10px', cursor: 'pointer', color: T.text,
            display: 'flex', flexDirection: 'column', gap: 4,
          }}>
          <span style={{ width: 18, height: 1.5, background: T.text, transform: open ? 'translateY(2.7px) rotate(45deg)' : 'none', transition: 'transform 0.2s' }}/>
          <span style={{ width: 18, height: 1.5, background: T.text, opacity: open ? 0 : 1, transition: 'opacity 0.15s' }}/>
          <span style={{ width: 18, height: 1.5, background: T.text, transform: open ? 'translateY(-2.7px) rotate(-45deg)' : 'none', transition: 'transform 0.2s' }}/>
        </button>
      ) : (
        <div style={{
          display: 'flex', gap: 24, alignItems: 'center', marginLeft: 'auto',
        }}>
          <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
            {NAV_LINKS.map(link => {
              const isActive = active === link.label;
              return (
                <a key={link.label} href={link.href} style={{
                  fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase',
                  color: isActive ? T.amber : T.textMute,
                  textDecoration: 'none',
                  position: 'relative',
                  transition: 'color 0.15s',
                }}
                  onMouseEnter={e => { if (!isActive) e.currentTarget.style.color = T.text; }}
                  onMouseLeave={e => { if (!isActive) e.currentTarget.style.color = T.textMute; }}>
                  {link.label}
                  {isActive && (
                    <span style={{
                      position: 'absolute', bottom: -6, left: 0, right: 0, height: 1,
                      background: T.amber,
                    }}/>
                  )}
                </a>
              );
            })}
          </div>
          <span style={{ width: 1, height: 18, background: T.border }}/>
          <window.ThemeToggle compact/>
          <a href="index.html#pricing" style={{
            padding: '8px 14px', background: T.amber, color: T.amberInk,
            fontSize: 10, fontWeight: 600, letterSpacing: 1.5, textTransform: 'uppercase',
            textDecoration: 'none', transition: 'transform 0.15s',
            display: 'inline-block',
          }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-1px)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}>
            Get the App ↗
          </a>
        </div>
      )}

      {mobile && open && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: T.floatBg || T.bg2,
          backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
          borderBottom: `1px solid ${T.border}`,
          padding: '12px 16px 16px',
          display: 'flex', flexDirection: 'column', gap: 0,
        }}>
          {NAV_LINKS.map(link => {
            const isActive = active === link.label;
            return (
              <a key={link.label} href={link.href}
                onClick={() => setOpen(false)}
                style={{
                  fontSize: 13, letterSpacing: 1.4, textTransform: 'uppercase',
                  color: isActive ? T.amber : T.text,
                  textDecoration: 'none',
                  padding: '14px 4px',
                  borderBottom: `1px solid ${T.hairline}`,
                }}>
                {link.label}
              </a>
            );
          })}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 4px' }}>
            <window.ThemeToggle compact/>
            <a href="index.html#pricing"
              onClick={() => setOpen(false)}
              style={{
                marginLeft: 'auto',
                padding: '10px 16px', background: T.amber, color: T.amberInk,
                fontSize: 11, fontWeight: 600, letterSpacing: 1.5, textTransform: 'uppercase',
                textDecoration: 'none',
              }}>
              Get the App ↗
            </a>
          </div>
        </div>
      )}
    </nav>
  );
}

window.SiteNav = SiteNav;
window.NAV_LINKS = NAV_LINKS;