// About (김대중입니다) — 인물 소개 섹션
// 곡성 출신 → 교사·교장 → 19대 교육감 → 통합특별시 도전
// 좌: 인물·약력 / 우: 한 마디 + 핵심 가치 3개 + 타임라인

const ABOUT_OFFICIAL_REVIEW = ((typeof window !== "undefined" && window.__KDJ_CONFIG__) || {}).officialReview === true;

function About({ showPhoto }) {
  // 사실 기반 약력 (캠페인 공개 자료 기준)
  const timeline = ABOUT_OFFICIAL_REVIEW
    ? [
        { y: "학력", t: "전남대학교 철학과 졸업", k: "목포대학교 대학원 국어국문학과 박사과정 수료" },
        { y: "1984", t: "목포정명여자고등학교 교사", k: "교단에서 시작한 교육자" },
        { y: "1995", t: "목포시의회 의원", k: "제5·6·7대 목포시의회 의원" },
        { y: "2008.06", t: "목포시청소년수련관 관장", k: "지역사회와 청소년 교육 현장" },
        { y: "2011.12", t: "전라남도교육청 비서실장", k: "교육행정 경험" },
        { y: "2019", t: "목포제일중학교 교사", k: "다시 교단으로" },
        { y: "2022.07", t: "제19대 전라남도교육감", k: "전남교육 기본방향과 공약 추진" },
      ]
    : [
        { y: "1959", t: "전남 곡성 출생", k: "곡성에서 시작된 길" },
        { y: "1981", t: "초등 교사로 교단 시작", k: "현장에서 출발한 교육자" },
        { y: "2010s", t: "곡성중앙초·곡성초 등 교장", k: "학교 현장의 변화" },
        { y: "2022", t: "제19대 전남교육감 취임", k: "학생교육수당·미래교육 박람회" },
        { y: "2026", t: "전남광주통합특별시 교육감 도전", k: "K-교육특별시" },
      ];

  const values = ABOUT_OFFICIAL_REVIEW
    ? [
        {
          n: "01", k: "現場", kr: "현장", en: "ON THE GROUND",
          title: "교단에서 시작한 교육자",
          desc: "목포정명여고 교사로 시작해 다시 목포제일중 교사로 돌아온 현장 경험을 지녔습니다.",
        },
        {
          n: "02", k: "地域", kr: "지역", en: "LOCAL COMMUNITY",
          title: "지역사회와 교육행정을 경험했습니다",
          desc: "목포시의회, 청소년수련관, 전남교육청 비서실장을 거치며 지역과 행정을 함께 경험했습니다.",
        },
        {
          n: "03", k: "責任", kr: "책임", en: "RESPONSIBILITY",
          title: "전남교육의 방향을 책임 있게 제시합니다",
          desc: "공부하는 학교, 모든 학생의 꿈, 마을과 함께하는 교육 등 핵심 공약 방향을 전합니다.",
        },
      ]
    : [
        {
          n: "01", k: "現場", kr: "현장", en: "ON THE GROUND",
          title: "현장이 출발점입니다",
          desc: "교실의 질문, 학부모의 한숨, 교사의 고민. 정책은 책상이 아니라 현장에서 시작됩니다.",
        },
        {
          n: "02", k: "責任", kr: "책임", en: "RESPONSIBILITY",
          title: "한 명도 놓치지 않는 책임교육",
          desc: "기초학력에서 진학·진로까지 — 학생의 생애를 책임지는 교육을 약속합니다.",
        },
        {
          n: "03", k: "誠實", kr: "성실", en: "INTEGRITY",
          title: "약속은 말이 아니라 실천으로",
          desc: "학생교육수당, 0원 버스, 글로컬 미래교육박람회 — 검증된 실행력으로 약속을 지킵니다.",
        },
      ];

  return (
    <section className="about-section" id="about">
      <div className="container">
        <div className="about-grid">
          {/* LEFT — 인물 / 약력 / 사진 */}
          <div className="about-left">
            <div className="sec-eyebrow">
              <span className="sec-eyebrow-line" />
              <span>ABOUT · 김대중입니다</span>
            </div>
            <h2 className="sec-title">
              {ABOUT_OFFICIAL_REVIEW ? "교단에서 시작해," : "곡성에서 시작된 길,"}<br/>
              <span className="title-em">{ABOUT_OFFICIAL_REVIEW ? "전남교육을 이끌기까지." : "전남광주의 새로운 100년."}</span>
            </h2>

            {/* 인물 카드 */}
            <div className="about-person">
              <div className="about-person-photo" aria-hidden="true">
                {showPhoto ? (
                  <div className="about-person-photo-inner">
                    <span className="about-person-stamp">金</span>
                    <span className="about-person-stamp-sub">大中</span>
                  </div>
                ) : (
                  <div className="about-person-photo-fallback">
                    <span>金</span>
                    <span>大中</span>
                  </div>
                )}
              </div>
              <div className="about-person-meta">
                <div className="about-person-eyebrow">{ABOUT_OFFICIAL_REVIEW ? "PROFILE · 김대중" : "CANDIDATE · 예비후보"}</div>
                <div className="about-person-name">김대중 <em>金大中</em></div>
                <div className="about-person-role">제19대 전라남도 교육감</div>
                <div className="about-person-tags">
                  {ABOUT_OFFICIAL_REVIEW ? (
                    <>
                      <span>목포정명여고 교사</span>
                      <span>목포시의회 의원</span>
                      <span>전남교육감</span>
                    </>
                  ) : (
                    <>
                      <span>곡성 출신</span>
                      <span>40년 교직</span>
                      <span>현장 교육자</span>
                    </>
                  )}
                </div>
              </div>
            </div>

            {/* 한자 인장 + 강조문 */}
            <blockquote className="about-quote">
              <div className="about-quote-mark">"</div>
              <p>가까운 곳부터 기뻐하게 하면<br/>먼 곳에서도 사람들이 찾아옵니다.</p>
              <footer>— <em>近者悅 遠者來 (근자열 원자래)</em></footer>
            </blockquote>
          </div>

          {/* RIGHT — 핵심 가치 3 + 타임라인 */}
          <div className="about-right">
            <div className="about-values">
              {values.map((v) => (
                <article key={v.n} className="about-val">
                  <div className="about-val-hd">
                    <span className="about-val-num">{v.n}</span>
                    <span className="about-val-stamp" aria-hidden="true">{v.k}</span>
                  </div>
                  <div className="about-val-en">{v.en}</div>
                  <h3 className="about-val-title">{v.title}</h3>
                  <p className="about-val-desc">{v.desc}</p>
                </article>
              ))}
            </div>

            <div className="about-timeline">
              <div className="about-timeline-hd">
                <span className="about-timeline-eyebrow">TIMELINE · 발자취</span>
                <span className="about-timeline-stamp" aria-hidden="true">歷</span>
              </div>
              <ol className="about-timeline-list">
                {timeline.map((item, i) => (
                  <li key={i} className="about-timeline-item">
                    <span className="about-timeline-y">{item.y}</span>
                    <div className="about-timeline-body">
                      <div className="about-timeline-t">{item.t}</div>
                      <div className="about-timeline-k">{item.k}</div>
                    </div>
                  </li>
                ))}
              </ol>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About });