// Nav.jsx — YCR Seminar Landing Page Navigation
const Nav = ({ scrolled, onNavigate, onReserve }) => {
  const { isMobile, isTablet } = useYCRBreakpoint();
  const [menuOpen, setMenuOpen] = React.useState(false);
  const navItems = [
    { label: 'Seminar', 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(8,18,34,0.94), rgba(5,12,24,0.88))'
        : 'linear-gradient(180deg, rgba(12,24,42,0.82), rgba(5,11,22,0.62))',
      backdropFilter: 'blur(24px) saturate(145%)',
      WebkitBackdropFilter: 'blur(24px) saturate(145%)',
      borderBottom: '1px solid rgba(126,194,240,0.14)',
      boxShadow: scrolled
        ? '0 16px 44px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.05)'
        : '0 10px 34px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.04)',
      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 ? '94px' : '112px',
      height: isMobile ? '54px' : '58px',
      objectFit: 'contain',
      objectPosition: 'left center',
      filter: 'drop-shadow(0 6px 18px rgba(0,0,0,0.34))',
    },
    wordmark: { display: 'flex', flexDirection: 'column' },
    wordmarkTop: { fontSize: isMobile ? '11px' : '12px', fontWeight: 700, color: '#FFFFFF', letterSpacing: '0.06em', lineHeight: 1, textShadow: '0 1px 14px rgba(0,0,0,0.7)' },
    wordmarkBot: { fontSize: '7px', fontWeight: 600, color: '#7EC2F0', letterSpacing: '0.22em', textTransform: 'uppercase', marginTop: '2px', textShadow: '0 1px 12px rgba(0,0,0,0.7)' },
    links: {
      display: isMobile ? 'none' : 'flex',
      gap: isTablet ? '24px' : '34px',
      flex: 1,
      justifyContent: 'center',
      padding: 0,
      borderRadius: 0,
      background: 'transparent',
      border: 'none',
      maxWidth: 'none',
      margin: '0 auto',
      boxShadow: 'none',
    },
    link: {
      fontSize: '13px',
      color: '#B8C9DE',
      cursor: 'pointer',
      background: 'transparent',
      border: 'none',
      borderBottom: '1px solid transparent',
      borderRadius: 0,
      fontFamily: 'inherit',
      fontWeight: 800,
      letterSpacing: '0.01em',
      transition: 'all 0.22s cubic-bezier(0.2,0.7,0.2,1)',
      padding: '10px 1px 8px',
      minWidth: 'auto',
    },
    cta: {
      display: isMobile ? 'none' : 'inline-flex', alignItems: 'center', gap: '6px',
      background: '#FFFFFF', color: '#050B16',
      fontSize: '13px', fontWeight: 800,
      padding: '12px 23px', borderRadius: '9999px', border: 'none', cursor: 'pointer',
      fontFamily: 'inherit', whiteSpace: 'nowrap',
      boxShadow: '0 14px 32px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.85)',
    },
    menuButton: {
      display: isMobile ? 'inline-flex' : 'none',
      marginLeft: 'auto',
      alignItems: 'center', justifyContent: 'center',
      height: '38px', padding: '0 14px',
      borderRadius: '9999px',
      border: '1px solid rgba(126,194,240,0.24)',
      background: 'rgba(13,27,46,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: '16px',
      border: '1px solid rgba(126,194,240,0.18)',
      background: 'rgba(5,11,22,0.88)',
      backdropFilter: 'blur(24px) saturate(145%)',
      WebkitBackdropFilter: 'blur(24px) saturate(145%)',
      boxShadow: '0 22px 70px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.05)',
    },
    mobileItem: {
      minHeight: '44px',
      borderRadius: '10px',
      border: '1px solid rgba(74,158,219,0.10)',
      background: 'rgba(13,27,46,0.54)',
      color: '#D6E3F1',
      fontSize: '14px',
      fontWeight: 600,
      fontFamily: 'inherit',
      cursor: 'pointer',
      textAlign: 'left',
      padding: '0 14px',
    },
    mobileCta: {
      minHeight: '46px',
      borderRadius: '9999px',
      border: 'none',
      background: '#FFFFFF',
      color: '#050B16',
      fontSize: '14px',
      fontWeight: 800,
      fontFamily: 'inherit',
      cursor: 'pointer',
      marginTop: '4px',
    },
  };
  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="Your Cell Regeneration" 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.transform='translateY(-1px)';
                e.target.style.borderBottomColor='rgba(126,194,240,0.75)';
              }}
              onMouseLeave={e=>{
                e.target.style.color='#B8C9DE';
                e.target.style.transform='translateY(0)';
                e.target.style.borderBottomColor='transparent';
              }}
            >
              {item.label}
            </button>
          ))}
        </div>
        <button type="button" style={s.cta} onClick={()=>{ onReserve && onReserve(); }}>Register for Webinar →</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 for Webinar →</button>
      </div>
    </React.Fragment>
  );
};
Object.assign(window, { Nav });