const DEFAULT_ITEMS = [
  { id: 'home',      label: 'Início' },
  { id: 'editorial', label: 'Editorial' },
  { id: 'models',    label: 'Modelos' },
];

/**
 * Sexy Geek DS — top navigation bar — glass blur, logo lockup, responsive drawer.
 * Sexy Clube é um guarda-chuva de marcas (logo duplo SEXY + SX); Sexy Geek é marca única, então
 * o lockup vira um logo só (`logo` prop, imagem) com fallback em texto "SEXY GEEK" enquanto a
 * logo definitiva não chega.
 */
function NavBar({ items = DEFAULT_ITEMS, active = 'home', logo = '/assets/sexy-geek-logo.png', user, onNavigate, onSubscribe, onLogin, onAccount }) {
  const isSubscriber = user && user.subscription_status === 'active';
  const [open, setOpen] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(typeof window !== 'undefined' && window.innerWidth < 768);

  React.useEffect(() => {
    const on = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', on);
    return () => window.removeEventListener('resize', on);
  }, []);

  const nav = (id) => { onNavigate && onNavigate(id); setOpen(false); };

  return (
    <div style={{ position: 'relative', width: '100%' }}>
      <nav style={{ height: 64, background: 'rgba(10,10,15,0.92)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)', borderBottom: '1px solid rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', padding: '0 24px' }}>
        {/* Logo lockup */}
        <div onClick={() => nav('home')} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10, marginRight: 32, flexShrink: 0 }}>
          {logo
            ? <img className="sg-brand-logo" src={logo} height="30" alt="SEXY GEEK" style={{ display: 'block', width: 'auto', maxWidth: 122, objectFit: 'contain' }} />
            : (
              <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 18, letterSpacing: '0.04em', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ color: '#EFEFEF' }}>SEXY</span>
                <span
                  className="gx-glitch gx-glitch-hover"
                  data-text="GEEK"
                  style={{ background: 'linear-gradient(135deg,#A6EEFF,#0876C9 58%,#04518F)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}
                >GEEK</span>
              </span>
            )}
        </div>

        {isMobile ? (
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
            {user
              ? (!isSubscriber && <button onClick={onSubscribe} style={{ background: 'linear-gradient(135deg,#62D8FF,#0876C9 58%,#04518F)', border: 'none', borderRadius: 9999, color: '#fff', fontFamily: "'Inter', sans-serif", fontSize: 11, fontWeight: 600, padding: '6px 14px', cursor: 'pointer' }}>Assinar</button>)
              : <button onClick={onSubscribe} style={{ background: 'linear-gradient(135deg,#62D8FF,#0876C9 58%,#04518F)', border: 'none', borderRadius: 9999, color: '#fff', fontFamily: "'Inter', sans-serif", fontSize: 11, fontWeight: 600, padding: '6px 14px', cursor: 'pointer' }}>Assinar</button>}
            <button onClick={() => setOpen(v => !v)} aria-label="Menu" style={{ background: 'none', border: 'none', padding: 6, cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 5, alignItems: 'center', justifyContent: 'center' }}>
              {[0, 1, 2].map(i => (
                <span key={i} style={{ display: 'block', width: 22, height: 2, borderRadius: 2, background: open && i === 1 ? 'transparent' : '#EFEFEF', transform: open ? (i === 0 ? 'rotate(45deg) translate(4px,4px)' : i === 2 ? 'rotate(-45deg) translate(4px,-4px)' : 'none') : 'none', transition: 'transform 0.2s, background 0.2s' }} />
              ))}
            </button>
          </div>
        ) : (
          <React.Fragment>
            <div style={{ display: 'flex', gap: 4, flex: 1 }}>
              {items.map(item => (
                <button key={item.id} onClick={() => nav(item.id)} style={{ background: active === item.id ? 'rgba(255,255,255,0.06)' : 'transparent', border: 'none', cursor: 'pointer', fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 500, padding: '6px 14px', borderRadius: 8, color: active === item.id ? '#EFEFEF' : '#9999B2', transition: 'all 0.15s' }}>{item.label}</button>
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              {user ? (
                <React.Fragment>
                  <button onClick={onAccount} style={{ background: 'none', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 9999, color: 'rgba(255,255,255,0.6)', fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 500, padding: '7px 16px', cursor: 'pointer' }}>Minha conta</button>
                  {!isSubscriber && <button onClick={onSubscribe} style={{ background: 'linear-gradient(135deg,#62D8FF,#0876C9 58%,#04518F)', border: 'none', borderRadius: 9999, color: '#fff', fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 600, padding: '7px 18px', cursor: 'pointer', boxShadow: '0 0 16px rgba(8,118,201,0.35)' }}>Assinar</button>}
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <button onClick={onLogin} style={{ background: 'none', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 9999, color: 'rgba(255,255,255,0.6)', fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 500, padding: '7px 16px', cursor: 'pointer' }}>Entrar</button>
                  <button onClick={onSubscribe} style={{ background: 'linear-gradient(135deg,#62D8FF,#0876C9 58%,#04518F)', border: 'none', borderRadius: 9999, color: '#fff', fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 600, padding: '7px 18px', cursor: 'pointer', boxShadow: '0 0 16px rgba(8,118,201,0.35)' }}>Assinar</button>
                </React.Fragment>
              )}
            </div>
          </React.Fragment>
        )}
      </nav>

      {isMobile && open && (
        <div style={{ position: 'absolute', top: 64, left: 0, right: 0, zIndex: 99, background: 'rgba(10,10,15,0.97)', backdropFilter: 'blur(20px)', borderBottom: '1px solid rgba(255,255,255,0.06)', padding: '12px 0 20px' }}>
          {items.map(item => (
            <button key={item.id} onClick={() => nav(item.id)} style={{ display: 'block', width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'Inter', sans-serif", fontSize: 15, fontWeight: 500, padding: '13px 24px', color: '#EFEFEF', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>{item.label}</button>
          ))}
          <div style={{ padding: '16px 24px 0', display: 'flex', gap: 10 }}>
            {user ? (
              <React.Fragment>
                <button onClick={onAccount} style={{ flex: 1, background: 'none', border: '1px solid rgba(255,255,255,0.15)', borderRadius: 9999, color: 'rgba(255,255,255,0.7)', fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 500, padding: 10, cursor: 'pointer' }}>Minha conta</button>
                {!isSubscriber && <button onClick={onSubscribe} style={{ flex: 1, background: 'linear-gradient(135deg,#62D8FF,#0876C9 58%,#04518F)', border: 'none', borderRadius: 9999, color: '#fff', fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 600, padding: 10, cursor: 'pointer' }}>Assinar</button>}
              </React.Fragment>
            ) : (
              <React.Fragment>
                <button onClick={onLogin} style={{ flex: 1, background: 'none', border: '1px solid rgba(255,255,255,0.15)', borderRadius: 9999, color: 'rgba(255,255,255,0.7)', fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 500, padding: 10, cursor: 'pointer' }}>Entrar</button>
                <button onClick={onSubscribe} style={{ flex: 1, background: 'linear-gradient(135deg,#62D8FF,#0876C9 58%,#04518F)', border: 'none', borderRadius: 9999, color: '#fff', fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 600, padding: 10, cursor: 'pointer' }}>Assinar</button>
              </React.Fragment>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

window.SexyGeekDS = window.SexyGeekDS || {};
window.SexyGeekDS.NavBar = NavBar;