// Header.jsx — sticky header (zh-Hant-HK)
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="#top">
          <img src="/assets/cheetah-mark-orange.png" alt="思達科技公司" />
          <span className="cs-brand__text">
            <span className="cs-brand__tc">思達科技公司</span>
            <span className="cs-brand__en">Cheetah Solutions Co.</span>
          </span>
        </a>
        <nav className="cs-nav">
          <a href="/zh-hk/services/">服務</a>
          <a href="#how">流程</a>
          <a href="#work">流程示範</a>
          <a href="#insights">市場觀察</a>
          <a href="#faq">常見問題</a>
        </nav>
        <div className="cs-header__cta">
          <a className="cs-lang" href="/en-hk/" hrefLang="en-HK" lang="en-HK" aria-label="Switch to English">EN</a>
          <a className="cs-btn cs-btn--primary cs-btn--sm" href="#audit">預約免費診斷 →</a>
        </div>
      </div>
    </header>
  );
};
window.Header = Header;