/**
 * Nav — global header
 * - Logo + wordmark (STX/Aesthetics Records) both link to homepage
 * - Desktop links: The Winning Strategy, Schedule, Results (real pages), About, Get Started
 * - Pricing removed from header (kept as homepage section)
 */

const Nav = ({ scrollY, getStartedHref = 'index.html#pricing', active = 'home' }) => {
  const w = useWindowWidth();
  const mobile = w < 768;
  // "The Winning Strategy" + "Schedule" + "Legal" make the nav dense — collapse earlier on narrow desktops
  const compact = w < 1200 && !mobile;
  const scrolled = (scrollY || 0) > 40;
  const [menuOpen, setMenuOpen] = React.useState(false);

  const NAV_ITEMS = [
    { label: 'The Winning Strategy', href: 'Services.html', id: 'services' },
    { label: 'Schedule',             href: 'Schedule.html', id: 'schedule' },
    { label: 'Results',              href: 'Results.html',  id: 'results'  },
    { label: 'About',                href: 'About.html',    id: 'about'    },
    { label: 'Legal',                href: 'Legal.html',    id: 'legal'    },
  ];

  const linkColor = (id) => active === id ? '#F5F2FF' : '#7C7C90';

  return (
    <>
      <nav style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
        padding: mobile ? '0 20px' : '0 48px',
        height: '64px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        backdropFilter: scrolled ? 'blur(24px) saturate(180%)' : 'blur(8px)',
        WebkitBackdropFilter: scrolled ? 'blur(24px) saturate(180%)' : 'blur(8px)',
        background: scrolled ? 'rgba(5,5,8,0.88)' : 'rgba(5,5,8,0.35)',
        borderBottom: scrolled ? '1px solid rgba(255,255,255,0.05)' : '1px solid transparent',
        transition: 'background 500ms cubic-bezier(0.16,1,0.3,1), border-color 500ms',
      }}>
        {/* Logo + wordmark — both link home */}
        <a href="index.html" style={{
          display: 'flex', alignItems: 'center', gap: '10px',
          textDecoration: 'none', cursor: 'pointer',
        }}>
          <img src="assets/logo-sphere.png" alt="Aesthetics Records"
            style={{ width: '30px', height: '30px', objectFit: 'contain', transition: 'transform 300ms' }}
            onMouseEnter={e => e.target.style.transform = 'scale(1.06)'}
            onMouseLeave={e => e.target.style.transform = 'scale(1)'}
          />
          <span style={{
            color: '#F5F2FF', fontSize: '14px', fontWeight: 700,
            letterSpacing: '-0.025em',
          }}>
            Aesthetics Records
          </span>
        </a>

        {mobile ? (
          <button onClick={() => setMenuOpen(o => !o)} style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            color: '#A1A1B3', padding: '8px',
          }}>
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              {menuOpen
                ? <path d="M5 5l12 12M17 5L5 17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                : <path d="M3 6h16M3 11h16M3 16h16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
              }
            </svg>
          </button>
        ) : (
          <div style={{ display: 'flex', alignItems: 'center', gap: compact ? '20px' : '32px' }}>
            {NAV_ITEMS.map(item => (
              <a key={item.id} href={item.href} style={{
                color: linkColor(item.id), fontSize: '13px', fontWeight: 500,
                textDecoration: 'none', letterSpacing: '-0.01em',
                transition: 'color 200ms',
                position: 'relative',
                whiteSpace: 'nowrap',
              }}
              onMouseEnter={e => e.target.style.color = '#F5F2FF'}
              onMouseLeave={e => e.target.style.color = linkColor(item.id)}
              >
                {item.label}
                {active === item.id && (
                  <span style={{
                    position: 'absolute', left: 0, right: 0, bottom: '-8px', height: '1px',
                    background: 'linear-gradient(90deg, transparent, #C94CFF, transparent)',
                  }} />
                )}
              </a>
            ))}
            <a href={getStartedHref} style={{
              background: '#5E2BFF', color: '#F5F2FF',
              padding: '9px 22px', borderRadius: '10px',
              fontSize: '13px', fontWeight: 600, textDecoration: 'none',
              transition: 'background 200ms, box-shadow 200ms',
              letterSpacing: '-0.015em',
              boxShadow: '0 0 20px rgba(94,43,255,0)',
              whiteSpace: 'nowrap',
            }}
            onMouseEnter={e => { e.target.style.background = '#8B5CFF'; e.target.style.boxShadow = '0 0 24px rgba(94,43,255,0.4)'; }}
            onMouseLeave={e => { e.target.style.background = '#5E2BFF'; e.target.style.boxShadow = '0 0 20px rgba(94,43,255,0)'; }}
            >Get started</a>
          </div>
        )}
      </nav>

      {/* Mobile menu */}
      {mobile && menuOpen && (
        <div style={{
          position: 'fixed', top: '64px', left: 0, right: 0, zIndex: 99,
          background: 'rgba(5,5,8,0.97)', backdropFilter: 'blur(20px)',
          borderBottom: '1px solid rgba(255,255,255,0.06)',
          padding: '24px 20px',
          display: 'flex', flexDirection: 'column', gap: '4px',
        }}>
          {NAV_ITEMS.map(item => (
            <a key={item.id} href={item.href}
              onClick={() => setMenuOpen(false)}
              style={{
                color: active === item.id ? '#F5F2FF' : '#A1A1B3',
                fontSize: '16px', fontWeight: 500,
                textDecoration: 'none', letterSpacing: '-0.015em',
                padding: '14px 0',
                borderBottom: '1px solid rgba(255,255,255,0.04)',
              }}>{item.label}</a>
          ))}
          <a href={getStartedHref} onClick={() => setMenuOpen(false)} style={{
            background: '#5E2BFF', color: '#F5F2FF',
            padding: '14px', borderRadius: '10px', marginTop: '12px',
            fontSize: '14px', fontWeight: 600, textDecoration: 'none',
            textAlign: 'center', letterSpacing: '-0.015em',
          }}>Get started</a>
        </div>
      )}
    </>
  );
};

Object.assign(window, { Nav });