// Nav.jsx - Red Pill Medical Webinar Landing Navigation
const Nav = ({ scrolled, onNavigate, onReserve }) => {
  const { isMobile, isTablet } = window.useRPMBreakpoint();
  const [menuOpen, setMenuOpen] = React.useState(false);
  const navItems = [
    { label: 'Webinar', target: 'seminar' },
    { label: 'Topics', target: 'faq' },
    { label: 'Clarity', target: 'clarity' },
  ];

  React.useEffect(() => {
    if (!isMobile) setMenuOpen(false);
  }, [isMobile]);

  const handleNavigate = (target, focusId) => {
    setMenuOpen(false);
    onNavigate && onNavigate(target, focusId);
  };

  const s = {
    nav: {
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      height: isMobile ? '68px' : '72px',
      display: 'flex', alignItems: 'center',
      padding: isMobile ? '0 18px' : '0 5vw',
      background: scrolled
        ? 'linear-gradient(180deg, rgba(4,4,4,0.96), rgba(4,4,4,0.90))'
        : 'linear-gradient(180deg, rgba(18,18,18,0.84), rgba(4,4,4,0.62))',
      backdropFilter: 'blur(24px) saturate(145%)',
      WebkitBackdropFilter: 'blur(24px) saturate(145%)',
      borderBottom: '1px solid rgba(255,255,255,0.08)',
      boxShadow: scrolled
        ? '0 16px 44px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.04)'
        : '0 10px 34px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.03)',
      transition: 'all 0.4s cubic-bezier(0.4,0,0.2,1)',
    },
    logo: {
      display: 'flex', alignItems: 'center', textDecoration: 'none', minHeight: '48px',
      padding: 0, borderRadius: 0, background: 'transparent', border: 'none', boxShadow: 'none',
    },
    logoImg: {
      width: isMobile ? '148px' : '188px',
      height: isMobile ? '42px' : '52px',
      objectFit: 'contain',
      objectPosition: 'left center',
      filter: 'drop-shadow(0 6px 18px rgba(0,0,0,0.34))',
    },
    links: {
      display: isMobile ? 'none' : 'flex',
      gap: isTablet ? '24px' : '34px',
      flex: 1,
      justifyContent: 'center',
      margin: '0 auto',
    },
    link: {
      fontSize: '13px',
      color: 'rgba(255,255,255,0.70)',
      cursor: 'pointer',
      background: 'transparent',
      border: 'none',
      borderBottom: '1px solid transparent',
      borderRadius: 0,
      fontFamily: 'inherit',
      fontWeight: 600,
      letterSpacing: '0.01em',
      transition: 'all 0.22s cubic-bezier(0.2,0.7,0.2,1)',
      padding: '10px 1px 8px',
    },
    cta: {
      display: isMobile ? 'none' : 'inline-flex', alignItems: 'center', gap: '6px',
      background: '#C52223', color: '#FFFFFF',
      fontSize: '13px', fontWeight: 700,
      padding: '12px 23px', borderRadius: '0', border: 'none', cursor: 'pointer',
      fontFamily: 'inherit', whiteSpace: 'nowrap',
      letterSpacing: '0.08em', textTransform: 'uppercase',
      boxShadow: '0 14px 32px rgba(197,34,35,0.28)',
    },
    menuButton: {
      display: isMobile ? 'inline-flex' : 'none',
      marginLeft: 'auto',
      alignItems: 'center', justifyContent: 'center',
      height: '38px', padding: '0 14px',
      borderRadius: '0',
      border: '1px solid rgba(255,255,255,0.16)',
      background: 'rgba(18,18,18,0.72)',
      color: '#FFFFFF',
      fontSize: '13px', fontWeight: 700,
      fontFamily: 'inherit',
      cursor: 'pointer',
    },
    mobileMenu: {
      display: isMobile && menuOpen ? 'grid' : 'none',
      position: 'fixed',
      top: '74px', left: '14px', right: '14px',
      zIndex: 99,
      gap: '8px',
      padding: '12px',
      borderRadius: '0',
      border: '1px solid rgba(255,255,255,0.10)',
      background: 'rgba(4,4,4,0.94)',
      backdropFilter: 'blur(24px) saturate(145%)',
      WebkitBackdropFilter: 'blur(24px) saturate(145%)',
      boxShadow: '0 22px 70px rgba(0,0,0,0.52)',
    },
    mobileItem: {
      minHeight: '44px',
      borderRadius: '0',
      border: '1px solid rgba(255,255,255,0.08)',
      background: 'rgba(18,18,18,0.54)',
      color: '#CBCBCB',
      fontSize: '14px',
      fontWeight: 600,
      fontFamily: 'inherit',
      cursor: 'pointer',
      textAlign: 'left',
      padding: '0 14px',
    },
    mobileCta: {
      minHeight: '46px',
      borderRadius: '0',
      border: 'none',
      background: '#C52223',
      color: '#FFFFFF',
      fontSize: '13px',
      fontWeight: 700,
      fontFamily: 'inherit',
      cursor: 'pointer',
      marginTop: '4px',
      letterSpacing: '0.08em',
      textTransform: 'uppercase',
    },
  };
  return (
    <React.Fragment>
      <nav style={s.nav}>
        <a style={s.logo} href="#top" onClick={(e)=>{ e.preventDefault(); handleNavigate('top'); }}>
          <img src="../../assets/logo-wordmark-header-white.png" alt="Red Pill Medical" style={s.logoImg} />
        </a>
        <div style={s.links}>
          {navItems.map(item => (
            <button
              key={item.label}
              type="button"
              style={s.link}
              onClick={()=>handleNavigate(item.target)}
              onMouseEnter={e=>{
                e.target.style.color='#FFFFFF';
                e.target.style.borderBottomColor='#C52223';
              }}
              onMouseLeave={e=>{
                e.target.style.color='rgba(255,255,255,0.70)';
                e.target.style.borderBottomColor='transparent';
              }}
            >
              {item.label}
            </button>
          ))}
        </div>
        <button type="button" style={s.cta} onClick={()=>{ onReserve && onReserve(); }}>Register</button>
        <button type="button" style={s.menuButton} onClick={()=>setMenuOpen(open=>!open)}>{menuOpen ? 'Close' : 'Menu'}</button>
      </nav>
      <div style={s.mobileMenu}>
        {navItems.map(item => (
          <button key={item.label} type="button" style={s.mobileItem} onClick={()=>handleNavigate(item.target)}>
            {item.label}
          </button>
        ))}
        <button type="button" style={s.mobileCta} onClick={()=>{ setMenuOpen(false); onReserve && onReserve(); }}>Register</button>
      </div>
    </React.Fragment>
  );
};
Object.assign(window, { Nav });