// lp-nav.jsx — Sticky navigation bar

function LPNav({ ctaCopy }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

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

  const navLinks = [
    { label: 'How It Works', href: '#how-it-works' },
    { label: 'Features', href: '#features' },
    { label: 'Pricing', href: '#pricing' },
    { label: 'FAQ', href: '#faq' },
  ];

  const s = {
    nav: {
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      height: '56px',
      background: scrolled ? 'color-mix(in srgb, var(--ci-background) 90%, transparent)' : 'var(--ci-background)',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--ci-border)' : '1px solid transparent',
      transition: 'background 200ms var(--ci-ease), border-color 200ms var(--ci-ease)',
      display: 'flex', alignItems: 'center',
    },
    inner: {
      maxWidth: 'var(--ci-container-max)',
      margin: '0 auto',
      padding: '0 var(--ci-container-pad)',
      display: 'flex', alignItems: 'center',
      width: '100%', gap: '32px',
    },
    logo: {
      fontFamily: 'var(--ci-font-sans)',
      fontSize: '14px', fontWeight: '600',
      color: 'var(--ci-foreground)',
      letterSpacing: '-0.3px',
      textDecoration: 'none',
      flexShrink: 0,
    },
    logoAccent: { color: 'var(--ci-primary)' },
    links: {
      display: 'flex', alignItems: 'center', gap: '28px',
      flex: 1, marginLeft: '16px',
    },
    link: {
      fontSize: '13px', fontWeight: '500',
      color: 'var(--ci-muted-foreground)',
      textDecoration: 'none',
      transition: 'color var(--ci-t-fast) var(--ci-ease)',
    },
    actions: {
      display: 'flex', alignItems: 'center', gap: '8px', marginLeft: 'auto',
    },
    btnGhost: {
      display: 'inline-flex', alignItems: 'center',
      height: '32px', padding: '0 14px',
      background: 'transparent',
      border: '1px solid var(--ci-border)',
      borderRadius: 'var(--ci-radius)',
      fontSize: '13px', fontWeight: '500',
      color: 'var(--ci-muted-foreground)',
      cursor: 'pointer',
      fontFamily: 'var(--ci-font-sans)',
      textDecoration: 'none',
      transition: 'color var(--ci-t-fast) var(--ci-ease), border-color var(--ci-t-fast) var(--ci-ease)',
    },
    btnPrimary: {
      display: 'inline-flex', alignItems: 'center',
      height: '32px', padding: '0 14px',
      background: 'var(--ci-primary)',
      border: '1px solid transparent',
      borderRadius: 'var(--ci-radius)',
      fontSize: '13px', fontWeight: '500',
      color: 'var(--ci-primary-foreground)',
      cursor: 'pointer',
      fontFamily: 'var(--ci-font-sans)',
      textDecoration: 'none',
      whiteSpace: 'nowrap',
    },
    mobileMenuBtn: {
      display: 'none', background: 'none', border: 'none',
      color: 'var(--ci-muted-foreground)', cursor: 'pointer',
      fontSize: '20px', lineHeight: 1, padding: '4px',
    },
    mobileMenu: {
      position: 'fixed', top: '56px', left: 0, right: 0,
      background: 'var(--ci-background)',
      borderBottom: '1px solid var(--ci-border)',
      padding: '16px var(--ci-container-pad) 24px',
      display: 'flex', flexDirection: 'column', gap: '0',
      zIndex: 99,
    },
    mobileLink: {
      display: 'block', padding: '12px 0',
      fontSize: '15px', fontWeight: '500',
      color: 'var(--ci-muted-foreground)',
      textDecoration: 'none',
      borderBottom: '1px solid var(--ci-border)',
    },
    mobileCtas: {
      display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '16px',
    },
  };

  return (
    <>
      <nav style={s.nav}>
        <div style={s.inner}>
          <a href="#" style={s.logo} aria-label="ContextualIntel home">
            <img src="/landing-v5/handoff/ci-logo.svg" alt="ContextualIntel" style={{ height: '30px', width: 'auto', display: 'block' }} />
          </a>

          {/* Desktop links */}
          <div style={s.links} className="nav-links-desktop">
            {navLinks.map(l => (
              <a key={l.label} href={l.href} style={s.link}
                onMouseEnter={e => e.target.style.color = 'var(--ci-foreground)'}
                onMouseLeave={e => e.target.style.color = 'var(--ci-muted-foreground)'}>
                {l.label}
              </a>
            ))}
          </div>

          {/* Desktop CTAs */}
          <div style={s.actions} className="nav-actions-desktop">
            <a href="https://crm.contextualintel.com/sign-in" style={s.btnGhost} className="ci-cta">Sign In</a>
            <a href="#trial-access" style={s.btnPrimary} className="ci-cta">{ctaCopy} →</a>
          </div>

          {/* Mobile menu button */}
          <button style={{ ...s.mobileMenuBtn, marginLeft: 'auto' }}
            className="nav-mobile-btn"
            onClick={() => setMobileOpen(o => !o)}>
            {mobileOpen ? '✕' : '☰'}
          </button>
        </div>
      </nav>

      {/* Mobile menu */}
      {mobileOpen && (
        <div style={s.mobileMenu} className="nav-mobile-menu">
          {navLinks.map(l => (
            <a key={l.label} href={l.href} style={s.mobileLink}
              onClick={() => setMobileOpen(false)}>
              {l.label}
            </a>
          ))}
          <div style={s.mobileCtas}>
            <a href="https://crm.contextualintel.com/sign-in" style={{ ...s.btnGhost, justifyContent: 'center', height: '40px' }}>
              Sign In
            </a>
            <a href="#trial-access" style={{ ...s.btnPrimary, justifyContent: 'center', height: '40px' }}
              onClick={() => setMobileOpen(false)}>
              {ctaCopy} →
            </a>
          </div>
        </div>
      )}
    </>
  );
}

Object.assign(window, { LPNav });