// about.jsx — README / 면책 모달

const { useState: useStateAbout } = React;

const ABOUT_TABS = [
  { v: "intro", l: "프로젝트 개요" },
  { v: "scope", l: "구현 범위" },
  { v: "disclaimer", l: "면책·주의사항" },
  { v: "tech", l: "기술 스택" },
  { v: "context", l: "Bain 제안서 매핑" },
];

function AboutModal({ open, onClose }) {
  const [tab, setTab] = useStateAbout("intro");
  const Icons = window.Icons;
  if (!open) return null;

  return (
    <div className="modal-backdrop" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" role="dialog" aria-modal="true">
        <div className="modal-head">
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 10.5, color: "var(--ink-4)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 600, marginBottom: 6 }}>
              About · LUMA Prototype
            </div>
            <h2 className="modal-title">피부과 진단·상담 솔루션 — Phase 1 Clickable Prototype</h2>
            <div className="modal-sub">
              Bain &amp; Company SI 파트너사 제안서 (2026-05) 기반 · 데모용 정적 SPA
            </div>
          </div>
          <button className="modal-close" onClick={onClose} aria-label="닫기">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M2 2L12 12M12 2L2 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
            </svg>
          </button>
        </div>

        <div className="modal-tabs">
          {ABOUT_TABS.map(t => (
            <button key={t.v}
                    className={`modal-tab ${tab === t.v ? "active" : ""}`}
                    onClick={() => setTab(t.v)}>{t.l}</button>
          ))}
        </div>

        <div className="modal-body">
          {tab === "intro" && (
            <>
              <p>
                본 화면은 Bain &amp; Company가 SI 파트너사를 대상으로 제시한
                <strong>「피부과 진단·상담 솔루션 프로젝트」</strong>의 Phase 1 Clickable Prototype
                재구성판입니다. 환자 체크인 → 피부 촬영 → AI 진단 → 시술 추천 → 재방문 관리까지
                end-to-end 사용자 흐름을 한 눈에 시연하기 위한 데모입니다.
              </p>
              <h4>핵심 의도</h4>
              <ul>
                <li>4개 엔진 (배경 분석 / 진단·분석 / 시술 추천 / 재방문 관리) 의 화면 구성을 검증</li>
                <li>17개 use case 중 핵심 5개 (#1, #2, #6, #14, #3) 를 화면으로 시연</li>
                <li>역할 전환(환자/실장/의사) 시 정보 노출 차별화 검증</li>
                <li>의료광고법·의료법 27조 준수를 위한 UI 문구·승인 흐름 사전 점검</li>
              </ul>
              <div className="callout info">
                <strong>참고:</strong> 본 prototype의 모든 진단 수치·시술 추천·환자 데이터는
                샘플이며, 실제 AI 연산은 발생하지 않습니다. 우측 Tweaks 패널에서 페르소나·역할·Phase·Density를
                실시간으로 변경해 시연 모드를 바꿀 수 있습니다.
              </div>
            </>
          )}

          {tab === "scope" && (
            <>
              <h4>구현된 화면 (10개)</h4>
              <table className="spec">
                <tbody>
                  <tr><td>01 · 체크인·문진</td><td>환자 배경·고민·유입경로 입력 (환자배경 Engine A)</td></tr>
                  <tr><td>02 · 피부 촬영</td><td>iPad 다각도 촬영 가이드 + 이미지 QA (진단 Engine B)</td></tr>
                  <tr><td>03 · AI 진단 결과</td><td>피부 점수 10항목 + 본인 vs 일반 기준 비교</td></tr>
                  <tr><td>04 · 세부 지표 리포트</td><td>47개 정량 지표 카테고리별 표시</td></tr>
                  <tr><td>05 · 시술 추천·패키지</td><td>Primary/Secondary 추천, 회차 옵션, AI 근거 (추천 Engine C)</td></tr>
                  <tr><td>06 · B&amp;A 3D·시뮬레이션</td><td>시술 전후 정량 변화 시각화 (use case #6)</td></tr>
                  <tr><td>07 · Smart Chart Auto-fill</td><td>차트 자동 반영 (use case #14)</td></tr>
                  <tr><td>08 · 재방문 관리·알림톡</td><td>알림톡 큐, 재방문 적기 (재방문 Engine D, use case #3)</td></tr>
                  <tr><td>09 · Connected Devices</td><td>장비 utilization·소모품·peer 비교 (use case #5,7,8)</td></tr>
                  <tr><td>10 · 운영 BI Dashboard</td><td>KPI·전환율·실장 성과 (use case #16,17)</td></tr>
                </tbody>
              </table>

              <h4>구현되지 않은 영역 (의도적 제외)</h4>
              <ul>
                <li>실제 AI 추론 — 모든 수치는 사전 제작 샘플</li>
                <li>백엔드·DB·인증 — 정적 SPA</li>
                <li>EMR/CRM/시술DB/알림톡/환자앱 외부 연계</li>
                <li>Multi-tenant·권한·감사로그</li>
                <li>의료기기 SW(SaMD) 인증·임상검증</li>
              </ul>
            </>
          )}

          {tab === "disclaimer" && (
            <>
              <div className="callout">
                <strong>의료기기 / 의료광고 관련 면책</strong><br />
                본 화면은 시연용 prototype이며 의료기기 SW(SaMD)가 아닙니다.
                실제 환자 진단·치료 결정에 사용해서는 안 됩니다.
              </div>

              <h4>주요 규제 고려 사항 (제안서 분석 결과)</h4>
              <ul>
                <li><strong>식약처 의료기기 분류</strong>: "피부 진단 + 시술 권고" 기능은 SaMD 2등급 분류 가능성. 식약처 사전상담 필요.</li>
                <li><strong>의료법 27조</strong>: AI 출력 환자 직접 노출 시 무면허 의료행위 해석 위험 → 의사 승인 후 노출 강제 필요.</li>
                <li><strong>의료광고법</strong>: "Client 장비 우선 추천" 자동화는 의료광고심의 대상 가능성.</li>
                <li><strong>개인정보보호법</strong>: 얼굴 사진 = 생체정보. 별도 동의·암호화·국내 region 보관 필수.</li>
                <li><strong>외부 LLM(GPT 등) 사용</strong>: 민감 의료정보 전송 시 BAA·국외 이전 동의 필요. Azure OpenAI Korea region 또는 자체 호스팅 권고.</li>
              </ul>

              <h4>본 Prototype의 사용 가능 범위</h4>
              <ul>
                <li>SI 파트너사 견적·feasibility 검토용 시연</li>
                <li>의사·실장·환자 인터뷰용 사용자 수용 검증 (PPP Gate Phase 1)</li>
                <li>UI/UX 흐름과 정보 구조 검토</li>
              </ul>
              <h4>금지 사용</h4>
              <ul>
                <li>실제 환자 진단·시술 결정</li>
                <li>의료광고·마케팅 콘텐츠 자동 생성</li>
                <li>EMR과 직접 연동된 임상 운영</li>
              </ul>
            </>
          )}

          {tab === "tech" && (
            <>
              <h4>이 prototype의 구성</h4>
              <table className="spec">
                <tbody>
                  <tr><td>UI Framework</td><td>React 18.3 (UMD, no build step)</td></tr>
                  <tr><td>JSX 컴파일</td><td>@babel/standalone (브라우저에서 실시간)</td></tr>
                  <tr><td>스타일</td><td>Vanilla CSS + CSS variables (Apple Health풍 클리니컬 톤)</td></tr>
                  <tr><td>차트</td><td>SVG 자체 구현 (charts.jsx)</td></tr>
                  <tr><td>폰트</td><td>Pretendard Variable + Inter + JetBrains Mono</td></tr>
                  <tr><td>상태관리</td><td>useState + URL hash 없이 단일 라우터</td></tr>
                  <tr><td>호스팅</td><td>정적 파일 (Python http.server) + Caddy 리버스 프록시</td></tr>
                </tbody>
              </table>

              <h4>Production 가는 길 (제안서 매핑)</h4>
              <p>이 prototype을 Beta(Phase 2)로 발전시키려면 아래가 필요합니다:</p>
              <ul>
                <li><strong>AI 엔진</strong>: 자체 학습 CV 모델(피부 segmentation·정량 회귀) + LLM(narration). GPT API 단독은 인증·재현성·비용 모두 막힘.</li>
                <li><strong>백엔드</strong>: API gateway, 진단 오케스트레이터, 시술 추천 서비스, 차트·CRM 서비스</li>
                <li><strong>DB</strong>: 환자·세션·사진(blob)·정량지표·시술이력·만족도·감사로그</li>
                <li><strong>외부 연계</strong>: EMR(의사랑·하이케어 등) / 알림톡 / 시술 DB</li>
                <li><strong>인프라</strong>: 한국 region(AWS Seoul / Azure Korea Central) 강제, IAM/RBAC, MDM</li>
              </ul>
            </>
          )}

          {tab === "context" && (
            <>
              <h4>Bain 제안서(2026-05-13) 페이지 매핑</h4>
              <table className="spec">
                <tbody>
                  <tr><td>p.3 환자 여정 4단계</td><td>좌측 Sidebar "환자 상담 플로우" 그룹 (01~06 화면)</td></tr>
                  <tr><td>p.4 4개 엔진 + Phase 1·2 범위</td><td>화면 02·03·04·05가 Phase 1·2 핵심 (진단·추천 엔진)</td></tr>
                  <tr><td>p.5 GPT 5.4 prototype 결과</td><td>화면 03 AI 진단 결과 + 04 세부 지표 리포트</td></tr>
                  <tr><td>p.6 17 use case</td><td>화면 5(=#1,2,4,9), 6(=#6), 7(=#14), 8(=#3), 9(=#5,7,8,11), 10(=#16,17)</td></tr>
                  <tr><td>p.7 Client 장비 차별화</td><td>화면 05 시술 추천에서 "Energy/Depth/Shot reference" 표시 자리</td></tr>
                  <tr><td>p.9 Phase 별 workplan</td><td>좌측 하단 "Phase 1 Clickable Prototype" 워터마크</td></tr>
                  <tr><td>p.10 진척도 20%/75%/95%</td><td>Tweaks 패널 "개발 단계 (Phase Tinting)" 토글</td></tr>
                  <tr><td>p.11 R&amp;R</td><td>역할 전환(환자/실장/의사)으로 정보 노출 차별화 시연</td></tr>
                </tbody>
              </table>

              <h4>참고 자료</h4>
              <ul>
                <li>원본 PDF: <code>/home/tt/Project/AnyangCompany/260513-Bain-피부과 상담 솔루션 논의 자료.pdf</code></li>
                <li>4도메인 정밀 분석: <code>/home/tt/Project/AnyangCompany/analysis/</code> (비즈니스/기술/PM/규제)</li>
              </ul>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

window.AboutModal = AboutModal;