@extends('layouts.app')

@section('title', 'Claude Code 요금정책')

@push('styles')
<style>
    .pricing-bar { height: 24px; border-radius: 4px; transition: width 0.6s ease; min-width: 32px; display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; font-size: 11px; font-weight: 600; color: #fff; }
    .pricing-bar-green { background: linear-gradient(90deg, #059669, #10b981); }
    .pricing-bar-red { background: linear-gradient(90deg, #dc2626, #ef4444); }
    .highlight-row { background: #ecfdf5; }
    .highlight-row td { font-weight: 600; }
    .warning-row { background: #fef2f2; }
    .badge-recommend { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; background: #dcfce7; color: #166534; }
    .badge-current { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; background: #fef9c3; color: #854d0e; }
</style>
@endpush

@section('content')
<div class="space-y-6">

    {{-- 페이지 헤더 --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Claude Code 요금정책</h1>
            <p class="mt-1 text-sm text-gray-500">Max 20x vs Max 5x + API vs Team Premium 비용 비교 분석 (2026년 3월 기준)</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-400">CodeBridgeX 개발팀 | 2026.03</span>
            <a href="{{ route('claude-code.pricing.download') }}"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors"
               title="상세 PPTX 다운로드">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                PPTX
            </a>
        </div>
    </div>

    {{-- 핵심 요약 카드 --}}
    <div class="flex gap-4" style="flex-wrap: wrap;">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5" style="flex: 1 1 220px; max-width: 320px;">
            <div class="flex items-center gap-2 text-sm text-gray-500">
                <svg class="w-4 h-4 text-emerald-500" 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>
                최적 선택
            </div>
            <div class="text-lg font-bold text-gray-900 mt-1">Team Premium (연간)</div>
            <div class="text-sm text-emerald-600 mt-0.5">월 $100/인 (5인 = $500/월)</div>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5" style="flex: 1 1 220px; max-width: 320px;">
            <div class="flex items-center gap-2 text-sm text-gray-500">
                <svg class="w-4 h-4 text-blue-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>
                현재 대비 절감
            </div>
            <div class="text-lg font-bold text-emerald-600 mt-1">연간 $3,600 절약</div>
            <div class="text-sm text-gray-500 mt-0.5">37.5% 비용 절감</div>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5" style="flex: 1 1 220px; max-width: 320px;">
            <div class="flex items-center gap-2 text-sm text-gray-500">
                <svg class="w-4 h-4 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                추가 가치
            </div>
            <div class="text-lg font-bold text-gray-900 mt-1">계정 격리 + 중앙 관리</div>
            <div class="text-sm text-gray-500 mt-0.5">Extra Usage 포함</div>
        </div>
    </div>

    {{-- ─── 섹션 1: API 토큰 단가 ─── --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-5 py-3 bg-gray-50 border-b border-gray-200">
            <h2 class="text-base font-semibold text-gray-800">Claude API 토큰 단가</h2>
        </div>
        <div class="p-5">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-200">
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 28%;">모델</th>
                        <th class="text-center py-2.5 px-3 text-gray-600 font-medium" style="width: 20%;">Input (100만 토큰)</th>
                        <th class="text-center py-2.5 px-3 text-gray-600 font-medium" style="width: 20%;">Output (100만 토큰)</th>
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium">주요 용도</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="border-b border-gray-100">
                        <td class="py-2.5 px-3 font-medium text-gray-800">Sonnet 4.5 / 4.6</td>
                        <td class="py-2.5 px-3 text-center font-semibold text-emerald-600">$3</td>
                        <td class="py-2.5 px-3 text-center font-semibold text-red-500">$15</td>
                        <td class="py-2.5 px-3 text-gray-600">기본 모델 - 대부분의 코딩 작업</td>
                    </tr>
                    <tr class="border-b border-gray-100">
                        <td class="py-2.5 px-3 font-medium text-gray-800">Opus 4.5 / 4.6</td>
                        <td class="py-2.5 px-3 text-center font-semibold text-emerald-600">$5</td>
                        <td class="py-2.5 px-3 text-center font-semibold text-red-500">$25</td>
                        <td class="py-2.5 px-3 text-gray-600">복잡한 추론, 아키텍처 설계</td>
                    </tr>
                    <tr>
                        <td class="py-2.5 px-3 font-medium text-gray-800">Haiku 4.5</td>
                        <td class="py-2.5 px-3 text-center font-semibold text-emerald-600">$1</td>
                        <td class="py-2.5 px-3 text-center font-semibold text-red-500">$5</td>
                        <td class="py-2.5 px-3 text-gray-600">간단한 작업, 서브에이전트</td>
                    </tr>
                </tbody>
            </table>
            <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800 space-y-1">
                <div class="font-semibold">핵심 참고사항</div>
                <ul class="list-disc pl-4 space-y-0.5 text-blue-700">
                    <li>Claude Code 평균 개발자의 월간 API 환산 비용: <strong>$100~200</strong> (Anthropic 공식)</li>
                    <li>Max 20x 실사용자 8개월 추적 결과: API 환산 시 <strong>$15,000+</strong> 소요 (구독료 $1,600에 해당)</li>
                    <li class="text-red-600 font-medium">Max 5x는 Max 20x 사용량의 약 25% (5/20)만 커버, 나머지 75%는 API 종량제로 지불 필요</li>
                </ul>
            </div>
        </div>
    </div>

    {{-- ─── 섹션 2: 사용 강도별 비용 비교 ─── --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-5 py-3 bg-gray-50 border-b border-gray-200">
            <h2 class="text-base font-semibold text-gray-800">사용 강도별 비용 비교: Max 20x vs Max 5x + API</h2>
        </div>
        <div class="p-5">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-200">
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 18%;">사용 강도</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 13%;">API 환산 (월)</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 13%;">Max 20x (정액)</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 12%;">Max 5x 기본</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 12%;">API 초과분</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 13%;">5x+API 합계</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 15%;">20x 절약액</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $usageData = [
                            ['label' => '가벼운 사용', 'desc' => '하루 1~2시간', 'api' => 150, 'max20' => 200, 'max5' => 100, 'apiOver' => 112.5, 'total5' => 212.5, 'save' => 12.5],
                            ['label' => '보통 사용', 'desc' => '하루 3~4시간', 'api' => 450, 'max20' => 200, 'max5' => 100, 'apiOver' => 337.5, 'total5' => 437.5, 'save' => 237.5],
                            ['label' => '활발한 사용', 'desc' => '하루 5~6시간', 'api' => 1200, 'max20' => 200, 'max5' => 100, 'apiOver' => 900, 'total5' => 1000, 'save' => 800],
                            ['label' => '헤비 사용', 'desc' => '하루 8시간+', 'api' => 2500, 'max20' => 200, 'max5' => 100, 'apiOver' => 1875, 'total5' => 1975, 'save' => 1775],
                            ['label' => '풀 사용', 'desc' => '20x 한도 전부', 'api' => 4000, 'max20' => 200, 'max5' => 100, 'apiOver' => 3000, 'total5' => 3100, 'save' => 2900],
                        ];
                    @endphp
                    @foreach($usageData as $row)
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-2.5 px-3">
                                <div class="font-medium text-gray-800">{{ $row['label'] }}</div>
                                <div class="text-xs text-gray-400">{{ $row['desc'] }}</div>
                            </td>
                            <td class="py-2.5 px-3 text-right text-gray-600">${{ number_format($row['api']) }}</td>
                            <td class="py-2.5 px-3 text-right font-semibold text-emerald-600">${{ number_format($row['max20']) }}</td>
                            <td class="py-2.5 px-3 text-right text-gray-600">${{ number_format($row['max5']) }}</td>
                            <td class="py-2.5 px-3 text-right text-amber-600">${{ number_format($row['apiOver'], 1) }}</td>
                            <td class="py-2.5 px-3 text-right font-semibold text-red-500">${{ number_format($row['total5'], 1) }}</td>
                            <td class="py-2.5 px-3 text-right font-semibold text-emerald-600">${{ number_format($row['save'], 1) }} 절약</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            {{-- 시각적 바 차트 --}}
            <div class="mt-5 pt-5 border-t border-gray-200">
                <div class="text-sm font-medium text-gray-700 mb-3">월 비용 시각 비교 (USD, 1인 기준)</div>
                <div class="space-y-3">
                    @foreach($usageData as $row)
                        @php $maxVal = 3100; @endphp
                        <div class="flex items-center gap-3">
                            <div class="shrink-0 text-xs text-gray-500 text-right" style="width: 70px;">{{ $row['label'] }}</div>
                            <div style="flex: 1;">
                                <div class="flex items-center gap-2 mb-1">
                                    <div class="pricing-bar pricing-bar-green" style="width: {{ max(($row['max20'] / $maxVal) * 100, 3) }}%;">
                                        ${{ number_format($row['max20']) }}
                                    </div>
                                    <span class="text-xs text-gray-400 whitespace-nowrap">Max 20x</span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <div class="pricing-bar pricing-bar-red" style="width: {{ max(($row['total5'] / $maxVal) * 100, 3) }}%;">
                                        ${{ number_format($row['total5']) }}
                                    </div>
                                    <span class="text-xs text-gray-400 whitespace-nowrap">5x+API</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg text-sm text-amber-800">
                <strong>결론:</strong> Max 20x를 어느 정도라도 활용하고 있다면, Max 5x + API 조합은 거의 항상 더 비쌉니다.
                활발한 사용 수준(하루 5~6시간)에서 Max 5x+API는 월 <strong>$1,000+</strong>로 Max 20x $200의 <strong>5배 이상</strong>입니다.
            </div>
        </div>
    </div>

    {{-- ─── 섹션 3: 5인 팀 기준 총 비용 비교 ─── --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-5 py-3 bg-gray-50 border-b border-gray-200">
            <h2 class="text-base font-semibold text-gray-800">5인 팀 기준 총 비용 비교</h2>
        </div>
        <div class="p-5">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-200">
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 25%;">구성</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 14%;">월 비용</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 14%;">연 비용</th>
                        <th class="text-center py-2.5 px-3 text-gray-600 font-medium" style="width: 18%;">사용량</th>
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium">비고</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="border-b border-gray-100 warning-row">
                        <td class="py-2.5 px-3 text-gray-800">
                            현재 (Max 혼합 x 5)
                            <span class="badge-current ml-1">현재</span>
                        </td>
                        <td class="py-2.5 px-3 text-right font-semibold text-red-500">$800</td>
                        <td class="py-2.5 px-3 text-right font-semibold text-red-500">$9,600</td>
                        <td class="py-2.5 px-3 text-center text-gray-500">계정 공유로 불안정</td>
                        <td class="py-2.5 px-3 text-gray-500 text-xs">관리 불가, 약관 위반 리스크</td>
                    </tr>
                    <tr class="border-b border-gray-100">
                        <td class="py-2.5 px-3 text-gray-800">개인 Max 20x x 5</td>
                        <td class="py-2.5 px-3 text-right font-semibold">$1,000</td>
                        <td class="py-2.5 px-3 text-right">$12,000</td>
                        <td class="py-2.5 px-3 text-center text-gray-500">각 20배 독립</td>
                        <td class="py-2.5 px-3 text-gray-500 text-xs">비용 가장 높음</td>
                    </tr>
                    <tr class="border-b border-gray-100">
                        <td class="py-2.5 px-3 text-gray-800">개인 Max 5x x 5</td>
                        <td class="py-2.5 px-3 text-right font-semibold">$500</td>
                        <td class="py-2.5 px-3 text-right">$6,000</td>
                        <td class="py-2.5 px-3 text-center text-gray-500">각 5배 독립</td>
                        <td class="py-2.5 px-3 text-gray-500 text-xs">사용량 부족 가능</td>
                    </tr>
                    <tr class="border-b border-gray-100 highlight-row">
                        <td class="py-2.5 px-3 text-gray-900">
                            Team Premium x 5 (연간)
                            <span class="badge-recommend ml-1">추천</span>
                        </td>
                        <td class="py-2.5 px-3 text-right font-bold text-emerald-600">$500</td>
                        <td class="py-2.5 px-3 text-right font-bold text-emerald-600">$6,000</td>
                        <td class="py-2.5 px-3 text-center">
                            <span class="text-emerald-700 font-medium">각 6.25배</span>
                            <div class="text-xs text-emerald-500">(5x보다 25% 증가)</div>
                        </td>
                        <td class="py-2.5 px-3 text-emerald-700 text-xs font-medium">관리 기능 포함 + Extra Usage</td>
                    </tr>
                    <tr>
                        <td class="py-2.5 px-3 text-gray-800">Team Premium x 5 (월간)</td>
                        <td class="py-2.5 px-3 text-right font-semibold">$625</td>
                        <td class="py-2.5 px-3 text-right">$7,500</td>
                        <td class="py-2.5 px-3 text-center text-gray-500">각 6.25배</td>
                        <td class="py-2.5 px-3 text-gray-500 text-xs">연간 대비 $1,500 추가</td>
                    </tr>
                </tbody>
            </table>

            <div class="flex gap-4 mt-4" style="flex-wrap: wrap;">
                <div class="p-4 bg-emerald-50 border border-emerald-200 rounded-lg" style="flex: 1 1 280px;">
                    <div class="text-sm text-emerald-700">현재 → Team 전환 시</div>
                    <div class="text-2xl font-bold text-emerald-700 mt-1">연간 $3,600 절약 <span class="text-base font-normal">(37.5%)</span></div>
                </div>
                <div class="p-4 bg-blue-50 border border-blue-200 rounded-lg" style="flex: 1 1 280px;">
                    <div class="text-sm text-blue-700">Team Premium의 추가 가치</div>
                    <div class="text-lg font-bold text-blue-700 mt-1">계정 격리 + 중앙 관리 + Extra Usage</div>
                </div>
            </div>
        </div>
    </div>

    {{-- ─── 섹션 4: 최종 결론 ─── --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-5 py-3 bg-gray-50 border-b border-gray-200">
            <h2 class="text-base font-semibold text-gray-800">최종 결론 및 권고</h2>
        </div>
        <div class="p-5">
            <div class="flex gap-4" style="flex-wrap: wrap;">
                <div class="p-4 rounded-lg border border-gray-200 bg-gray-50" style="flex: 1 1 240px;">
                    <div class="flex items-center gap-2 mb-2">
                        <div class="shrink-0 flex items-center justify-center rounded-full bg-emerald-100" style="width: 36px; height: 36px;">
                            <svg class="w-5 h-5 text-emerald-600" 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>
                        </div>
                        <span class="font-semibold text-gray-800">비용 효율</span>
                    </div>
                    <p class="text-sm text-gray-600 leading-relaxed">Max 20x는 API 대비 <strong>93% 이상</strong> 할인된 가격. 그러나 Team Premium은 같은 가격($100)에 관리 기능까지 포함.</p>
                </div>
                <div class="p-4 rounded-lg border border-gray-200 bg-gray-50" style="flex: 1 1 240px;">
                    <div class="flex items-center gap-2 mb-2">
                        <div class="shrink-0 flex items-center justify-center rounded-full bg-blue-100" style="width: 36px; height: 36px;">
                            <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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                        </div>
                        <span class="font-semibold text-gray-800">안정성</span>
                    </div>
                    <p class="text-sm text-gray-600 leading-relaxed">Max 5x+API는 비용 예측이 어려움. Team Premium은 <strong>정액제 + Extra Usage</strong>로 예측 가능한 비용 구조.</p>
                </div>
                <div class="p-4 rounded-lg border border-emerald-200 bg-emerald-50" style="flex: 1 1 240px;">
                    <div class="flex items-center gap-2 mb-2">
                        <div class="shrink-0 flex items-center justify-center rounded-full bg-emerald-200" style="width: 36px; height: 36px;">
                            <svg class="w-5 h-5 text-emerald-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
                        </div>
                        <span class="font-semibold text-emerald-800">최적 선택</span>
                    </div>
                    <p class="text-sm text-emerald-700 leading-relaxed"><strong>Team Premium x 5 (연간 결제)</strong><br>= 월 $500, 연 $6,000<br>현재 대비 37.5% 절감 + 관리 기능</p>
                </div>
            </div>
            <p class="mt-4 text-xs text-gray-400 text-center">※ 실제 비용은 모델 사용 비율, 프롬프트 복잡도에 따라 달라질 수 있습니다.</p>
        </div>
    </div>

</div>
@endsection