// components/Header.jsx
const Header = ({ route, setRoute, openLineModal, setTweaksOpen, tweaksAvailable }) => {
  const nav = [
    { id: 'home', label: '新着' },
    { id: 'list:work', label: 'AI×仕事効率化' },
    { id: 'list:video', label: 'AI×動画編集' },
    { id: 'list:site', label: 'AI×サイト制作' },
    { id: 'list:videos', label: '動画一覧' },
  ];
  return (
    <header className="site-header">
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 24px', gap: 20 }}>
        <button
          onClick={() => setRoute({ page: 'home' })}
          style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center', gap: 10 }}
        >
          <div style={{
            width: 40, height: 40,
            background: 'var(--sky)',
            border: '2.5px solid var(--line)',
            borderRadius: 12,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 900, color: '#fff', fontSize: 20,
            boxShadow: 'var(--shadow-sm)',
          }}>.</div>
          <div style={{ textAlign: 'left', lineHeight: 1.1 }}>
            <div style={{ fontSize: 9, letterSpacing: '.15em', color: 'var(--sky-deep)', fontWeight: 700, fontFamily: 'IBM Plex Mono, monospace' }}>DOT-SENSEI'S</div>
            <div style={{ fontSize: 17, fontWeight: 900 }}>ドット先生のAI学園</div>
          </div>
        </button>

        <nav style={{ display: 'flex', gap: 4, flex: 1, justifyContent: 'center' }}>
          {nav.map(n => {
            const active = (n.id === 'home' && route.page === 'home') ||
                           (n.id.startsWith('list:') && route.page === 'list' && route.cat === n.id.split(':')[1]);
            return (
              <button
                key={n.id}
                onClick={() => {
                  if (n.id === 'home') setRoute({ page: 'home' });
                  else if (n.id === 'list:videos') setRoute({ page: 'list', cat: 'all', videoMode: true });
                  else setRoute({ page: 'list', cat: n.id.split(':')[1] });
                }}
                className="btn btn-ghost"
                style={{
                  fontSize: 13,
                  padding: '8px 12px',
                  background: active ? 'var(--sub)' : 'transparent',
                  fontWeight: 800,
                }}
              >
                {n.label}
              </button>
            );
          })}
        </nav>

        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <button className="btn btn-ghost" onClick={() => setRoute({ page: 'list', cat: 'all', search: true })} title="検索" style={{ padding: 10 }}>
            <Icon name="search" size={18} />
          </button>
          <button className="btn btn-line btn-sm" onClick={openLineModal}>
            <Icon name="line" size={16} />
            LINE登録
          </button>
          {tweaksAvailable && (
            <button className="btn btn-ghost" onClick={() => setTweaksOpen(v => !v)} style={{ padding: 10 }} title="Tweaks">
              <Icon name="sparkle" size={18} />
            </button>
          )}
        </div>
      </div>
    </header>
  );
};

Object.assign(window, { Header });