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

// ============= Curriculum =============
const PHASE1_WEEKS = [
  { w: "1주차", d: "2026.06.23 (화)", t: "오리엔테이션", topic: "자기소개·비전스테이트먼트 발표, 그라운드룰 세팅, 페미니스트 정치학교의 목표·의의·일정 공지, Q&A 및 과제 안내" },
  { w: "2주차", d: "2026.06.30 (화)", t: "1강. 〈여성 없는 민주주의〉 발제 및 토론", topic: "각 장별 한국 상황에 대한 조사 포함 후 심화토론 주제 도출" },
  { w: "3주차", d: "2026.07.07 (화)", t: "2강. 페미니스트 정치의 현주소와 과제", topic: "토론 주제: '결정적 순간'에 어떻게 했어야 하는가" },
  { w: "4주차", d: "2026.07.14 (화)", t: "3강. '여성 정책'이란 무엇인가", topic: "토론 주제: '이것도 여성 정책이 될 수 있다고?' (기후·안보 등 확장 의제)" },
  { w: "5주차", d: "2026.07.21 (화)", t: "4강. 국회 입법 프로세스의 이론과 실제", topic: "21대 국회 중대재해처벌법, 종합부동산세, 차별금지법을 중심으로" },
  { w: "6주차", d: "2026.07.28 (화)", t: "5강. 정당이란 무엇인가", topic: "각 당의 여성 리더십 양성 정책 비교 / 모의 정당 활동" },
  { w: "7주차", d: "2026.08.04 (화)", t: "6강. 선거제도개혁의 A to Z", topic: "선거제도개혁 토론" },
  { w: "8주차", d: "2026.08.11 (화)", t: "7강. 선거는 실전이다", topic: "모의 총선의 각 당 전략 수립 및 공약 작성" },
  { w: "9주차", d: "2026.08.22 (토)", t: "오프라인 수료식 및 네트워킹 파티", topic: "최종 유세 및 표결, 8주간의 과정 및 성과 회고" },
];
const PHASE2_WEEKS = [
  { w: "1주차", d: "2026.10.09 — 10.11", t: "2박 3일 집중 워크샵", topic: "페미니스트 정치의 서사와 나의 서사가 만나는 지점을 발견하고 동료들과 관계를 시작하는 시간" },
  { w: "2주차", d: "2026.10.17 (토)", t: "세션 1. 합평 및 토론", topic: "글·말 합평과 그룹 토론" },
  { w: "3주차", d: "2026.10.24 (토)", t: "세션 2. 합평 및 토론", topic: "글·말 합평과 그룹 토론" },
  { w: "4주차", d: "2026.10.31 (토)", t: "세션 3. 합평 및 토론", topic: "글·말 합평과 그룹 토론" },
  { w: "5주차", d: "2026.11.07 (토)", t: "세션 4. 스피치 워크샵", topic: "페미니스트 정치인의 스피치 훈련" },
  { w: "6주차", d: "2026.11.14 (토)", t: "세션 5. 합평 및 토론", topic: "글·말 합평과 그룹 토론" },
  { w: "7주차", d: "2026.11.21 (토)", t: "세션 6. 합평 및 토론", topic: "글·말 합평과 그룹 토론" },
  { w: "8주차", d: "2026.11.28 (토)", t: "최종 발표 준비", topic: "수료 발표 합평 및 리허설" },
  { w: "9주차", d: "2026.12 (예정)", t: "수료식", topic: "최종 발표 및 수료증 수여, 네트워킹" },
];

function Curriculum({ accent }) {
  const [phase, setPhase] = useState(1);
  const list = phase === 1 ? PHASE1_WEEKS : PHASE2_WEEKS;
  const meta = phase === 1
    ? { title: "Phase 1. 온라인 코스 — 이론편", sub: "9주 / 매주 화요일 19:30 — 22:00 (150분)", loc: "온라인 (Zoom)", goal: "페미니스트 정치학교가 지향하는 페미니스트 정치의 개념을 확립하고, 구체적인 비전과 실천을 탐색하며, 이를 위한 기본지식을 습득합니다.", target: 30, fee: "30만원" }
    : { title: "Phase 2. 오프라인 코스 — 실전편", sub: "9주 / 매주 토요일 13:00 — 18:00 (300분)", loc: "오프라인 (서울)", goal: "예비 페미니스트 정치인으로서 말과 글을 집중 단련합니다. 토론 근육과 합평 근육을 함께 키웁니다.", target: 15, fee: "30만원" };

  return (
    <section id="curriculum" style={cu.wrap} data-screen-label="03 Curriculum">
      <div style={cu.head}>
        <div style={cu.eyebrow}>커리큘럼 · CURRICULUM</div>
        <h2 style={cu.title}>
          6개월,<br />
          <span style={{...cu.titleAccent, background: accent}}>두 단계</span>의 정치 훈련.
        </h2>
        <p style={cu.lead}>
          이론에서 실전까지. Phase 1에서 페미니스트 정치의 개념과 한국 정치 시스템을 함께 공부하고,
          Phase 2에서는 예비 페미니스트 정치인으로서 말과 글을 집중적으로 단련합니다.
        </p>
      </div>

      <div style={cu.tabs} role="tablist">
        <button onClick={() => setPhase(1)} className={"tab-btn" + (phase === 1 ? " tab-btn-active" : "")} style={{...cu.tab, ...(phase === 1 ? cu.tabActive : {})}}>
          <span style={cu.tabNum}>01</span>
          <span style={cu.tabLabel}>Phase 1 · 이론편 (온라인)</span>
        </button>
        <button onClick={() => setPhase(2)} className={"tab-btn" + (phase === 2 ? " tab-btn-active" : "")} style={{...cu.tab, ...(phase === 2 ? cu.tabActive : {})}}>
          <span style={cu.tabNum}>02</span>
          <span style={cu.tabLabel}>Phase 2 · 실전편 (오프라인)</span>
        </button>
      </div>

      <div style={cu.metaBlock}>
        <div style={cu.metaTitle}>{meta.title}</div>
        <div style={cu.metaSub}>{meta.sub}</div>
        <div style={cu.metaInfoRow}>
          <div style={cu.metaInfoCell}>
            <div style={cu.metaLabel}>형식</div>
            <div style={cu.metaValue}>{meta.loc}</div>
          </div>
          <div style={cu.metaInfoCell}>
            <div style={cu.metaLabel}>모집 인원</div>
            <div style={cu.metaValue}>{meta.target}명</div>
          </div>
          <div style={{...cu.metaInfoCell, borderRight: "0"}}>
            <div style={cu.metaLabel}>수강료</div>
            <div style={cu.metaValue}>{meta.fee}</div>
          </div>
        </div>
        <div style={cu.goal}>
          <div style={cu.goalLabel}>학습 목표</div>
          <p style={cu.goalText}>{meta.goal}</p>
        </div>
      </div>

      <ul style={cu.list}>
        {list.map((it) => (
          <li key={it.w} style={cu.item}>
            <div style={cu.itemLeft}>
              <span style={cu.itemWeek}>{it.w}</span>
              <span style={cu.itemDate}>{it.d}</span>
            </div>
            <div style={cu.itemBody}>
              <div style={cu.itemTitle}>{it.t}</div>
              <div style={cu.itemTopic}>토론 / 활동 — {it.topic}</div>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}

const cu = {
  wrap: { background: "var(--paper-warm)", padding: "120px 32px", borderBottom: "1.5px solid var(--ink)" },
  head: { maxWidth: 1200, margin: "0 auto 48px", display: "flex", flexDirection: "column", gap: 12 },
  eyebrow: { fontSize: 13, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-2)" },
  title: { fontSize: "clamp(40px, 5.5vw, 72px)", fontWeight: 800, lineHeight: 1.02, letterSpacing: "-0.025em", margin: "8px 0" },
  titleAccent: { color: "var(--ink)", padding: "0 12px", boxDecorationBreak: "clone", WebkitBoxDecorationBreak: "clone", border: "1.5px solid var(--ink)" },
  lead: { fontSize: 17, lineHeight: 1.7, color: "var(--ink-2)", margin: "8px 0 0", maxWidth: 720 },

  tabs: { maxWidth: 1200, margin: "0 auto 32px", display: "grid", gridTemplateColumns: "1fr 1fr", border: "1.5px solid var(--ink)", background: "var(--paper)" },
  tab: { display: "flex", alignItems: "center", gap: 16, padding: "20px 28px", border: "0", borderRight: "1.5px solid var(--ink)", background: "transparent", cursor: "pointer", fontFamily: "inherit", textAlign: "left", color: "var(--ink-2)", transition: "background 200ms" },
  tabActive: { background: "var(--ink)", color: "var(--paper)" },
  tabNum: { fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1 },
  tabLabel: { fontSize: 16, fontWeight: 800, letterSpacing: "-0.01em" },

  metaBlock: { maxWidth: 1200, margin: "0 auto 24px", border: "1.5px solid var(--ink)", background: "var(--paper)" },
  metaTitle: { fontSize: 28, fontWeight: 800, letterSpacing: "-0.02em", padding: "24px 28px 4px" },
  metaSub: { fontSize: 15, color: "var(--ink-2)", padding: "0 28px 24px", borderBottom: "1.5px solid var(--ink)" },
  metaInfoRow: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", borderBottom: "1.5px solid var(--ink)" },
  metaInfoCell: { padding: "16px 28px", borderRight: "1.5px solid var(--ink)" },
  metaLabel: { fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-2)", marginBottom: 4 },
  metaValue: { fontSize: 17, fontWeight: 800 },
  goal: { padding: "20px 28px", display: "grid", gridTemplateColumns: "120px 1fr", gap: 20, alignItems: "start" },
  goalLabel: { fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-2)", paddingTop: 4 },
  goalText: { fontSize: 16, lineHeight: 1.65, color: "var(--ink)", margin: 0 },

  list: { listStyle: "none", padding: 0, margin: "0 auto", maxWidth: 1200, border: "1.5px solid var(--ink)", borderBottom: "0", background: "var(--paper)" },
  item: { display: "grid", gridTemplateColumns: "200px 1fr", padding: "24px 28px", borderBottom: "1.5px solid var(--ink)", gap: 24, alignItems: "start", transition: "background 200ms" },
  itemLeft: { display: "flex", flexDirection: "column", gap: 4 },
  itemWeek: { fontSize: 18, fontWeight: 800, letterSpacing: "-0.01em" },
  itemDate: { fontSize: 13, fontWeight: 600, color: "var(--ink-2)" },
  itemBody: { display: "flex", flexDirection: "column", gap: 6 },
  itemTitle: { fontSize: 19, fontWeight: 800, letterSpacing: "-0.01em", lineHeight: 1.35 },
  itemTopic: { fontSize: 14, lineHeight: 1.55, color: "var(--ink-2)" },
};

// ============= Apply =============
function Apply({ accent }) {
  return (
    <section id="apply" style={ap.wrap} data-screen-label="04 Apply">
      <div style={ap.bg}></div>
      <div style={ap.inner}>
        <div style={ap.eyebrow}>수강신청 · APPLY</div>
        <h2 style={ap.title}>
          Phase.1와 함께,<br />
          다음 정치를 시작합니다.
        </h2>

        <div style={ap.scheduleGrid}>
          <div style={{...ap.scheduleItem, background: "var(--lavender)"}}>
            <div style={ap.scheduleDate}>05.15</div>
            <div style={ap.scheduleLabel}>모집 시작</div>
          </div>
          <div className="apply-arrow" style={ap.arrow}>→</div>
          <div style={{...ap.scheduleItem, background: "var(--mint)"}}>
            <div style={ap.scheduleDate}>06.05</div>
            <div style={ap.scheduleLabel}>지원 마감</div>
          </div>
          <div className="apply-arrow" style={ap.arrow}>→</div>
          <div style={{...ap.scheduleItem, background: "var(--butter)"}}>
            <div style={ap.scheduleDate}>06.15</div>
            <div style={ap.scheduleLabel}>합격자 발표</div>
          </div>
          <div className="apply-arrow" style={ap.arrow}>→</div>
          <div style={{...ap.scheduleItem, background: "var(--ink)", color: "var(--paper)"}}>
            <div style={ap.scheduleDate}>06.23</div>
            <div style={{...ap.scheduleLabel, color: "var(--paper)"}}>Phase.1 개강</div>
          </div>
        </div>

        <div style={ap.detailGrid}>
          <div style={ap.detailCard}>
            <div style={ap.detailHead}>모집 자격</div>
            <ul style={ap.detailList}>
              <li>한국의 민주주의·제도 정치를 고민하는 페미니스트 시민과 활동가</li>
              <li>여성·기후위기·AI를 둘러싼 정치 의제에 관심이 있는 분</li>
              <li>9주차 전체 일정에 성실하게 참여 가능한 분 (주차별 출석 80% 이상)</li>
              <li>분임 발제·그룹 토론·과제 수행에 적극 참여하실 분</li>
            </ul>
          </div>
          <div style={ap.detailCard}>
            <div style={ap.detailHead}>모집 규모 · 수강료</div>
            <ul style={ap.detailList}>
              <li><strong>Phase 1</strong> · 30명 모집 · <strong>30만원</strong></li>
              <li><strong>Phase 2</strong> · 15명 모집 · <strong>30만원</strong></li>
              <li>Phase 1 수료자에 한해 Phase 2 지원 가능</li>
              <li>장학 / 재정 지원이 필요하신 분은 별도 문의 바랍니다</li>
            </ul>
          </div>
          <div style={ap.detailCard}>
            <div style={ap.detailHead}>전형 절차</div>
            <ol style={ap.detailListOl}>
              <li>지원서 제출 (온라인 폼)</li>
              <li>서류 검토 및 짧은 인터뷰</li>
              <li>합격자 발표 및 등록</li>
              <li>오리엔테이션 · 1주차 시작</li>
            </ol>
          </div>
        </div>

        <div style={{...ap.ctaBox, background: accent}}>
          <div style={ap.ctaInner}>
            <div style={ap.ctaText}>
              <div style={ap.ctaEyebrow}>지금 지원하기</div>
              <div style={ap.ctaHead}>Phase.1 신청 링크</div>
              <div style={ap.ctaBody}>아래 버튼을 통해 지원서 폼으로 이동합니다. 모집 시작 전에는 알림 신청이 가능합니다.</div>
            </div>
            <div style={ap.ctaButtons}>
              <a href="https://mangwonjeonx.org" target="_blank" rel="noopener" className="btn-solid-ink" style={ap.ctaPrimary}>지원서 작성 →</a>
              <a href="mailto:contact@mangwonjeonx.org?subject=Phase.1 모집 알림 신청" className="btn-ghost" style={ap.ctaGhost}>알림 신청</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
const ap = {
  wrap: { position: "relative", padding: "120px 32px", borderBottom: "1.5px solid var(--ink)", background: "var(--paper)", overflow: "hidden" },
  bg: { position: "absolute", inset: 0, background: "var(--brand-gradient)", opacity: 0.35 },
  inner: { position: "relative", zIndex: 1, maxWidth: 1200, margin: "0 auto", display: "flex", flexDirection: "column", gap: 48 },
  eyebrow: { fontSize: 13, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-2)" },
  title: { fontSize: "clamp(40px, 5.5vw, 72px)", fontWeight: 800, lineHeight: 1.02, letterSpacing: "-0.025em", margin: 0 },

  scheduleGrid: { display: "grid", gridTemplateColumns: "1fr auto 1fr auto 1fr auto 1fr", alignItems: "center", gap: 12 },
  scheduleItem: { padding: "24px 20px", border: "1.5px solid var(--ink)", borderRadius: 8, display: "flex", flexDirection: "column", gap: 6, alignItems: "flex-start", boxShadow: "4px 4px 0 var(--ink)" },
  scheduleDate: { fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1 },
  scheduleLabel: { fontSize: 14, fontWeight: 700, color: "var(--ink)" },
  arrow: { fontSize: 24, fontWeight: 800, color: "var(--ink)" },

  detailGrid: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 },
  detailCard: { background: "var(--paper)", border: "1.5px solid var(--ink)", padding: 28, display: "flex", flexDirection: "column", gap: 16, borderRadius: 8 },
  detailHead: { fontSize: 18, fontWeight: 800, letterSpacing: "-0.01em", paddingBottom: 12, borderBottom: "1.5px solid var(--ink)" },
  detailList: { margin: 0, paddingLeft: 18, display: "flex", flexDirection: "column", gap: 10, fontSize: 15, lineHeight: 1.55, color: "var(--ink-2)" },
  detailListOl: { margin: 0, paddingLeft: 18, display: "flex", flexDirection: "column", gap: 10, fontSize: 15, lineHeight: 1.55, color: "var(--ink-2)" },

  ctaBox: { border: "1.5px solid var(--ink)", borderRadius: 8, boxShadow: "8px 8px 0 var(--ink)" },
  ctaInner: { display: "grid", gridTemplateColumns: "1fr auto", gap: 32, padding: "36px 40px", alignItems: "center" },
  ctaText: { display: "flex", flexDirection: "column", gap: 6 },
  ctaEyebrow: { fontSize: 12, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink)" },
  ctaHead: { fontSize: 32, fontWeight: 800, letterSpacing: "-0.02em" },
  ctaBody: { fontSize: 15, lineHeight: 1.55, color: "var(--ink)", maxWidth: 480, marginTop: 4 },
  ctaButtons: { display: "flex", gap: 12, flexWrap: "wrap" },
  ctaPrimary: { background: "var(--ink)", color: "var(--paper)", textDecoration: "none", fontWeight: 800, fontSize: 15, padding: "14px 24px", borderRadius: 8, border: "1.5px solid var(--ink)" },
  ctaGhost: { background: "transparent", color: "var(--ink)", textDecoration: "none", fontWeight: 800, fontSize: 15, padding: "14px 24px", border: "1.5px solid var(--ink)", borderRadius: 8 },
};

// ============= Contact =============
function Contact() {
  return (
    <section id="contact" style={cn.wrap} data-screen-label="05 Contact">
      <div style={cn.inner}>
        <div style={cn.eyebrow}>문의 · CONTACT</div>
        <h2 style={cn.title}>
          궁금한 점이 있다면<br />
          언제든 메일 주세요.
        </h2>
        <div style={cn.cards}>
          <a href="mailto:contact@mangwonjeonx.org" className="card-pop-ink" style={{...cn.card, background: "var(--mint)"}}>
            <div style={cn.cardLabel}>이메일</div>
            <div style={cn.cardValue}>contact@mangwonjeonx.org</div>
            <div style={cn.cardHint}>수강 문의 · 미디어 · 협력 제안</div>
          </a>
          <a href="https://mangwonjeonx.org" target="_blank" rel="noopener" className="card-pop-ink" style={{...cn.card, background: "var(--lavender)"}}>
            <div style={cn.cardLabel}>웹사이트</div>
            <div style={cn.cardValue}>mangwonjeonx.org</div>
            <div style={cn.cardHint}>망원정<span style={{fontFamily: "var(--font-sans)", fontStyle: "normal", fontWeight: 800, textTransform: "lowercase"}}>x</span> 본 사이트로 이동</div>
          </a>
        </div>
      </div>
    </section>
  );
}
const cn = {
  wrap: { background: "var(--paper)", padding: "120px 32px", borderBottom: "1.5px solid var(--ink)" },
  inner: { maxWidth: 1200, margin: "0 auto", display: "flex", flexDirection: "column", gap: 32 },
  eyebrow: { fontSize: 13, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-2)" },
  title: { fontSize: "clamp(40px, 5.5vw, 72px)", fontWeight: 800, lineHeight: 1.02, letterSpacing: "-0.025em", margin: 0 },
  cards: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 16 },
  card: { display: "flex", flexDirection: "column", gap: 8, padding: "32px 36px", border: "1.5px solid var(--ink)", borderRadius: 8, textDecoration: "none", color: "var(--ink)", boxShadow: "4px 4px 0 var(--ink)", transition: "transform 200ms var(--ease), box-shadow 200ms var(--ease)" },
  cardLabel: { fontSize: 12, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-2)" },
  cardValue: { fontSize: 28, fontWeight: 800, letterSpacing: "-0.02em", marginTop: 4 },
  cardHint: { fontSize: 14, color: "var(--ink-2)", marginTop: 8 },
};

// ============= Footer =============
function Footer() {
  return (
    <footer style={ft.wrap}>
      <div style={ft.pattern}></div>
      <div style={ft.inner}>
        <div style={ft.col}>
          <div style={ft.brand}>망원정<span style={ft.x}>x</span><br/>페미니스트 정치학교</div>
          <div style={ft.tagline}>"응원봉을 쥔 손이<br />의사봉을 쥘 때까지"</div>
        </div>
        <div style={ft.col}>
          <div style={ft.colHead}>학교</div>
          <a className="nav-link" style={ft.link} href="#about">소개</a>
          <a className="nav-link" style={ft.link} href="#curriculum">커리큘럼</a>
          <a className="nav-link" style={ft.link} href="#apply">수강신청</a>
          <a className="nav-link" style={ft.link} href="#contact">문의</a>
        </div>
        <div style={ft.col}>
          <div style={ft.colHead}>연락</div>
          <a className="nav-link" style={ft.link} href="mailto:contact@mangwonjeonx.org">contact@mangwonjeonx.org</a>
          <a className="nav-link" style={ft.link} href="https://mangwonjeonx.org" target="_blank" rel="noopener">mangwonjeonx.org</a>
        </div>
      </div>
      <div style={ft.copy}>© 2026 망원정<span style={ft.x}>x</span> 페미니스트 정치학교 · Phase.1</div>
    </footer>
  );
}
const ft = {
  wrap: { background: "var(--ink)", color: "var(--paper)" },
  pattern: { height: 120, background: "url('assets/pattern_black.png') center / cover", borderBottom: "1.5px solid var(--paper)" },
  inner: { display: "grid", gridTemplateColumns: "1.6fr 1fr 1.4fr", gap: 48, padding: "64px 32px 32px", maxWidth: 1200, margin: "0 auto" },
  col: { display: "flex", flexDirection: "column", gap: 12 },
  brand: { fontSize: 22, fontWeight: 800, lineHeight: 1.2, letterSpacing: "-0.01em" },
  x: { fontFamily: "var(--font-sans)", fontStyle: "normal", fontWeight: 800, padding: "0 1px", textTransform: "lowercase" },
  tagline: { fontSize: 14, color: "var(--ink-3)", lineHeight: 1.5, fontStyle: "italic", marginTop: 8 },
  colHead: { fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 8 },
  link: { color: "var(--paper)", textDecoration: "none", fontSize: 14, fontWeight: 500 },
  copy: { borderTop: "1px solid var(--hairline-on-ink)", padding: "20px 32px", textAlign: "center", fontSize: 12, color: "var(--ink-3)" },
};

window.Curriculum = Curriculum;
window.Apply = Apply;
window.Contact = Contact;
window.Footer = Footer;