// Header.jsx — Daniel do Japão UI Kit
const Header = ({ dark = true, currentPage = 'home', onNavigate }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);

  const navItems = [
    { id: 'home', label: 'Início' },
    { id: 'about', label: 'Sobre' },
    { id: 'cria', label: 'CRIA' },
    { id: 'trabalhos', label: 'Trabalhos' },
    { id: 'conteudo', label: 'Conteúdo' },
    { id: 'contato', label: 'Contato' },
  ];

  const s = headerStyles;

  return (
    <header style={dark ? s.headerDark : s.headerLight}>
      <div className="rsp-header-inner" style={s.inner}>
        {/* Logo */}
        <div style={s.logo} onClick={() => onNavigate && onNavigate('home')}>
          <span style={s.logoD}>D</span>
          <div style={s.logoText}>
            <span style={{ ...s.logoName, color: dark ? '#FAFAFA' : '#0A0A0A' }}>DANIEL DO JAPÃO</span>
            <span className="rsp-logo-sub" style={s.logoSub}>CRIA · DISCIPLINA · PRESENÇA</span>
          </div>
        </div>

        {/* Nav desktop */}
        <nav className="rsp-nav-desktop" style={s.nav}>
          {navItems.map(item => (
            <button
              key={item.id}
              onClick={() => onNavigate && onNavigate(item.id)}
              style={{
                ...s.navItem,
                color: currentPage === item.id
                  ? '#D62B2B'
                  : dark ? '#A8A8A8' : '#6B6B6B',
                fontWeight: item.id === 'cria' ? 700 : 400,
              }}
            >
              {item.label}
            </button>
          ))}
        </nav>

        {/* CTA */}
        <button className="rsp-cta-desktop" style={s.ctaBtn} onClick={() => onNavigate && onNavigate('cria')}>
          ENTRAR NO CRIA
        </button>

        {/* Mobile hamburger */}
        <button className="rsp-hamburger" style={s.hamburger} onClick={() => setMenuOpen(!menuOpen)}>
          <span style={{ ...s.bar, ...(menuOpen ? s.barOpen1 : {}) }}></span>
          <span style={{ ...s.bar, opacity: menuOpen ? 0 : 1 }}></span>
          <span style={{ ...s.bar, ...(menuOpen ? s.barOpen2 : {}) }}></span>
        </button>
      </div>

      {/* Mobile menu */}
      {menuOpen && (
        <div style={s.mobileMenu}>
          {navItems.map(item => (
            <button
              key={item.id}
              onClick={() => { onNavigate && onNavigate(item.id); setMenuOpen(false); }}
              style={{
                ...s.mobileNavItem,
                color: currentPage === item.id ? '#D62B2B' : '#FAFAFA',
              }}
            >
              {item.label}
            </button>
          ))}
          <button style={s.mobileCta} onClick={() => { onNavigate && onNavigate('cria'); setMenuOpen(false); }}>
            ENTRAR NO CRIA
          </button>
        </div>
      )}
    </header>
  );
};

const headerStyles = {
  headerDark: { background: '#0A0A0A', borderBottom: '1px solid #1A1A1A', position: 'sticky', top: 0, zIndex: 100 },
  headerLight: { background: '#FAFAFA', borderBottom: '1px solid #E8E8E8', position: 'sticky', top: 0, zIndex: 100 },
  inner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px', height: 64, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 },
  logo: { display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', flexShrink: 0 },
  logoD: { fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 32, fontWeight: 300, color: '#D62B2B', lineHeight: 1 },
  logoText: { display: 'flex', flexDirection: 'column' },
  logoName: { fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 300, letterSpacing: '0.14em', textTransform: 'uppercase' },
  logoSub: { fontFamily: "'DM Sans', sans-serif", fontSize: 7, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#3A3A3A', marginTop: 2 },
  nav: { display: 'flex', alignItems: 'center', gap: 4, flex: 1, justifyContent: 'center' },
  navItem: { background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', padding: '8px 12px', transition: 'color 180ms' },
  ctaBtn: { background: '#D62B2B', color: '#FAFAFA', border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '9px 18px', borderRadius: 2, flexShrink: 0 },
  hamburger: { display: 'none', flexDirection: 'column', gap: 5, background: 'none', border: 'none', cursor: 'pointer', padding: 4 },
  bar: { width: 22, height: 1.5, background: '#FAFAFA', display: 'block', transition: 'all 200ms' },
  barOpen1: { transform: 'rotate(45deg) translate(4px, 4px)' },
  barOpen2: { transform: 'rotate(-45deg) translate(4px, -4px)' },
  mobileMenu: { background: '#111', borderTop: '1px solid #1A1A1A', padding: '16px 32px 24px', display: 'flex', flexDirection: 'column', gap: 4 },
  mobileNavItem: { background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 400, letterSpacing: '0.06em', textTransform: 'uppercase', padding: '10px 0', textAlign: 'left', borderBottom: '1px solid #1A1A1A' },
  mobileCta: { background: '#D62B2B', color: '#FAFAFA', border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '12px 24px', borderRadius: 2, marginTop: 12 },
};

Object.assign(window, { Header });