import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import './GuardiaDetail.css';
import { useSeoMeta } from '../hooks/useSeoMeta';

const FEATURES = [
  { icon:'🤖', title:'AI 에이전트 자동화',
    desc:'Ollama 온프레미스 sLLM 기반. 메신저 한 줄 명령 → 자연어 파싱 → 자동 배포·운영. 외부 API 완전 차단으로 폐쇄망 환경 최적화.' },
  { icon:'🔧', title:'에이전트리스 아키텍처',
    desc:'대상 서버에 어떤 소프트웨어도 설치하지 않습니다. 표준 SSH/SFTP 프로토콜만으로 레거시 WAS(Tomcat/JBoss/WebLogic)를 원격 관리.' },
  { icon:'💬', title:'ChatOps 메신저 통합',
    desc:'카카오워크, 네이버웍스, 슬랙 등 익숙한 메신저에서 /deploy, /status, /incident 명령으로 인프라를 즉시 제어.' },
  { icon:'📊', title:'통합 ITSM 대시보드',
    desc:'SR·인시던트·변경관리·SLA·CMDB·예측 유지보수를 단일 플랫폼에서 관리. 7일 추이 차트와 AI 인사이트 실시간 제공.' },
  { icon:'🔒', title:'엔터프라이즈 보안',
    desc:'AES-256-GCM 암호화, MFA/OTP, PAM 특권접근관리, SHA-256 해시체인 불변 감사로그, Zero Trust 지속 인증.' },
  { icon:'🏗️', title:'PMS 프로젝트 관리',
    desc:'WBS·산출물·일간/주간/월간 자동 보고서(Excel·PDF·PPT). 이슈·위험 관리, Gitea 연동, Jenkins CI/CD 파이프라인.' },
  { icon:'🌐', title:'공공기관 필수 준수',
    desc:'행안부 SW 보안약점 자동 점검, KWCAG 2.1 웹접근성, 개인정보보호법 준수 스캔. 19개 공공기관 체크리스트 내장.' },
  { icon:'📡', title:'Scouter APM 모니터링',
    desc:'Java WAS(Tomcat/JBoss) 전문 APM. CPU·Heap·TPS·응답시간 실시간 수집, 이상 탐지 시 자동 인시던트 생성.' },
];

const EDITIONS = [
  {
    name: 'COMMUNITY', badge: '무료',
    color: '#10B981',
    target: '소규모 기관·검토용',
    features: ['기본 SR 관리 (무제한)', 'CMDB 서버 20대', '사용자 10명', '대시보드', '봇 기본 명령어'],
    cta: '무료 시작',
    href: '/support/contact?type=community',
  },
  {
    name: 'STANDARD', badge: '권장',
    color: 'var(--primary)',
    target: '중형 기관',
    features: ['전체 ITSM 기능', 'AI 에이전트 자동화', 'LDAP/AD 연동', 'MFA 보안', 'SLA 관리', 'PMS 기본'],
    cta: '도입 문의',
    href: '/support/contact?type=standard',
    highlight: true,
  },
  {
    name: 'ENTERPRISE', badge: '맞춤',
    color: '#6366F1',
    target: '대형 관공서·광역기관',
    features: ['무제한 서버·기관', '취약점 자동 스캔', 'Scouter APM', 'FinOps 비용 분석', 'SIEM 연동', '전담 기술 지원'],
    cta: '전문가 상담',
    href: '/support/contact?type=enterprise',
  },
];

/* ── 메신저 봇 명령어 목록 ──────────────────────────────── */
const BOT_COMMANDS = [
  { 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: '/sla',                          desc: 'SLA 위반 현황 목록',                 cat: 'SR 관리' },
  { cmd: '/incident <제목> [P1~P4]',     desc: '인시던트 빠른 등록',                 cat: '인시던트' },
  { cmd: '/oncall',                       desc: '현재 당직자 즉시 조회',              cat: '인시던트' },
  { cmd: '/rca <INC-ID>',                desc: 'AI 자동 RCA 근본원인 분석',          cat: '인시던트' },
  { cmd: '/escalate <SR-ID>',            desc: '당직자에게 에스컬레이션',             cat: '인시던트' },
  { cmd: '!deploy <세션ID>',             desc: 'WAS 배포 실행 (SSH)',                cat: '배포 제어' },
  { cmd: '/rollback <세션ID>',           desc: '긴급 롤백',                          cat: '배포 제어' },
  { cmd: '!health <서버명>',             desc: '서버 헬스체크',                      cat: '배포 제어' },
  { cmd: '/pms <프로젝트코드>',          desc: '프로젝트 진척 현황',                  cat: 'PMS' },
  { cmd: '/report <코드> weekly',        desc: '주간 보고서 메신저 발송',             cat: 'PMS' },
  { cmd: '/wbs <코드>',                  desc: 'WBS 지연 현황',                      cat: 'PMS' },
  { cmd: '/scouter <서버명>',            desc: 'Scouter APM 실시간 메트릭',          cat: '모니터링' },
  { cmd: '/scan',                         desc: '시큐어코딩·보안 자동 점검',          cat: '보안' },
  { cmd: '/vuln <서버|IP>',              desc: '취약점 스캔',                        cat: '보안' },
  { cmd: '/notify <메시지>',             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', 'PostgreSQL / SQLite'] },
  { category: 'AI·LLM', items: ['Ollama (온프레미스)', 'llama3.1:8b / codellama', '외부 API 완전 차단'] },
  { category: 'Infra', items: ['paramiko SSH/SFTP', '에이전트리스', 'AES-256-GCM 암호화'] },
  { category: 'Frontend', items: ['React.js / PWA', 'Chart.js 대시보드', 'D3.js 토폴로지'] },
  { category: 'DevOps', items: ['Jenkins CI/CD', 'Gitea 형상관리', 'Docker / K8s'] },
  { category: '모니터링', items: ['Scouter APM', 'Prometheus/Grafana', 'ELK/Splunk SIEM'] },
];

export default function GuardiaDetail() {
  useSeoMeta({
    title: 'GUARDiA ITSM — AI 기반 레거시 인프라 자율 운영 플랫폼',
    description: 'GUARDiA ITSM은 메신저 한 줄 명령으로 공공기관 레거시 서버를 자동 운영합니다. 에이전트 설치 없이 SSH/SFTP로 배포·장애·보안 운영을 완전 자동화.',
    path: '/solution/guardia',
    keywords: 'GUARDiA ITSM, AI ITSM, 공공기관 인프라 자동화, ChatOps, 에이전트리스, 레거시 서버 자동화',
    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:'99.9%',  lab:'가용성'},
              {val:'70%',    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:'app',        label:'모바일 앱'},
              {id:'messenger',  label:'Messenger Bot'},
              {id:'manager',    label:'Manager'},
              {id:'editions',   label:'에디션 비교'},
              {id:'tech',       label:'기술 스택'},
              {id:'usecase',    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>8가지 핵심 기능</em></h2>
              <div className="divider" />
            </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:'01_dashboard',  caption:'통합 대시보드 — SR·SLA·AI 인사이트'},
                {file:'02_sr_list',    caption:'SR 서비스 요청 — 칸반/목록 뷰'},
                {file:'04_incidents',  caption:'인시던트 관리 — AI 자동 RCA'},
                {file:'05_agents',     caption:'AI 에이전트 — Ollama 온프레미스'},
                {file:'06_license',    caption:'라이선스 관리 — 에디션·체험판'},
              ].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 대시보드 — 서버·배포·SLA 통합 관제'},
                {file:'08_manager_dr',        caption:'DR 재해복구 관제 — RTO/RPO 실적 추적'},
                {file:'09_manager_network',   caption:'네트워크 장비 관제 — 스위치·방화벽 설정 백업'},
                {file:'10_manager_csap',      caption:'CSAP 보안 점검 — 준수율 자동 대시보드'},
              ].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:'06_mobile_home',  caption:'홈 대시보드 — SR·서버 상태'},
                {file:'02_guardia',      caption:'SR 관리 — 등록·처리·승인'},
                {file:'05_agents',       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:'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>
      )}

      {/* ── 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>
  );
}