<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>대한민국 RAG 스타트업 현황 분석</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
    <!-- Chosen Palette: Warm Neutrals (bg-amber-50, bg-white) with Muted Teal (text-teal-700, bg-teal-600) accent -->
    <!-- Application Structure Plan: A single-page, multi-section dashboard structure. Navigation via a sticky header links to anchors (소개, 시장 현황, 주요 기업, 기술 트렌드, 전망). This design is chosen for usability, allowing users to either get a quick overview (Market Stats, Charts) or deep-dive into specific areas (Key Players, Use Cases) without leaving the page. Interactions include: 1) Nav links for scrolling. 2) Chart.js bar/radar charts for quantitative data. 3) A filterable 'Key Players' section (JS-driven tabs) to categorize startups. 4) An interactive 'Use Cases' tab system (JS-driven) to explore applications. This structure logically groups the report's synthesized content (Intro -> Market -> Players -> Tech -> Future) for easy consumption. -->
    <!-- Visualization & Content Choices: 
        Report Info: RAG Architecture -> Goal: Explain -> Viz: HTML/Tailwind Diagram (Boxes/Arrows) -> Interaction: Static view -> Justification: Simple, clear visual flow without complex libraries. -> Method: HTML/CSS.
        Report Info: Investment Data (by Year) -> Goal: Show Change -> Viz: Bar Chart -> Interaction: Hover tooltips -> Justification: Clear comparison of investment over time. -> Library: Chart.js.
        Report Info: Key Startups (Categorized) -> Goal: Organize/Inform -> Viz: Filterable Card List -> Interaction: Click tabs ('AI 검색', 'B2B SaaS') to filter cards -> Justification: Allows user to explore the startup landscape by category. -> Method: Vanilla JS (show/hide).
        Report Info: Technical Challenges -> Goal: Compare (importance) -> Viz: Radar Chart -> Interaction: Hover tooltips -> Justification: Shows multi-dimensional "challenge" profile. -> Library: Chart.js.
        Report Info: Use Cases -> Goal: Organize -> Viz: Tabbed Content Blocks -> Interaction: Click tabs ('고객 지원', '사내 검색') to switch content -> Justification: Hides complexity, organizes examples neatly. -> Method: Vanilla JS (show/hide).
    -->
    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
    <style>
        body {
            font-family: 'Noto Sans KR', sans-serif;
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            height: 320px;
            max-height: 400px;
        }
        @media (min-width: 640px) {
            .chart-container {
                height: 400px;
            }
        }
        .nav-link {
            @apply px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-teal-50 hover:text-teal-700 transition-colors;
        }
        .nav-link.active {
            @apply bg-teal-100 text-teal-800;
        }
        .tab-button {
            @apply px-4 py-2 text-sm font-medium rounded-t-lg transition-colors border-b-2;
        }
        .tab-button.active {
            @apply border-teal-600 text-teal-700;
        }
        .tab-button:not(.active) {
            @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
        }
        .content-section {
            @apply pt-20 -mt-16;
        }
        .company-card {
            @apply bg-white p-4 rounded-lg shadow-md border border-gray-200 hover:shadow-lg transition-shadow;
        }
    </style>
</head>
<body class="bg-amber-50 text-gray-800">
    <div class="container mx-auto">
            <div class="mb-6 flex items-center justify-start">
                <a href="<?=$root_dir?>/index.php" class="inline-flex items-center px-3 py-2 rounded-lg hover:bg-amber-100 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-8 md:h-8 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 11.5L12 4l9 7.5M5 10v8a1 1 0 001 1h3.5a1 1 0 001-1v-3h2v3a1 1 0 001 1H18a1 1 0 001-1v-8"/>
                    </svg>
                    <span class="ml-2 text-base md:text-lg font-semibold text-amber-700 hidden md:inline">홈으로</span>
                </a>
            </div>
        </div>    
    <header class="bg-white shadow-sm sticky top-0 z-50 w-full">
        <nav 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-shrink-0">
                    <h1 class="text-xl font-bold text-teal-800">대한민국 RAG 스타트업 현황</h1>
                </div>
                <div class="hidden sm:block sm:ml-6">
                    <div class="flex space-x-4">
                        <a href="#intro" class="nav-link active">RAG 소개</a>
                        <a href="#market" class="nav-link">시장 현황</a>
                        <a href="#players" class="nav-link">주요 기업</a>
                        <a href="#tech" class="nav-link">기술 트렌드</a>
                        <a href="#usecases" class="nav-link">도입 사례</a>
                        <a href="#outlook" class="nav-link">전망</a>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <main class="max-w-6xl mx-auto p-4 sm:p-6 lg:p-8">

        <section id="intro" class="content-section mb-12">
            <h2 class="text-3xl font-bold text-center mb-6 text-teal-900">RAG (Retrieval-Augmented Generation)란?</h2>
            <p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
                RAG는 '검색 증강 생성'의 약자로, 대규모 언어 모델(LLM)이 최신 정보나 특정 도메인 지식에 접근할 수 있도록 외부 데이터베이스에서 관련 정보를 검색하여 이를 기반으로 답변을 생성하는 기술입니다. 이 섹션에서는 RAG의 기본 개념과 중요성을 소개합니다.
            </p>
            
            <div class="max-w-4xl mx-auto bg-white p-6 rounded-lg shadow-lg border border-gray-200">
                <h3 class="text-xl font-bold text-center mb-4 text-gray-800">RAG 시스템 아키텍처</h3>
                <div class="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0 md:space-x-4">
                    <div class="flex flex-col items-center text-center p-3 bg-gray-50 rounded-lg w-full md:w-1/4">
                        <span class="text-4xl mb-2">👤</span>
                        <span class="font-bold">사용자 질문</span>
                        <p class="text-sm text-gray-600">"최신 AI 트렌드는?"</p>
                    </div>
                    
                    <span class="text-2xl font-bold text-teal-600 hidden md:block">→</span>
                    <span class="text-2xl font-bold text-teal-600 md:hidden">↓</span>

                    <div class="flex flex-col items-center text-center p-3 bg-teal-50 rounded-lg w-full md:w-1/3">
                        <span class="text-4xl mb-2">🔍</span>
                        <span class="font-bold">1. Retriever (검색)</span>
                        <p class="text-sm text-gray-600">Vector DB 등 외부 지식 소스에서 관련 문서 검색</p>
                    </div>

                    <span class="text-2xl font-bold text-teal-600 hidden md:block">→</span>
                    <span class="text-2xl font-bold text-teal-600 md:hidden">↓</span>
                    
                    <div class="flex flex-col items-center text-center p-3 bg-teal-50 rounded-lg w-full md:w-1/3">
                        <span class="text-4xl mb-2">🧠</span>
                        <span class="font-bold">2. Generator (LLM)</span>
                        <p class="text-sm text-gray-600">질문 + 검색된 문서를 기반으로 정확한 답변 생성</p>
                    </div>
                    
                    <span class="text-2xl font-bold text-teal-600 hidden md:block">→</span>
                    <span class="text-2xl font-bold text-teal-600 md:hidden">↓</span>

                    <div class="flex flex-col items-center text-center p-3 bg-gray-50 rounded-lg w-full md:w-1/4">
                        <span class="text-4xl mb-2">💡</span>
                        <span class="font-bold">최종 답변</span>
                        <p class="text-sm text-gray-600">"최신 트렌드는... (검색된 정보 기반)"</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="market" class="content-section mb-12">
            <h2 class="text-3xl font-bold text-center mb-6 text-teal-900">국내 RAG 시장 현황</h2>
            <p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
                국내 RAG 시장은 생성형 AI의 기업 도입이 가속화되면서 폭발적으로 성장하고 있습니다. 기업 내부 데이터를 활용한 정확하고 신뢰할 수 있는 AI 답변 요구가 시장 성장의 핵심 동력입니다.
            </p>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                <div class="bg-white p-6 rounded-lg shadow-md text-center border border-gray-200">
                    <h3 class="text-xl font-bold text-teal-800 mb-2">시장 규모 (2024년 예상)</h3>
                    <p class="text-4xl font-bold text-gray-900">500억+</p>
                    <p class="text-sm text-gray-600">원</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md text-center border border-gray-200">
                    <h3 class="text-xl font-bold text-teal-800 mb-2">연평균 성장률 (CAGR)</h3>
                    <p class="text-4xl font-bold text-gray-900">35%</p>
                    <p class="text-sm text-gray-600">2024-2027년 예상</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md text-center border border-gray-200">
                    <h3 class="text-xl font-bold text-teal-800 mb-2">주요 성장 동력</h3>
                    <p class="text-lg font-medium text-gray-900">기업 맞춤형 AI</p>
                    <p class="text-sm text-gray-600">데이터 보안 및 환각 감소 요구</p>
                </div>
            </div>

            <div class="bg-white p-6 rounded-lg shadow-lg border border-gray-200">
                <h3 class="text-xl font-bold text-center mb-4 text-gray-800">연도별 국내 RAG 시장 투자 규모</h3>
                <div class="chart-container">
                    <canvas id="investmentChart"></canvas>
                </div>
            </div>
        </section>

        <section id="players" class="content-section mb-12">
            <h2 class="text-3xl font-bold text-center mb-6 text-teal-900">주요 RAG 스타트업</h2>
            <p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
                국내 RAG 시장은 다양한 배경의 스타트업들이 경쟁하고 있습니다. AI 검색 기술을 보유한 기업부터 특정 도메인에 특화된 B2B SaaS 기업까지 다양한 플레이어들이 있습니다. 아래 탭을 클릭하여 카테고리별 기업을 확인하세요.
            </p>

            <div class="border-b border-gray-300 mb-6">
                <nav class="-mb-px flex justify-center space-x-6" aria-label="Tabs">
                    <button class="tab-button active" data-filter="all">전체</button>
                    <button class="tab-button" data-filter="search">AI 검색 솔루션</button>
                    <button class="tab-button" data-filter="b2b">B2B SaaS</button>
                    <button class="tab-button" data-filter="domain">특화 도메인</button>
                </nav>
            </div>

            <div id="playerGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="company-card" data-category="search">
                    <h3 class="text-xl font-bold text-teal-800">Upstage (업스테이지)</h3>
                    <p class="text-sm font-medium text-gray-600 mb-2">AI 검색 솔루션</p>
                    <p class="text-gray-700">자체 LLM 'Solar'와 RAG 기술을 결합한 Document AI 솔루션 제공. 금융, 보험 업계에서 두각.</p>
                </div>
                <div class="company-card" data-category="search">
                    <h3 class="text-xl font-bold text-teal-800">Wrtn (뤼튼)</h3>
                    <p class="text-sm font-medium text-gray-600 mb-2">AI 검색 솔루션</p>
                    <p class="text-gray-700">AI 포털 서비스 '뤼튼'을 통해 RAG 기반 검색 및 콘텐츠 생성 기능 제공. B2C 및 B2B 확장 중.</p>
                </div>
                <div class="company-card" data-category="b2b">
                    <h3 class="text-xl font-bold text-teal-800">Allganize (올거나이즈)</h3>
                    <p class="text-sm font-medium text-gray-600 mb-2">B2B SaaS</p>
                    <p class="text-gray-700">기업용 LLM 앱 빌더 '알리(Alli)' 제공. 사내 문서 기반 Q&A, 워크플로우 자동화에 강점.</p>
                </div>
                <div class="company-card" data-category="search">
                    <h3 class="text-xl font-bold text-teal-800">42Maru (포티투마루)</h3>
                    <p class="text-sm font-medium text-gray-600 mb-2">AI 검색 솔루션</p>
                    <p class="text-gray-700">'QA42' 등 시맨틱 검색 기반 AI 솔루션. 정확한 의도 파악 및 답변 생성 기술 보유.</p>
                </div>
                <div class="company-card" data-category="domain">
                    <h3 class="text-xl font-bold text-teal-800">Law&Company (로앤컴퍼니)</h3>
                    <p class="text-sm font-medium text-gray-600 mb-2">특화 도메인 (법률)</p>
                    <p class="text-gray-700">'로톡' 서비스를 통해 RAG 기반 법률 정보 검색 및 상담 서비스 고도화.</p>
                </div>
                <div class="company-card" data-category="b2b">
                    <h3 class="text-xl font-bold text-teal-800">Mindlogic (마인드로직)</h3>
                    <p class="text-sm font-medium text-gray-600 mb-2">B2B SaaS</p>
                    <p class="text-gray-700">AI 페르소나 기술과 RAG를 결합하여 기업 맞춤형 가상 상담원, 챗봇 등 제공.</p>
                </div>
            </div>
        </section>

        <section id="tech" class="content-section mb-12">
            <h2 class="text-3xl font-bold text-center mb-6 text-teal-900">기술 트렌드 및 과제</h2>
            <p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
                RAG 기술이 상용화되면서 여러 기술적 과제들이 대두되고 있습니다. 국내 스타트업들은 이러한 과제들을 해결하며 기술 경쟁력을 확보하기 위해 노력하고 있습니다.
            </p>

            <div class="bg-white p-6 rounded-lg shadow-lg border border-gray-200">
                <h3 class="text-xl font-bold text-center mb-4 text-gray-800">RAG 기술 핵심 과제</h3>
                <div class="chart-container">
                    <canvas id="techRadarChart"></canvas>
                </div>
            </div>
        </section>

        <section id="usecases" class="content-section mb-12">
            <h2 class="text-3xl font-bold text-center mb-6 text-teal-900">주요 도입 사례</h2>
            <p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
                RAG 시스템은 다양한 산업 분야에서 기업의 생산성을 높이고 새로운 고객 경험을 창출하는 데 활용되고 있습니다. 각 탭을 클릭하여 주요 도입 사례를 확인하세요.
            </p>

            <div class="max-w-3xl mx-auto">
                <div class="border-b border-gray-300 mb-4">
                    <nav class="-mb-px flex space-x-4" aria-label="Tabs">
                        <button class="usecase-tab-button tab-button active" data-target="usecase-1">고객 지원</button>
                        <button class="usecase-tab-button tab-button" data-target="usecase-2">사내 지식 관리</button>
                        <button class="usecase-tab-button tab-button" data-target="usecase-3">전문 리서치</button>
                    </nav>
                </div>
                
                <div id="usecase-content">
                    <div id="usecase-1" class="usecase-content-panel p-4 bg-white rounded-lg shadow border">
                        <h3 class="text-xl font-bold text-teal-800 mb-2">고객 지원 및 상담 챗봇</h3>
                        <p class="text-gray-700">최신 제품 매뉴얼, FAQ, 약관 등을 실시간으로 검색하여 고객 문의에 24시간 정확하게 응대합니다. 상담원의 업무 부담을 줄이고 고객 만족도를 높입니다.</p>
                        <p class="text-sm text-gray-600 mt-2"><strong>주요 기업:</strong> 금융사, 이커머스, 통신사</p>
                    </div>
                    <div id="usecase-2" class="usecase-content-panel p-4 bg-white rounded-lg shadow border hidden">
                        <h3 class="text-xl font-bold text-teal-800 mb-2">사내 지식 관리 및 검색</h3>
                        <p class="text-gray-700">방대한 양의 내부 문서(보고서, 규정, 기술 문서 등)를 학습하여 직원이 필요한 정보를 빠르게 찾고 요약할 수 있도록 돕습니다. 신입 사원 교육 및 업무 효율화에 기여합니다.</p>
                        <p class="text-sm text-gray-600 mt-2"><strong>주요 기업:</strong> 대기업, IT/제조업</p>
                    </div>
                    <div id="usecase-3" class="usecase-content-panel p-4 bg-white rounded-lg shadow border hidden">
                        <h3 class="text-xl font-bold text-teal-800 mb-2">전문 분야 리서치 (법률, 의료)</h3>
                        <p class="text-gray-700">수만 건의 판례, 논문, 특허 등 전문 자료를 RAG로 분석하여 리서치 시간을 획기적으로 단축시킵니다. 법률 자문, 의료 진단 보조 등 전문 영역에서 활용됩니다.</p>
                        <p class="text-sm text-gray-600 mt-2"><strong>주요 기업:</strong> 로펌, 병원, 연구소</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="outlook" class="content-section">
            <h2 class="text-3xl font-bold text-center mb-6 text-teal-900">시장 전망 및 결론</h2>
            <p class="text-lg text-gray-700 mb-4 max-w-3xl mx-auto">
                대한민국 RAG 스타트업 시장은 기술 성숙과 기업 수요 증가에 힘입어 지속적으로 성장할 것입니다.
            </p>
            <div class="max-w-3xl mx-auto bg-white p-6 rounded-lg shadow-lg border border-gray-200 space-y-4">
                <div>
                    <h3 class="text-xl font-bold text-gray-800">핵심 전망</h3>
                    <ul class="list-disc list-inside text-gray-700 mt-2 space-y-1">
                        <li><strong>수직적 확장:</strong> 법률, 의료, 금융, 교육 등 특정 도메인에 고도로 특화된 RAG 솔루션이 증가할 것입니다.</li>
                        <li><strong>기술 고도화:</strong> 단순 검색을 넘어, 복잡한 추론과 데이터 분석이 가능한 'Advanced RAG' 기술 경쟁이 심화될 것입니다.</li>
                        <li><strong>M&A 및 파트너십:</strong> 대형 IT 기업 및 클라우드 사업자(CSP)와의 파트너십, 혹은 기술력 있는 스타트업의 M&A가 활발해질 전망입니다.</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-bold text-gray-800">결론</h3>
                    <p class="text-gray-700 mt-2">
                        RAG는 생성형 AI의 한계를 극복하고 기업 환경에 실질적인 가치를 제공하는 핵심 기술입니다. 국내 스타트업들은 한국어 처리 능력과 각 산업 도메인에 대한 깊은 이해를 바탕으로 글로벌 시장에서도 경쟁력 있는 솔루션을 만들어낼 잠재력을 가지고 있습니다.
                    </p>
                </div>
            </div>
        </section>

    </main>

    <footer class="bg-white mt-16 border-t border-gray-200">
        <div class="max-w-6xl mx-auto py-6 px-4 text-center text-sm text-gray-500">
            <p>&copy; 2025 RAG Startup Analysis. 이 데이터는 가상으로 생성된 예시입니다.</p>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            
            // wrapChartLabels 함수는 충돌 오류를 유발하므로 삭제되었습니다.

            const renderBarChart = () => {
                const ctx = document.getElementById('investmentChart').getContext('2d');
                if (window.myInvestmentChart) {
                    window.myInvestmentChart.destroy();
                }
                window.myInvestmentChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ['2022년', '2023년', '2024년 (E)', '2025년 (F)'],
                        datasets: [{
                            label: '투자 규모 (억 원)',
                            data: [80, 250, 520, 900],
                            backgroundColor: 'rgba(13, 148, 136, 0.6)',
                            borderColor: 'rgba(13, 148, 136, 1)',
                            borderWidth: 1,
                            borderRadius: 4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return `${context.dataset.label}: ${context.parsed.y} 억 원`;
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: '투자 규모 (억 원)'
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                });
            };

            const renderRadarChart = () => {
                const ctx = document.getElementById('techRadarChart').getContext('2d');
                if (window.myRadarChart) {
                    window.myRadarChart.destroy();
                }
                // 레이블 길이를 짧게 수정하여 복잡한 줄 바꿈 로직을 피하고 안정성을 확보했습니다.
                const chartData = {
                    labels: ['환각 감소', '한국어 처리', '비용 효율성', '데이터 보안', '검색 정확도'],
                    datasets: [{
                        label: '기술적 중요도 및 과제',
                        data: [9, 8, 7, 9, 10],
                        fill: true,
                        backgroundColor: 'rgba(13, 148, 136, 0.2)',
                        borderColor: 'rgba(13, 148, 136, 1)',
                        pointBackgroundColor: 'rgba(13, 148, 136, 1)',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: 'rgba(13, 148, 136, 1)'
                    }]
                };

                window.myRadarChart = new Chart(ctx, {
                    type: 'radar',
                    data: chartData,
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'top',
                            },
                            tooltip: {
                                enabled: true
                            }
                        },
                        scales: {
                            r: {
                                beginAtZero: true,
                                max: 10,
                                pointLabels: {
                                    font: {
                                        size: 12 // 폰트 크기 조정
                                    },
                                    callback: function(label) {
                                        // 안정성을 위해 간단히 문자열로 변환하여 반환합니다.
                                        return String(label);
                                    }
                                }
                            }
                        }
                        // onResize 및 plugins의 커스텀 레이블 처리 로직을 제거했습니다.
                    }
                });
            };
            
            const initNav = () => {
                const navLinks = document.querySelectorAll('.nav-link');
                const sections = document.querySelectorAll('.content-section');

                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            navLinks.forEach(link => {
                                link.classList.remove('active');
                                if (link.getAttribute('href') === `#${entry.target.id}`) {
                                    link.classList.add('active');
                                }
                            });
                        }
                    });
                }, { rootMargin: '-20% 0px -70% 0px', threshold: 0.1 }); 

                sections.forEach(section => {
                    observer.observe(section);
                });

                navLinks.forEach(link => {
                    link.addEventListener('click', (e) => {
                        e.preventDefault();
                        const targetId = e.currentTarget.getAttribute('href');
                        const targetElement = document.querySelector(targetId);
                        if (targetElement) {
                            const headerOffset = 70;
                            const elementPosition = targetElement.getBoundingClientRect().top;
                            const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

                            window.scrollTo({
                                top: offsetPosition,
                                behavior: 'smooth'
                            });
                        }
                    });
                });
            };

            const initPlayerFilters = () => {
                const filterButtons = document.querySelectorAll('#players .tab-button');
                const playerCards = document.querySelectorAll('#playerGrid .company-card');

                filterButtons.forEach(button => {
                    button.addEventListener('click', () => {
                        const filter = button.getAttribute('data-filter');
                        
                        filterButtons.forEach(btn => btn.classList.remove('active'));
                        button.classList.add('active');

                        playerCards.forEach(card => {
                            if (filter === 'all' || card.getAttribute('data-category') === filter) {
                                card.style.display = 'block';
                            } else {
                                card.style.display = 'none';
                            }
                        });
                    });
                });
            };
            
            const initUseCaseTabs = () => {
                const tabButtons = document.querySelectorAll('.usecase-tab-button');
                const contentPanels = document.querySelectorAll('.usecase-content-panel');

                tabButtons.forEach(button => {
                    button.addEventListener('click', () => {
                        const targetId = button.getAttribute('data-target');

                        tabButtons.forEach(btn => btn.classList.remove('active'));
                        button.classList.add('active');

                        contentPanels.forEach(panel => {
                            if (panel.id === targetId) {
                                panel.classList.remove('hidden');
                            } else {
                                panel.classList.add('hidden');
                            }
                        });
                    });
                });
            };

            initNav();
            renderBarChart();
            renderRadarChart();
            initPlayerFilters();
            initUseCaseTabs();

            window.addEventListener('resize', () => {
                renderBarChart();
                renderRadarChart();
            });
        });
    </script>
</body>
</html>