// Header.jsx — M³ Marketing Media Mission
// Fixed top nav with logo, links, and CTA

const Header = ({ currentPage, setPage }) => {
  const links = ['Services', 'About', 'Work', 'Contact'];

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: 'rgba(244,237,226,0.96)',
      backdropFilter: 'blur(12px)',
      borderBottom: '1px solid rgba(26,26,26,0.08)',
      padding: '0 48px',
      height: '64px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      {/* Logo */}
      <button onClick={() => setPage('home')} style={{
        background: 'none', border: 'none', cursor: 'pointer',
        display: 'flex', alignItems: 'baseline', gap: '0',
        padding: 0,
      }}>
        <span style={{
          fontFamily: "'Playfair Display', Georgia, serif",
          fontSize: '28px', fontWeight: 400, color: '#1A1A1A',
          lineHeight: 1, letterSpacing: '-0.02em',
        }}>M</span>
        <span style={{
          fontFamily: "'Playfair Display', Georgia, serif",
          fontSize: '11px', fontWeight: 400, color: '#A87C3D',
          verticalAlign: 'super', lineHeight: 0, position: 'relative', top: '-6px',
        }}>3</span>
      </button>

      {/* Nav links */}
      <nav style={{ display: 'flex', gap: '36px', alignItems: 'center' }}>
        {links.map(link => (
          <button key={link} onClick={() => setPage(link.toLowerCase())} style={{
            background: 'none', border: 'none', cursor: 'pointer',
            fontFamily: "'DM Sans', sans-serif",
            fontSize: '13px', fontWeight: 500,
            color: currentPage === link.toLowerCase() ? '#1A1A1A' : '#5E5A54',
            letterSpacing: '0.01em',
            borderBottom: currentPage === link.toLowerCase() ? '1px solid #A87C3D' : '1px solid transparent',
            paddingBottom: '2px',
            transition: 'color 0.15s',
          }}>{link}</button>
        ))}
        <button onClick={() => setPage('contact')} style={{
          background: '#C4734A', color: '#F4EDE2', border: 'none',
          padding: '9px 20px', borderRadius: '2px',
          fontFamily: "'DM Sans', sans-serif", fontSize: '13px', fontWeight: 500,
          cursor: 'pointer', letterSpacing: '0.01em',
          transition: 'opacity 0.15s',
        }}
          onMouseEnter={e => e.target.style.opacity = '0.85'}
          onMouseLeave={e => e.target.style.opacity = '1'}
        >
          Start a conversation
        </button>
      </nav>
    </header>
  );
};

Object.assign(window, { Header });