// Nav.jsx — sticky top nav with a working Practice Areas dropdown.
function Nav({ onCta }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [paOpen, setPaOpen] = React.useState(false);

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

  React.useEffect(() => {
    const close = (e) => { if (!e.target.closest('.pa-wrap')) setPaOpen(false); };
    document.addEventListener('click', close);
    return () => document.removeEventListener('click', close);
  }, []);

  const linkStyle = {
    fontFamily: 'var(--font-sans)', fontSize: '0.9rem', fontWeight: 600,
    color: 'rgba(255,255,255,0.92)', textDecoration: 'none',
    letterSpacing: '0.02em', transition: 'color var(--dur-fast)',
    cursor: 'pointer', background: 'none', border: 'none', padding: 0,
  };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      transition: 'background var(--dur), box-shadow var(--dur), backdrop-filter var(--dur)',
      background: scrolled ? 'rgba(15,29,49,0.96)' : 'rgba(15,29,49,0.45)',
      backdropFilter: scrolled ? 'saturate(140%) blur(8px)' : 'saturate(120%) blur(4px)',
      boxShadow: scrolled ? '0 1px 0 rgba(255,255,255,0.08)' : 'none',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', padding: '18px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="/" style={{ lineHeight: 1, textDecoration: 'none' }}>
          <div style={{ fontFamily: 'var(--font-nameplate)', fontSize: '1.4rem', letterSpacing: '0.12em', color: '#fff', whiteSpace: 'nowrap' }}>
            ALEX NARAYAN
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
            <span style={{ height: 1, width: 22, background: 'var(--brass-500)' }}></span>
            <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.55rem', letterSpacing: '0.32em', color: 'var(--brass-400)' }}>
              ATTORNEY AT LAW
            </span>
          </div>
        </a>

        <nav className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: 34 }}>
          <div className="pa-wrap" style={{ position: 'relative' }}>
            <button
              onClick={(e) => { e.stopPropagation(); setPaOpen((v) => !v); }}
              style={{ ...linkStyle, display: 'flex', alignItems: 'center', gap: 6 }}
              onMouseEnter={(e) => (e.target.style.color = 'var(--brass-300)')}
              onMouseLeave={(e) => (e.target.style.color = 'rgba(255,255,255,0.92)')}>
              Practice Areas
              <span style={{ fontSize: '0.7rem', marginTop: 2, transform: paOpen ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-fast)' }}>▾</span>
            </button>
            {paOpen && (
              <div style={{
                position: 'absolute', top: 'calc(100% + 14px)', left: -16,
                background: '#fff', borderRadius: 'var(--radius-sm)',
                boxShadow: '0 18px 50px rgba(10,20,34,0.32)',
                border: '1px solid var(--line)', minWidth: 280,
                borderTop: '2px solid var(--brass-500)', padding: '14px 0',
              }}>
                {PRACTICES.map((p) => (
                  <a key={p.slug} href={`/${p.slug}.html`} style={{
                    display: 'block', padding: '10px 22px',
                    fontFamily: 'var(--font-sans)', fontSize: '0.92rem', fontWeight: 500,
                    color: 'var(--ink)', textDecoration: 'none',
                    transition: 'background var(--dur-fast), color var(--dur-fast)',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--bg-subtle)'; e.currentTarget.style.color = 'var(--crimson-600)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink)'; }}>
                    {p.name}
                  </a>
                ))}
                <div style={{ borderTop: '1px solid var(--line)', marginTop: 8, paddingTop: 10 }}>
                  <a href="/#practices" style={{
                    display: 'block', padding: '8px 22px',
                    fontFamily: 'var(--font-sans)', fontSize: '0.78rem', fontWeight: 700,
                    letterSpacing: '0.08em', textTransform: 'uppercase',
                    color: 'var(--brass-600)', textDecoration: 'none',
                  }}>
                    All practice areas →
                  </a>
                </div>
              </div>
            )}
          </div>

          <a href="/about.html" style={linkStyle}
            onMouseEnter={(e) => (e.target.style.color = 'var(--brass-300)')}
            onMouseLeave={(e) => (e.target.style.color = 'rgba(255,255,255,0.92)')}>About Alex</a>

          <a href="/results.html" style={linkStyle}
            onMouseEnter={(e) => (e.target.style.color = 'var(--brass-300)')}
            onMouseLeave={(e) => (e.target.style.color = 'rgba(255,255,255,0.92)')}>Results</a>

          <a href="/#contact" style={linkStyle}
            onMouseEnter={(e) => (e.target.style.color = 'var(--brass-300)')}
            onMouseLeave={(e) => (e.target.style.color = 'rgba(255,255,255,0.92)')}>Contact</a>

          <a href="/#contact" style={{
            fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.85rem',
            color: '#fff', background: 'var(--crimson-600)', padding: '10px 18px',
            borderRadius: 'var(--radius-sm)', textDecoration: 'none',
            letterSpacing: '0.02em', transition: 'background var(--dur-fast)',
          }}
          onMouseEnter={(e) => (e.target.style.background = 'var(--crimson-700)')}
          onMouseLeave={(e) => (e.target.style.background = 'var(--crimson-600)')}>
            Free Consultation
          </a>
        </nav>

        <button className="nav-burger" onClick={() => setMenuOpen((v) => !v)} aria-label="Menu" style={{
          display: 'none', background: 'none', border: 'none', color: '#fff', fontSize: '1.5rem', cursor: 'pointer',
        }}>
          ☰
        </button>
      </div>

      {menuOpen && (
        <div style={{ background: 'var(--navy-900)', borderTop: '1px solid rgba(255,255,255,0.08)', padding: '12px 32px 22px' }}>
          {PRACTICES.map((p) => (
            <a key={p.slug} href={`/${p.slug}.html`} style={{ display: 'block', padding: '8px 0', color: 'rgba(255,255,255,0.85)', textDecoration: 'none', fontFamily: 'var(--font-sans)', fontSize: '0.95rem' }}>
              {p.name}
            </a>
          ))}
          <div style={{ height: 1, background: 'rgba(255,255,255,0.12)', margin: '10px 0' }} />
          <a href="/about.html" style={{ display: 'block', padding: '8px 0', color: '#fff', textDecoration: 'none', fontFamily: 'var(--font-sans)', fontSize: '0.95rem', fontWeight: 600 }}>About Alex</a>
          <a href="/results.html" style={{ display: 'block', padding: '8px 0', color: '#fff', textDecoration: 'none', fontFamily: 'var(--font-sans)', fontSize: '0.95rem', fontWeight: 600 }}>Results</a>
          <a href="/#contact" style={{ display: 'block', padding: '8px 0', color: '#fff', textDecoration: 'none', fontFamily: 'var(--font-sans)', fontSize: '0.95rem', fontWeight: 600 }}>Contact</a>
          <a href="/#contact" style={{ display: 'inline-block', marginTop: 12, padding: '10px 20px', background: 'var(--crimson-600)', color: '#fff', borderRadius: 'var(--radius-sm)', textDecoration: 'none', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.85rem' }}>
            Free Consultation
          </a>
        </div>
      )}
    </header>
  );
}