@extends('layouts.app')

@section('title', '장기적 AI 챗봇 솔루션 전략')

@push('styles')
<style>
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: #f1f5f9; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    .presentation-container { width: 100%; min-height: calc(100vh - 80px); position: relative; overflow: hidden; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); }
    .slide { width: 100%; min-height: calc(100vh - 80px); display: none; align-items: flex-start; justify-content: center; padding: 40px; position: absolute; top: 0; left: 0; overflow-y: auto; overflow-x: hidden; }
    .slide.active { display: flex; animation: slideInRight 0.5s ease-out; }
    .slide-content { background: rgba(255, 255, 255, 0.98); border-radius: 24px; padding: 60px; max-width: 1200px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05); animation: fadeIn 0.8s ease-out; margin: auto 0; border: 1px solid rgba(255, 255, 255, 0.2); }

    .presentation-container h1 { color: #2563eb; font-size: 3em; margin-bottom: 20px; text-align: center; font-weight: 800; }
    .presentation-container h2 { color: #1e40af; font-size: 2.5em; margin-bottom: 30px; text-align: center; border-bottom: 3px solid #2563eb; padding-bottom: 15px; font-weight: 700; }
    .presentation-container h3 { color: #2563eb; font-size: 1.8em; margin: 25px 0 15px 0; font-weight: 700; }
    .presentation-container h4 { color: #1e40af; font-size: 1.3em; margin: 15px 0 10px 0; font-weight: 700; }
    .presentation-container p, .presentation-container li { font-size: 1.2em; line-height: 1.8; color: #1e293b; margin-bottom: 15px; }
    .presentation-container ul, .presentation-container ol { margin-left: 30px; }

    .company-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 30px 0; }
    .info-card { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 25px; border-radius: 16px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); animation: scaleIn 0.5s ease-out; border: 1px solid rgba(255, 255, 255, 0.1); }
    .info-card h4 { color: white; font-size: 1.3em; margin-bottom: 10px; border-bottom: 2px solid rgba(255, 255, 255, 0.3); padding-bottom: 8px; }
    .info-card p { color: white; font-size: 1em; }

    .comparison-table { width: 100%; border-collapse: collapse; margin: 25px 0; font-size: 1em; }
    .comparison-table th, .comparison-table td { padding: 12px; border: 1px solid #ddd; text-align: left; }
    .comparison-table thead tr { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; }
    .comparison-table tbody tr:nth-of-type(even) { background: #f3f3f3; }

    .feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 20px 0; }
    .feature-item { background: #f8fafc; padding: 20px; border-radius: 12px; border-left: 4px solid #2563eb; border: 1px solid #e2e8f0; border-left-width: 4px; }
    .feature-item h4 { color: #1e40af; margin-top: 0; }

    .conclusion-box { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 30px; border-radius: 16px; margin: 20px 0; text-align: center; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }
    .conclusion-box p, .conclusion-box h3 { color: white; }

    .warning-box { background: #fef3c7; border-left: 5px solid #f59e0b; padding: 25px; border-radius: 16px; margin: 20px 0; border: 1px solid #fde68a; }
    .warning-box h3, .warning-box li { color: #92400e; }

    .flow-diagram { background: #f1f5f9; padding: 25px; border-radius: 16px; margin: 20px 0; border: 2px solid #2563eb; }
    .flow-diagram pre { font-size: 1em; line-height: 1.6; color: #1e293b; overflow-x: auto; }

    .code-box { background: #1e293b; color: #aed581; padding: 20px; border-radius: 12px; margin: 20px 0; overflow-x: auto; font-family: 'Courier New', monospace; font-size: 0.9em; border: 1px solid #334155; }
    .code-box pre { margin: 0; color: #aed581; }

    .navigation { position: fixed; bottom: 30px; right: 30px; display: flex; gap: 15px; z-index: 1000; }
    .nav-btn { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; border: none; padding: 15px 30px; border-radius: 9999px; cursor: pointer; font-size: 1.1em; font-weight: 600; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); transition: all 0.3s ease; }
    .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4); background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%); }
    .nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    .slide-number { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.95); padding: 12px 24px; border-radius: 9999px; font-size: 1.1em; color: #2563eb; font-weight: 700; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border: 1px solid rgba(37, 99, 235, 0.1); }

    @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

    @media (max-width: 768px) {
        .slide-content { padding: 30px; }
        .presentation-container h1 { font-size: 2em; } .presentation-container h2 { font-size: 1.8em; } .presentation-container h3 { font-size: 1.4em; }
        .presentation-container p, .presentation-container li { font-size: 1em; }
        .navigation { bottom: 15px; right: 15px; }
        .nav-btn { padding: 10px 20px; font-size: 0.9em; }
        .slide-number { bottom: 15px; left: 15px; padding: 8px 15px; font-size: 0.9em; }
        .comparison-table { font-size: 0.8em; }
        .comparison-table th, .comparison-table td { padding: 8px; }
    }
</style>
@endpush

@section('content')
<div class="presentation-container">
    <!-- Slide 1: Cover -->
    <div class="slide active">
        <div class="slide-content">
            <h1>장기적 AI 챗봇 솔루션 전략</h1>
            <h2 style="border: none; color: #2563eb;">Vertex AI Search 기반 지능형 문서 검색 시스템</h2>
            <div style="text-align: center; margin-top: 50px;">
                <p style="font-size: 1.5em; color: #1e40af; font-weight: 600;">노트북LM 수준의 자연어 질의응답 시스템</p>
                <p style="margin-top: 30px; color: #64748b;">RAG (검색 증강 생성) 기반 고객 지원 자동화</p>
            </div>
        </div>
    </div>

    <!-- Slide 2: Project Overview -->
    <div class="slide">
        <div class="slide-content">
            <h2>프로젝트 개요</h2>
            <div class="conclusion-box">
                <h3 style="color: white; margin-top: 0;">배경</h3>
                <p style="font-size: 1.2em;">중소기업의 고객 지원 자동화 필요성 증가<br>문서 기반 즉각적 답변 제공으로 업무 효율성 향상</p>
            </div>
            <div style="margin-top: 30px;">
                <h3>핵심 목표</h3>
                <ul>
                    <li><strong>자연어 질문 즉각 답변:</strong> 복잡한 질의에 대한 정확한 답변 제공</li>
                    <li><strong>노트북LM 유사 기술:</strong> Google의 Vertex AI Search RAG 기술 활용</li>
                    <li><strong>고객 지원 비용 절감:</strong> 자동화를 통한 인력 비용 및 시간 절약</li>
                    <li><strong>문서 기반 검색:</strong> PDF, DOCX, HTML 등 다양한 형식 지원</li>
                </ul>
            </div>
            <div style="margin-top: 30px;">
                <h3>프로젝트 범위</h3>
                <div class="company-info">
                    <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 포함 범위</h4><p>Vertex AI Search 연동, Laravel 백엔드 구현, 챗봇 UI, 문서 인덱싱, 참고 자료 제공</p></div>
                    <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 제외 범위</h4><p>음성 인식, 이미지 분석, 실시간 영상 통화, 복잡한 워크플로우 자동화</p></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Slide 3: Vertex AI Search 기술 분석 -->
    <div class="slide">
        <div class="slide-content">
            <h2>Vertex AI Search 기술 분석</h2>
            <div class="feature-list">
                <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg> 완전 관리형 서비스</h4><p>인프라 관리 불필요, Google이 스케일링 및 유지보수 담당</p></div>
                <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg> RAG (검색 증강 생성)</h4><p>문서 검색 + LLM 생성 결합으로 정확하고 맥락있는 답변</p></div>
                <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> Google 수준의 검색 품질</h4><p>Google 검색 기술 기반의 고품질 문서 검색</p></div>
                <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg> 다양한 문서 형식 지원</h4><p>PDF, DOCX, HTML, JSON, 웹사이트 크롤링</p></div>
            </div>
            <div style="margin-top: 30px;">
                <h3>핵심 특징</h3>
                <ul>
                    <li><strong>Semantic Search:</strong> 키워드 매칭이 아닌 의미 기반 검색</li>
                    <li><strong>Personalization:</strong> 사용자별 맞춤 검색 결과 제공</li>
                    <li><strong>Multi-modal:</strong> 텍스트, 이미지, 비디오 등 다양한 데이터 타입</li>
                    <li><strong>Enterprise-grade Security:</strong> IAM 기반 접근 제어 및 데이터 격리</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Slide 4: RAG 작동 원리 -->
    <div class="slide">
        <div class="slide-content">
            <h2>RAG (검색 증강 생성) 작동 원리</h2>
            <div style="margin-top: 30px;">
                <h3>1단계: 데이터 수집 (Ingestion)</h3>
                <div class="info-card" style="margin: 15px 0;"><p>문서를 Vertex AI Search Data Store에 업로드 (PDF, DOCX, HTML 등)</p><p>자동으로 청크 단위로 분할 및 임베딩 벡터 생성</p></div>
            </div>
            <div style="margin-top: 30px;">
                <h3>2단계: 인덱싱 (Indexing)</h3>
                <div class="info-card" style="margin: 15px 0;"><p>문서의 의미를 벡터로 변환하여 벡터 데이터베이스에 저장</p><p>메타데이터(제목, 작성자, 날짜 등)와 함께 인덱싱</p></div>
            </div>
            <div style="margin-top: 30px;">
                <h3>3단계: 검색 및 생성 (Search & Generation)</h3>
                <div class="info-card" style="margin: 15px 0;">
                    <p><strong>검색:</strong> 사용자 질문을 벡터로 변환 후 유사 문서 검색</p>
                    <p><strong>생성:</strong> 검색된 문서를 컨텍스트로 LLM(Gemini)이 답변 생성</p>
                    <p><strong>참조:</strong> 답변에 사용된 원본 문서 링크 제공</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Slide 5: Architecture Diagram -->
    <div class="slide">
        <div class="slide-content">
            <h2>시스템 아키텍처</h2>
            <div class="flow-diagram">
                <pre>
┌─────────────┐
│   사용자     │
└──────┬──────┘
       │ 질문 입력
       ↓
┌──────────────────┐
│  SAM Frontend    │
│   (Vue.js/React) │
└────────┬─────────┘
         │ HTTP Request
         ↓
┌──────────────────────────┐
│   SAM Backend (Laravel)  │
│ ┌──────────────────────┐ │
│ │   ChatController     │ │
│ │  - searchVertexAI()  │ │
│ └──────────┬───────────┘ │
└────────────┼─────────────┘
             │ API Call
             ↓
┌────────────────────────────┐
│   Google Cloud Platform    │
│ ┌────────────────────────┐ │
│ │  Vertex AI Search      │ │
│ │  - Data Store          │ │
│ │  - Search Engine       │ │
│ └───────────┬────────────┘ │
│             │              │
│ ┌───────────▼────────────┐ │
│ │  LLM (Gemini 1.5)      │ │
│ │  - Answer Generation   │ │
│ └────────────────────────┘ │
└────────────────────────────┘
                </pre>
            </div>
            <div style="margin-top: 30px;">
                <h3>데이터 흐름</h3>
                <ol>
                    <li>사용자가 프론트엔드에서 질문 입력</li>
                    <li>Laravel 백엔드가 Vertex AI Search API 호출</li>
                    <li>Vertex AI가 문서 검색 후 Gemini에 전달</li>
                    <li>Gemini가 검색 결과 기반 답변 생성</li>
                    <li>백엔드가 답변 + 참고 자료를 프론트엔드로 반환</li>
                </ol>
            </div>
        </div>
    </div>

    <!-- Slide 6: Phase 1 - Google Cloud 설정 -->
    <div class="slide">
        <div class="slide-content">
            <h2>Phase 1: Google Cloud 설정</h2>
            <div style="margin-top: 30px;">
                <h3>1. GCP 프로젝트 생성</h3>
                <div class="code-box"><pre># 프로젝트 ID: sam-chatbot-project
# 위치: asia-northeast3 (서울)</pre></div>
            </div>
            <div style="margin-top: 30px;">
                <h3>2. 필수 API 활성화</h3>
                <ul>
                    <li>Discovery Engine API (Vertex AI Search)</li>
                    <li>Vertex AI API</li>
                    <li>Cloud Storage API (문서 저장용)</li>
                </ul>
            </div>
            <div style="margin-top: 30px;">
                <h3>3. 서비스 계정 생성</h3>
                <div class="code-box"><pre># 서비스 계정 이름: sam-chatbot-sa
# 역할:
#   - Discovery Engine Admin
#   - Vertex AI User</pre></div>
            </div>
            <div style="margin-top: 30px;">
                <h3>4. JSON 인증 키 다운로드</h3>
                <div class="warning-box">
                    <h3>⚠️ 보안 주의사항</h3>
                    <ul>
                        <li>JSON 키 파일은 절대 Git에 커밋하지 않기</li>
                        <li>.gitignore에 추가 필수</li>
                        <li>환경 변수로 관리</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Slide 7-17: 나머지 슬라이드 -->
    <div class="slide">
        <div class="slide-content">
            <h2>Phase 2: Vertex AI Search 데이터 스토어 구축</h2>
            <div style="margin-top: 30px;">
                <h3>1. 앱 생성</h3>
                <ul>
                    <li><strong>앱 유형:</strong> Chat (대화형)</li>
                    <li><strong>데이터 타입:</strong> Unstructured (비정형 문서)</li>
                    <li><strong>솔루션 타입:</strong> Search with Chat</li>
                </ul>
            </div>
            <div style="margin-top: 30px;">
                <h3>2. 문서 업로드</h3>
                <div class="feature-list">
                    <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg> Cloud Storage</h4><p>대량 문서 업로드 (gs://bucket-name/)</p></div>
                    <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /></svg> 웹사이트 크롤링</h4><p>sitemap.xml 기반 자동 수집</p></div>
                    <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg> 개별 업로드</h4><p>콘솔에서 직접 파일 업로드</p></div>
                </div>
            </div>
            <div style="margin-top: 30px;">
                <h3>3. 인덱싱</h3>
                <div class="info-card"><p>업로드 후 자동 인덱싱 시작 (10-30분 소요)</p><p>인덱싱 상태: Console → Vertex AI Search에서 확인</p></div>
            </div>
        </div>
    </div>

    <div class="slide">
        <div class="slide-content">
            <h2>Phase 3: Laravel 백엔드 구현</h2>
            <div style="margin-top: 30px;">
                <h3>1. Google Cloud PHP 클라이언트 설치</h3>
                <div class="code-box"><pre>composer require google/cloud-discoveryengine</pre></div>
            </div>
            <div style="margin-top: 30px;">
                <h3>2. 환경 변수 설정 (.env)</h3>
                <div class="code-box"><pre>GOOGLE_CLOUD_PROJECT_ID=sam-chatbot-project
GOOGLE_CLOUD_LOCATION=asia-northeast3
GOOGLE_CLOUD_DATA_STORE_ID=your-data-store-id
GOOGLE_APPLICATION_CREDENTIALS=/path/to/service-account.json</pre></div>
            </div>
            <div style="margin-top: 30px;">
                <h3>3. ChatController 구현 예시</h3>
                <div class="code-box"><pre>use Google\Cloud\DiscoveryEngine\V1\SearchServiceClient;
use Google\Cloud\DiscoveryEngine\V1\SearchRequest;

public function searchVertexAI(Request $request)
{
    $query = $request->input('query');
    $client = new SearchServiceClient([...]);
    // ... 검색 로직
    return response()->json([
        'answer' => $response->getSummary(),
        'references' => $response->getResults()
    ]);
}</pre></div>
            </div>
        </div>
    </div>

    <div class="slide">
        <div class="slide-content">
            <h2>초기 투자 비용 분석</h2>
            <div style="margin-top: 30px;">
                <h3>Vertex AI Search 비용 (월간 예상)</h3>
                <table class="comparison-table">
                    <thead><tr><th>항목</th><th>단가</th><th>예상 사용량</th><th>월 비용</th></tr></thead>
                    <tbody>
                        <tr><td>데이터 저장</td><td>$0.10/GB</td><td>50GB</td><td>$5.00</td></tr>
                        <tr><td>질의 비용</td><td>$0.0025/query</td><td>3,000 queries</td><td>$7.50</td></tr>
                        <tr><td><strong>총 합계</strong></td><td colspan="2"></td><td><strong>$12.50</strong></td></tr>
                    </tbody>
                </table>
            </div>
            <div style="margin-top: 30px;">
                <h3>추가 비용 (선택사항)</h3>
                <ul>
                    <li><strong>Cloud Storage:</strong> $0.023/GB (문서 백업용)</li>
                    <li><strong>Gemini API:</strong> 별도 호출 시 추가 비용 (RAG는 포함)</li>
                    <li><strong>네트워크 송신:</strong> $0.12/GB (아시아 → 외부)</li>
                </ul>
            </div>
            <div class="conclusion-box" style="margin-top: 30px;">
                <h3 class="flex items-center justify-center gap-2" style="color: white;"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 월 $12.50 수준의 저렴한 운영 비용</h3>
                <p>초기 3개월: 무료 크레딧 $300 활용 가능</p>
            </div>
        </div>
    </div>

    <div class="slide">
        <div class="slide-content">
            <h2>인프라 확장 권고사항</h2>
            <div class="warning-box">
                <h3>⚠️ 현재 인프라 분석</h3>
                <ul>
                    <li><strong>현재 스펙:</strong> 2Core 4GB (부족)</li>
                    <li><strong>문제점:</strong> Laravel + MySQL + 챗봇 동시 운영 시 메모리 부족</li>
                    <li><strong>동시 사용자:</strong> 10-20명 수준으로 제한적</li>
                </ul>
            </div>
            <div style="margin-top: 30px;">
                <h3>권장 인프라 구성</h3>
                <table class="comparison-table">
                    <thead><tr><th>구분</th><th>현재</th><th>권장</th><th>비고</th></tr></thead>
                    <tbody>
                        <tr><td>웹 서버</td><td>2Core 4GB</td><td>4Core 8GB</td><td>Laravel + 챗봇 동시 운영</td></tr>
                        <tr><td>DB 서버</td><td>통합</td><td>분리 (4Core 8GB)</td><td>MySQL 전용 서버</td></tr>
                        <tr><td>저장공간</td><td>100GB</td><td>200GB SSD</td><td>문서 저장 및 로그</td></tr>
                        <tr><td>백업</td><td>수동</td><td>자동 일일 백업</td><td>GCS 또는 별도 스토리지</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="slide">
        <div class="slide-content">
            <h2>데이터 품질 관리 전략</h2>
            <div class="conclusion-box">
                <h3 style="color: white; margin-top: 0;">핵심 원칙</h3>
                <p style="font-size: 1.2em;">문서의 품질이 곧 답변의 품질을 결정합니다</p>
            </div>
            <div style="margin-top: 30px;">
                <h3>1. 문서 최신화</h3>
                <div class="feature-list">
                    <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg> 정기 업데이트</h4><p>월 1회 문서 검토 및 업데이트</p></div>
                    <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg> 구버전 제거</h4><p>오래된 문서는 자동 아카이빙</p></div>
                    <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 변경 추적</h4><p>버전 관리 시스템 도입</p></div>
                </div>
            </div>
            <div style="margin-top: 30px;">
                <h3>2. 문서 표준화</h3>
                <ul>
                    <li><strong>구조화:</strong> 제목, 소제목, 본문이 명확한 구조</li>
                    <li><strong>포맷:</strong> PDF 또는 DOCX 권장 (일관된 포맷)</li>
                    <li><strong>언어:</strong> 한국어 또는 영어 중 하나로 통일</li>
                    <li><strong>메타데이터:</strong> 제목, 작성자, 작성일, 카테고리 필수 입력</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="slide">
        <div class="slide-content">
            <h2>보안: API 키 및 인증 관리</h2>
            <div style="margin-top: 30px;">
                <h3>1. 서비스 계정 키 보안</h3>
                <div class="warning-box">
                    <h3>⚠️ 절대 금지 사항</h3>
                    <ul>
                        <li>JSON 키 파일을 Git에 커밋</li>
                        <li>클라이언트 사이드 코드에 키 노출</li>
                        <li>공개 저장소에 키 업로드</li>
                        <li>불필요한 권한 부여</li>
                    </ul>
                </div>
            </div>
            <div style="margin-top: 30px;">
                <h3>2. .gitignore 설정</h3>
                <div class="code-box"><pre># Google Cloud 인증 키
service-account.json
google-credentials.json

# 환경 변수
.env
.env.local
.env.production</pre></div>
            </div>
            <div style="margin-top: 30px;">
                <h3>3. 최소 권한 원칙</h3>
                <table class="comparison-table">
                    <thead><tr><th>역할</th><th>권한</th><th>용도</th></tr></thead>
                    <tbody>
                        <tr><td>Discovery Engine User</td><td>검색 API 호출</td><td>일반 검색 요청</td></tr>
                        <tr><td>Storage Object Viewer</td><td>문서 읽기</td><td>문서 다운로드</td></tr>
                        <tr><td>Discovery Engine Admin</td><td>데이터 스토어 관리</td><td>관리자 전용 (제한적)</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="slide">
        <div class="slide-content">
            <h2>개발 로드맵 (10-12주)</h2>
            <table class="comparison-table">
                <thead><tr><th>단계</th><th>기간</th><th>주요 작업</th><th>산출물</th></tr></thead>
                <tbody>
                    <tr><td><strong>Phase 1</strong></td><td>W1-2</td><td>GCP 설정, Vertex AI Search 앱 생성</td><td>테스트용 데이터 스토어</td></tr>
                    <tr><td><strong>Phase 2</strong></td><td>W3-4</td><td>Laravel 백엔드 API 개발, 인증 구현</td><td>ChatController + API 엔드포인트</td></tr>
                    <tr><td><strong>Phase 3</strong></td><td>W5-6</td><td>프론트엔드 챗봇 UI 개발</td><td>챗봇 인터페이스</td></tr>
                    <tr><td><strong>Phase 4</strong></td><td>W7-8</td><td>전체 문서 업로드 및 인덱싱</td><td>프로덕션 데이터 스토어</td></tr>
                    <tr><td><strong>Phase 5</strong></td><td>W9</td><td>사용자 피드백 수집, 품질 개선</td><td>베타 테스트 리포트</td></tr>
                    <tr><td><strong>Phase 6</strong></td><td>W10</td><td>인프라 확장, DB 분리</td><td>스케일링 완료</td></tr>
                    <tr><td><strong>Phase 7</strong></td><td>W11</td><td>모니터링 및 로깅 시스템</td><td>운영 대시보드</td></tr>
                    <tr><td><strong>Phase 8</strong></td><td>W12</td><td>정식 오픈, 운영 가이드</td><td>프로덕션 런칭</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="slide">
        <div class="slide-content">
            <h2>성공 지표 (KPI)</h2>
            <table class="comparison-table">
                <thead><tr><th>지표</th><th>목표</th><th>측정 방법</th></tr></thead>
                <tbody>
                    <tr><td><strong>응답 정확도</strong></td><td>90% 이상</td><td>샘플 질문 100개 테스트</td></tr>
                    <tr><td><strong>평균 응답 시간</strong></td><td>3초 이내</td><td>API 응답 시간 모니터링</td></tr>
                    <tr><td><strong>고객 만족도</strong></td><td>85% 이상</td><td>👍/👎 피드백 수집</td></tr>
                    <tr><td><strong>지원 티켓 감소</strong></td><td>50% 감소</td><td>챗봇 도입 전후 비교</td></tr>
                    <tr><td><strong>일일 활성 사용자</strong></td><td>100명</td><td>Google Analytics 추적</td></tr>
                    <tr><td><strong>문서 커버리지</strong></td><td>80% 이상</td><td>질문 중 답변 가능 비율</td></tr>
                </tbody>
            </table>
            <div style="margin-top: 30px;">
                <h3>ROI 분석</h3>
                <div class="company-info">
                    <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 비용 절감</h4><p>고객 지원 인력 50% 절감</p><p>월 $500 인건비 절약</p></div>
                    <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 시간 절약</h4><p>평균 응답 시간 30분 → 3초</p><p>고객 대기 시간 99% 감소</p></div>
                    <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg> 만족도 향상</h4><p>즉각적 답변 제공</p><p>24/7 서비스 가능</p></div>
                </div>
            </div>
        </div>
    </div>

    <div class="slide">
        <div class="slide-content">
            <h1 style="font-size: 4em; margin-bottom: 40px;">감사합니다</h1>
            <div style="text-align: center;">
                <p style="font-size: 1.5em; color: #2563eb; margin-bottom: 30px; font-weight: 700;">장기적 AI 챗봇 솔루션 전략</p>
                <p style="font-size: 1.2em; color: #1e40af; margin-bottom: 40px;">Vertex AI Search 기반 지능형 문서 검색 시스템</p>
                <div style="margin-top: 50px; padding: 30px; background: #f1f5f9; border-radius: 16px; border: 1px solid #e2e8f0;">
                    <h3>프로젝트 요약</h3>
                    <div style="margin-top: 20px; text-align: left;">
                        <p class="flex items-center gap-2"><svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg><strong>목표:</strong> 노트북LM 수준의 자연어 질의응답 시스템 구축</p>
                        <p class="flex items-center gap-2"><svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg><strong>비용:</strong> 월 $12.50 (Vertex AI Search) + $160 (인프라)</p>
                        <p class="flex items-center gap-2"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg><strong>기간:</strong> 10-12주</p>
                        <p class="flex items-center gap-2"><svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg><strong>기대효과:</strong> 고객 지원 비용 50% 절감, 응답 시간 99% 단축</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="slide-number">
    <span id="currentSlide">1</span> / <span id="totalSlides">17</span>
</div>

<div class="navigation">
    <button class="nav-btn" id="prevBtn" onclick="changeSlide(-1)">← 이전</button>
    <button class="nav-btn" id="nextBtn" onclick="changeSlide(1)">다음 →</button>
</div>
@endsection

@push('scripts')
<script>
    let currentSlide = 1;
    const totalSlides = 17;
    let touchStartX = 0;
    let touchEndX = 0;

    document.getElementById('totalSlides').textContent = totalSlides;

    function showSlide(n) {
        const slides = document.querySelectorAll('.slide');
        if (n > totalSlides) currentSlide = 1;
        if (n < 1) currentSlide = totalSlides;
        slides.forEach(slide => slide.classList.remove('active'));
        slides[currentSlide - 1].classList.add('active');
        document.getElementById('currentSlide').textContent = currentSlide;
        document.getElementById('prevBtn').disabled = (currentSlide === 1);
        document.getElementById('nextBtn').disabled = (currentSlide === totalSlides);
    }

    function changeSlide(direction) {
        currentSlide += direction;
        showSlide(currentSlide);
    }

    document.addEventListener('keydown', function(event) {
        if (event.key === 'ArrowLeft') changeSlide(-1);
        else if (event.key === 'ArrowRight' || event.key === ' ') { event.preventDefault(); changeSlide(1); }
    });

    document.addEventListener('touchstart', function(event) { touchStartX = event.changedTouches[0].screenX; });
    document.addEventListener('touchend', function(event) { touchEndX = event.changedTouches[0].screenX; handleSwipe(); });

    function handleSwipe() {
        if (touchEndX < touchStartX - 50) changeSlide(1);
        if (touchEndX > touchStartX + 50) changeSlide(-1);
    }

    showSlide(currentSlide);
</script>
@endpush