/* global React */
const { useState, useEffect } = React;

// =============== Header ===============
function Header({ active, onNav }) {
  const items = [
  { id: "about", label: "소개" },
  { id: "curriculum", label: "커리큘럼" },
  { id: "apply", label: "수강신청" },
  { id: "contact", label: "문의" }];

  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const handleMobileNav = (id) => { setMenuOpen(false); onNav(id); };
  return (
    <React.Fragment>
      <header style={{ ...hdr.bar, borderBottomColor: scrolled ? "var(--ink)" : "transparent" }}>
        <a href="#home" onClick={(e) => {e.preventDefault();onNav("home");}} style={hdr.brand} aria-label="망원정x 페미니스트 정치학교">
          <img src="assets/logo_icon.png" alt="" style={hdr.brandIcon} />
          <span className="brand-text-full" style={hdr.brandText}>망원정<span style={hdr.brandX}>x</span> 페미니스트 정치학교</span>
          <span className="brand-text-short" style={hdr.brandText} aria-hidden="true">망원정<span style={hdr.brandX}>x</span></span>
        </a>
        <nav style={hdr.nav}>
          {items.map((it) =>
          <a key={it.id} href={"#" + it.id} onClick={(e) => {e.preventDefault();onNav(it.id);}}
          className="nav-link"
          style={{ ...hdr.navItem, ...(active === it.id ? hdr.navActive : {}) }}>
              {it.label}
            </a>
          )}
        </nav>
        <button
          className="mobile-menu-toggle"
          onClick={() => setMenuOpen(true)}
          aria-label="메뉴 열기"
          aria-expanded={menuOpen}
          style={hdr.hamburger}>
          <span style={hdr.hamburgerBar}></span>
          <span style={hdr.hamburgerBar}></span>
          <span style={hdr.hamburgerBar}></span>
        </button>
        <a href="#apply" onClick={(e) => {e.preventDefault();onNav("apply");}} className="btn-pop-lavender" style={hdr.cta}>Phase1. 신청 →</a>
      </header>
      {menuOpen && (
        <div role="dialog" aria-modal="true" aria-label="모바일 메뉴" style={hdr.drawer}>
          <button onClick={() => setMenuOpen(false)} aria-label="메뉴 닫기" style={hdr.drawerClose}>×</button>
          <nav style={hdr.drawerNav}>
            {items.map((it) =>
              <a key={it.id} href={"#" + it.id}
                onClick={(e) => {e.preventDefault();handleMobileNav(it.id);}}
                className="nav-link"
                style={{ ...hdr.drawerNavItem, ...(active === it.id ? hdr.drawerNavActive : {}) }}>
                {it.label}
              </a>
            )}
          </nav>
          <a href="#apply"
            onClick={(e) => {e.preventDefault();handleMobileNav("apply");}}
            className="btn-pop-lavender"
            style={hdr.drawerCta}>Phase1. 신청 →</a>
        </div>
      )}
    </React.Fragment>);

}
const hdr = {
  bar: { position: "sticky", top: 0, zIndex: 30, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 32px", background: "rgba(250,250,247,0.85)", backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)", borderBottom: "1.5px solid transparent", transition: "border-bottom-color 200ms var(--ease)" },
  brand: { display: "flex", alignItems: "center", gap: 10, textDecoration: "none", color: "var(--ink)" },
  brandIcon: { width: 32, height: 32, objectFit: "contain" },
  brandText: { fontWeight: 800, fontSize: 16, letterSpacing: "-0.01em" },
  brandX: { fontFamily: "var(--font-display)", fontStyle: "italic", padding: "0 2px" },
  nav: { display: "flex", gap: 32 },
  navItem: { fontSize: 15, fontWeight: 600, color: "var(--ink-2)", textDecoration: "none", padding: "6px 0", transition: "color 200ms", borderBottom: "2px solid transparent" },
  navActive: { color: "var(--ink)", borderBottomColor: "var(--ink)" },
  cta: { background: "var(--ink)", color: "var(--paper)", textDecoration: "none", fontWeight: 700, fontSize: 14, padding: "10px 18px", borderRadius: 8, border: "1.5px solid var(--ink)", boxShadow: "4px 4px 0 var(--lavender-deep)", transition: "transform 200ms var(--ease), box-shadow 200ms var(--ease)" },
  hamburger: { display: "none", width: 44, height: 44, padding: 0, background: "transparent", border: "0", cursor: "pointer", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 5 },
  hamburgerBar: { width: 22, height: 2.5, background: "var(--ink)", display: "block" },
  drawer: { position: "fixed", inset: 0, zIndex: 40, background: "var(--paper)", padding: "80px 32px 32px", display: "flex", flexDirection: "column", gap: 8, overflowY: "auto" },
  drawerClose: { position: "absolute", top: 16, right: 24, width: 44, height: 44, background: "transparent", border: "0", fontSize: 36, fontWeight: 300, lineHeight: 1, cursor: "pointer", color: "var(--ink)", padding: 0 },
  drawerNav: { display: "flex", flexDirection: "column", gap: 0, marginTop: 8, borderTop: "1.5px solid var(--ink)" },
  drawerNavItem: { fontSize: 28, fontWeight: 800, letterSpacing: "-0.02em", color: "var(--ink)", textDecoration: "none", padding: "20px 0", borderBottom: "1.5px solid var(--ink)" },
  drawerNavActive: { background: "var(--butter-soft)", paddingLeft: 12, paddingRight: 12, marginLeft: -12, marginRight: -12 },
  drawerCta: { marginTop: 24, background: "var(--ink)", color: "var(--paper)", textDecoration: "none", fontWeight: 800, fontSize: 18, padding: "18px 24px", borderRadius: 8, border: "1.5px solid var(--ink)", boxShadow: "4px 4px 0 var(--lavender-deep)", textAlign: "center", alignSelf: "stretch" }
};

// =============== Hero ===============
function Hero({ onNav, accent }) {
  return (
    <section id="home" style={hero.wrap} data-screen-label="01 Hero">
      <div style={hero.bgGradient}></div>

      <div style={{ ...hero.inner, opacity: "1" }}>
        <div style={hero.brandLock} aria-label="망원정x 페미니스트 정치학교">
          <img src="assets/logo_pictogram.png" alt="" style={hero.brandLockIcon} />
          <span style={hero.brandLockText}>망원정<span style={hero.x}>x</span> 페미니스트 정치학교</span>
        </div>
        <div style={hero.eyebrow}>2026 — Phase1. 모집 · 6월 23일 개강</div>
        <h1 style={hero.title}>
          응원봉을 쥔 손이<br />
          의사봉을 쥘 때까지
        </h1>
        <p style={hero.lead}>
          <strong>망원정<span style={hero.x}>x</span> 페미니스트 정치학교</strong>는 한국에서 민주주의 위기 극복과 제도 정치를 고민하는 다양한 분야의 페미니스트 시민과 활동가를 위한 6개월 정치 교육 프로그램입니다. 의제에서 시스템으로, 운동에서 정치로 — 그 다음 한 걸음을 함께 만듭니다.
        </p>
        <div style={hero.ctaRow}>
          <a href="#apply" onClick={(e) => {e.preventDefault();onNav("apply");}} className="btn-pop-lavender" style={hero.ctaPrimary}>Phase1. 신청하기 →</a>
          <a href="#curriculum" onClick={(e) => {e.preventDefault();onNav("curriculum");}} className="btn-pop-lavender" style={hero.ctaPrimary}>커리큘럼 보기</a>
        </div>
        <div style={hero.metaRow}>
          <div style={hero.metaCell}>
            <div style={hero.metaLabel}>기간</div>
            <div style={hero.metaValue}>Phase1. 2026.6-8<br />Phase2. 2026.10-12</div>
          </div>
          <div style={hero.metaCell}>
            <div style={hero.metaLabel}>모집인원</div>
            <div style={hero.metaValue}>Phase1. 30명<br />Phase2. 15명</div>
          </div>
          <div style={{ ...hero.metaCell, borderRight: "0" }}>
            <div style={hero.metaLabel}>구성</div>
            <div style={hero.metaValue}>Phase1. 온라인(zoom)<br />Phase2. 오프라인</div>
          </div>
        </div>
      </div>
    </section>);

}
const hero = {
  wrap: { position: "relative", padding: "32px 32px 96px", borderBottom: "1.5px solid var(--ink)", overflow: "hidden" },
  bgGradient: { position: "absolute", inset: 0, background: "var(--brand-gradient)", opacity: 0.85, zIndex: 0 },
  brandLock: { display: "flex", alignItems: "center", gap: 16, alignSelf: "flex-start", marginBottom: 12 },
  brandLockIcon: { height: 56, width: "auto", display: "block" },
  brandLockText: { fontSize: 48, fontWeight: 800, letterSpacing: "-0.02em", color: "var(--ink)", lineHeight: 1 },
  inner: { position: "relative", zIndex: 2, maxWidth: 1200, margin: "0 auto", display: "flex", flexDirection: "column", gap: 28 },
  eyebrow: { fontSize: 13, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink)", display: "inline-block", alignSelf: "flex-start" },
  title: { fontWeight: 800, fontSize: "clamp(48px, 7vw, 96px)", lineHeight: 1.02, letterSpacing: "-0.03em", margin: 0, maxWidth: 980, textWrap: "balance", wordBreak: "keep-all" },
  titleAccent: { color: "var(--ink)", padding: "0 8px", boxDecorationBreak: "clone", WebkitBoxDecorationBreak: "clone" },
  lead: { fontSize: 18, lineHeight: 1.65, color: "var(--ink)", maxWidth: 680, margin: "8px 0 0", textWrap: "pretty" },
  x: { fontFamily: "var(--font-display)", fontStyle: "italic", padding: "0 1px" },
  ctaRow: { display: "flex", gap: 12, marginTop: 8, flexWrap: "wrap" },
  ctaPrimary: { background: "var(--ink)", color: "var(--paper)", textDecoration: "none", fontWeight: 700, fontSize: 16, padding: "16px 28px", borderRadius: 8, border: "1.5px solid var(--ink)", boxShadow: "4px 4px 0 var(--lavender-deep)" },
  metaRow: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, marginTop: 32, background: "var(--paper)", border: "1.5px solid var(--ink)" },
  metaCell: { padding: "20px 24px", borderRight: "1.5px solid var(--ink)", display: "flex", flexDirection: "column", gap: 4 },
  metaLabel: { fontSize: 12, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-2)" },
  metaValue: { fontSize: 18, fontWeight: 800, letterSpacing: "-0.01em" }
};

window.Header = Header;
window.Hero = Hero;