const Header = ({ route, setRoute }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const isMobile = useIsMobile();

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => { setOpen(false); }, [route]);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [open, isMobile]);

  const navs = [
    { id: 'home',    label: 'ホーム' },
    { id: 'article', label: '解説' },
    { id: 'reviews', label: 'レビュー' },
    { id: 'videos',  label: '動画' },
    { id: 'home',    label: 'コラム' },
  ];

  return (
    <>
      <header style={{
        position: 'sticky', top: 0, zIndex: 50,
        background: scrolled ? 'rgba(247,247,244,0.92)' : '#F7F7F4',
        backdropFilter: scrolled ? 'blur(12px)' : 'none',
        borderBottom: scrolled ? '1px solid #DDDDD4' : '1px solid transparent',
        transition: 'all 220ms cubic-bezier(0.16,1,0.3,1)',
      }}>
        <Container style={{ display: 'flex', alignItems: 'center', height: isMobile ? 56 : 68, gap: isMobile ? 12 : 32 }}>
          <a onClick={() => setRoute('home')} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', flex: isMobile ? 1 : 'none' }}>
            <img src="assets/logo-wordmark.svg" alt="FootballStyle" style={{ height: isMobile ? 24 : 32 }} />
          </a>
          {!isMobile && (
            <nav style={{ display: 'flex', gap: 22, flex: 1 }}>
              {navs.map((n, i) => (
                <a key={i} onClick={() => setRoute(n.id)} style={{
                  fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 700,
                  color: route === n.id ? '#0A0A09' : '#3E3E37',
                  cursor: 'pointer', position: 'relative', padding: '4px 0',
                  borderBottom: route === n.id ? '2px solid #F5E000' : '2px solid transparent',
                }}>{n.label}</a>
              ))}
            </nav>
          )}
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            {!isMobile && <i data-lucide="search" style={{ width: 18, height: 18, cursor: 'pointer' }}></i>}
            {!isMobile && <Button variant="ink" size="sm" onClick={() => setRoute('home')}>ニュースレター</Button>}
            {isMobile && (
              <button onClick={() => setOpen(!open)} aria-label="menu" style={{ width: 44, height: 44, background: open ? '#0A0A09' : 'transparent', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i data-lucide={open ? 'x' : 'menu'} style={{ width: 22, height: 22, color: open ? '#F5E000' : '#0A0A09' }}></i>
              </button>
            )}
          </div>
        </Container>
      </header>

      {/* Mobile drawer */}
      {isMobile && open && (
        <div style={{ position: 'fixed', top: 56, left: 0, right: 0, bottom: 0, background: '#0A0A09', zIndex: 40, padding: '32px 24px', overflowY: 'auto', animation: 'slideIn 220ms cubic-bezier(0.16,1,0.3,1)' }}>
          <style>{`@keyframes slideIn { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: translateY(0) } }`}</style>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 4, borderTop: '2px solid #F5E000', paddingTop: 20 }}>
            {navs.map((n, i) => (
              <a key={i} onClick={() => setRoute(n.id)} style={{
                fontFamily: 'var(--font-sans)', fontSize: 28, fontWeight: 900,
                color: route === n.id ? '#F5E000' : '#fff',
                cursor: 'pointer', padding: '14px 0',
                borderBottom: '1px solid #2A2A25',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <span>{n.label}</span>
                <i data-lucide="arrow-up-right" style={{ width: 20, height: 20 }}></i>
              </a>
            ))}
          </nav>
          <div style={{ marginTop: 32, padding: 20, background: '#1A1A17', border: '1px solid #2A2A25' }}>
            <Eyebrow color="#F5E000">NEWSLETTER</Eyebrow>
            <p style={{ fontSize: 13, color: '#BFBFB3', margin: '8px 0 14px', lineHeight: 1.6 }}>毎週、新着記事と動画をお届け。</p>
            <Button variant="accent" size="sm" icon="arrow-right">登録する</Button>
          </div>
        </div>
      )}
    </>
  );
};

window.Header = Header;