// Header.jsx
function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    ['Trang chủ', '#top'], ['Giới thiệu', '#about'], ['Giải pháp', '#services'],
    ['Dự án', '#projects'], ['Khách hàng', '#clients'], ['Tin tức', '#news'], ['Liên hệ', '#contact'],
  ];
  return (
    <header className={'swk-header' + (scrolled ? ' scrolled' : '')}>
      <div className="swk-container">
        <div className="swk-header-inner">
          <a href="#top" aria-label="S.W.O Technology">
            <img className="swk-logo" src={(window.SITE && window.SITE.logoUrl) || '/site/assets/logo-swo-horizontal.svg'} alt="S.W.O Technology" style={{ maxWidth: 200, objectFit: 'contain' }} />
          </a>
          <nav className="swk-nav">
            {links.map(([t, h]) => <a key={h} href={h}>{t}</a>)}
          </nav>
          <div className="swk-header-cta">
            <Btn variant="primary" size="sm" href="#contact" icon="arrowRight">Liên hệ ngay</Btn>
            <button className="swk-burger" onClick={() => setOpen(o => !o)} aria-label="Menu">
              <Icon name={open ? 'x' : 'menu'} size={24} />
            </button>
          </div>
        </div>
      </div>
      <div className={'swk-mobile' + (open ? ' open' : '')}>
        {links.map(([t, h]) => <a key={h} href={h} onClick={() => setOpen(false)}>{t}</a>)}
        <a href="#contact" onClick={() => setOpen(false)} style={{ color: 'var(--brand-blue)', fontWeight: 700 }}>Liên hệ ngay →</a>
      </div>
    </header>
  );
}
Object.assign(window, { Header });