Aislo/A02_ProgDetail/A02_ProgDetail_UI_Page.ts

/* =============================================================================
 * A02_ProgDetail_UI_Page.ts
 * 로그인 전 02: 프로그램 상세 (6단계 워크플로우 + 핵심 기술 소개)
 *
 * 제약 준수:
 *   - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
 *   - 색상/간격은 A02_ProgDetail_UI_Style.css + theme.css 변수만 사용.
 *   - 공통 부품(createPublicFrame/createCard/createButton) 우선 사용.
 *   - 이벤트 핸들러는 on[페이지]_[기능]_[액션] 명명.
 * ========================================================================== */

import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import { createButton, createCard } from "@ui/ui_template_elements";
import { createPublicFrame } from "@ui/ui_template_public_layout";
import { createText } from "@ui/ui_template_text";
import { navigateTo } from "../A00_Common/router";
import { ROUTES } from "@config/config_frontend";
import "./A02_ProgDetail_UI_Style.css";

/** locale 헬퍼 */
function L(key: keyof typeof ui_locales): string {
  return ui_locales[key][currentLanguageIndex];
}

/* -----------------------------------------------------------------------------
 * 이벤트 핸들러
 * -------------------------------------------------------------------------- */
function onA02_ProgDetail_Start_Click(): void {
  navigateTo(ROUTES.A07_REGISTER);
}

/* -----------------------------------------------------------------------------
 * 섹션 빌더
 * -------------------------------------------------------------------------- */
function buildWorkflow(): HTMLElement {
  const list = document.createElement("div");
  list.className = "a02-workflow-list";

  const steps: [keyof typeof ui_locales, keyof typeof ui_locales][] = [
    ["A02_ProgDetail_Step1_Title", "A02_ProgDetail_Step1_Desc"],
    ["A02_ProgDetail_Step2_Title", "A02_ProgDetail_Step2_Desc"],
    ["A02_ProgDetail_Step3_Title", "A02_ProgDetail_Step3_Desc"],
    ["A02_ProgDetail_Step4_Title", "A02_ProgDetail_Step4_Desc"],
    ["A02_ProgDetail_Step5_Title", "A02_ProgDetail_Step5_Desc"],
    ["A02_ProgDetail_Step6_Title", "A02_ProgDetail_Step6_Desc"],
  ];

  steps.forEach(([titleKey, descKey], index) => {
    const badge = document.createElement("span");
    badge.className = "a02-workflow-row__badge";
    badge.textContent = String(index + 1);

    const text = document.createElement("div");
    text.className = "a02-workflow-row__text";

    const stepTitle = document.createElement("h3");
    stepTitle.className = "a02-workflow-row__title";
    stepTitle.textContent = L(titleKey);

    text.append(stepTitle, createText(L(descKey), "muted", 14));
    const row = createCard({ body: [badge, text] });
    row.classList.add("a02-workflow-row");
    list.append(row);
  });
  return list;
}

function buildTech(): HTMLElement {
  const grid = document.createElement("div");
  grid.className = "a02-tech-grid";

  const techs: [keyof typeof ui_locales, keyof typeof ui_locales][] = [
    ["A02_ProgDetail_Tech1_Title", "A02_ProgDetail_Tech1_Desc"],
    ["A02_ProgDetail_Tech2_Title", "A02_ProgDetail_Tech2_Desc"],
    ["A02_ProgDetail_Tech3_Title", "A02_ProgDetail_Tech3_Desc"],
  ];

  for (const [titleKey, descKey] of techs) {
    const card = createCard({ title: L(titleKey), body: [createText(L(descKey), "muted", 14)] });
    card.classList.add("a02-tech-card");
    grid.append(card);
  }
  return grid;
}

/* -----------------------------------------------------------------------------
 * 페이지 진입점
 * -------------------------------------------------------------------------- */
export function renderA02ProgDetail(root: HTMLElement): void {
  const frame = createPublicFrame({
    title: L("A02_ProgDetail_Title"),
    lead: L("A02_ProgDetail_Hero_Subtitle"),
    actions: [
      createButton({
        label: L("A02_ProgDetail_Hero_Cta"),
        variant: "filled",
        onClick: onA02_ProgDetail_Start_Click,
      }),
    ],
    wide: true,
  });
  frame.root.classList.add("a02-prog-detail");
  frame.addSection(L("A02_ProgDetail_Workflow_SectionTitle")).append(buildWorkflow());
  frame.addSection(L("A02_ProgDetail_Tech_SectionTitle")).append(buildTech());
  root.append(frame.root);
}