/* header.jsx — グローバルヘッダー + モバイルメニュー */

const NAV_ITEMS = [
  { href: "#home", label: "ホーム", active: true },
  { href: "#services", label: "サービス案内" },
  { href: "#about", label: "事務所について" },
  { href: "#pricing", label: "料金案内" },
  { href: "#flow", label: "ご相談の流れ" },
  { href: "#faq", label: "よくあるご質問" },
];

const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  // close mobile menu on resize > tablet
  React.useEffect(() => {
    const onResize = () => {
      if (window.innerWidth > 1024) setMenuOpen(false);
    };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  // lock body scroll while menu open
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  return (
    <>
      <header className={`site-header ${scrolled ? "is-scrolled" : ""}`}>
        <div className="container header-inner">
          <a href="#home" className="brand" onClick={() => setMenuOpen(false)}>
            <Logo />
            <span>みなと行政書士事務所</span>
          </a>

          <nav className="nav" aria-label="グローバル">
            <ul className="nav-list">
              {NAV_ITEMS.map((it) => (
                <li key={it.href}>
                  <a href={it.href} className={it.active ? "active" : ""}>{it.label}</a>
                </li>
              ))}
            </ul>
          </nav>

          <div className="header-cta">
            <div className="tel-block">
              <span className="tel-num">
                <Icon name="phone" size={16} />03-1234-5678
              </span>
              <span className="tel-hours">平日 9:00〜18:00</span>
            </div>
            <a href="#contact" className="btn btn-primary btn-sm">
              <Icon name="mail" size={16} />お問い合わせ
            </a>
            <button
              className={`hamburger ${menuOpen ? "is-open" : ""}`}
              aria-label="メニュー"
              aria-expanded={menuOpen}
              onClick={() => setMenuOpen((v) => !v)}
            >
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>
      </header>

      <div className={`mobile-menu ${menuOpen ? "is-open" : ""}`}>
        <div className="mobile-menu-inner">
          {NAV_ITEMS.map((it) => (
            <a key={it.href} href={it.href} onClick={() => setMenuOpen(false)}>
              {it.label}
              <Icon name="chevron-right" size={16} />
            </a>
          ))}
          <div className="mobile-cta">
            <a href="tel:0312345678" className="btn btn-outline">
              <Icon name="phone" size={16} />03-1234-5678
            </a>
            <a href="#contact" className="btn btn-primary" onClick={() => setMenuOpen(false)}>
              <Icon name="mail" size={16} />お問い合わせ
            </a>
          </div>
        </div>
      </div>
    </>
  );
};

window.Header = Header;