@extends('layouts.app')

@section('title', 'Confluence vs Notion 심층 분석')

@push('styles')
<style>
    .chart-container {
        position: relative;
        width: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        height: 300px;
        max-height: 400px;
    }
    @media (min-width: 768px) {
        .chart-container {
            height: 350px;
        }
    }
    .tab-active {
        border-bottom: 2px solid #0052CC;
        color: #0052CC;
        font-weight: 600;
    }
    .tab-inactive {
        color: #78716c;
    }
    .tab-inactive:hover {
        color: #44403c;
    }
    .scroll-mt-20 {
        scroll-margin-top: 5rem;
    }
    .fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
@endpush

@section('content')
<div class="bg-stone-50 text-stone-800 min-h-screen">
    <!-- Header -->
    <header class="bg-white border-b border-stone-200 sticky top-0 z-40">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">C</div>
                    <span class="text-stone-400 font-light text-xl">vs</span>
                    <div class="w-8 h-8 bg-stone-900 rounded-lg flex items-center justify-center text-white font-bold text-lg">N</div>
                    <h1 class="ml-3 text-xl font-bold tracking-tight text-stone-900 hidden sm:block">Work Tool Analysis</h1>
                </div>
                <nav class="hidden md:flex space-x-8">
                    <a href="#trends" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">트렌드 & 철학</a>
                    <a href="#features" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">기능 비교</a>
                    <a href="#pricing" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">비용 시뮬레이션</a>
                    <a href="#verdict" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">추천 가이드</a>
                </nav>
            </div>
        </div>
    </header>

    <main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <!-- Hero -->
        <div class="text-center mb-16">
            <h2 class="text-4xl font-extrabold text-stone-900 mb-4">구조(Structure)와 유연성(Flexibility)의 대결</h2>
            <p class="text-lg text-stone-600 max-w-3xl mx-auto leading-relaxed">
                전통적인 강자 <strong>Atlassian Confluence</strong>는 체계적인 문서화와 JIRA 통합을 무기로 기업 시장을 지키고 있습니다.
                반면, <strong>Notion</strong>은 올인원(All-in-one) 워크스페이스와 압도적인 자유도로 빠르게 시장을 잠식하고 있습니다.
            </p>
        </div>

        <!-- Section 1: Trends -->
        <section id="trends" class="mb-20 scroll-mt-20">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
                <div class="bg-white rounded-2xl shadow-sm border border-stone-100 p-6">
                    <div class="mb-4">
                        <h3 class="text-xl font-bold text-stone-900 mb-2">시장 관심도 변화 (Trend Analysis)</h3>
                        <p class="text-sm text-stone-500">최근 5년간의 검색량 및 사용자 관심도 추이입니다.</p>
                    </div>
                    <div class="chart-container">
                        <canvas id="trendChart"></canvas>
                    </div>
                    <div class="mt-4 bg-blue-50 p-4 rounded-xl border border-blue-100">
                        <p class="text-sm text-blue-800">
                            <strong>핵심 인사이트:</strong> Notion은 개인 사용자와 스타트업을 중심으로 폭발적인 '팬덤'을 형성하며 성장했습니다.
                        </p>
                    </div>
                </div>

                <div class="bg-white rounded-2xl shadow-sm border border-stone-100 p-6">
                    <div class="mb-4">
                        <h3 class="text-xl font-bold text-stone-900 mb-2">핵심 철학 비교 (Philosophy Radar)</h3>
                        <p class="text-sm text-stone-500">두 도구의 성격을 시각화합니다.</p>
                    </div>
                    <div class="chart-container">
                        <canvas id="radarChart"></canvas>
                    </div>
                    <div class="grid grid-cols-2 gap-4 mt-4 text-sm">
                        <div class="text-center">
                            <span class="block font-bold text-blue-600 mb-1">Confluence</span>
                            <span class="text-stone-500">"체계화된 지식 저장소"</span>
                        </div>
                        <div class="text-center">
                            <span class="block font-bold text-stone-900 mb-1">Notion</span>
                            <span class="text-stone-500">"유연한 레고 블록"</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 2: Features -->
        <section id="features" class="mb-20 scroll-mt-20">
            <div class="mb-8">
                <h3 class="text-2xl font-bold text-stone-900">기능 심층 비교</h3>
                <p class="text-stone-600 mt-2">카테고리별 상세 기능을 확인하세요.</p>
            </div>

            <div class="flex space-x-6 border-b border-stone-200 mb-8 overflow-x-auto">
                <button onclick="updateFeatureView('doc')" class="tab-btn tab-active pb-3 px-1 transition whitespace-nowrap" id="btn-doc">문서화 & 위키</button>
                <button onclick="updateFeatureView('pm')" class="tab-btn tab-inactive pb-3 px-1 transition whitespace-nowrap" id="btn-pm">프로젝트 관리</button>
                <button onclick="updateFeatureView('dev')" class="tab-btn tab-inactive pb-3 px-1 transition whitespace-nowrap" id="btn-dev">개발 & 통합</button>
            </div>

            <div id="feature-content" class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Content injected via JS -->
            </div>
        </section>

        <!-- Section 3: Pricing -->
        <section id="pricing" class="mb-20 scroll-mt-20 bg-stone-100 rounded-3xl p-8 lg:p-12">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
                <div class="lg:col-span-1">
                    <h3 class="text-2xl font-bold text-stone-900 mb-4">비용 시뮬레이션</h3>
                    <p class="text-stone-600 mb-8">팀 규모에 따른 월간 예상 비용을 확인해보세요.</p>

                    <div class="mb-8">
                        <label for="userRange" class="block text-sm font-medium text-stone-700 mb-2">팀 규모: <span id="userCountDisplay" class="text-blue-600 font-bold text-lg">10</span>명</label>
                        <input type="range" id="userRange" min="1" max="200" value="10" class="w-full h-2 bg-stone-300 rounded-lg appearance-none cursor-pointer accent-blue-600">
                        <div class="flex justify-between text-xs text-stone-500 mt-2">
                            <span>1명</span>
                            <span>200명+</span>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-blue-600">
                            <div class="text-xs text-stone-500 uppercase font-semibold">Confluence 예상 비용</div>
                            <div class="text-2xl font-bold text-stone-900" id="confPrice">$60.00</div>
                            <div class="text-xs text-stone-400">월간 / 사용자당 약 $6.05</div>
                        </div>
                        <div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-stone-800">
                            <div class="text-xs text-stone-500 uppercase font-semibold">Notion 예상 비용</div>
                            <div class="text-2xl font-bold text-stone-900" id="notionPrice">$80.00</div>
                            <div class="text-xs text-stone-400">월간 / 사용자당 $8</div>
                        </div>
                    </div>
                </div>

                <div class="lg:col-span-2 flex flex-col justify-center">
                    <div class="chart-container">
                        <canvas id="pricingChart"></canvas>
                    </div>
                    <div class="mt-6 text-sm text-stone-500 bg-white p-4 rounded-lg">
                        <p><strong>참고:</strong> Confluence는 10명 이하 무료, 이후 사용자 수 구간별로 가격이 책정됩니다.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 4: Verdict -->
        <section id="verdict" class="mb-20 scroll-mt-20">
            <div class="max-w-4xl mx-auto bg-white border border-stone-200 rounded-2xl shadow-lg overflow-hidden">
                <div class="bg-stone-900 p-6 text-center">
                    <h3 class="text-2xl font-bold text-white">어떤 도구가 우리 팀에 맞을까요?</h3>
                    <p class="text-stone-400 mt-2">3가지 질문으로 알아보는 추천 가이드</p>
                </div>

                <div class="p-8">
                    <div id="quiz-container" class="space-y-6">
                        <div class="space-y-4">
                            <p class="font-semibold text-lg text-stone-800">Q1. 귀하의 팀은 소프트웨어 개발이 주 업무이며, JIRA를 사용하나요?</p>
                            <div class="flex gap-4">
                                <button onclick="handleQuiz(1, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">예 (Yes)</button>
                                <button onclick="handleQuiz(1, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">아니오 (No)</button>
                            </div>
                        </div>
                    </div>

                    <div id="result-container" class="hidden text-center fade-in">
                        <div class="mb-6 flex justify-center">
                            <div id="result-icon" class="text-6xl"></div>
                        </div>
                        <h4 id="result-title" class="text-3xl font-bold mb-4 text-stone-900"></h4>
                        <p id="result-desc" class="text-lg text-stone-600 mb-8 max-w-2xl mx-auto"></p>
                        <button onclick="resetQuiz()" class="px-6 py-2 bg-stone-200 text-stone-700 rounded-lg hover:bg-stone-300 transition text-sm font-semibold">다시 하기</button>
                    </div>
                </div>
            </div>
        </section>

        <footer class="text-center text-stone-400 py-10 border-t border-stone-200">
            <p class="text-sm">Source Data based on general market analysis of Atlassian Confluence vs Notion (2024).</p>
        </footer>
    </main>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const state = {
    users: 10,
    currentTab: 'doc',
    quizScore: 0
};

const featureData = {
    doc: {
        confluence: {
            title: "Confluence: 구조적 문서화",
            icon: '<svg class="w-7 h-7" 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>',
            points: [
                "계층형 페이지 트리 구조 (Space > Parent > Child)",
                "강력한 버전 관리 및 변경 이력 추적",
                "엄격한 권한 관리 (페이지/스페이스 단위)",
                "공식적인 사내 규정, 매뉴얼 관리에 최적"
            ],
            color: "bg-blue-50 border-blue-200 text-blue-900"
        },
        notion: {
            title: "Notion: 유연한 캔버스",
            icon: '<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.098 19.902a3.75 3.75 0 005.304 0l6.401-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008z" /></svg>',
            points: [
                "무한히 중첩 가능한 페이지 구조",
                "드래그 앤 드롭 블록 시스템",
                "실시간 협업에 강하지만 버전 관리는 상대적으로 약함",
                "브레인스토밍, 아이디어 노트, 개인 위키에 최적"
            ],
            color: "bg-stone-100 border-stone-200 text-stone-900"
        }
    },
    pm: {
        confluence: {
            title: "Confluence: JIRA 보조",
            icon: '<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /></svg>',
            points: [
                "독자적인 PM 기능보다는 JIRA 데이터 시각화에 집중",
                "JIRA 로드맵, 이슈 리스트 매크로 활용",
                "스프린트 회고 및 요구사항 정의서 템플릿 강점",
                "복잡한 프로젝트의 '문서적' 관리에 적합"
            ],
            color: "bg-blue-50 border-blue-200 text-blue-900"
        },
        notion: {
            title: "Notion: 경량형 PM 도구",
            icon: '<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /></svg>',
            points: [
                "데이터베이스를 활용한 칸반 보드, 간트 차트 내장",
                "별도 도구 없이 하나의 페이지에서 기획+일정 관리 가능",
                "필터와 보기를 통해 다양한 관점 제공",
                "Agile 프로세스가 엄격하지 않은 팀에 적합"
            ],
            color: "bg-stone-100 border-stone-200 text-stone-900"
        }
    },
    dev: {
        confluence: {
            title: "Confluence: 개발 생태계",
            icon: '<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>',
            points: [
                "JIRA 이슈 양방향 동기화 (가장 강력한 차별점)",
                "코드 스니펫 매크로 제공",
                "DevOps 파이프라인 상태 표시 가능",
                "수천 개의 서드파티 앱 마켓플레이스"
            ],
            color: "bg-blue-50 border-blue-200 text-blue-900"
        },
        notion: {
            title: "Notion: API & 임베드",
            icon: '<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" /></svg>',
            points: [
                "GitHub, Slack, Figma 등의 링크 미리보기 지원",
                "Notion API를 활용한 커스텀 자동화 가능",
                "Syncd Blocks로 여러 페이지 내용 동시 업데이트",
                "JIRA 연동이 가능하나 Confluence만큼 깊지 않음"
            ],
            color: "bg-stone-100 border-stone-200 text-stone-900"
        }
    }
};

const quizQuestions = [
    { q: "1. 팀이 JIRA를 핵심 프로젝트 관리 도구로 사용합니까?", yesScore: 10, noScore: -5 },
    { q: "2. 문서의 양식이 엄격하게 정해져 있고, 결재/승인 프로세스가 중요한가요?", yesScore: 5, noScore: -5 },
    { q: "3. 팀원들이 자유롭게 페이지를 꾸미고 구조를 변경하는 것을 선호하나요?", yesScore: -10, noScore: 5 }
];

let pricingChart;

document.addEventListener('DOMContentLoaded', () => {
    initCharts();
    updateFeatureView('doc');
    updatePrice();
});

function initCharts() {
    // Trend Chart
    const ctxTrend = document.getElementById('trendChart').getContext('2d');
    new Chart(ctxTrend, {
        type: 'line',
        data: {
            labels: ['2020', '2021', '2022', '2023', '2024'],
            datasets: [
                {
                    label: 'Notion',
                    data: [30, 55, 75, 85, 95],
                    borderColor: '#333333',
                    backgroundColor: 'rgba(51, 51, 51, 0.1)',
                    tension: 0.4,
                    fill: true
                },
                {
                    label: 'Confluence',
                    data: [70, 72, 71, 73, 74],
                    borderColor: '#0052CC',
                    borderDash: [5, 5],
                    tension: 0.4,
                    fill: false
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { position: 'bottom' } },
            scales: { y: { display: false } }
        }
    });

    // Radar Chart
    const ctxRadar = document.getElementById('radarChart').getContext('2d');
    new Chart(ctxRadar, {
        type: 'radar',
        data: {
            labels: ['유연성', '구조화', 'JIRA 통합', '학습 곡선', '디자인/UI'],
            datasets: [
                {
                    label: 'Notion',
                    data: [95, 40, 50, 85, 95],
                    backgroundColor: 'rgba(51, 51, 51, 0.2)',
                    borderColor: '#333333',
                    pointBackgroundColor: '#333333'
                },
                {
                    label: 'Confluence',
                    data: [40, 95, 100, 50, 60],
                    backgroundColor: 'rgba(0, 82, 204, 0.2)',
                    borderColor: '#0052CC',
                    pointBackgroundColor: '#0052CC'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: { r: { suggestedMin: 0, suggestedMax: 100 } },
            plugins: { legend: { position: 'bottom' } }
        }
    });

    // Pricing Chart
    const ctxPrice = document.getElementById('pricingChart').getContext('2d');
    pricingChart = new Chart(ctxPrice, {
        type: 'bar',
        data: {
            labels: ['Confluence', 'Notion'],
            datasets: [{
                label: '월간 예상 비용 (USD)',
                data: [0, 0],
                backgroundColor: ['#0052CC', '#333333'],
                borderRadius: 8
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: { y: { beginAtZero: true, title: { display: true, text: 'USD ($)' } } },
            plugins: { legend: { display: false } }
        }
    });
}

function updateFeatureView(type) {
    state.currentTab = type;

    ['doc', 'pm', 'dev'].forEach(t => {
        const btn = document.getElementById(`btn-${t}`);
        btn.className = t === type
            ? "tab-btn tab-active pb-3 px-1 transition whitespace-nowrap text-lg"
            : "tab-btn tab-inactive pb-3 px-1 transition whitespace-nowrap text-lg";
    });

    const data = featureData[type];
    const contentDiv = document.getElementById('feature-content');

    contentDiv.innerHTML = `
        <div class="rounded-2xl p-6 border-2 bg-blue-50 border-blue-100 fade-in transform transition hover:-translate-y-1 duration-300">
            <div class="flex items-center gap-3 mb-4">
                <span class="text-3xl">${data.confluence.icon}</span>
                <h4 class="text-xl font-bold text-blue-900">${data.confluence.title}</h4>
            </div>
            <ul class="space-y-3">
                ${data.confluence.points.map(p => `<li class="flex items-start gap-2 text-stone-700"><span class="text-blue-500 mt-1">✔</span> ${p}</li>`).join('')}
            </ul>
        </div>
        <div class="rounded-2xl p-6 border-2 bg-stone-100 border-stone-200 fade-in transform transition hover:-translate-y-1 duration-300">
            <div class="flex items-center gap-3 mb-4">
                <span class="text-3xl">${data.notion.icon}</span>
                <h4 class="text-xl font-bold text-stone-900">${data.notion.title}</h4>
            </div>
            <ul class="space-y-3">
                ${data.notion.points.map(p => `<li class="flex items-start gap-2 text-stone-700"><span class="text-stone-900 mt-1">✔</span> ${p}</li>`).join('')}
            </ul>
        </div>
    `;
}

const userRange = document.getElementById('userRange');
userRange.addEventListener('input', (e) => {
    state.users = parseInt(e.target.value);
    updatePrice();
});

function updatePrice() {
    const users = state.users;
    document.getElementById('userCountDisplay').innerText = users;

    let confCost = users <= 10 ? 0 : users * 6.05;
    let notionCost = users === 1 ? 0 : users * 8;

    document.getElementById('confPrice').innerText = `$${confCost.toFixed(2)}`;
    document.getElementById('notionPrice').innerText = `$${notionCost.toFixed(2)}`;

    pricingChart.data.datasets[0].data = [confCost, notionCost];
    pricingChart.update();
}

function handleQuiz(step, answerYes) {
    if (step === 1) {
        state.quizScore += answerYes ? 10 : -5;
        document.getElementById('quiz-container').innerHTML = `
            <div class="space-y-4 fade-in">
                <p class="font-semibold text-lg text-stone-800">${quizQuestions[1].q}</p>
                <div class="flex gap-4">
                    <button onclick="handleQuiz(2, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">예</button>
                    <button onclick="handleQuiz(2, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">아니오</button>
                </div>
            </div>
        `;
    } else if (step === 2) {
        state.quizScore += answerYes ? 5 : -5;
        document.getElementById('quiz-container').innerHTML = `
            <div class="space-y-4 fade-in">
                <p class="font-semibold text-lg text-stone-800">${quizQuestions[2].q}</p>
                <div class="flex gap-4">
                    <button onclick="handleQuiz(3, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">선호함</button>
                    <button onclick="handleQuiz(3, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">선호하지 않음</button>
                </div>
            </div>
        `;
    } else if (step === 3) {
        state.quizScore += answerYes ? -10 : 5;
        showResult();
    }
}

function showResult() {
    document.getElementById('quiz-container').classList.add('hidden');
    const resultDiv = document.getElementById('result-container');
    resultDiv.classList.remove('hidden');

    const title = document.getElementById('result-title');
    const desc = document.getElementById('result-desc');
    const icon = document.getElementById('result-icon');

    if (state.quizScore > 0) {
        icon.innerHTML = `<span class="bg-blue-600 text-white rounded-2xl px-4 py-2 text-4xl">Confluence</span>`;
        title.innerText = "추천: Atlassian Confluence";
        title.className = "text-3xl font-bold mb-4 text-blue-700";
        desc.innerHTML = `귀하의 팀은 <strong>체계적인 구조, JIRA와의 긴밀한 통합</strong>이 중요해 보입니다. Confluence가 더 적합합니다.`;
    } else {
        icon.innerHTML = `<span class="bg-stone-900 text-white rounded-2xl px-4 py-2 text-4xl">Notion</span>`;
        title.innerText = "추천: Notion";
        title.className = "text-3xl font-bold mb-4 text-stone-900";
        desc.innerHTML = `귀하의 팀은 <strong>유연성, 빠른 속도, 올인원 워크스페이스</strong>를 필요로 합니다. Notion이 더 적합합니다.`;
    }
}

function resetQuiz() {
    state.quizScore = 0;
    document.getElementById('result-container').classList.add('hidden');
    document.getElementById('quiz-container').classList.remove('hidden');
    document.getElementById('quiz-container').innerHTML = `
        <div class="space-y-4 fade-in">
            <p class="font-semibold text-lg text-stone-800">${quizQuestions[0].q}</p>
            <div class="flex gap-4">
                <button onclick="handleQuiz(1, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">예 (Yes)</button>
                <button onclick="handleQuiz(1, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">아니오 (No)</button>
            </div>
        </div>
    `;
}
</script>
@endpush