// Top navigation — sticky, blurred-dark, logo left, channels center,
// "Schedule a Discovery Call" right. Channels collapse on small screens
// (we keep them visible at preview width 1280).
function TopNav({ onLogoClick, onScheduleClick }) {
  const channels = [
    { e: '🤖', label: 'AI' },
    { e: '📺', label: 'CTV' },
    { e: '🤳', label: 'Production' },
    { e: '🖥️', label: 'Display' },
    { e: '📢', label: 'SEM' },
    { e: '🔍', label: 'SEO' },
    { e: '📸', label: 'Social' },
    { e: '🎬', label: 'Video' },
    { e: '🌐', label: 'Web' },
  ];
  return (
    <header className="td-nav">
      <div className="td-nav__inner">
        <button className="td-nav__logo" onClick={onLogoClick} aria-label="Trillion Digital home">
          <img src="./assets/trillion_logo.png" alt="" />
          <span>Trillion Digital<sup>™</sup></span>
        </button>
        <nav className="td-nav__channels">
          {channels.map(c => (
            <a key={c.label} href={`#${c.label.toLowerCase()}`} className="td-nav__channel">
              <span className="td-nav__channel-e">{c.e}</span>
              <span>{c.label}</span>
            </a>
          ))}
        </nav>
        <button className="td-btn td-btn--primary td-btn--sm" onClick={onScheduleClick}>
          Schedule a Call <span aria-hidden="true">→</span>
        </button>
      </div>
    </header>
  );
}
window.TopNav = TopNav;