// Header — top nav for Estudia con Carol web kit.

function Header({ current, onNav, user, onLoginClick }) {
  const items = [
    { id: 'home',     label: 'Inicio' },
    { id: 'library',  label: 'Biblioteca' },
    { id: 'familias', label: 'Para familias' },
    { id: 'curso',    label: 'Cursos', href: 'curso.html', cta: true },
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 20,
      background: 'rgba(251,248,240,0.92)',
      backdropFilter: 'blur(8px)',
      WebkitBackdropFilter: 'blur(8px)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div style={{
        maxWidth: 'var(--w-page)', margin: '0 auto',
        padding: '14px var(--pad-page)',
        display: 'flex', alignItems: 'center', gap: 28,
      }}>
        <button onClick={() => onNav('home')} style={{
          background: 'none', border: 0, padding: 0, cursor: 'pointer',
          display: 'flex', alignItems: 'center',
        }}>
          <img src="../../assets/wordmark.svg" alt="estudia con carol" style={{ height: 46 }}/>
        </button>

        <nav style={{ display: 'flex', gap: 2 }}>
          {items.map(it => {
            const active = current === it.id;
            if (it.cta) {
              return (
                <a key={it.id} href={it.href} style={{
                  font: 'var(--type-ui)', color: '#fff', background: 'var(--terracotta)',
                  borderRadius: 'var(--r-md)', padding: '6px 14px', textDecoration: 'none',
                  display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap',
                  transition: 'background var(--t-fast) var(--ease)',
                }}
                onMouseEnter={e => { e.currentTarget.style.background = 'var(--terracotta-deep)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'var(--terracotta)'; }}>
                  {it.label}
                </a>
              );
            }
            return (
              <button key={it.id} onClick={() => onNav(it.id)} style={{
                font: 'var(--type-ui)',
                color: active ? 'var(--ink)' : 'var(--ink-2)',
                background: active ? 'var(--bg-muted)' : 'transparent',
                border: 0, borderRadius: 'var(--r-sm)',
                padding: '6px 10px', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap',
                transition: 'all var(--t-fast) var(--ease)',
              }}>
                {active && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--terracotta)' }}/>}
                {it.label}
              </button>
            );
          })}
        </nav>

        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
          <button onClick={() => onNav('library')} aria-label="Buscar" style={{
            background: 'var(--bg-surface)', border: '1px solid var(--line)',
            borderRadius: 'var(--r-md)', padding: '7px 10px',
            display: 'flex', alignItems: 'center', gap: 8,
            font: 'var(--type-ui-sm)', color: 'var(--ink-3)',
            cursor: 'pointer', minWidth: 220,
          }}>
            <Icon name="search" size={14} color="var(--ink-3)" />
            <span>Buscar…</span>
            <span style={{
              marginLeft: 'auto',
              font: 'var(--type-meta)',
              border: '1px solid var(--line)',
              borderRadius: 'var(--r-sm)',
              padding: '0 6px',
              background: 'var(--bg-canvas)',
            }}>⌘ K</span>
          </button>
          {user ? (
            <Avatar initials={user.initials || 'CG'} />
          ) : (
            <a href="curso.html" style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              background: 'transparent', border: '1px solid var(--line)',
              borderRadius: 'var(--r-md)', padding: '7px 12px',
              font: 'var(--type-ui-sm)', color: 'var(--ink)', textDecoration: 'none',
              cursor: 'pointer',
              transition: 'all var(--t-fast) var(--ease)',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--ink-3)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; }}>
              Entrar
              <Icon name="arrow" size={13} />
            </a>
          )}
        </div>
      </div>
    </header>
  );
}

window.Header = Header;