// Post-PC Labs — Header (Brutalist Light Mode)

const Header = ({ activePage = 'home', onNav, isMobile }) => {
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const handler = () => setScrolled(window.scrollY > 10);
    window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  }, []);

  const links = [
    { id: 'home',     label: 'Home' },
    { id: 'services', label: 'Services' },
    { id: 'about',    label: 'About' },
    { id: 'insights', label: 'Insights' },
  ];

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: '#F5F4EF',
      borderBottom: '2px solid #0F0F0F',
      transition: 'box-shadow 200ms ease',
      boxShadow: scrolled ? '0 2px 0 #0F0F0F' : 'none',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        padding: isMobile ? '0 20px' : '0 40px',
        height: 60,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        {/* Logo */}
        <a href="#" onClick={e => { e.preventDefault(); onNav && onNav('home'); }}
          style={{ display: 'flex', alignItems: 'center', textDecoration: 'none', height: 60, borderRight: isMobile ? 'none' : '1px solid #0F0F0F', paddingRight: isMobile ? 0 : 32 }}>
          <img src="assets/logo-secondary-fullcolor.png" alt="Post-PC Labs" style={{ height: 46, display: 'block', width: 'auto' }} />
        </a>

        {/* Nav links — hidden on mobile */}
        {!isMobile && (
          <nav style={{ display: 'flex', gap: 0 }}>
            {links.map(l => (
              <a key={l.id} href="#"
                onClick={e => { e.preventDefault(); onNav && onNav(l.id); }}
                style={{
                  fontFamily: "'IBM Plex Sans', 'Helvetica Neue', sans-serif",
                  fontSize: 14, fontWeight: 500,
                  letterSpacing: '0.08em', textTransform: 'uppercase',
                  color: '#0F0F0F',
                  textDecoration: 'none',
                  padding: '0 20px',
                  height: 60,
                  display: 'flex', alignItems: 'center',
                  borderLeft: '1px solid #0F0F0F',
                  borderBottom: activePage === l.id ? '3px solid #0F0F0F' : '3px solid transparent',
                  transition: 'border-bottom 150ms ease',
                }}
                onMouseEnter={e => { e.currentTarget.style.background = '#EBEBEA'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
              >{l.label}</a>
            ))}
          </nav>
        )}

        {/* CTA */}
        <a href="https://linkedin.com/in/hanshenyuan" target="_blank" rel="noopener"
          style={{
            fontFamily: "'IBM Plex Sans', 'Helvetica Neue', sans-serif",
            fontSize: 13, fontWeight: 700,
            letterSpacing: '0.1em', textTransform: 'uppercase',
            padding: isMobile ? '10px 16px' : '10px 22px',
            background: '#0F0F0F', color: '#F5F4EF',
            textDecoration: 'none',
            borderLeft: '1px solid #0F0F0F',
            height: 60, display: 'flex', alignItems: 'center',
            transition: 'background 150ms ease, color 150ms ease',
            whiteSpace: 'nowrap',
          }}
          onMouseEnter={e => { e.currentTarget.style.background = '#43C1C0'; e.currentTarget.style.color = '#0F0F0F'; }}
          onMouseLeave={e => { e.currentTarget.style.background = '#0F0F0F'; e.currentTarget.style.color = '#F5F4EF'; }}
        >Talk to Us →</a>
      </div>
    </header>
  );
};

Object.assign(window, { Header });