/* Selected Projects — 3 visual variants via Tweaks */

const PROJECTS = [
  {
    id: 1,
    kr: "전선 케이블 관리 시스템",
    en: "Cable Asset Management",
    desc: "전선 및 케이블 자산의 등록, 조회, 이력 확인을 하나의 운영 화면 흐름으로 정리한 자산 관리 시스템입니다.",
    tags: ["Java", "JSP", "MyBatis", "Asset"],
    role: "Backend / PM / PL",
    year: "2022",
    n: "001",
    domain: "energy",
  },
  {
    id: 2,
    kr: "체육관 BEMS 시스템",
    en: "Gymnasium BEMS",
    desc: "체육관 설비와 에너지 사용량을 통합 모니터링하고 제어할 수 있도록 구성한 BEMS 운영 시스템입니다.",
    tags: ["BEMS", "Energy", "Control", "Monitoring"],
    role: "Backend / Monitoring",
    year: "2022",
    n: "002",
    domain: "energy",
  },
  {
    id: 3,
    kr: "프로슈머 전자중개거래 플랫폼",
    en: "Prosumer Trading Platform",
    desc: "전력 거래 요청과 상태를 운영 관점에서 관리할 수 있도록 설계한 프로슈머 전자중개거래 플랫폼입니다.",
    tags: ["GridOS", "Trading", "Spring", "MyBatis"],
    role: "Backend / API / 운영 연계",
    year: "2023",
    n: "003",
    domain: "energy",
  },
  {
    id: 4,
    kr: "e-TOC 모니터링 시스템",
    en: "e-TOC Monitoring System",
    desc: "제어 정보와 계측 데이터를 함께 관리할 수 있도록 확장한 e-TOC 운영 모니터링 시스템입니다.",
    tags: ["Control", "SCADA", "IoT", "Realtime"],
    role: "Backend / Control",
    year: "2023",
    n: "004",
    domain: "air",
  },
  {
    id: 5,
    kr: "공동주택 HEMS 모니터링",
    en: "Apartment HEMS",
    desc: "공동주택의 에너지 사용량과 가구 단위 상태를 확인할 수 있도록 설계한 HEMS 모니터링 시스템입니다.",
    tags: ["HEMS", "Apartment", "Java", "MyBatis"],
    role: "Backend / Monitoring",
    year: "2023",
    n: "005",
    domain: "energy",
  },
  {
    id: 6,
    kr: "풍력 터빈 감시 시스템",
    en: "Wind Turbine Guardian",
    desc: "실화상·열화상 WebRTC 스트리밍, 음향·진동 센서 수집, 센서 제어 및 로봇 컨트롤까지 통합한 풍력 터빈 원격 감시 시스템입니다.",
    tags: ["Java", "WebRTC", "IoT", "Robot Control"],
    role: "Frontend · Backend · PL",
    year: "2025–2026",
    n: "006",
    domain: "energy",
  },
];

/* ---- Style A: Terminal ---- */
function CardTerminal({ p }) {
  return (
    <div className="card card-term">
      <div className="card-term-bar">
        <div className="card-term-dots"><span /><span /><span /></div>
        <span>— project/{p.n} · {p.en.toLowerCase().replace(/ /g, "-")}.md</span>
      </div>
      <div className="card-term-body">
        <div><span className="prompt">$</span> cat project.md</div>
        <div className="card-term-title">{p.kr}</div>
        <div className="card-term-desc">{p.desc}</div>
        <div className="comment"># role: {p.role} · year: {p.year}</div>
        <div className="card-tags">
          {p.tags.map((t, j) => (
            <span key={j} className={"card-tag" + (j === 0 ? " accent" : "")}>{t}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---- Style B: CRT ---- */
function CardCRT({ p }) {
  return (
    <div className="card card-crt">
      <div className="card-crt-screen">
        <div className="card-crt-index">▸ CH-{p.n}</div>
        <div className="card-crt-title">{p.kr}</div>
        <div className="card-crt-desc">{p.desc}</div>
        <div className="card-tags" style={{ marginTop: 16 }}>
          {p.tags.map((t, j) => (
            <span key={j} className={"card-tag" + (j === 0 ? " accent" : "")}>{t}</span>
          ))}
        </div>
      </div>
      <div className="card-crt-stand" />
    </div>
  );
}

/* ---- Style C: Magazine ---- */
function CardMag({ p }) {
  return (
    <div className="card card-mag">
      <div className="card-mag-tape" />
      <div className="card-mag-body">
        <div className="card-mag-kicker">ISSUE · {p.n} — {p.en}</div>
        <h3 className="card-mag-title">{p.kr}</h3>
        <p className="card-mag-desc">{p.desc}</p>
        <div className="card-tags" style={{ marginTop: 18 }}>
          {p.tags.map((t, j) => (
            <span key={j} className={"card-tag" + (j === 0 ? " accent" : "")}>{t}</span>
          ))}
        </div>
      </div>
      <div className="card-mag-foot">
        <span>{p.role}</span>
        <span><b>{p.year}</b></span>
      </div>
    </div>
  );
}

function Projects({ cardStyle }) {
  const Card = cardStyle === "crt" ? CardCRT : cardStyle === "mag" ? CardMag : CardTerminal;
  return (
    <section data-screen-label="02 Selected Projects">
      <div className="section-head">
        <span className="section-head-num">§02</span>
        <h2 className="section-head-kr">Selected Projects.</h2>
        <span className="section-head-en">/projects — ls -la</span>
      </div>

      <div className="projects-intro">
        <span>▸ <b>{PROJECTS.length}</b> projects listed</span>
        <span>▸ sorted by <b>domain</b></span>
        <span>▸ filter: <b>featured=true</b></span>
      </div>

      <div className="projects">
        {PROJECTS.map((p) => <Card key={p.id} p={p} />)}
      </div>
    </section>
  );
}

window.Projects = Projects;