/* About section */

const PORTRAIT_ASCII = `
           .:--=====--:.
         :=+++++++++++++=:
       :=++++=---==++++++=:
      :+++=:         .=+++:
     .+++=  .:==--:.   =++=
     =+++  -+++++++++.  +++-
     +++= =+++++++++++: =++=
     +++= +++-    .=+++:++++
     +++= ++:  ░░  .++=:++++
     +++= -++:    :+++. ++++
     +++=  -++++++++=.  ++++
     +++=   :======:    ++++
     =+++.              +++-
      :++++=:       .=++++:
       :=+++++====++++++=.
         :=++++++++++++=:
           .:--=====--:.
`.trim();

const ABOUT_PARAGRAPHS = [
  "안녕하세요. 경경철 입니다.",
  "JAVA 백엔드를 기반으로 <b>에너지 관리 시스템, 스마트 플랫폼, 운영형 관리 서비스</b>까지 다양한 도메인에서 실무를 쌓아왔습니다. 단순한 기능 구현을 넘어 시스템이 실제로 운영되는 환경과 흐름을 이해하고, 운영자와 사용자 모두에게 직관적인 구조를 설계하는 데 강점이 있습니다.",
  "Spring Boot 기반 API 아키텍처 설계부터 MyBatis를 활용한 데이터 처리, React 기반 프론트엔드 구현, <b>OpenAI API 연동</b>까지 풀스택 관점으로 프로젝트를 주도해왔고, <b>PM·PL로서 요구사항 분석, 일정 관리, 클라이언트 커뮤니케이션</b>을 함께 맡으며 실행 중심의 개발 문화를 만들어왔습니다.",
];

const ABOUT_META = [
  ["Based in",          "전남 순천시"],
  ["Experience",        "Fullstack Developer"],
  ["Signature stack",   "Java · Spring Boot · React"],
  ["Current interest",  "에너지 플랫폼 · AI 연동"],
];

const PROOF_SIGNALS = [
  { kicker: "Award", title: "한국전력 EDACOM 경진대회 최우수상", body: "전력 데이터 활용 서비스 개발 경진대회 수상" },
  { kicker: "Education", title: "Energy ICT 교육 이수", body: "전력거래, 스마트그리드, ESS, IoT 연계 교육" },
  { kicker: "Education", title: "3D / AI 융합 교육 이수", body: "Three.js, Unity 3D, AI 융합 설계 과정 경험" },
  { kicker: "Experience", title: "PM / PL 리딩 경험", body: "운영, 구축, 협업 커뮤니케이션 기반 프로젝트 리딩" },
];

function About() {
  return (
    <section data-screen-label="01 About">
      <div className="section-head">
        <span className="section-head-num">§01</span>
        <h2 className="section-head-kr">About Me.</h2>
        <span className="section-head-en">/about — who_am_i.sh</span>
      </div>

      <div className="about">
        <div className="about-portrait">
          <img src="./img/jk1.png" alt="정경철" className="about-portrait-img" />
          <div className="about-portrait-overlay" />
          <div className="about-portrait-label">
            <span>▸ REC</span>
            <span>ID_00742 · OPERATOR</span>
          </div>
        </div>

        <div className="about-body">
          <h3>운영 관리까지 연결되는 시스템을 만드는 것을 강점으로 갖고 있습니다.</h3>
          {ABOUT_PARAGRAPHS.map((p, i) => (
            <p key={i} dangerouslySetInnerHTML={{ __html: p }} />
          ))}

          <div className="about-meta">
            {ABOUT_META.map(([k, v], i) => (
              <React.Fragment key={i}>
                <div className="about-meta-cell">{k}</div>
                <div className="about-meta-cell val">{v}</div>
              </React.Fragment>
            ))}
          </div>

          <div className="proof-grid">
            {PROOF_SIGNALS.map((s, i) => (
              <div key={i} className="proof-item">
                <span className="proof-kicker">{s.kicker}</span>
                <div className="proof-title">{s.title}</div>
                <div className="proof-body">{s.body}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.About = About;