// Header.jsx — sticky bilingual top nav
const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`cs-header ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="cs-container cs-header__row">
        <a className="cs-brand" href="/en-hk/">
          <img src="/assets/cheetah-mark-orange.png" alt="Cheetah Solutions Co." />
          <span className="cs-brand__text">
            <span className="cs-brand__tc">Cheetah</span>
            <span className="cs-brand__en">Cheetah Solutions Co.</span>
          </span>
        </a>
        <nav className="cs-nav">
          <a href="/en-hk/services/">Services</a>
          <a href="#how">How it works</a>
          <a href="/en-hk/cases/">Cases</a>
          <a href="/en-hk/insights/">Insights</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="cs-header__cta">
          <a className="cs-lang" href="/zh-hk/" hrefLang="zh-Hant-HK" lang="zh-Hant-HK" aria-label="Switch to Traditional Chinese">繁</a>
          <a className="cs-btn cs-btn--primary cs-btn--sm" href="#audit">Book a free audit →</a>
        </div>
      </div>
    </header>
  );
};
window.Header = Header;