import React, { useState } from 'react';
import { IconAI, IconClipboard, IconCloud, IconShield, IconLink, IconGovt, IconBriefcase, IconCode, IconLeaf,
  IconWrench, IconMessage, IconSearch, IconBulb, IconFileText, IconMobile, IconLock, IconKey,
  IconBrain, IconCheckCircle, IconRocket, IconTrendUp, IconShuffle, IconGlobe, IconDatabase,
  IconServer, IconZap, IconNetwork, IconBarChart, IconPieChart, IconStar, IconAward,
  IconUsers, IconBell, IconCalendar, IconCog, IconBuilding, IconTarget } from '../components/Icons';
import { Link } from 'react-router-dom';
import './GuardiaDetail.css';
import { useSeoMeta } from '../hooks/useSeoMeta';

/* 100가지 이상 기능을 8개 카테고리로 분류 */
const FEATURE_CATEGORIES = [
  {
    id: 'ai',
    label: 'AI · 지능 자동화',
    icon: <IconAI size={22} color="#6366F1"/>,
    color: '#6366F1',
    items: [
      { title: 'AI 에이전트 자동화',          desc: 'Ollama 온프레미스 sLLM. 메신저 한 줄 → 자동 배포·운영. 폐쇄망 완전 지원.' },
      { title: 'RAG 하이브리드 검색',          desc: 'BM25 + pgvector RRF 결합 검색. Ollama 기반 자연어 답변 생성. KB·SR 통합.' },
      { title: 'Text-to-SQL 자연어 쿼리',      desc: '"이번 달 HIGH SR 건수?" — 자연어로 ITSM DB 직접 조회. DML 차단·민감 컬럼 마스킹.' },
      { title: '대화형 운영 어시스턴트',       desc: 'Multi-turn 컨텍스트 유지. 운영 이슈 진단·해결책 제안. 대화 이력 저장.' },
      { title: 'AI 이상 탐지 (Anomaly)',       desc: '서버·앱 메트릭 실시간 분석. 이상 패턴 자동 감지 → 인시던트 자동 생성.' },
      { title: 'AI 운영 인사이트',             desc: '주간 SR 패턴 분석·반복 장애 예측·AI 개선 권고. Ollama 기반 자연어 보고.' },
      { title: '예측 운영 분석',               desc: 'SLA 위반 예측(7일)·SR 급증 감지·서버 장애 예측. 이동평균 + Ollama 인사이트.' },
      { title: 'Learning Loop (자기 개선)',     desc: 'RAG 피드백 데이터로 Ollama 파인튜닝. 모델 품질 지표 자동 측정. 품질 등급 관리.' },
      { title: '멀티모달 AI (이미지 분석)',     desc: 'llava 모델로 스크린샷·에러 화면 분석. 이미지 → 에러 분류 + SR 자동 생성.' },
      { title: 'RPA 봇 + 웹 스크랩핑',        desc: '소스 기반 Validation 학습 → 반복 업무 자동화. URL 수집·게시·원복 워크플로우.' },
      { title: '스마트 알림 규칙 편집기',       desc: '노코드 조건 편집기. SR_CREATED·KPI_BREACH 등 트리거. 무음 시간·다이제스트·AI 중요도 필터.' },
      { title: '디자인 SR AI 자동화',          desc: 'Ollama llava:7b 비전으로 스크린샷 분석. CSS_CHANGE·ICON_REQUEST 자동 분류. 자연어→CSS/SVG 코드 즉시 생성.' },
      { title: '음성인식 명령 실행',            desc: 'expo-speech-recognition 온디바이스 한국어 STT. 폐쇄망 완전 지원. 음성→ITSM 명령 자동 매핑.' },
      { title: '다음명령 제시',                desc: 'Ollama 컨텍스트 분석→추천 명령 3개 자동 표시. 사용 이력 학습. Messenger/Mobile App 통합.' },
    ],
  },
  {
    id: 'itsm',
    label: 'ITSM 핵심',
    icon: <IconClipboard size={22} color="#0EA5E9"/>,
    color: '#0EA5E9',
    items: [
      { title: 'SR 서비스 요청 관리',      desc: '접수→배정→처리→완료. AI 자동 분류·우선순위 산정. 자율 워크플로우 자동화.' },
      { title: 'CMDB 형상 관리',           desc: 'CI 등록·관계 매핑·변경 이력. 의존성 토폴로지 시각화.' },
      { title: '변경 관리 CAB',            desc: 'RFC→CAB 투표→승인→실행. 변경 동결 기간 자동 관리.' },
      { title: 'Problem Management',       desc: '반복 인시던트 RCA 분석. Known Error DB. PRB ID 체계.' },
      { title: '서비스 카탈로그 + SLA',    desc: '표준 서비스 정의. SLA 자동 계산. 위반 예측 에스컬레이션.' },
      { title: 'KPI 엔진',                 desc: '기관별 KPI 정의·계산. MTTR·FCR·SLA·Backlog 내장 5종. 신호등(RED/YELLOW/GREEN).' },
      { title: 'BI 대시보드',              desc: 'SR 트렌드·SLA 히트맵·엔지니어 워크로드·MTTR 트렌드. Chart.js + D3.js.' },
      { title: '자율 워크플로우 엔진',      desc: '조건 기반 자동화 규칙. SR_CREATED 트리거 → AUTO_ASSIGN → NOTIFY. 승인 게이트.' },
      { title: '자동 보고서 생성',          desc: '주간·월간·분기 보고서 자동 집계. Excel·PDF 즉시 다운로드.' },
      { title: '베리포트 벤치마킹',         desc: '기관 간 익명 벤치마킹. 완료율·MTTR·SLA 업계 백분위 순위 제공.' },
    ],
  },
  {
    id: 'infra',
    label: '인프라 · 클라우드',
    icon: <IconCloud size={22} color="#10B981"/>,
    color: '#10B981',
    items: [
      { title: '에이전트리스 SSH 배포',     desc: 'Tomcat·JBoss·WebLogic 원격 관리. 대상 서버 소프트웨어 설치 불필요.' },
      { title: '배치 SSH 일괄 실행',        desc: '수십 개 서버에 동시 SSH 명령 실행. 결과 수집·비교·에러 서버 자동 SR 생성.' },
      { title: '자산 QR 태그 관리',         desc: '서버 장비에 QR 라벨 부착. Messenger 앱 스캔 → CMDB 즉시 조회. 실사 체크인 자동화.' },
      { title: 'Kubernetes 관리',           desc: 'SSH 경유 kubectl. Pod·Deployment·HPA 조회. 롤링 업데이트·이벤트 감지.' },
      { title: 'CMDB 자동 발견',            desc: 'SSH/SNMP/WMI 에이전트리스 스캔. 서버·장비 자동 인벤토리. 서비스 의존성 매핑.' },
      { title: '구성 드리프트 감지',        desc: '골든 구성 vs 실제 환경 비교. 이탈 감지 → SR 자동 생성. 승인 기반 자동 교정.' },
      { title: '멀티클라우드 통합',         desc: 'NCloud · AWS · KT Cloud 단일 관제. 비용 최적화 AI 권고. Reserved Instance 분석.' },
      { title: 'DR 재해복구 자동화',        desc: 'Failover·백업 무결성·복구 테스트·RTO/RPO 실적 추적.' },
      { title: 'Scouter APM + Grafana',     desc: 'Java WAS 전문 APM. Prometheus 메트릭. 이상 시 자동 인시던트.' },
      { title: '컨테이너 이상 감지',        desc: 'Docker/K8s 헬스 체크. 중지·고CPU·고메모리 감지 → SR 자동 생성.' },
      { title: '네트워크 장비 관리',        desc: '스위치·방화벽 SSH 설정 백업·변경 감지·토폴로지 자동 갱신.' },
      { title: 'FinOps 비용 분석',          desc: '서버 비용 추적·최적화 권고·기관별 배분 리포트.' },
    ],
  },
  {
    id: 'security',
    label: '보안 · 컴플라이언스',
    icon: <IconShield size={22} color="#F59E0B"/>,
    color: '#F59E0B',
    items: [
      { title: 'RBAC + MFA/OTP',           desc: '역할별 세밀 권한 분리. TOTP 2단계 인증. JWT + 이상 감지 강제 재인증.' },
      { title: 'PAM 특권 접근 관리',       desc: '세션 발급·체크아웃·명령 로깅·강제 종료. root 직접 접속 완전 차단.' },
      { title: 'SSO 통합 인증',            desc: 'SAML 2.0 · OIDC · OAuth2. 행안부 GPKI · Google · Microsoft Entra 지원.' },
      { title: '보안 취약점 자동 스캔',    desc: 'CVE·CVSS 자동 수집. 위험 등급별 SR 자동 생성. KISA CVE 연동.' },
      { title: '불변 감사 로그',           desc: 'SHA-256 해시체인. 위·변조 불가. IP·계정 해시 저장.' },
      { title: 'CSAP 보안 자동 점검',      desc: '공공기관 보안 100개 항목 자동 점검. Excel/HTML 보고서 자동 생성.' },
      { title: '구성 드리프트 보안',       desc: 'SSH root 금지·패스워드 정책·UFW 등 보안 설정 실시간 감시·교정.' },
      { title: 'LDAP / AD 연동',           desc: '사내 LDAP·Active Directory 연동. 그룹→역할 자동 매핑.' },
      { title: '행정망/인터넷망 분리',     desc: '공공기관 망 분리 정책 관리. 방화벽 정책 위반 감지·감사 추적.' },
      { title: '개인정보·공공 준수',       desc: '행안부 SW 보안약점·KWCAG 2.1·개인정보보호법. 19개 체크리스트 내장.' },
    ],
  },
  {
    id: 'integration',
    label: '외부 연동 · OCR',
    icon: <IconLink size={22} color="#EC4899"/>,
    color: '#EC4899',
    items: [
      { title: 'Upstage OCR (Document AI)', desc: 'PDF·이미지 문서 파싱·정보 추출·QA. 계약서·납품서·청구서·회의록 자동 처리.' },
      { title: '계약서 자동 처리',          desc: '나라장터 계약서 → 조달 자동 등록. 백화점 브랜드 계약서 → 계약 이력.' },
      { title: 'Jira 양방향 동기화',        desc: 'SR ↔ Jira Issue 실시간 동기화. 상태 매핑·첨부파일 연동. 멀티테넌트 독립 설정.' },
      { title: 'Slack 연동',                desc: 'Incoming Webhook + Slash Commands. Block Kit 리치 메시지. /guardia 명령어.' },
      { title: 'ServiceNow 연동',           desc: 'CMDB CI·Incident 양방향 동기화. SR → ServiceNow Incident 자동 생성.' },
      { title: 'ERP / 그룹웨어 연동',       desc: '전자결재 웹훅 → SR 자동 생성. HR 사용자 동기화. 나라장터 조달 연동.' },
      { title: '카카오 알림톡',             desc: '알림톡 발송·대량 발송. 비즈니스 채널 연동. 발송 이력 추적.' },
      { title: '공공 API 허브',             desc: '기상청·KISA CVE·행안부 주소 API 통합 관리. data.go.kr 연동.' },
      { title: 'SSO / OAuth2',             desc: 'SAML·OIDC 통합. Just-In-Time 프로비저닝. SP Metadata XML 제공.' },
      { title: '웹메일 시스템',             desc: 'Postfix/Dovecot 연동 웹메일. IMAP/SMTP 프록시. 폴더·첨부파일·답장.' },
      { title: '웹메일 주소록·서명',        desc: '수신자 자동완성(자동 저장). HTML 서명 편집기. XSS 필터링. 프리셋 템플릿 제공.' },
    ],
  },
  {
    id: 'public',
    label: '공공기관 특화',
    icon: <IconGovt size={22} color="#0369A1"/>,
    color: '#0369A1',
    items: [
      { title: '나라장터 연동',             desc: '조달청 OpenAPI. 입찰공고·계약 현황 조회. 계약 → ITSM SR 자동 연계.' },
      { title: '전자조달 계약 관리',        desc: '계약·검수·납품 이력 통합 관리. 만료 예정 알림. 계약별 SR 연계.' },
      { title: 'ISP 수립 지원',             desc: 'ITSM 데이터 기반 ISP 보고서 자동 생성. 정보화 수준 진단. AI 로드맵 초안.' },
      { title: 'K-Cloud 전환 자동화',       desc: '행안부 승인 CSP(NCloud·KT Cloud). CSAP 인증 확인. 전환 체크리스트 자동화.' },
      { title: '공공 API 허브',             desc: 'KISA CVE·기상청·행안부 주소 API 통합. API Key 관리·사용량 추적.' },
      { title: '행정망/인터넷망 분리',      desc: '망 분리 정책 등록. 방화벽 정책 위반 실시간 감지. 감사 기록 자동화.' },
      { title: 'CSAP 100점 자동 점검',      desc: '100개 보안 항목 SSH 자동 체크. 증적 수집. Excel/HTML 보고서 생성.' },
      { title: '구성 드리프트 공공 감사',   desc: '골든 구성 대비 설정 이탈 감지. 자동 교정 승인 게이트. 감사 추적.' },
    ],
  },
  {
    id: 'saas',
    label: 'SaaS · 멀티테넌트',
    icon: <IconBriefcase size={22} color="#8B5CF6"/>,
    color: '#8B5CF6',
    items: [
      { title: '멀티테넌트 완전 격리',      desc: '기관별 데이터 Row-Level Security. 테넌트간 정보 유출 원천 차단.' },
      { title: '화이트라벨 브랜딩',         desc: '기관별 로고·색상·도메인 커스터마이즈. CSS 변수 동적 생성. 이메일 템플릿.' },
      { title: '구독·과금·청구서',          desc: 'COMMUNITY/STANDARD/ENTERPRISE 플랜. 사용량 측정. 청구서 자동 생성.' },
      { title: '테넌트 셀프서비스 포털',    desc: '기관 관리자 직접 사용자 초대·역할 변경·쿼터 조회. 활동 로그 실시간 확인.' },
      { title: '코호트·벤치마킹 분석',      desc: '도입 후 성과 추이. 기관 간 익명 벤치마킹. 업계 평균 대비 순위.' },
      { title: '모바일 앱 QR 직접 배포',     desc: 'Manager에서 APK 업로드 → QR 자동 생성. 스캔 즉시 설치. 앱스토어 불필요. 공공기관 내부망 배포 최적.' },
      { title: '모바일 앱 (React Native)',   desc: 'iOS/Android. SR 접수·승인·AI 챗봇·알림·대시보드·자산 QR 스캔. EAS 빌드 지원.' },
      { title: 'Mobile PWA',                desc: '스마트폰 홈 화면 추가. 오프라인 캐싱. 푸시 알림. 반응형 UI.' },
      { title: '다국어 지원 (i18n)',        desc: '한국어·영어 실시간 전환. 공공기관 다국어 서비스 의무 준수.' },
    ],
  },
  {
    id: 'devops',
    label: 'DevOps · CI/CD',
    icon: <IconCode size={22} color="#0891B2"/>,
    color: '#0891B2',
    items: [
      { title: 'Jenkins + Gitea 파이프라인', desc: '5개 시스템 자동 빌드·테스트·배포. webhook → git pull → 재기동. 알림 연동.' },
      { title: 'git commit 자동 배포',        desc: 'post-commit 훅 → workspace 변경 감지 → Gitea push → webhook → 서버 배포. 수동 실행 불필요.' },
      { title: '1시간 주기 자동 동기화',      desc: 'Windows Task Scheduler. 커밋 없이도 workspace↔Gitea 차이 감지 → 자동 배포.' },
      { title: '바이브 코딩 (VibeSession)',   desc: '메신저 명령으로 코딩 세션 시작. 빌드·배포·롤백을 채팅창에서 완결.' },
      { title: '에이전트리스 배포 엔진',      desc: '백업→배포→헬스체크→롤백 시퀀스. Fail-Safe 보장. 감사 추적 자동.' },
      { title: 'SI 프로젝트 관리 (PMS)',      desc: 'WBS·산출물·이슈·위험·보고서. 일간/주간/월간 보고서 자동 생성.' },
      { title: '자동 보고서 · Excel/PDF',     desc: '주간·월간·분기 보고서 즉시 생성. 이메일 자동 발송 스케줄링.' },
      { title: 'SSL 인증서 관리',             desc: 'SSL 만료일 추적. 자동 갱신 알림. 인증서 배포 자동화.' },
      { title: '서브도메인 전용 HTTPS',       desc: 'itsm/manager/mail/git/jenkins/docs.zioinfo.co.kr 포트 없는 서브도메인 전환 완료. Let\'s Encrypt + ZeroSSL.' },
    ],
  },
  {
    id: 'extend2',
    label: '2세대 확장 (NEW)',
    icon: <IconBrain size={22} color="#06B6D4"/>,
    color: '#06B6D4',
    items: [
      { title: '디지털 트윈 인프라',      desc: '서버 가상 복제본 실시간 동기화. 장애 시뮬레이션으로 다운타임 80% 사전 예방.', img: '/screenshots/extend2_twin.png' },
      { title: 'AI 거버넌스 & 편향 감사', desc: 'Ollama 모델 공정성 자동 감사. AI 윤리 준수율 92%. 공공기관 AI 윤리법 선제 준수.', img: '/screenshots/extend2_governance.png' },
      { title: '자율 비용 최적화',         desc: 'AI 낭비 리소스 감지. 월 255만원 절감 권고. 클라우드 30% 비용 절감 자동 실행.', img: '/screenshots/extend2_cost.png' },
      { title: '공급망 보안 (SLSA)',        desc: 'CVE 자동 스캔. SLSA Level 2 달성. Log4Shell·Spring4Shell 등 내장 CVE DB.', img: '/screenshots/extend2_supply.png' },
      { title: '예측 용량 계획',           desc: 'AI 수요 예측 30/60/90일. DB 서버 30일 내 92% 초과 경보. 예산 사이클 연동.', img: '/screenshots/extend2_capacity.png' },
    ],
  },
  {
    id: 'extend3',
    label: '3세대 확장 (NEW)',
    icon: <IconNetwork size={22} color="#06B6D4"/>,
    color: '#06B6D4',
    items: [
      { title: '대화형 운영 AI',     desc: '자연어 하나로 전체 운영 제어. "미처리 HIGH SR 담당자 알림" → 자동 실행 + 요약 반환.' },
      { title: '자율 패치 관리',     desc: 'CVE 발견 → 영향 분석 → 승인 → SSH 패치 → 검증 → 롤백 전 단계 자동화.' },
      { title: 'UX 분석 엔진',       desc: '클릭·에러·체류시간 수집. 히트맵·퍼널 분석. Ollama AI 개선 제안 자동 생성.' },
      { title: 'GRC 자동화',         desc: 'IT 정책 초안 자동 생성. 리스크 매트릭스 산출. CSAP·ISMS·ISO27001 감사 보고서.' },
      { title: '테넌트 AI 학습',      desc: '기관별 SR 데이터로 Ollama 파인튜닝. KB 완전 격리. 맞춤 AI 응답 제공.' },
      { title: 'AI 워크플로우 엔진', desc: '노코드 자동화 규칙 빌더. SR 생성→분류→배정→알림→에스컬레이션 완전 자동.' },
      { title: '확장 ChatOps',       desc: '카카오워크·슬랙·자체 메신저 통합. 인터랙티브 결재 버튼. 전 채널 브로드캐스트.' },
      { title: '예측 장애 방지',     desc: 'CPU·메모리·디스크 전조 신호 4종 패턴 감지. 자동 예방 조치 실행.' },
      { title: '자동 복구 엔진',     desc: 'Runbook 기반 장애 자동 복구. 5개 기본 런북 내장. 에스컬레이션 게이트.' },
      { title: '정책 엔진',          desc: 'IT 정책 규칙 자동 평가·위반 감지·교정. 공공기관 표준 정책 5개 내장.' },
    ],
  },
  {
    id: 'autonomy',
    label: '자율화 · 성장 (NEW)',
    icon: <IconLeaf size={22} color="#059669"/>,
    color: '#059669',
    items: [
      { title: '건강검진 — 자동 테스트',      desc: '매일 03:00 전체 API 자동 실행(69개). 실패 시 SR 자동 생성 + 메신저 즉시 알림. 결과 이력 저장.' },
      { title: '자가 수복 (Self-Healing)',    desc: '서비스 장애 감지 → systemctl 자동 재시작 → 헬스체크 → "🔧 GUARDiA가 스스로 고쳤습니다" 보고.' },
      { title: '성장일지 — 변경이력 자동 수집', desc: 'git 커밋 이력 자동 파싱 → ChangelogEntry 저장. 카테고리(feat/fix/docs)별 집계. API 문서 자동 갱신.' },
      { title: '매뉴얼 자동 업데이트',        desc: '라우터 변경 감지 → api-reference-auto.md 자동 재생성. 엔드포인트 수·메서드·경로 최신 유지.' },
      { title: '성장 대시보드',               desc: '라우터 수·엔드포인트 추정·건강점수·자립도·30일 변경이력·마일스톤 달성 현황 종합 뷰.' },
      { title: '모바일 Push 알림',            desc: 'Expo FCM 디바이스 토큰 등록·관리. 카테고리별 발송. 관리자 일괄 발송. 발송 이력 추적.' },
      { title: '다국어 i18n (ko/en/ja/zh)',   desc: '번역 데이터 CRUD·일괄 임포트. 로케일별 커버리지 측정. 공공기관 다국어 서비스 의무 준수.' },
      { title: 'LoRA 자동 파인튜닝',          desc: '매월 1일 SR 이력 500건→LoRA 학습 자동 시작. 데이터 부족 시 다음 달 연기 + 알림. 모델 품질 loss 추적.' },
      { title: '주간 자립도 보고서',          desc: 'SR 자동처리율·건강점수·자가수복 횟수·자립도 종합. 매주 금요일 메신저 자동 발송.' },
      { title: '자립도 측정 (5차원)',         desc: '건강(25%)·SR자동처리(30%)·자가수복(20%)·보고서(10%)·파인튜닝(15%). 현재 30% → 목표 85%.' },
      { title: '자립도 로드맵',              desc: '현재 30% → 3개월 50% → 6개월 70% → 1년 85% "GUARDiA가 알아서 다 했습니다."' },
    ],
  },
];

/* 하이라이트 카드 (히어로 섹션용) */
const IC = (c,s=22) => ({ color:c, size:s });
const FEATURES = [
  { icon:<IconAI {...IC('#6366F1')}/>,       title:'AI 에이전트 자동화',       desc:'Ollama 온프레미스 sLLM. 메신저 한 줄 → 자동 배포·운영. 폐쇄망 완전 지원.' },
  { icon:<IconWrench {...IC('#0EA5E9')}/>,    title:'에이전트리스 아키텍처',     desc:'SSH/SFTP만으로 Tomcat·JBoss·WebLogic 원격 관리. 대상 서버 소프트웨어 설치 불필요.' },
  { icon:<IconMessage {...IC('#10B981')}/>,   title:'ChatOps 자연어 명령',       desc:'"서버1 헬스체크"·"SR-XXXX 배포" — 자연어를 자동으로 봇 명령어로 변환.' },
  { icon:<IconSearch {...IC('#F59E0B')}/>,    title:'RAG 하이브리드 검색',       desc:'BM25 + pgvector RRF. 자연어 질의로 KB·SR 통합 검색 + Ollama 답변 생성.' },
  { icon:<IconBulb {...IC('#EF4444')}/>,      title:'Text-to-SQL 어시스턴트',   desc:'"이번 달 HIGH SR는?" — 자연어로 ITSM DB 직접 조회. SELECT 전용 안전 실행.' },
  { icon:<IconFileText {...IC('#8B5CF6')}/>,  title:'Document AI (OCR)',         desc:'Upstage 연동. 계약서·납품서·청구서 자동 파싱 → ITSM 자동 등록.' },
  { icon:<IconCloud {...IC('#0891B2')}/>,     title:'멀티클라우드 통합',         desc:'NCloud·AWS·KT Cloud 단일 관제. 비용 최적화 AI 권고. K-Cloud 전환 지원.' },
  { icon:<IconServer {...IC('#059669')}/>,    title:'CMDB 자동 발견',            desc:'SSH/SNMP 에이전트리스 스캔. 서버·장비·의존성 자동 등록. 드리프트 실시간 감지.' },
  { icon:<IconBarChart {...IC('#D97706')}/>,  title:'KPI + BI 대시보드',         desc:'MTTR·FCR·SLA 내장 5종 KPI. SR 트렌드·히트맵·MTTR 차트. 예측 분석.' },
  { icon:<IconShield {...IC('#DC2626')}/>,    title:'보안 자동화',               desc:'PAM·MFA·CSAP 100항목·취약점 스캔·불변 감사로그. LDAP·SSO·드리프트 교정.' },
  { icon:<IconGovt {...IC('#0369A1')}/>,      title:'공공기관 특화',             desc:'나라장터·CSAP·ISP·K-Cloud·공공API·행정망 분리. 공공 IT 표준 완전 지원.' },
  { icon:<IconShield {...IC('#7C3AED')}/>,    title:'DR + 네트워크 관리',        desc:'Failover·RTO/RPO 추적. 스위치·방화벽 설정 백업·변경 감지·토폴로지 갱신.' },
  { icon:<IconLink {...IC('#EC4899')}/>,      title:'엔터프라이즈 통합',          desc:'Jira·Slack·ServiceNow·ERP·SSO·카카오 알림톡. 계약서 OCR 자동화 포함.' },
  { icon:<IconNetwork {...IC('#6366F1')}/>,   title:'자율 워크플로우 엔진',       desc:'조건 기반 자동화 규칙. SR 생성 트리거 → 자동 배정·알림·교정 시퀀스.' },
  { icon:<IconBriefcase {...IC('#8B5CF6')}/>, title:'SaaS 멀티테넌트',            desc:'화이트라벨·구독·과금·셀프서비스 포털. 기관별 완전 격리. 1,000+ 기관 지원.' },
  { icon:<IconMobile {...IC('#0EA5E9')}/>,    title:'APK QR 직접 배포',            desc:'Manager에서 APK 업로드 → QR 생성. 스캔 즉시 설치. 앱스토어 불필요. 내부망 배포 최적.' },
  { icon:<IconZap {...IC('#F59E0B')}/>,       title:'배치 SSH + 자산 QR',          desc:'수십 서버 동시 SSH 실행·결과 수집. QR 라벨로 자산 실사 체크인 자동화.' },
  { icon:<IconPieChart {...IC('#10B981')}/>,  title:'디자인 AI SR 자동화',          desc:'Ollama llava 비전 분석→CSS/SVG 자동 생성. 디자인 SR 90% AI 처리. 스크린샷→개선 제안.' },
  { icon:<IconMessage {...IC('#EF4444')}/>,   title:'음성인식 + 다음명령 제시',      desc:'expo-speech-recognition 온디바이스. 한국어 STT. Messenger 명령 칩 자동 추천.' },
  { icon:<IconBrain {...IC('#7C3AED')}/>,     title:'AI Brain 지능화 엔진',         desc:'영구 메모리(pgvector)·자동 스킬·LoRA 파인튜닝·지식 그래프. 운영 경험 누적→자기 개선.' },
  { icon:<IconLock {...IC('#0369A1')}/>,      title:'Zero Trust + SBOM + N²SF',    desc:'ZTNA 정책·디바이스 신뢰·SBOM CycloneDX·국정원 N²SF 준수. EU CRA 공공 조달 완전 지원.' },
  { icon:<IconLeaf {...IC('#059669')}/>,      title:'GreenOps + Edge/IoT',          desc:'Scope 2 탄소 추적(EU CSRD)·9.21억 IoT 디바이스. Carbon-aware 스케줄링.' },
  { icon:<IconBuilding {...IC('#0891B2')}/>,  title:'IDP 개발자 플랫폼',           desc:'소프트웨어 카탈로그·Golden Path 템플릿·셀프서비스 포털. 30~50% 배포 단축.' },
  { icon:<IconCode {...IC('#0891B2')}/>,      title:'CI/CD 파이프라인',             desc:'Jenkins + Gitea. 5개 시스템 자동 빌드·배포·롤백·알림. 서버 빌드 방식.' },
  { icon:<IconCheckCircle {...IC('#059669')}/>, title:'자가수복 + 건강검진',        desc:'매일 03:00 자동 테스트(69개). 장애 감지 시 서비스 자동 재시작 + 자동 보고.' },
  { icon:<IconTrendUp {...IC('#059669')}/>,   title:'자립도 측정 30→85%',           desc:'5차원 자립도 점수. 현재 30% → 목표 85%. 주간 보고서 자동 발송. LoRA 파인튜닝 자동화.' },
  { icon:<IconShuffle {...IC('#6366F1')}/>,   title:'git commit → 자동 배포',        desc:'post-commit 훅. workspace 변경 감지 → Gitea push → webhook → 서버 자동 배포. 수동 불필요.' },
];

const EDITIONS = [
  {
    name: 'COMMUNITY', badge: '무료',
    color: '#10B981',
    target: '소규모 기관·검토용',
    features: [
      '기본 SR 관리 (무제한)', 'CMDB 서버 20대', '사용자 10명',
      'KPI 대시보드 (기본)', 'AI 챗봇 (온프레미스)', '봇 기본 명령어',
    ],
    cta: '무료 시작',
    href: '/support/contact?type=community',
  },
  {
    name: 'STANDARD', badge: '권장',
    color: 'var(--primary)',
    target: '중형 기관',
    features: [
      '전체 ITSM 기능', 'AI 에이전트 + RAG 검색', 'LDAP/SSO/MFA 보안',
      'KPI·BI·예측 분석', 'Jira·Slack 연동', 'OCR 문서 자동화',
      '멀티클라우드 관제', 'CSAP 자동 점검',
    ],
    cta: '도입 문의',
    href: '/support/contact?type=standard',
    highlight: true,
  },
  {
    name: 'ENTERPRISE', badge: '맞춤',
    color: '#6366F1',
    target: '대형 관공서·광역기관',
    features: [
      '무제한 서버·기관', '나라장터·K-Cloud·공공API 완전 연동',
      'Text-to-SQL + Learning Loop', '구성 드리프트 자동 교정',
      '화이트라벨 + 구독·과금', 'ServiceNow·ERP 통합',
      '전담 기술 지원', '맞춤 SLA·보안 컨설팅',
    ],
    cta: '전문가 상담',
    href: '/support/contact?type=enterprise',
  },
];

/* ── 메신저 봇 명령어 목록 ──────────────────────────────── */
const BOT_COMMANDS = [
  /* SR 관리 */
  { cmd: '/sr <제목>',                   desc: 'SR(서비스요청) 즉시 접수',             cat: 'SR 관리' },
  { cmd: '/status',                       desc: '시스템 전체 현황 요약',               cat: 'SR 관리' },
  { cmd: '/assign <SR-ID> <담당자>',      desc: 'SR 담당자 즉시 배정',                 cat: 'SR 관리' },
  { cmd: '/approve <SR-ID>',              desc: 'SR 또는 자율운영 작업 즉시 승인',      cat: 'SR 관리' },
  { cmd: '/reject <SR-ID> [사유]',        desc: 'SR 반려',                             cat: 'SR 관리' },
  { cmd: '/bulk <action> <SR-ID...>',     desc: 'SR 대량 처리 (close/assign/status)',   cat: 'SR 관리' },
  { cmd: '/sla',                          desc: 'SLA 위반 현황 목록',                   cat: 'SR 관리' },
  { cmd: '/escalate <SR-ID>',            desc: '당직자에게 에스컬레이션',               cat: 'SR 관리' },
  /* 인시던트 */
  { cmd: '/incident <제목> [P1~P4]',     desc: '인시던트 빠른 등록',                   cat: '인시던트' },
  { cmd: '/oncall',                       desc: '현재 당직자 즉시 조회',               cat: '인시던트' },
  { cmd: '/rca <INC-ID>',                desc: 'AI 자동 RCA 근본원인 분석',            cat: '인시던트' },
  /* 배포/CI-CD */
  { cmd: '!vibe <SR-ID>',               desc: '바이브 코딩 세션 시작',                 cat: '배포 CI-CD' },
  { cmd: '!build <세션ID>',             desc: '빌드 실행',                            cat: '배포 CI-CD' },
  { cmd: '!deploy <세션ID>',            desc: 'WAS 배포 실행 (SSH)',                  cat: '배포 CI-CD' },
  { cmd: '/rollback <세션ID>',          desc: '긴급 롤백',                            cat: '배포 CI-CD' },
  { cmd: '/cicd [project]',             desc: 'Jenkins+Gitea CI/CD 전체 현황',        cat: '배포 CI-CD' },
  { cmd: '/jenkins <job> [build|log]',  desc: 'Jenkins 빌드 트리거·로그',             cat: '배포 CI-CD' },
  { cmd: '/git <repo> [log|pr|branch]', desc: 'Gitea 저장소 정보',                    cat: '배포 CI-CD' },
  { cmd: '/release <project> [버전]',   desc: '릴리즈 배포 파이프라인',               cat: '배포 CI-CD' },
  /* 인프라 제어 */
  { cmd: '!health <서버명>',            desc: '서버 헬스체크',                        cat: '인프라' },
  { cmd: '!log <서버명>',               desc: '서버 로그 분석',                       cat: '인프라' },
  { cmd: '!sm <서버> <스크립트>',       desc: 'SM 원격 스크립트 실행',                cat: '인프라' },
  { cmd: '/topology <서버명>',          desc: 'CI 의존관계 토폴로지 조회',             cat: '인프라' },
  { cmd: '/scouter <서버명>',           desc: 'Scouter APM 실시간 메트릭',            cat: '인프라' },
  /* PMS 프로젝트 */
  { cmd: '/pms <프로젝트코드>',         desc: '프로젝트 진척 현황',                   cat: 'PMS' },
  { cmd: '/report <코드> [daily|weekly|monthly]', desc: '보고서 발송',               cat: 'PMS' },
  { cmd: '/wbs <코드>',                 desc: 'WBS 지연 현황',                        cat: 'PMS' },
  { cmd: '/deliverables <코드>',        desc: '산출물 제출 현황',                     cat: 'PMS' },
  { cmd: '/issues <코드>',              desc: '미결 이슈 목록',                       cat: 'PMS' },
  /* 보안 */
  { cmd: '/scan',                        desc: '시큐어코딩·보안 자동 점검',           cat: '보안' },
  { cmd: '/vuln <서버|IP>',             desc: '취약점 스캔',                          cat: '보안' },
  { cmd: '/checklist',                   desc: '공공기관 보안 이행 현황',              cat: '보안' },
  { cmd: '/perf [url]',                  desc: '성능·부하 테스트',                    cat: '보안' },
  { cmd: '/autoq',                       desc: '자율 운영 승인 대기 목록',             cat: '자율 운영' },
  /* 스크랩핑 봇 */
  { cmd: '!scrap <url>',                 desc: 'URL 즉시 스크랩',                     cat: '스크랩' },
  { cmd: '!scrap list [n]',              desc: '최근 스크랩 결과 목록',               cat: '스크랩' },
  { cmd: '!scrap publish <id>',          desc: '스크랩 게시 + 메신저 알림',           cat: '스크랩' },
  { cmd: '!scrap del <id>',              desc: '스크랩 삭제',                         cat: '스크랩' },
  { cmd: '!scrap restore <id>',          desc: '스크랩 원복',                         cat: '스크랩' },
  /* 디자인 */
  { cmd: '/design capture',              desc: 'UI 현재 화면 스크린샷 (Playwright)',  cat: '디자인' },
  { cmd: '/design variant <키워드>',    desc: 'Variant 디자인 레퍼런스 탐색',        cat: '디자인' },
  { cmd: '/design <시스템>',            desc: '시스템별 UI 개편 실행',               cat: '디자인' },
  /* 공지 */
  { cmd: '/notify <메시지>',            desc: '운영팀 전체 공지 발송',               cat: '공지' },
  { cmd: '/license',                     desc: '라이선스 상태 조회',                  cat: '공지' },
];

const MESSENGER_PLATFORMS = [
  { name: '카카오워크', icon: '💬', color: '#FAE100', textColor: '#3C1E1E', desc: '결재 버튼 + 봇 명령 완벽 지원' },
  { name: '네이버웍스', icon: '🟢', color: '#03C75A', textColor: '#fff',    desc: 'Flex 메시지 + Rich 결과 표시' },
  { name: '슬랙',       icon: '💜', color: '#611F69', textColor: '#fff',    desc: '슬래시 명령 + 블록킷 UI' },
  { name: '자체 메신저', icon: '🔵', color: '#0051A2', textColor: '#fff',   desc: 'GUARDiA 내장 Slack형 메신저' },
];

const TECH_STACK = [
  { category: 'Backend', items: ['Python 3.11 / FastAPI (비동기)', 'SQLAlchemy Async ORM', 'PostgreSQL 16 + pgvector'] },
  { category: 'AI · LLM', items: ['Ollama (온프레미스 전용)', 'llama3:8b / llava (멀티모달)', 'LangChain RAG + ChromaDB'] },
  { category: 'Document AI', items: ['Upstage Document Parse / Extract', 'RAG 하이브리드 (BM25 + pgvector)', 'Text-to-SQL (Ollama 생성)'] },
  { category: 'Cloud', items: ['NCloud API (서버·LB·스토리지)', 'AWS SigV4 직접 연동', 'Kubernetes SSH 에이전트리스'] },
  { category: '외부 연동', items: ['Jira REST API v3 양방향', 'Slack Block Kit + Slash', 'ServiceNow · ERP · SSO (SAML/OIDC)'] },
  { category: 'Infra', items: ['paramiko SSH/SFTP 에이전트리스', 'SNMP v2c/v3 장비 발견', 'AES-256-GCM 암호화'] },
  { category: 'Frontend', items: ['React 18 + TypeScript', 'Chart.js + D3.js 대시보드', 'React Native (iOS/Android)'] },
  { category: 'DevOps', items: ['Jenkins 멀티브랜치 파이프라인', 'Gitea Self-hosted + Webhook', 'APScheduler 크론 자동화'] },
  { category: '보안·모니터링', items: ['Scouter APM (Java WAS 전용)', 'Prometheus / Grafana', 'CSAP·드리프트·취약점 자동 점검'] },
];

export default function GuardiaDetail() {
  useSeoMeta({
    title: 'GUARDiA ITSM — AI 기반 공공기관 인프라 자율 운영 플랫폼 (185+ 기능)',
    description: 'GUARDiA ITSM: 1,100개+ API, 185가지 이상 기능. 자가수복·자립도 측정·LoRA 파인튜닝·CI/CD 자동배포·서브도메인 HTTPS·ZTNA·SBOM·N²SF·IDP·GreenOps. 폐쇄망/개방망 지원.',
    path: '/solution/guardia',
    keywords: 'GUARDiA ITSM, AI ITSM, 공공기관 인프라 자동화, 자가수복, 자립도, LoRA 파인튜닝, ChatOps, 에이전트리스, RAG 검색, Text-to-SQL, CMDB 자동 발견, 멀티클라우드, 나라장터, Upstage OCR, 구성 드리프트',
    image: '/screenshots/01_dashboard.png',
  });
  const [activeTab, setActiveTab] = useState('features');

  return (
    <main id="main-content" className="guardia-page">

      {/* ── 히어로 ────────────────────────────────────────── */}
      <section className="gd-hero">
        <div className="gd-hero-overlay" />
        <div className="container gd-hero-inner">
          <div className="gd-hero-text">
            <span className="badge badge-new" style={{fontSize:'12px',padding:'4px 12px'}}>NEW v2.0</span>
            <h1 className="gd-hero-title">
              <span>GUARDiA</span> ITSM
            </h1>
            <p className="gd-hero-sub">
              AI 기반 레거시 인프라 자율 운영 플랫폼<br/>
              <strong>메신저 한 줄 명령</strong>으로 1,000개 관공서 인프라를 자동화
            </p>
            <div className="gd-hero-actions">
              <Link to="/support/contact?type=demo" className="btn btn-white btn-lg">
                무료 데모 신청
              </Link>
              <a href="#features" className="btn btn-lg" style={{color:'rgba(255,255,255,.85)',border:'1px solid rgba(255,255,255,.3)'}}>
                기능 살펴보기 ↓
              </a>
            </div>
          </div>
          <div className="gd-hero-stats">
            {[
              {val:'1,000+', lab:'관리 기관'},
              {val:'1,100+', lab:'API 엔드포인트'},
              {val:'185+',   lab:'구현 완료 기능'},
              {val:'0개',    lab:'대상 서버 추가 설치'},
            ].map((s,i) => (
              <div key={i} className="gd-stat">
                <div className="gd-stat-val">{s.val}</div>
                <div className="gd-stat-lab">{s.lab}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── 탭 메뉴 ──────────────────────────────────────── */}
      <div className="gd-tabs-bar">
        <div className="container">
          <div className="gd-tabs">
            {[
              {id:'features',   label:'핵심 기능'},
              {id:'screenshots', label:'화면 미리보기'},
              {id:'app',        label:'모바일 앱'},
              {id:'messenger',  label:'Messenger Bot'},
              {id:'manager',    label:'Manager'},
              {id:'install',    label:'설치 가이드'},
              {id:'manual',     label:'매뉴얼'},
              {id:'editions',   label:'에디션 비교'},
              {id:'tech',       label:'기술 스택'},
            ].map(t => (
              <button key={t.id}
                      className={`gd-tab ${activeTab === t.id ? 'active' : ''}`}
                      onClick={() => setActiveTab(t.id)}>
                {t.label}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* ── 핵심 기능 ─────────────────────────────────────── */}
      {activeTab === 'features' && (
        <section id="features" className="section">
          <div className="container">
            <div className="section-header">
              <span className="section-label">Core Features</span>
              <h2 className="section-title">GUARDiA가 제공하는<br/><em>185가지 이상 핵심 기능</em></h2>
              <p style={{color:'var(--gray-500)',marginTop:'12px',fontSize:'16px'}}>
                11개 카테고리 · 1,100개+ API 엔드포인트 · 3세대 확장 완료
              </p>
              <div className="divider" />
            </div>

            {/* ── 카테고리별 전체 기능 표 ───────────────────── */}
            <div style={{marginBottom:'64px'}}>
              {FEATURE_CATEGORIES.map(cat => (
                <div key={cat.id} style={{marginBottom:'40px'}}>
                  <div style={{display:'flex',alignItems:'center',gap:'10px',marginBottom:'16px'}}>
                    <span style={{display:'flex',alignItems:'center'}}>{cat.icon}</span>
                    <h3 style={{
                      fontSize:'20px',fontWeight:'700',color:'var(--gray-900)',margin:0,
                      borderLeft:`4px solid ${cat.color}`,paddingLeft:'12px'
                    }}>{cat.label}</h3>
                    <span style={{
                      fontSize:'12px',background:cat.color,color:'#fff',
                      borderRadius:'12px',padding:'2px 10px',fontWeight:'600'
                    }}>{cat.items.length}개</span>
                  </div>
                  <div style={{
                    display:'grid',
                    gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))',
                    gap:'12px',
                  }}>
                    {cat.items.map((item, i) => (
                      <div key={i} style={{
                        background:'var(--gray-50)',borderRadius:'10px',
                        overflow:'hidden',
                        borderLeft:`3px solid ${cat.color}`,
                        transition:'box-shadow .2s',
                      }}>
                        {item.img && (
                          <img src={item.img} alt={item.title}
                               style={{width:'100%',display:'block',maxHeight:'160px',objectFit:'cover',objectPosition:'top'}}
                               onError={e=>{e.target.style.display='none';}}/>
                        )}
                        <div style={{padding:'14px 16px'}}>
                          <div style={{fontWeight:'700',color:'var(--gray-900)',fontSize:'14px',marginBottom:'4px'}}>
                            {item.img ? '' : '✅ '}{item.title}
                          </div>
                          <div style={{color:'var(--gray-500)',fontSize:'13px',lineHeight:'1.5'}}>
                            {item.desc}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
            {/* 실행 화면 스크린샷 */}
            {/* GUARDiA ITSM 실행 화면 */}
            <div className="section-header" style={{marginBottom:'24px'}}>
              <span className="section-label" style={{fontSize:'12px'}}>GUARDiA ITSM</span>
              <h3 style={{fontSize:'22px',fontWeight:'700',color:'var(--gray-900)',margin:'8px 0 0'}}>
                IT 서비스 관리 플랫폼
              </h3>
            </div>
            <div className="gd-screenshots">
              {[
                {file:'itsm_02_dashboard', caption:'통합 대시보드 — SR 7건·AI 인사이트 실시간'},
                {file:'itsm_01_login',     caption:'로그인 화면 — JWT + 2FA/OTP 보안'},
                {file:'itsm_05_incidents', caption:'장애 관리 — P1~P3 MTTR 추적'},
                {file:'itsm_06_agents',    caption:'AI 에이전트 — Ollama 4개 모델 온라인'},
                {file:'itsm_07_ssl',       caption:'SSL 인증서 — 만료 추적·자동 갱신'},
              ].map((s,i) => (
                <div key={i} className="screenshot-card">
                  <img src={`/screenshots/${s.file}.png`} alt={s.caption}
                       className="screenshot-img"
                       onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
                  <div className="screenshot-placeholder" style={{display:'none'}}>
                    <span className="icon">🖥️</span><span>준비 중</span>
                  </div>
                  <div className="screenshot-caption">{s.caption}</div>
                </div>
              ))}
            </div>

            {/* GUARDiA Manager 실행 화면 */}
            <div className="section-header" style={{marginTop:'48px',marginBottom:'24px'}}>
              <span className="section-label" style={{fontSize:'12px'}}>GUARDiA Manager</span>
              <h3 style={{fontSize:'22px',fontWeight:'700',color:'var(--gray-900)',margin:'8px 0 0'}}>
                통합 관제 관리자 포털
              </h3>
            </div>
            <div className="gd-screenshots">
              {[
                {file:'07_manager_dashboard', caption:'Manager 대시보드 — 서버·SR·배포 종합 관제'},
                {file:'08_manager_dr',       caption:'DR 재해복구 — RTO/RPO 실적 대시보드'},
                {file:'09_manager_network',  caption:'네트워크 장비 — 설정 백업·변경 감지'},
                {file:'10_manager_csap',     caption:'CSAP 보안 점검 — 준수율 B+등급'},
              ].map((s,i) => (
                <div key={i} className="screenshot-card">
                  <img src={`/screenshots/${s.file}.png`} alt={s.caption}
                       className="screenshot-img"
                       onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
                  <div className="screenshot-placeholder" style={{display:'none'}}>
                    <span className="icon">🖥️</span><span>준비 중</span>
                  </div>
                  <div className="screenshot-caption">{s.caption}</div>
                </div>
              ))}
            </div>

            {/* GUARDiA Messenger 모바일 앱 */}
            <div className="section-header" style={{marginTop:'48px',marginBottom:'24px'}}>
              <span className="section-label" style={{fontSize:'12px'}}>GUARDiA Messenger</span>
              <h3 style={{fontSize:'22px',fontWeight:'700',color:'var(--gray-900)',margin:'8px 0 0'}}>
                모바일 앱 (Android · iOS)
              </h3>
            </div>
            <div className="gd-screenshots gd-screenshots--mobile">
              {[
                {file:'11_app_home',   caption:'홈 대시보드 — SR·서버 실시간 현황'},
                {file:'12_app_sr',     caption:'SR 서비스 요청 — 등록·처리·완료'},
                {file:'13_app_chat',   caption:'AI 챗봇 — 자연어 명령으로 서버 제어'},
              ].map((s,i) => (
                <div key={i} className="screenshot-card screenshot-card--mobile">
                  <img src={`/screenshots/${s.file}.png`} alt={s.caption}
                       className="screenshot-img"
                       onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
                  <div className="screenshot-placeholder" style={{display:'none'}}>
                    <span className="icon">📱</span><span>준비 중</span>
                  </div>
                  <div className="screenshot-caption">{s.caption}</div>
                </div>
              ))}
            </div>

            {/* 자율화·성장 신규 기능 */}
            <div className="section-header" style={{marginTop:'48px',marginBottom:'24px'}}>
              <span className="section-label" style={{fontSize:'12px',background:'#059669',color:'#fff',padding:'3px 10px',borderRadius:'12px'}}>NEW v2.1</span>
              <h3 style={{fontSize:'22px',fontWeight:'700',color:'var(--gray-900)',margin:'8px 0 0'}}>
                자율화 · 성장 기능 (2026-06 추가)
              </h3>
            </div>
            <div className="gd-screenshots">
              {[
                {file:'autonomy_health',   caption:'건강검진 — 매일 03:00 69개 테스트 자동 실행'},
                {file:'autonomy_growth',   caption:'성장일지 — 변경이력 자동 수집·196커밋 추적'},
                {file:'autonomy_score',    caption:'자립도 35% — 5차원 측정·85% 목표'},
                {file:'autonomy_finetune', caption:'LoRA 파인튜닝 — SR 523건으로 모델 자동 개선'},
              ].map((s,i) => (
                <div key={i} className="screenshot-card">
                  <img src={`/screenshots/${s.file}.png`} alt={s.caption}
                       className="screenshot-img"
                       onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
                  <div className="screenshot-placeholder" style={{display:'none',flexDirection:'column',alignItems:'center',justifyContent:'center',height:'200px',background:'linear-gradient(135deg,#f0fdf4,#dcfce7)',borderRadius:'8px',gap:'8px'}}>
                    <span style={{fontSize:'32px'}}>🌱</span>
                    <span style={{fontSize:'13px',color:'#059669',fontWeight:'600'}}>{s.caption}</span>
                    <a href="https://itsm.zioinfo.co.kr" target="_blank" rel="noopener noreferrer"
                       style={{fontSize:'12px',color:'#0369a1',textDecoration:'none',marginTop:'4px'}}>
                      라이브 확인 →
                    </a>
                  </div>
                  <div className="screenshot-caption">{s.caption}</div>
                </div>
              ))}
            </div>

            {/* 라이브 데모 링크 */}
            <div style={{background:'linear-gradient(135deg,#eff6ff,#dbeafe)',borderRadius:'16px',padding:'32px',marginTop:'48px',textAlign:'center'}}>
              <h3 style={{fontSize:'20px',fontWeight:'700',color:'var(--gray-900)',marginBottom:'8px'}}>
                지금 바로 확인하세요
              </h3>
              <p style={{color:'var(--gray-500)',marginBottom:'24px',fontSize:'14px'}}>
                실제 운영 중인 GUARDiA 시스템에 접속해 직접 체험할 수 있습니다
              </p>
              <div style={{display:'flex',gap:'12px',justifyContent:'center',flexWrap:'wrap'}}>
                {[
                  {href:'https://itsm.zioinfo.co.kr',    label:'GUARDiA ITSM',    icon:<IconWrench size={24} color="#00A0C8"/>, desc:'admin / 1111'},
                  {href:'https://manager.zioinfo.co.kr', label:'GUARDiA Manager', icon:<IconBarChart size={24} color="#00A0C8"/>, desc:'관리자 포털'},
                  {href:'https://mail.zioinfo.co.kr',    label:'웹메일',           icon:<IconEmail size={24} color="#00A0C8"/>, desc:'@zioinfo.co.kr'},
                  {href:'https://git.zioinfo.co.kr',     label:'Gitea',            icon:<IconCode size={24} color="#00A0C8"/>, desc:'소스 저장소'},
                ].map((l,i) => (
                  <a key={i} href={l.href} target="_blank" rel="noopener noreferrer"
                     style={{display:'flex',flexDirection:'column',alignItems:'center',gap:'6px',
                             padding:'16px 24px',background:'#fff',borderRadius:'12px',
                             border:'1px solid #bfdbfe',textDecoration:'none',minWidth:'120px',
                             boxShadow:'0 1px 3px rgba(0,0,0,.1)',transition:'transform .2s'}}
                     onMouseOver={e=>e.currentTarget.style.transform='translateY(-2px)'}
                     onMouseOut={e=>e.currentTarget.style.transform='translateY(0)'}>
                    <span style={{fontSize:'24px'}}>{l.icon}</span>
                    <span style={{fontSize:'14px',fontWeight:'700',color:'var(--gray-900)'}}>{l.label}</span>
                    <span style={{fontSize:'11px',color:'var(--gray-500)'}}>{l.desc}</span>
                  </a>
                ))}
              </div>
            </div>

            <div className="section-header" style={{marginTop:'60px',marginBottom:'32px'}}>
              <h3 style={{fontSize:'28px',fontWeight:'800',color:'var(--gray-900)'}}>핵심 기능 상세</h3>
            </div>
            <div className="gd-features-grid">
              {FEATURES.map((f,i) => (
                <div key={i} className="gd-feature-card card">
                  <div className="gd-feature-icon">{f.icon}</div>
                  <h3>{f.title}</h3>
                  <p>{f.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* ── 모바일 앱 ────────────────────────────────────── */}
      {activeTab === 'app' && (
        <section className="section">
          <div className="container">
            <div className="section-header">
              <span className="section-label">GUARDiA Messenger App</span>
              <h2 className="section-title">현장에서 바로<br/><em>스마트폰으로 관제</em></h2>
              <div className="divider" />
              <p className="section-desc">
                Android · iOS 모두 지원. SR 접수·처리, DR 복구 테스트, 네트워크 장비 관제,<br/>
                AI 챗봇 명령까지 — 어디서든 GUARDiA를 손에 쥐세요.
              </p>
            </div>
            <div className="gd-screenshots gd-screenshots--mobile">
              {[
                {file:'11_app_home',    caption:'홈 대시보드 — SR·서버 실시간 현황'},
                {file:'12_app_sr',      caption:'SR 목록 — 우선순위별 처리'},
                {file:'13_app_chat',    caption:'AI 챗봇 — 자연어로 서버 제어'},
                {file:'14_app_dr',      caption:'DR 재해복구 — RTO/RPO 추적'},
                {file:'15_app_network', caption:'네트워크 장비 — 현장 점검'},
              ].map((s,i) => (
                <div key={i} className="screenshot-card screenshot-card--mobile">
                  <img src={`/screenshots/${s.file}.png`} alt={s.caption}
                       className="screenshot-img"
                       onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
                  <div className="screenshot-placeholder" style={{display:'none'}}>
                    <span className="icon">📱</span><span>준비 중</span>
                  </div>
                  <div className="screenshot-caption">{s.caption}</div>
                </div>
              ))}
            </div>

            {/* 앱 스토어 배지 */}
            <div style={{display:'flex',justifyContent:'center',gap:16,marginTop:40}}>
              <a href="#" style={{display:'flex',alignItems:'center',gap:10,
                padding:'12px 24px',background:'#1e293b',borderRadius:12,
                color:'#e2e8f0',textDecoration:'none',border:'1px solid rgba(255,255,255,.1)'}}>
                <span style={{fontSize:28}}>🤖</span>
                <div><div style={{fontSize:10,opacity:.6}}>다운로드</div><div style={{fontWeight:700,fontSize:15}}>Google Play</div></div>
              </a>
              <a href="#" style={{display:'flex',alignItems:'center',gap:10,
                padding:'12px 24px',background:'#1e293b',borderRadius:12,
                color:'#e2e8f0',textDecoration:'none',border:'1px solid rgba(255,255,255,.1)'}}>
                <span style={{fontSize:28}}>🍎</span>
                <div><div style={{fontSize:10,opacity:.6}}>다운로드</div><div style={{fontWeight:700,fontSize:15}}>App Store</div></div>
              </a>
            </div>
          </div>
        </section>
      )}

      {/* ── 메신저 봇 상세 소개 ──────────────────────────── */}
      {activeTab === 'messenger' && (
        <section className="section">
          <div className="container">
            <div className="section-header">
              <span className="section-label">ChatOps Messenger</span>
              <h2 className="section-title">메신저 하나로<br/><em>모든 인프라를 제어</em></h2>
              <div className="divider" />
              <p className="section-desc">
                익숙한 메신저에서 명령어 하나로 서버 배포·장애 대응·보고서 발송까지.<br/>
                GUARDiA Bot은 25개 명령어로 IT 운영의 모든 순간을 지원합니다.
              </p>
            </div>

            {/* 지원 플랫폼 */}
            <div className="messenger-platforms">
              {MESSENGER_PLATFORMS.map((p,i) => (
                <div key={i} className="messenger-platform" style={{background: p.color}}>
                  <span className="platform-icon">{p.icon}</span>
                  <div>
                    <strong style={{color: p.textColor}}>{p.name}</strong>
                    <p style={{color: p.textColor, opacity:.85}}>{p.desc}</p>
                  </div>
                </div>
              ))}
            </div>

            {/* 명령어 카탈로그 */}
            <div className="cmd-catalog">
              <h3 className="cmd-catalog-title">25개 봇 명령어 전체 목록</h3>
              {['SR 관리','인시던트','배포 제어','PMS','모니터링','보안','공지'].map(cat => {
                const cmds = BOT_COMMANDS.filter(c => c.cat === cat);
                return (
                  <div key={cat} className="cmd-group">
                    <h4 className="cmd-group-title">{cat}</h4>
                    <div className="cmd-list">
                      {cmds.map((c,i) => (
                        <div key={i} className="cmd-item">
                          <code className="cmd-code">{c.cmd}</code>
                          <span className="cmd-desc">{c.desc}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>

            {/* 데모 시나리오 */}
            <div className="messenger-demo">
              <h3 className="demo-title">실제 운영 시나리오</h3>
              <div className="demo-scenario">
                <div className="demo-step">
                  <div className="step-num">1</div>
                  <div className="step-content">
                    <strong>장애 탐지</strong>
                    <p>Scouter APM이 서버 CPU 90% 감지 → 자동으로 GUARDiA 운영 채널에 경보 발송</p>
                    <div className="chat-bubble bot">🚨 web-01 CPU 90.3% — P2 인시던트 자동 등록: INC-20260530-A1B2C3</div>
                  </div>
                </div>
                <div className="demo-step">
                  <div className="step-num">2</div>
                  <div className="step-content">
                    <strong>담당자 즉시 대응</strong>
                    <p>메신저에서 RCA 분석 요청</p>
                    <div className="chat-bubble user">/rca INC-20260530-A1B2C3</div>
                    <div className="chat-bubble bot">
                      🤖 AI RCA 분석 완료<br/>
                      근본원인: 메모리 누수 (Heap 98%)<br/>
                      재발방지: WAS 재기동 + 힙덤프 분석<br/>
                      신뢰도: 87%
                    </div>
                  </div>
                </div>
                <div className="demo-step">
                  <div className="step-num">3</div>
                  <div className="step-content">
                    <strong>원격 조치 실행</strong>
                    <p>SSH 재기동 명령 실행</p>
                    <div className="chat-bubble user">!sm web-01 tomcat_restart</div>
                    <div className="chat-bubble bot">
                      ✅ web-01 Tomcat 재기동 완료<br/>
                      소요: 38초 | CPU: 12% | 정상화
                    </div>
                  </div>
                </div>
                <div className="demo-step">
                  <div className="step-num">4</div>
                  <div className="step-content">
                    <strong>자동 보고</strong>
                    <p>인시던트 처리 결과 자동 보고서 발송</p>
                    <div className="chat-bubble user">/notify 22:15 web-01 서버 장애 복구 완료. 원인: 메모리 누수 재발 방지 조치 완료.</div>
                    <div className="chat-bubble bot">✅ 운영팀 전체 공지 발송 완료 (ops 채널)</div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </section>
      )}

      {/* ── GUARDiA Manager ──────────────────────────────── */}
      {activeTab === 'manager' && (
        <section className="section">
          <div className="container">
            <div className="section-header">
              <span className="section-label">GUARDiA Manager</span>
              <h2 className="section-title">통합 관제 관리자 포털<br/><em>클라우드 콘솔 스타일</em></h2>
              <div className="divider" />
              <p className="section-desc">
                ITSM·서버·배포·네트워크·보안·AI를 하나의 화면에서 관제합니다.<br/>
                DR 자동화, 네트워크 장비 설정 백업, CSAP 준수율까지 통합 대시보드로 제공합니다.
              </p>
            </div>
            <div className="gd-screenshots" style={{gridTemplateColumns:'repeat(2,1fr)'}}>
              {[
                {file:'07_manager_dashboard', caption:'통합 운영 대시보드 — 서버·SR·배포 현황'},
                {file:'08_manager_dr',        caption:'DR 재해복구 — RTO/RPO 실적 대시보드'},
                {file:'09_manager_network',   caption:'네트워크 장비 — 설정 백업·변경 감지'},
                {file:'10_manager_csap',      caption:'CSAP 보안 점검 — 준수율 A~D 등급'},
              ].map((s,i) => (
                <div key={i} className="screenshot-card">
                  <img src={`/screenshots/${s.file}.png`} alt={s.caption}
                       className="screenshot-img"
                       onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
                  <div className="screenshot-placeholder" style={{display:'none'}}>
                    <span className="icon">🖥️</span><span>준비 중</span>
                  </div>
                  <div className="screenshot-caption">{s.caption}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* ── 에디션 비교 ──────────────────────────────────── */}
      {activeTab === 'editions' && (
        <section className="section">
          <div className="container">
            <div className="section-header">
              <span className="section-label">Editions</span>
              <h2 className="section-title">기관 규모에 맞는<br/><em>에디션 선택</em></h2>
              <div className="divider" />
            </div>
            <div className="gd-editions-grid">
              {EDITIONS.map((e,i) => (
                <div key={i} className={`gd-edition-card ${e.highlight ? 'highlight' : ''}`}
                     style={{'--ed-color': e.color}}>
                  {e.highlight && <div className="edition-recommend">추천</div>}
                  <div className="edition-header">
                    <h3>{e.name}</h3>
                    <span className="edition-badge">{e.badge}</span>
                  </div>
                  <p className="edition-target">{e.target}</p>
                  <ul className="edition-features">
                    {e.features.map((f,j) => (
                      <li key={j}><span className="check">✓</span>{f}</li>
                    ))}
                  </ul>
                  <Link to={e.href} className="btn edition-cta">
                    {e.cta}
                  </Link>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* ── 기술 스택 ─────────────────────────────────────── */}
      {activeTab === 'tech' && (
        <section className="section">
          <div className="container">
            <div className="section-header">
              <span className="section-label">Technology</span>
              <h2 className="section-title">검증된<br/><em>기술 스택</em></h2>
              <div className="divider" />
              <p className="section-desc">온프레미스 전용 설계 — 외부 클라우드 의존 없는 완전 폐쇄망 동작</p>
            </div>
            <div className="gd-tech-grid">
              {TECH_STACK.map((t,i) => (
                <div key={i} className="gd-tech-card card">
                  <h3 className="tech-category">{t.category}</h3>
                  <ul className="tech-items">
                    {t.items.map((item,j) => (
                      <li key={j}>{item}</li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* ── 도입 사례 ─────────────────────────────────────── */}
      {activeTab === 'usecase' && (
        <section className="section">
          <div className="container">
            <div className="section-header">
              <span className="section-label">Use Cases</span>
              <h2 className="section-title">실제 <em>도입 사례</em></h2>
              <div className="divider" />
            </div>
            <div className="gd-usecases">
              {[
                {org:'광역 지방자치단체', result:'레거시 서버 200대 SSH 자동화, 운영 인력 3명→1명', badge:'중앙부처'},
                {org:'공공기관 IT센터',   result:'월간 SR 500건 처리, AI 자동분류로 80% 응답시간 단축', badge:'공공기관'},
                {org:'지방 교육청',       result:'Tomcat 100대 무중단 배포 자동화, 장애 대응 시간 70% 단축', badge:'교육'},
              ].map((u,i) => (
                <div key={i} className="usecase-card card">
                  <span className="badge badge-primary">{u.badge}</span>
                  <h3>{u.org}</h3>
                  <p>{u.result}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* ── 화면 미리보기 ─────────────────────────────────────── */}
      {activeTab === 'screenshots' && (
        <section className="section">
          <div className="container">
            <div className="section-header">
              <span className="section-label">Screenshots</span>
              <h2 className="section-title">GUARDiA <em>화면 미리보기</em></h2>
              <p className="section-sub">실제 운영 환경의 스크린샷입니다</p>
              <div className="divider" />
            </div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(320px,1fr))',gap:24}}>
              {[
                {src:'/screenshots/itsm_02_dashboard.png', title:'ITSM 통합 대시보드',       desc:'SR 현황·AI 인사이트·운영 지표 실시간 모니터링. 나눔고딕 UI.'},
                {src:'/screenshots/itsm_03_sr_list.png',   title:'SR 서비스 요청 목록',      desc:'15건 SR 관리. HIGH/MEDIUM/LOW 우선순위. AI봇 자동 처리.'},
                {src:'/screenshots/itsm_04_cmdb.png',      title:'CMDB 서버 자산 관리',      desc:'24대 서버 자산. 상태·역할·OS 통합 관리. SSH 에이전트리스.'},
                {src:'/screenshots/itsm_05_incidents.png', title:'장애 관리 (인시던트)',     desc:'P1~P3 등급별 장애. MTTR 45분. AI 자동 RCA 분석.'},
                {src:'/screenshots/itsm_06_agents.png',    title:'AI 에이전트',              desc:'Ollama 온라인. llava·codellama·llama3·nomic 4개 모델.'},
                {src:'/screenshots/itsm_07_ssl.png',       title:'SSL 인증서 관리',          desc:'만료 추적·자동 갱신·Let\'s Encrypt/ZeroSSL 지원.'},
                {src:'/screenshots/manager_02_dashboard.png', title:'GUARDiA Manager',       desc:'통합 관제 포털. 서버·SR·배포 현황 한눈에.'},
                {src:'/screenshots/home_07_guardia.png',   title:'GUARDiA 홈페이지',         desc:'160+ 기능 · 1,000+ API · 9개 카테고리 · 서브도메인 HTTPS.'},
                {src:'/screenshots/home_09_news.png',      title:'뉴스룸 (DB 동적)',          desc:'뉴스·기술블로그·공지사항 DB 관리. 관리자 페이지 CRUD.'},
                {src:'/screenshots/mail_01_webmail.png',   title:'zioinfo 웹메일',           desc:'Postfix/Dovecot 연동. @zioinfo.co.kr 기업 웹메일.'},
                {src:'/screenshots/home_02_greeting.png',  title:'CEO 인사말',               desc:'대표이사 홍영택 인사말. GUARDiA 비전 소개.'},
                {src:'/screenshots/home_08_business.png',  title:'파트너 페이지',             desc:'Oracle·RedHat·TmaxSoft·SamsungSDS 실제 로고 크롤링.'},
              ].map((sc,i) => (
                <div key={i} style={{borderRadius:12,overflow:'hidden',border:'1px solid #e2e8f0',boxShadow:'0 2px 12px rgba(0,51,102,.08)'}}>
                  <div style={{background:'#f1f5f9',height:8,display:'flex',gap:4,padding:'8px 12px',alignItems:'center'}}>
                    {['#ef4444','#f59e0b','#22c55e'].map(col=><div key={col} style={{width:10,height:10,borderRadius:'50%',background:col}}/>)}
                  </div>
                  <img src={sc.src} alt={sc.title} style={{width:'100%',display:'block',objectFit:'cover'}}
                       onError={e=>{e.target.parentElement.style.display='none'}} />
                  <div style={{padding:'12px 16px'}}>
                    <div style={{fontWeight:700,fontSize:14,color:'#003366'}}>{sc.title}</div>
                    <div style={{fontSize:12,color:'#64748b',marginTop:4}}>{sc.desc}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* 신규 기능 하이라이트 */}
            <div style={{marginTop:48}}>
              <h3 style={{fontSize:22,fontWeight:800,color:'#1e293b',textAlign:'center',marginBottom:24}}>
                2026 신규 기능 하이라이트
              </h3>
              <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))',gap:16}}>
                {[
                  {icon:<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="8" cy="10" r="1.5" fill="#00A0C8" stroke="none"/><circle cx="13" cy="8" r="1.5" fill="#00A0C8" stroke="none"/><circle cx="16" cy="12" r="1.5" fill="#00A0C8" stroke="none"/><path d="M12 22c0-2.5-2-4-4-4h-2a2 2 0 010-4"/></svg>,title:'디자인 AI SR 자동화',badge:'NEW',
                   desc:'Ollama llava 비전으로 스크린샷 분석. CSS 변경·SVG 아이콘·UI 리뷰를 AI가 자동 처리. 디자인 SR 처리 시간 90% 단축.'},
                  {icon:<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="2" width="6" height="11" rx="3"/><path d="M19 10a7 7 0 01-14 0M12 17v5M8 22h8"/></svg>,title:'음성인식 명령 실행',badge:'NEW',
                   desc:'expo-speech-recognition 온디바이스. 폐쇄망 완전 지원. "서버 상태 확인해줘" → /server status 자동 매핑.'},
                  {icon:<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18h6M10 22h4M12 2a7 7 0 017 7c0 2.4-1.1 4.5-2.8 6H7.8A7 7 0 0112 2z"/></svg>,title:'다음명령 제시 (Smart UX)',badge:'NEW',
                   desc:'Ollama 대화 컨텍스트 분석→추천 명령 3개. 사용 이력 학습. Messenger Bot·Mobile App 통합.'},
                  {icon:<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5a3 3 0 10-3 3H12"/><path d="M12 5a3 3 0 113 3H12"/><path d="M6 8a4 4 0 000 8h.5M18 8a4 4 0 010 8h-.5"/><path d="M8 16a4 4 0 008 0v-4H8v4z"/></svg>,title:'AI 뇌 엔진 (Brain)',badge:'NEW',
                   desc:'영구 메모리(pgvector)·자동 스킬 발굴·LoRA 파인튜닝·관찰형 AI. 운영 경험 누적→스스로 진화.'},
                  {icon:<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l9 4v5c0 5.2-3.9 10-9 11C6.9 21 3 16.2 3 11V6l9-4z"/><path d="M9 12l2 2 4-4"/></svg>,title:'Zero Trust + SBOM',badge:'NEW',
                   desc:'ZTNA 정책 엔진·디바이스 신뢰 점수. SBOM CycloneDX 1.4 생성·VEX. EU CRA/공공 조달 준수.'},
                  {icon:'🌱',title:'GreenOps + Edge IoT',badge:'NEW',
                   desc:'Scope 2 탄소 배출 추적(EU CSRD). 9.21억 IoT 디바이스 텔레메트리. Carbon-aware 스케줄링.'},
                ].map((f,i) => (
                  <div key={i} style={{background:'#fff',border:'1px solid #e2e8f0',borderRadius:12,padding:20,
                                       borderTop:`3px solid #003366`}}>
                    <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:10}}>
                      <span style={{display:'flex',alignItems:'center'}}>{f.icon}</span>
                      <span style={{fontWeight:700,fontSize:15,color:'#003366'}}>{f.title}</span>
                      <span style={{background:'#003366',color:'#fff',fontSize:10,padding:'2px 7px',
                                    borderRadius:8,marginLeft:'auto'}}>{f.badge}</span>
                    </div>
                    <p style={{fontSize:13,color:'#475569',lineHeight:1.7,margin:0}}>{f.desc}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      )}

      {/* ── 설치 가이드 ──────────────────────────────────────── */}
      {activeTab === 'install' && (
        <section className="section">
          <div className="container">
            <div className="section-header">
              <span className="section-label">Installation Guide</span>
              <h2 className="section-title">GUARDiA <em>설치 가이드</em></h2>
              <p className="section-sub">폐쇄망(공공기관 내부망)과 개방망 환경별 단계별 설치 방법</p>
              <div className="divider" />
            </div>

            {/* 시스템 요구사항 */}
            <div style={{background:'#eff6ff',border:'1px solid #bfdbfe',borderRadius:12,padding:20,marginBottom:32}}>
              <h3 style={{fontSize:16,fontWeight:700,color:'#003366',marginBottom:12}}>📋 시스템 요구사항 (공통)</h3>
              <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(200px,1fr))',gap:12,fontSize:13}}>
                {[
                  {label:'OS',         val:'Ubuntu 22.04 LTS / RHEL 8 이상'},
                  {label:'CPU',        val:'8코어 이상 권장 (4코어 최소)'},
                  {label:'RAM',        val:'16GB 이상 (Ollama 8GB + 서비스 8GB)'},
                  {label:'GPU',        val:'8GB VRAM (LoRA 파인튜닝 시, 선택)'},
                  {label:'Storage',    val:'100GB SSD 이상'},
                  {label:'Network',    val:'내부망 포트: 8443, 8090, 8025, 9001'},
                ].map(r=>(
                  <div key={r.label} style={{background:'#fff',padding:'10px 14px',borderRadius:8,border:'1px solid #dbeafe'}}>
                    <div style={{fontWeight:700,color:'#003366',marginBottom:2}}>{r.label}</div>
                    <div style={{color:'#374151'}}>{r.val}</div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:32}}>

              {/* 폐쇄망 설치 */}
              <div>
                <div style={{background:'#003366',color:'#fff',borderRadius:'12px 12px 0 0',padding:'16px 20px',display:'flex',alignItems:'center',gap:8}}>
                  <span style={{fontSize:20}}>🔒</span>
                  <div>
                    <div style={{fontSize:16,fontWeight:800}}>폐쇄망 설치</div>
                    <div style={{fontSize:12,opacity:.8}}>인터넷 차단 공공기관 내부망 환경</div>
                  </div>
                </div>
                <div style={{border:'1px solid #e2e8f0',borderTop:'none',borderRadius:'0 0 12px 12px',padding:20}}>

                  {/* 보안 경고 */}
                  <div style={{background:'#fef3c7',border:'1px solid #fcd34d',borderRadius:8,padding:12,marginBottom:16,fontSize:12}}>
                    <strong>⚠️ 보안 주의사항</strong><br/>
                    • 설치 파일 무결성 검증 (SHA-256) 필수<br/>
                    • USB/이동식 미디어 사용 시 바이러스 검사<br/>
                    • 설치 계정은 관리자 전용 (root 사용 후 비활성화)<br/>
                    • 설치 완료 후 기본 비밀번호 즉시 변경
                  </div>

                  {[
                    {step:'STEP 1', title:'오프라인 패키지 준비 (외부망 PC)',
                     color:'#003366',
                     cmds:[
                       '# 외부망 PC에서 실행',
                       'pip download -r requirements.txt -d ./packages/',
                       'ollama pull llama3 && ollama pull llava:7b',
                       '# Ollama 모델 파일 위치: ~/.ollama/models/',
                       'tar czf guardia-offline.tar.gz packages/ models/',
                     ]},
                    {step:'STEP 2', title:'파일 이전 (보안 반입)',
                     color:'#005A8C',
                     cmds:[
                       '# 승인된 이동식 미디어 사용',
                       '# SHA-256 체크섬 검증 필수',
                       'sha256sum guardia-offline.tar.gz > checksum.txt',
                       '# 내부망 서버로 이전 후 검증',
                       'sha256sum -c checksum.txt',
                     ]},
                    {step:'STEP 3', title:'의존성 오프라인 설치',
                     color:'#1d4ed8',
                     cmds:[
                       'tar xzf guardia-offline.tar.gz',
                       'pip install --no-index --find-links=./packages/ \\',
                       '  fastapi sqlalchemy asyncpg pgvector',
                       '# PostgreSQL (오프라인 deb/rpm 패키지)',
                       'apt install ./postgresql_16_amd64.deb',
                     ]},
                    {step:'STEP 4', title:'Ollama 오프라인 모델 설치',
                     color:'#7c3aed',
                     cmds:[
                       '# Ollama 바이너리 설치',
                       'curl -fsSL https://ollama.ai/install.sh | sh',
                       '# 오프라인 모델 복사',
                       'cp -r ./models/ ~/.ollama/',
                       'ollama list  # 모델 확인',
                     ]},
                    {step:'STEP 5', title:'GUARDiA 서비스 설정',
                     color:'#059669',
                     cmds:[
                       'git clone <내부망-Gitea-URL>/zio/guardia-itsm.git',
                       'cd guardia-itsm',
                       'cp .env.closed .env  # 폐쇄망 설정',
                       '# .env 필수 설정:',
                       'GUARDIA_NETWORK_MODE=closed',
                       'DATABASE_URL=postgresql+asyncpg://...',
                       'OLLAMA_BASE_URL=http://localhost:11434',
                     ]},
                    {step:'STEP 6', title:'서비스 시작 및 보안 강화',
                     color:'#dc2626',
                     cmds:[
                       'systemctl enable --now guardia',
                       '# 방화벽 설정 (내부망만 허용)',
                       'ufw allow from 192.168.0.0/16 to any port 8443',
                       'ufw deny 8443  # 외부 차단',
                       '# SSL 인증서 (내부 CA 사용)',
                       'openssl req -x509 -nodes -days 3650 ...',
                       '# 초기 admin 비밀번호 즉시 변경',
                     ]},
                  ].map((s,i) => (
                    <div key={i} style={{marginBottom:16}}>
                      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:6}}>
                        <span style={{background:s.color,color:'#fff',fontSize:11,padding:'2px 8px',borderRadius:10,fontWeight:700}}>{s.step}</span>
                        <span style={{fontWeight:700,fontSize:14,color:'#1e293b'}}>{s.title}</span>
                      </div>
                      <pre style={{background:'#0f172a',color:'#e2e8f0',borderRadius:8,padding:12,
                                   fontSize:11,overflowX:'auto',margin:0,lineHeight:1.7}}>
                        {s.cmds.join('\n')}
                      </pre>
                    </div>
                  ))}
                </div>
              </div>

              {/* 개방망 설치 */}
              <div>
                <div style={{background:'#059669',color:'#fff',borderRadius:'12px 12px 0 0',padding:'16px 20px',display:'flex',alignItems:'center',gap:8}}>
                  <span style={{fontSize:20}}>🌐</span>
                  <div>
                    <div style={{fontSize:16,fontWeight:800}}>개방망 설치</div>
                    <div style={{fontSize:12,opacity:.8}}>인터넷 연결 가능한 일반 서버 환경</div>
                  </div>
                </div>
                <div style={{border:'1px solid #e2e8f0',borderTop:'none',borderRadius:'0 0 12px 12px',padding:20}}>

                  {/* 보안 경고 */}
                  <div style={{background:'#fef3c7',border:'1px solid #fcd34d',borderRadius:8,padding:12,marginBottom:16,fontSize:12}}>
                    <strong>⚠️ 보안 주의사항</strong><br/>
                    • HTTPS 반드시 적용 (Let's Encrypt 또는 공인 인증서)<br/>
                    • 관리 포트(8443, 8090) 방화벽으로 접근 제한<br/>
                    • 기본 자격증명 설치 후 즉시 변경<br/>
                    • 정기 보안 패치 적용 (crontab 자동화 권장)
                  </div>

                  {[
                    {step:'STEP 1', title:'시스템 준비 및 의존성 설치',
                     color:'#059669',
                     cmds:[
                       '# Ubuntu 22.04 기준',
                       'apt update && apt upgrade -y',
                       'apt install -y python3.11 python3-pip postgresql-16',
                       '             nodejs npm git',
                       '# Ollama 설치 (on-premise AI)',
                       'curl -fsSL https://ollama.ai/install.sh | sh',
                     ]},
                    {step:'STEP 2', title:'Ollama AI 모델 설치',
                     color:'#0891b2',
                     cmds:[
                       '# 필수 모델 (총 약 10GB)',
                       'ollama pull llama3      # 일반 NLP (4.7GB)',
                       'ollama pull llava:7b    # 비전/이미지 분석',
                       'ollama pull nomic-embed-text  # 임베딩',
                       'ollama pull codellama:7b      # 코드 분석',
                       '# 서비스 자동 시작',
                       'systemctl enable --now ollama',
                     ]},
                    {step:'STEP 3', title:'GUARDiA 소스 설치',
                     color:'#7c3aed',
                     cmds:[
                       'git clone https://github.com/zio/guardia-itsm.git',
                       'cd guardia-itsm',
                       'python3 -m venv venv && source venv/bin/activate',
                       'pip install -r requirements.txt',
                       '# PostgreSQL DB 초기화',
                       'createdb guardia_db',
                       'python3 -c "from database import init_db; init_db()"',
                     ]},
                    {step:'STEP 4', title:'환경 설정 (.env)',
                     color:'#d97706',
                     cmds:[
                       'cp .env.example .env',
                       '# 필수 설정 변경:',
                       'DATABASE_URL=postgresql+asyncpg://user:pass@localhost/guardia_db',
                       'SECRET_KEY=$(openssl rand -hex 32)',
                       'AES_KEY=$(openssl rand -hex 16)  # 자격증명 암호화',
                       'OLLAMA_BASE_URL=http://localhost:11434',
                       '# 보안: 외부 API 호출 완전 금지',
                       'GUARDIA_NETWORK_MODE=open',
                     ]},
                    {step:'STEP 5', title:'HTTPS 및 방화벽 설정',
                     color:'#dc2626',
                     cmds:[
                       '# Let\'s Encrypt SSL (도메인 있는 경우)',
                       'apt install certbot',
                       'certbot certonly --standalone -d your-domain.go.kr',
                       '# 방화벽 설정 (필수)',
                       'ufw allow ssh',
                       'ufw allow from <허용-IP> to any port 8443',
                       'ufw allow from <허용-IP> to any port 8090',
                       'ufw enable',
                     ]},
                    {step:'STEP 6', title:'서비스 등록 및 시작',
                     color:'#003366',
                     cmds:[
                       '# systemd 서비스 등록',
                       'cp deploy/guardia.service /etc/systemd/system/',
                       'systemctl daemon-reload',
                       'systemctl enable --now guardia',
                       '# 초기 관리자 계정 설정 (즉시 변경!)',
                       'python3 manage.py create-admin',
                       '# 설치 확인',
                       'curl -k https://localhost:8443/health',
                     ]},
                  ].map((s,i) => (
                    <div key={i} style={{marginBottom:16}}>
                      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:6}}>
                        <span style={{background:s.color,color:'#fff',fontSize:11,padding:'2px 8px',borderRadius:10,fontWeight:700}}>{s.step}</span>
                        <span style={{fontWeight:700,fontSize:14,color:'#1e293b'}}>{s.title}</span>
                      </div>
                      <pre style={{background:'#0f172a',color:'#e2e8f0',borderRadius:8,padding:12,
                                   fontSize:11,overflowX:'auto',margin:0,lineHeight:1.7}}>
                        {s.cmds.join('\n')}
                      </pre>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* 설치 후 확인 사항 */}
            <div style={{marginTop:32,background:'#f0fdf4',border:'1px solid #bbf7d0',borderRadius:12,padding:20}}>
              <h3 style={{fontSize:16,fontWeight:700,color:'#166534',marginBottom:12}}>✅ 설치 완료 후 확인 사항</h3>
              <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))',gap:10,fontSize:13}}>
                {[
                  '기본 admin 비밀번호 변경 완료',
                  'HTTPS 인증서 적용 (유효기간 확인)',
                  '방화벽 규칙 검토 (불필요 포트 차단)',
                  'Ollama 모델 정상 로드 (ollama list)',
                  'PostgreSQL 자동 백업 설정',
                  'systemd 서비스 자동 시작 등록',
                  '로그 수집 경로 확인 (/opt/guardia/logs)',
                  'CSAP 보안 점검 실행 (선택)',
                ].map((item,i)=>(
                  <div key={i} style={{display:'flex',alignItems:'center',gap:6,padding:'8px 12px',
                                       background:'#fff',borderRadius:8,border:'1px solid #dcfce7'}}>
                    <span style={{color:'#16a34a',fontWeight:700}}>✓</span>
                    <span style={{color:'#374151'}}>{item}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* 문의 */}
            <div style={{textAlign:'center',marginTop:32,padding:24,background:'#eff6ff',borderRadius:12}}>
              <p style={{fontSize:15,color:'#003366',fontWeight:600,marginBottom:8}}>
                설치 지원이 필요하신가요?
              </p>
              <p style={{fontSize:13,color:'#64748b',marginBottom:16}}>
                지오정보기술 전문 엔지니어가 기관 환경에 맞는 설치를 지원합니다.
              </p>
              <Link to="/support/contact?type=install" className="btn btn-primary">
                설치 지원 문의
              </Link>
            </div>
          </div>
        </section>
      )}

      {/* ── 매뉴얼 ───────────────────────────────────────────── */}
      {activeTab === 'manual' && (
        <section className="section">
          <div className="container">
            <div className="section-header">
              <span className="section-label">Manual</span>
              <h2 className="section-title">GUARDiA <em>운영 매뉴얼</em></h2>
              <p className="section-sub">운영자·엔지니어·관리자별 상세 매뉴얼</p>
              <div className="divider" />
            </div>

            <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))',gap:20}}>
              {[
                {icon:<IconClipboard size={26} color="#003366"/>, title:'운영자 지침서',        no:'04', desc:'일상 운영 절차, SR 관리, 장애 대응, 보안 운영 지침. 16개 섹션.',     tag:'필수'},
                {icon:<IconCode size={26} color="#003366"/>,      title:'설치 가이드 (Linux)',  no:'05', desc:'Ubuntu/CentOS/RHEL 환경 설치. 폐쇄망·개방망 별도 가이드 포함.',     tag:'설치'},
                {icon:<IconServer size={26} color="#003366"/>,    title:'설치 가이드 (Windows)',no:'06', desc:'Windows Server WSL2 기반 설치. 방화벽·포트 설정 상세.',              tag:'설치'},
                {icon:<IconKey size={26} color="#003366"/>,       title:'라이선스 발급 가이드', no:'14', desc:'커뮤니티·스탠다드·엔터프라이즈 라이선스 키 발급·갱신·관리.',         tag:'관리'},
                {icon:<IconGlobe size={26} color="#003366"/>,     title:'API 명세서',           no:'16', desc:'1,000개+ REST API 엔드포인트 전체 명세. Swagger/OpenAPI 3.0.',      tag:'개발'},
                {icon:<IconShield size={26} color="#003366"/>,    title:'DR 재해복구 가이드',   no:'39', desc:'DR 자동화·Failover·네트워크장비·CSAP 운영 가이드.',                   tag:'운영'},
                {icon:<IconZap size={26} color="#003366"/>,       title:'CI/CD 파이프라인 가이드',no:'20',desc:'post-commit 훅·Gitea·서버cron·5시간 자동 배포 흐름.',              tag:'DevOps'},
                {icon:<IconBuilding size={26} color="#003366"/>,  title:'zio서버 운영가이드',   no:'19', desc:'서브도메인 전환·자동배포·SSL·nginx 설정. 2026-06-04 업데이트.',      tag:'NEW'},
              ].map((m,i)=>(
                <div key={i} style={{background:'#fff',border:'1px solid #e2e8f0',borderRadius:12,padding:20,
                                     borderLeft:`4px solid #003366`,transition:'box-shadow .2s'}}>
                  <div style={{display:'flex',alignItems:'flex-start',gap:10}}>
                    <span style={{display:'flex',alignItems:'center',paddingTop:2}}>{m.icon}</span>
                    <div style={{flex:1}}>
                      <div style={{display:'flex',alignItems:'center',gap:6,marginBottom:4}}>
                        <span style={{fontWeight:700,fontSize:14,color:'#003366'}}>{m.title}</span>
                        <span style={{background:m.tag==='NEW'?'#003366':m.tag==='필수'?'#dc2626':'#e2e8f0',
                                      color:m.tag==='NEW'||m.tag==='필수'?'#fff':'#64748b',
                                      fontSize:10,padding:'1px 6px',borderRadius:8,fontWeight:600}}>
                          {m.tag}
                        </span>
                      </div>
                      <div style={{fontSize:11,color:'#94a3b8',marginBottom:6}}>문서 #{m.no}</div>
                      <p style={{fontSize:12,color:'#475569',lineHeight:1.6,margin:0}}>{m.desc}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* 매뉴얼 전체 목록 */}
            <div style={{marginTop:32,background:'#f8fafc',borderRadius:12,padding:20}}>
              <h3 style={{fontSize:15,fontWeight:700,color:'#1e293b',marginBottom:16}}>
                📚 전체 매뉴얼 목록 (44개 문서)
              </h3>
              <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))',gap:8}}>
                {[
                  '01 분석설계서', '02 단위통합테스트계획서', '03 개발자지침서',
                  '04 운영자지침서 ⭐', '05 설치가이드(Linux)', '06 설치가이드(Windows)',
                  '07 SI프로젝트관리 분석설계서', '08 AI에이전트 Paperclip 설계서',
                  '09~13 확장개발 Priority 1~5', '14 라이선스키 발급가이드',
                  '15 UI Nifty 가이드', '16 API 명세서 ⭐', '17 홈페이지 개발가이드',
                  '18 zio서버 설치SW 목록', '19 zio서버 운영가이드', '20 CI/CD 가이드',
                  '33 Messenger 앱스토어 등록', '34 Messenger 개발·배포 가이드',
                  '39 DR·네트워크·CSAP 운영가이드', '40 바이브코딩 운영가이드',
                  '41 DB 연결정보', '42 zio서버 SW 구성도', '43 레파지토리 구조 가이드',
                  '44 신규기능 운영가이드 ⭐ NEW',
                ].map((doc,i)=>(
                  <div key={i} style={{fontSize:12,color:'#374151',padding:'6px 10px',
                                       background:'#fff',borderRadius:6,border:'1px solid #e2e8f0'}}>
                    {doc}
                  </div>
                ))}
              </div>
              <p style={{fontSize:12,color:'#94a3b8',marginTop:12,textAlign:'right'}}>
                ⭐ 필수 문서 | 자세한 매뉴얼은 도입 상담 시 제공됩니다.
              </p>
            </div>
          </div>
        </section>
      )}

      {/* ── CTA ─────────────────────────────────────────────── */}
      <section className="gd-cta">
        <div className="container">
          <h2>지금 바로 무료 데모를 경험해 보세요</h2>
          <p>전문 컨설턴트가 귀 기관 환경에 맞는 최적의 구성을 제안해 드립니다.</p>
          <div className="gd-cta-actions">
            <Link to="/support/contact?type=demo" className="btn btn-white btn-lg">무료 데모 신청</Link>
            <Link to="/support/catalog"           className="btn btn-lg" style={{color:'rgba(255,255,255,.8)',border:'1px solid rgba(255,255,255,.3)'}}>제품 소개서</Link>
          </div>
        </div>
      </section>

    </main>
  );
}