// Sticky header, logo + single CTA only
const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled ? 'rgba(255,255,255,0.92)' : 'rgba(255,255,255,0.0)',
      backdropFilter: scrolled ? 'blur(10px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(10px) saturate(140%)' : 'none',
      borderBottom: scrolled ? `1px solid ${T.border}` : '1px solid transparent',
      transition: 'all 240ms ease',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        padding: '14px 32px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <a href="#" style={{ textDecoration: 'none' }}>
          <SparkLogo size={30} />
        </a>
        <a href="#start" style={{
          textDecoration: 'none',
          background: T.orange, color: 'white',
          padding: '10px 18px', borderRadius: 8,
          fontWeight: 600, fontSize: 14, letterSpacing: -0.1,
          display: 'inline-flex', alignItems: 'center', gap: 6,
          transition: 'background 200ms ease',
        }}
        onMouseEnter={e => e.currentTarget.style.background = T.orangeHover}
        onMouseLeave={e => e.currentTarget.style.background = T.orange}>
          Run your first challenge free
          <Icon d="M5 12h14M12 5l7 7-7 7" size={14} sw={2} />
        </a>
      </div>
    </header>
  );
};
window.Header = Header;