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

function About({ showPhoto }) {
  // 사실 기반 약력 (캠페인 공개 자료 기준)
  const timeline = [
    { y: "1959", t: "전남 곡성 출생", k: "곡성에서 시작된 길" },
    { y: "1981", t: "초등 교사로 교단 시작", k: "현장에서 출발한 교육자" },
    { y: "2010s", t: "곡성중앙초·곡성초 등 교장", k: "학교 현장의 변화" },
    { y: "2022", t: "제19대 전남교육감 취임", k: "학생교육수당·미래교육 박람회" },
    { y: "2026", t: "전남광주통합특별시 교육감 도전", k: "K-교육특별시" },
  ];

  const values = [
    {
      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">
              곡성에서 시작된 길,<br/>
              <span className="title-em">전남광주의 새로운 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">CANDIDATE · 예비후보</div>
                <div className="about-person-name">김대중 <em>金大中</em></div>
                <div className="about-person-role">제19대 전라남도 교육감</div>
                <div className="about-person-tags">
                  <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 });