// Header.jsx — sticky site header
const Header = ({ scrolled }) => {
  const bg = scrolled ? 'rgba(10,10,10,0.92)' : 'rgba(10,10,10,0.0)';
  const border = scrolled ? '1px solid rgba(255,255,255,0.18)' : '1px solid transparent';
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: bg, backdropFilter: scrolled ? 'blur(20px) saturate(1.1)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(20px) saturate(1.1)' : 'none',
      borderBottom: border,
      transition: 'background 240ms cubic-bezier(0.2,0,0,1), border-color 240ms cubic-bezier(0.2,0,0,1)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '18px clamp(20px, 4vw, 64px)',
        maxWidth: 1440, margin: '0 auto',
      }}>
        <a href="#" style={{
          fontFamily: "'Helvetica Inserat', Impact, sans-serif",
          fontSize: 28, lineHeight: 1, letterSpacing: '-0.01em',
          textTransform: 'uppercase', color: '#fff', textDecoration: 'none',
        }}>SUPERIOR</a>

        <nav style={{
          display: 'flex', gap: 36,
          font: '600 11px/1 Inter, sans-serif',
          letterSpacing: '0.18em', textTransform: 'uppercase',
        }}>
          <a href="#story" style={{ color: 'rgba(255,255,255,0.85)', textDecoration: 'none' }}>Story</a>
          <a href="#source" style={{ color: 'rgba(255,255,255,0.85)', textDecoration: 'none' }}>Source</a>
          <a href="#sustainability" style={{ color: 'rgba(255,255,255,0.85)', textDecoration: 'none' }}>Sustainability</a>
          <a href="#contact" style={{ color: 'rgba(255,255,255,0.85)', textDecoration: 'none' }}>Contact</a>
        </nav>

        <a href="#notify" className="btn btn-primary-dark" style={{ padding: '10px 18px', fontSize: 11 }}>Get Notified</a>
      </div>
    </header>
  );
};

window.Header = Header;