/* Header — sticky translucent header with brand lockup, nav, CTA,
   and a mobile slide-in menu. */
function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
  }, [menuOpen]);

  const links = [
    ["產品", "#products"],
    ["天然成分", "#ingredients"],
    ["使用方式", "#how"],
  ];

  return (
    <React.Fragment>
      <header className={"site-header" + (scrolled ? " scrolled" : "")}>
        <div className="container header-inner">
          <a className="brand" href="#top" aria-label="抱毛 Aromatic Pet">
            <img src="assets/logo.png" alt="" />
            <span>
              <span className="cn" style={{ display: "block" }}>抱毛</span>
              <span className="en">Aromatic Pet</span>
            </span>
          </a>

          <nav className="nav">
            {links.map(([label, href]) => (
              <a key={href} href={href}>{label}</a>
            ))}
          </nav>

          <div className="header-cta">
            <a className="btn btn--clay" href="#contact">聯絡我們</a>
            <button className="menu-btn icon-btn" aria-label="開啟選單"
              onClick={() => setMenuOpen(true)}>
              <Icon name="menu" className="lc-24" />
            </button>
          </div>
        </div>
      </header>

      <div className={"mobile-menu" + (menuOpen ? " open" : "")}>
        <div className="container mm-top" style={{ padding: 0 }}>
          <span className="brand">
            <img src="assets/logo.png" alt="" />
            <span className="cn">抱毛</span>
          </span>
          <button className="icon-btn" aria-label="關閉選單" onClick={() => setMenuOpen(false)}>
            <Icon name="x" className="lc-24" />
          </button>
        </div>
        <nav onClick={() => setMenuOpen(false)}>
          {links.map(([label, href]) => (
            <a key={href} href={href}>{label}</a>
          ))}
        </nav>
        <div className="mm-cta">
          <a className="btn btn--clay" href="#contact" onClick={() => setMenuOpen(false)}>聯絡我們</a>
        </div>
      </div>
    </React.Fragment>
  );
}

window.Header = Header;