/* global React */
function Header({ active, onNav, lang, onLang, onContact }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);
  const items = [
    { key: 'home', en: 'INDEX', zh: '首頁' },
    { key: 'new', en: 'NEW', zh: '熱銷建案' },
    { key: 'feature', en: 'PROJECTS', zh: '經典建築' },
    { key: 'about', en: 'STUDIO', zh: '苑建築' },
    { key: 'contact', en: 'CONTACT', zh: '聯絡' },
  ];
  function go(k) { setOpen(false); onNav(k); }
  return (
    <header className={`hd ${scrolled ? 'is-scrolled' : ''}`}>
      <a className="hd-logo" onClick={() => go('home')}>
        <img src="assets/logo.png" alt="" />
        <span className="hd-logo-mark">
          <span className="en">YUAN</span>
          <span className="zh">苑建築 · DEVELOPMENT</span>
        </span>
      </a>
      <nav className="hd-nav">
        {items.map(it => (
          <a key={it.key} className={`hd-link ${active === it.key ? 'is-active' : ''}`}
             onClick={() => go(it.key)}>
            <span className="en">{it.en}</span>
            <span className="zh">{it.zh}</span>
          </a>
        ))}
      </nav>
      <div className="hd-right">
        <div className="hd-lang" onClick={() => {
          const next = lang === 'both' ? 'en-only' : (lang === 'en-only' ? 'zh-only' : 'both');
          onLang(next);
        }}>
          <span className={lang !== 'zh-only' ? 'is-on' : ''}>EN</span>
          <i></i>
          <span className={lang !== 'en-only' ? 'is-on' : ''}>中</span>
        </div>
        <button className="hd-cta" onClick={onContact}>Inquire</button>
        <button className="hd-burger" aria-label="Menu" onClick={() => setOpen(o => !o)}>
          <span className={open ? 'on' : ''}></span>
          <span className={open ? 'on' : ''}></span>
        </button>
      </div>
      {open && (
        <div className="hd-mobile">
          {items.map(it => (
            <a key={it.key} onClick={() => go(it.key)}>
              <span className="en">{it.en}</span>
              <span className="zh">{it.zh}</span>
            </a>
          ))}
          <button className="hd-cta" onClick={() => { setOpen(false); onContact(); }}>Inquire · 聯絡</button>
        </div>
      )}
    </header>
  );
}
window.Header = Header;