// Header + Mobile hamburger menu

const NAV_ITEMS = [
  { kr: "김대중입니다", en: "About", href: "#about" },
  { kr: "4대 비전", en: "Vision", href: "#vision" },
  { kr: "약속과 실천", en: "Promises", href: "#promises" },
  { kr: "현장소식", en: "News", href: "#news" },
  { kr: "소통하기", en: "Contact", href: "#contact" },
];

function Header({ onMenuOpen, catchphrase }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`hdr ${scrolled ? "hdr-scrolled" : ""}`}>
      <div className="container hdr-row">
        <a className="hdr-logo" href="#top">
          <span className="hdr-logo-kr">김대중</span>
          <span className="hdr-logo-divider">·</span>
          <span className="hdr-logo-en">K-EDU 2026</span>
        </a>
        <nav className="hdr-nav" aria-label="주요 메뉴">
          {NAV_ITEMS.map((it) => (
            <a key={it.en} href={it.href}>
              <span className="hdr-nav-en">{it.en}</span>
              <span className="hdr-nav-kr">{it.kr}</span>
            </a>
          ))}
        </nav>
        <div className="hdr-actions">
          <a href="#support" className="hdr-cta" aria-label="응원 메시지 섹션으로 이동">
            <span>응원하기</span>
            <IconArrow size={14} />
          </a>
          <button
            type="button"
            className="hdr-burger"
            onClick={onMenuOpen}
            aria-label="메뉴 열기"
            aria-expanded="false"
            aria-controls="mobile-menu"
          >
            <IconMenu size={22} />
          </button>
        </div>
      </div>
    </header>
  );
}

function MobileMenu({ open, onClose }) {
  const overlayRef = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open, onClose]);

  return (
    <div
      id="mobile-menu"
      ref={overlayRef}
      className={`mm ${open ? "mm-open" : ""}`}
      aria-hidden={!open}
      role="dialog"
      aria-modal="true"
      aria-label="모바일 메뉴"
    >
      <div className="mm-bg" onClick={onClose} />
      <div className="mm-panel" role="navigation">
        <div className="mm-hd">
          <div className="mm-logo">
            <span className="mm-logo-kr">김대중</span>
            <span className="mm-logo-en">K-EDU SPECIAL CITY · 2026</span>
          </div>
          <button type="button" className="mm-x" onClick={onClose} aria-label="메뉴 닫기">
            <IconClose size={22} />
          </button>
        </div>

        <nav className="mm-nav">
          {NAV_ITEMS.map((it, i) => (
            <a
              key={it.en}
              href={it.href}
              onClick={onClose}
              className="mm-link"
              style={{ transitionDelay: open ? `${100 + i * 50}ms` : "0ms" }}
            >
              <div className="mm-link-row">
                <span className="mm-link-en">{String(i + 1).padStart(2, "0")} · {it.en}</span>
                <IconArrow size={18} color="rgba(255,255,255,0.4)" />
              </div>
              <span className="mm-link-kr">{it.kr}</span>
            </a>
          ))}
        </nav>

        <div className="mm-foot">
          <div className="mm-foot-quote">
            "통합도 착착,<br/>교육도 착착."
          </div>
          <div className="mm-sns">
            <a href="https://invite.kakao.com/tc/PZLZYBT4h2" target="_blank" rel="noopener noreferrer" aria-label="카카오톡 오픈채팅"><IconKakao /></a>
          </div>
          <div className="mm-foot-mark">JEONNAM × GWANGJU · K-EDU 2026</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Header, MobileMenu });