/* global React */

// =============== About: 교장 인사말 + 학교 소개 ===============
function About({ accent }) {
  return (
    <section id="about" style={ab.wrap} data-screen-label="02 About">
      {/* 교장 인사말 */}
      <div style={ab.greetingWrap} id="greeting">
        <div style={ab.greetingLeft}>
          <div style={ab.eyebrowSm}>교장 인사말 · GREETING</div>
          <div style={ab.principalCard}>
            <div style={ab.principalPhoto}>
              <img src="assets/principal.jpeg" alt="장혜영 교장" style={ab.photoImg}
                   onError={(e) => { e.currentTarget.style.display = 'none'; }} />
            </div>
            <div style={ab.principalMeta}>
              <div style={ab.principalName}>장혜영</div>
              <div style={ab.principalRole}>망원정<span style={ab.x}>x</span> 대표 · 정치학교 교장</div>
            </div>
          </div>
        </div>
        <div style={ab.greetingRight}>
          <div style={ab.eyebrow}>소개 · ABOUT</div>
          <h2 style={ab.title}>
            의제에서<br />
            <span style={{...ab.titleAccent, background: accent}}>시스템</span>으로.
          </h2>
          <p style={ab.greetingBody}>
            안녕하세요. 망원정<span style={ab.x}>x</span> 페미니스트 정치학교 교장 장혜영입니다.
          </p>
          <p style={ab.greetingPunch}>
            응원봉을 쥔 손으로 의사봉을 쥘 수 없다면<br />
            그것은 진정한 민주주의가 아니다!
          </p>
          <p style={ab.greetingPunch2}>
            만국의 페미니스트여 단결하라!
          </p>
          <p style={ab.greetingSign}>
            — <strong>장혜영</strong> 드림
          </p>
        </div>
      </div>

      {/* 학교 소개 — 'OO는?' */}
      <div style={ab.whatWrap} id="what">
        <div style={ab.whatHead}>
          <div style={ab.eyebrowSm}>망원정<span style={ab.x}>x</span> 페미니스트 정치학교는?</div>
          <h3 style={ab.whatTitle}>
            <span style={ab.whatHighlightMint}>다양한 분야의 페미니스트 시민과 활동가</span>를 위한,<br />
            6개월 정치 교육 프로그램입니다.
          </h3>
          <p style={ab.whatLead}>
            한국에서 민주주의 위기 극복과 제도 정치를 고민하는 다양한 분야의 페미니스트 시민과 활동가를 대상으로, <strong>한국의 정치 시스템과 현실</strong>, <strong>페미니스트 정치의 현 주소와 도전 과제</strong>, <strong>여성·기후위기·AI에 관한 정치 핵심 현안</strong>에 관한 집중적 학습과 훈련의 기회를 제공합니다.
          </p>
          <p style={ab.whatLead}>
            국내외 상호 교류의 장을 마련하여 민주주의와 성평등 가치의 확산에 기여하는 다원적이고 미래지향적인 커뮤니티를 만들어갑니다.
          </p>
        </div>

        <div style={ab.programGrid}>
          {[
            ["01","강의 및 현장학습","핵심 학습 목표를 달성할 수 있는 연사를 초빙해 강의를 실시하고, 관련 현장을 방문하여 학습합니다."],
            ["02","그룹 토론","강의 진행 이후 핵심 문제의식을 팀 단위·전체 단위에서 토론하고 최종 결과를 도출합니다."],
            ["03","실습","페미니스트 정치인으로서 기본적인 소통과 정책 역량을 갖추기 위한 구체적인 실습을 진행합니다."],
            ["04","집중 워크샵","민주주의와 페미니스트 정치의 큰 흐름을 이해하고, 동료들과 페미니스트 정치의 로드맵을 구상합니다."],
            ["05","지지 그룹 네트워킹","페미니스트 정치를 고민하는 수강생을 응원하는 국내외 주체들과 공통 주제로 만나 교류합니다."],
            ["06","과제 수행","집중 워크샵을 통해 도출한 과제를 수행하고 발표하며 6개월 과정을 마무리합니다."],
          ].map(([n,t,b], i) => (
            <div key={n} style={{...ab.progRow, borderRight: i % 2 === 0 ? "1.5px solid var(--ink)" : "0", borderBottom: i < 4 ? "1.5px solid var(--ink)" : "0"}}>
              <span style={ab.progNum}>{n}</span>
              <div style={ab.progBody}>
                <div style={ab.progTitle}>{t}</div>
                <div style={ab.progDesc}>{b}</div>
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

const ab = {
  wrap: { background: "var(--paper)", padding: "120px 32px", borderBottom: "1.5px solid var(--ink)" },
  eyebrow: { fontSize: 13, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-2)", display: "inline-block", alignSelf: "flex-start" },
  eyebrowSm: { fontSize: 12, 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 8px" },
  titleAccent: { color: "var(--ink)", padding: "0 12px", boxDecorationBreak: "clone", WebkitBoxDecorationBreak: "clone", border: "1.5px solid var(--ink)" },
  x: { fontFamily: "var(--font-sans)", fontStyle: "normal", fontWeight: 800, padding: "0 1px", textTransform: "lowercase" },

  greetingWrap: { maxWidth: 1200, margin: "0 auto 120px", display: "grid", gridTemplateColumns: "320px 1fr", gap: 64, alignItems: "start" },
  greetingLeft: { display: "flex", flexDirection: "column", gap: 16, position: "sticky", top: 100 },
  principalCard: { border: "1.5px solid var(--ink)", background: "var(--paper)", boxShadow: "4px 4px 0 var(--ink)" },
  principalPhoto: { aspectRatio: "1 / 1", background: "var(--butter)", borderBottom: "1.5px solid var(--ink)", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" },
  photoImg: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
  principalMeta: { padding: "16px 18px", display: "flex", flexDirection: "column", gap: 4 },
  principalName: { fontSize: 22, fontWeight: 800, letterSpacing: "-0.01em" },
  principalRole: { fontSize: 13, fontWeight: 500, color: "var(--ink-2)" },
  greetingRight: { display: "flex", flexDirection: "column", gap: 14 },
  greetingBody: { fontSize: 18, lineHeight: 1.7, color: "var(--ink-2)", margin: "8px 0 0", textWrap: "pretty" },
  greetingPunch: { fontSize: 32, fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1.3, margin: "16px 0 0", color: "var(--ink)", borderLeft: "4px solid var(--lavender-deep)", paddingLeft: 20, textWrap: "pretty" },
  greetingPunch2: { fontSize: 28, fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1.3, margin: "12px 0 0", color: "var(--ink)", borderLeft: "4px solid var(--mint-deep)", paddingLeft: 20 },
  greetingSign: { fontSize: 17, lineHeight: 1.7, color: "var(--ink)", marginTop: 24, paddingTop: 20, borderTop: "1.5px solid var(--ink)" },

  whatWrap: { maxWidth: 1200, margin: "0 auto", display: "flex", flexDirection: "column", gap: 56 },
  whatHead: { display: "flex", flexDirection: "column", gap: 14 },
  whatTitle: { fontSize: "clamp(28px, 3.6vw, 44px)", fontWeight: 800, lineHeight: 1.25, letterSpacing: "-0.02em", margin: "8px 0 0", textWrap: "pretty" },
  whatHighlightMint: { background: "var(--mint)", padding: "0 8px", boxDecorationBreak: "clone", WebkitBoxDecorationBreak: "clone" },
  whatLead: { fontSize: 17, lineHeight: 1.75, color: "var(--ink-2)", margin: "8px 0 0", maxWidth: 900, textWrap: "pretty" },

  programGrid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1.5px solid var(--ink)", background: "var(--paper-warm)" },
  progRow: { display: "grid", gridTemplateColumns: "80px 1fr", padding: "28px 24px", gap: 20, alignItems: "start" },
  progNum: { fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 800, letterSpacing: "-0.03em", color: "var(--ink)", lineHeight: 1 },
  progBody: { display: "flex", flexDirection: "column", gap: 8 },
  progTitle: { fontSize: 20, fontWeight: 800, letterSpacing: "-0.01em" },
  progDesc: { fontSize: 15, lineHeight: 1.6, color: "var(--ink-2)" },

};

window.About = About;