@extends('layouts.app')

@section('title', '5대 신흥빅테크')

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<style>
    .bigtech-body { font-family: 'Noto Sans KR', sans-serif; color: #0f172a; }
    .chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 320px; max-height: 400px; }
    @media (min-width: 768px) { .chart-container { height: 380px; } }

    /* 탭 버튼 스타일 */
    .bigtech-tab { padding: 0.625rem 1.25rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; transition: all 0.2s; border: 1px solid #e2e8f0; background: white; color: #64748b; cursor: pointer; }
    .bigtech-tab:hover { background: #f1f5f9; color: #334155; }
    .bigtech-tab.active { background: #16a34a; color: white; border-color: #16a34a; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3); }
    .bigtech-tab.placeholder { opacity: 0.6; cursor: default; }
    .tab-content { display: none; }
    .tab-content.active { display: block; }

    /* 탭0: 캄브리콘 스타일 */
    .tab-cambricon { background-color: #f0fdf4; }
    .gradient-text { background: linear-gradient(to right, #16a34a, #2563eb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .card-shadow { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }

    /* 탭1: Agibot 스타일 */
    .tab-agibot { background-color: #fafaf9; }
    .vision-tab { transition: all 0.3s ease; }
    .vision-tab.active { background-color: #4f46e5 !important; color: white !important; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }
</style>
@endpush

@section('content')
<div class="bigtech-body min-h-screen">
    {{-- 탭 네비게이션 --}}
    <div class="bg-white border-b shadow-sm sticky top-0 z-40">
        <div class="max-w-7xl mx-auto px-4 py-3">
            <h2 class="text-lg font-bold text-slate-800 mb-3">5대 신흥빅테크</h2>
            <div class="flex flex-wrap gap-2">
                <button class="bigtech-tab active" onclick="switchTab(0)">천텐스, 캄브리콘 AI 반도체 분석</button>
                <button class="bigtech-tab" onclick="switchTab(1)">Agibot 휴머노이드 로봇 정보</button>
                <button class="bigtech-tab placeholder" disabled>준비 중 (3)</button>
                <button class="bigtech-tab placeholder" disabled>준비 중 (4)</button>
                <button class="bigtech-tab placeholder" disabled>준비 중 (5)</button>
            </div>
        </div>
    </div>

    {{-- ========== 탭 0: 캄브리콘 분석 ========== --}}
    <div id="tab-content-0" class="tab-content active tab-cambricon">
        <header class="bg-white border-b-4 border-green-600 shadow-sm">
            <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
                <h1 class="text-2xl font-black text-slate-800 tracking-tight">CAMBRICON <span class="text-green-600">INSIGHT</span></h1>
                <nav class="hidden md:flex space-x-6 font-semibold text-sm text-slate-600">
                    <a href="#founder" class="hover:text-green-600 transition">천텐스 & 철학</a>
                    <a href="#market" class="hover:text-green-600 transition">주가 & 시장</a>
                    <a href="#huawei" class="hover:text-green-600 transition">화웨이 파트너십</a>
                    <a href="#siyuan" class="hover:text-green-600 transition">Siyuan vs NVIDIA</a>
                </nav>
            </div>
        </header>

        <main class="max-w-7xl mx-auto px-4 py-10">
            <section class="text-center mb-16">
                <h2 class="text-4xl md:text-5xl font-black mb-4"><span class="gradient-text">캄브리콘 (Cambricon)</span>: 중국 AI 굴기의 핵심</h2>
                <p class="text-lg md:text-xl text-slate-600 max-w-3xl mx-auto font-medium">
                    천텐스(Chen Tianshi)가 이끄는 캄브리콘은 중국의 대표적인 AI 반도체 기업입니다. 미국의 대중 반도체 수출 통제 속에서 엔비디아(NVIDIA)의 대체재로 급부상하며 폭발적인 성장을 기록하고 있습니다.
                </p>
            </section>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                <section id="founder" class="bg-white rounded-2xl p-8 card-shadow border-t-4 border-blue-500">
                    <div class="flex items-center mb-6">
                        <span class="text-4xl mr-4">🧠</span>
                        <h3 class="text-2xl font-bold text-slate-800">설립자 천텐스 학술 배경</h3>
                    </div>
                    <p class="text-slate-600 mb-6 leading-relaxed">
                        천텐스(Chen Tianshi)는 1985년생으로, 중국 영재의 산실인 중국과학기술대학(USTC) 소년반 출신입니다. 중국과학원 계산기술연구소(ICT)에서 박사 학위를 취득했으며, 세계 최초의 딥러닝 프로세서 아키텍처 중 하나인 <strong>'Diannao(전뇌)'</strong> 시리즈 연구를 주도했습니다.
                    </p>
                    <div class="space-y-4">
                        <div class="bg-blue-50 p-4 rounded-lg flex items-start border-l-4 border-blue-400">
                            <span class="text-xl mr-3">🎓</span>
                            <div>
                                <h4 class="font-bold text-slate-800">중국과학원(CAS) 연구원</h4>
                                <p class="text-sm text-slate-600">컴퓨터 아키텍처 및 인공지능 하드웨어 가속기 분야의 세계적 권위자.</p>
                            </div>
                        </div>
                        <div class="bg-indigo-50 p-4 rounded-lg flex items-start border-l-4 border-indigo-400">
                            <span class="text-xl mr-3">🏆</span>
                            <div>
                                <h4 class="font-bold text-slate-800">ASPLOS 및 ISCA 최우수 논문상</h4>
                                <p class="text-sm text-slate-600">국제 최상위 컴퓨터 구조 학회에서 AI 가속기 설계의 기초를 닦은 논문 발표.</p>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="bg-white rounded-2xl p-8 card-shadow border-t-4 border-orange-500">
                    <div class="flex items-center mb-6">
                        <span class="text-4xl mr-4">⚙️</span>
                        <h3 class="text-2xl font-bold text-slate-800">NPU 설계 철학</h3>
                    </div>
                    <p class="text-slate-600 mb-6 leading-relaxed">
                        캄브리콘의 핵심은 범용성과 효율성을 모두 잡는 <strong>DSA (Domain-Specific Architecture)</strong>입니다. 기존 CPU/GPU와 달리, 신경망 연산에 특화된 독자적인 명령어 셋(ISA)을 사용하여 전력 소모를 최소화합니다.
                    </p>
                    <div class="flex flex-col space-y-2">
                        <div class="bg-orange-100 text-orange-800 font-bold p-3 rounded text-center">범용 AI 칩 지향 (General-purpose AI)</div>
                        <div class="text-center text-xl text-slate-400">&darr;</div>
                        <div class="grid grid-cols-2 gap-2">
                            <div class="bg-slate-100 p-3 rounded text-center border border-slate-200">
                                <span class="block font-bold text-slate-700">고효율 연산 유닛</span>
                                <span class="text-xs text-slate-500">텐서 처리 최적화</span>
                            </div>
                            <div class="bg-slate-100 p-3 rounded text-center border border-slate-200">
                                <span class="block font-bold text-slate-700">MLUarch 아키텍처</span>
                                <span class="text-xs text-slate-500">독자적 신경망 명령어 셋</span>
                            </div>
                        </div>
                        <div class="text-center text-xl text-slate-400">&darr;</div>
                        <div class="bg-orange-500 text-white font-bold p-3 rounded text-center shadow-md">엣지부터 클라우드까지 아우르는 생태계 (Cambricon Neuware)</div>
                    </div>
                </section>
            </div>

            <section id="market" class="bg-white rounded-2xl p-8 card-shadow mb-12 border-t-4 border-green-500">
                <div class="text-center mb-8">
                    <h3 class="text-3xl font-bold text-slate-800 mb-3">최근 주가 급등 원인 분석</h3>
                    <p class="text-slate-600 max-w-2xl mx-auto">미국의 대중국 반도체 수출 제재가 심화됨에 따라, 중국 내 AI 인프라 구축 수요가 캄브리콘으로 집중되고 있습니다.</p>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
                    <div class="space-y-6 lg:col-span-1">
                        <div class="p-4 bg-green-50 rounded-lg border border-green-100">
                            <div class="flex items-center mb-2">
                                <span class="text-2xl mr-2">📈</span>
                                <h4 class="font-bold text-slate-800">국산화 대체 (수혜)</h4>
                            </div>
                            <p class="text-sm text-slate-600">NVIDIA A100/H100의 중국 수출 통제로 인해 'Siyuan' 시리즈에 대한 통신사/국유기업의 대규모 발주 증가.</p>
                        </div>
                        <div class="p-4 bg-green-50 rounded-lg border border-green-100">
                            <div class="flex items-center mb-2">
                                <span class="text-2xl mr-2">🤖</span>
                                <h4 class="font-bold text-slate-800">생성형 AI 컴퓨팅 수요</h4>
                            </div>
                            <p class="text-sm text-slate-600">중국 빅테크 기업들의 자체 LLM(대규모 언어 모델) 개발 경쟁으로 인한 클라우드 AI 가속기 수요 폭발.</p>
                        </div>
                        <div class="p-4 bg-green-50 rounded-lg border border-green-100">
                            <div class="flex items-center mb-2">
                                <span class="text-2xl mr-2">💰</span>
                                <h4 class="font-bold text-slate-800">정부 지원금 및 국책 사업</h4>
                            </div>
                            <p class="text-sm text-slate-600">국가 주도의 '동수서산(東數西算)' 데이터센터 인프라 프로젝트 핵심 공급사로 선정.</p>
                        </div>
                    </div>
                    <div class="lg:col-span-2">
                        <div class="chart-container">
                            <canvas id="stockChart"></canvas>
                        </div>
                        <p class="text-center text-xs text-slate-400 mt-2">* 데이터: 캄브리콘(688256.SS) 최근 주가 추이 (예시 데이터)</p>
                    </div>
                </div>
            </section>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                <section id="huawei" class="bg-white rounded-2xl p-8 card-shadow border-t-4 border-red-500">
                    <div class="flex items-center mb-6">
                        <span class="text-4xl mr-4">🤝</span>
                        <h3 class="text-2xl font-bold text-slate-800">화웨이와의 협력과 홀로서기</h3>
                    </div>
                    <p class="text-slate-600 mb-6 leading-relaxed">
                        초기 캄브리콘의 성장은 화웨이(Huawei)와의 협력이 결정적이었습니다. 2017년 화웨이의 모바일 AP '기린(Kirin) 970'에 캄브리콘의 NPU IP가 세계 최초로 탑재되었습니다.
                    </p>
                    <div class="chart-container" style="height: 250px; max-height: 250px;">
                        <canvas id="revenueChart"></canvas>
                    </div>
                    <p class="text-sm text-slate-600 mt-6 bg-slate-50 p-3 rounded border border-slate-100">
                        <strong>피벗 성공:</strong> 화웨이가 자체 AI 아키텍처(Da Vinci)를 개발하며 IP 라이선스 매출이 급감했으나, 캄브리콘은 신속하게 클라우드 및 엣지 서버용 칩셋 제조사로 비즈니스 모델을 전환하여 자립에 성공했습니다.
                    </p>
                </section>

                <section id="siyuan" class="bg-white rounded-2xl p-8 card-shadow border-t-4 border-cyan-500">
                    <div class="flex items-center mb-6">
                        <span class="text-4xl mr-4">⚡</span>
                        <h3 class="text-2xl font-bold text-slate-800">엔비디아 대항마: Siyuan 시리즈</h3>
                    </div>
                    <p class="text-slate-600 mb-6 leading-relaxed">
                        Siyuan(스위안) 590 등 최신 라인업은 엔비디아의 A100 및 중국 수출용 다운그레이드 모델인 H20을 정조준하고 있습니다. 특히 FP32 및 메모리 대역폭에서 경쟁력을 확보하려 노력 중입니다.
                    </p>
                    <div class="chart-container" style="height: 280px; max-height: 300px;">
                        <canvas id="performanceChart"></canvas>
                    </div>
                    <p class="text-sm text-slate-600 mt-4 bg-slate-50 p-3 rounded border border-slate-100">
                        <strong>성능 평가:</strong> 최상위 칩인 H100에는 미치지 못하지만, 생태계 적응력과 중국 내 안정적 수급이라는 무기를 통해 H20 및 A100의 훌륭한 대체재로 평가받고 있습니다.
                    </p>
                </section>
            </div>

            <section class="bg-slate-800 text-white rounded-2xl p-8 text-center card-shadow">
                <h3 class="text-2xl font-bold mb-4">결론: 캄브리콘의 미래 전망</h3>
                <p class="text-slate-300 max-w-3xl mx-auto mb-6">
                    천텐스의 학술적 깊이에서 출발한 캄브리콘은 이제 중국 국가 반도체 안보의 핵심 축이 되었습니다. 하드웨어 성능의 한계와 글로벌 파운드리 제재를 극복하고, 독자적인 'Neuware' 소프트웨어 생태계를 얼마나 견고하게 구축하느냐가 향후 글로벌 AI 반도체 전쟁에서의 생존을 결정지을 것입니다.
                </p>
                <div class="flex justify-center space-x-4">
                    <span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-semibold">#AI반도체</span>
                    <span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-semibold">#NPU</span>
                    <span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-semibold">#기술자립</span>
                </div>
            </section>
        </main>

        <footer class="bg-slate-900 text-slate-400 py-6 text-center text-sm rounded-b-lg">
            <p>&copy; 2024 Cambricon Analysis Report. Data presented is synthesized for infographic purposes.</p>
        </footer>
    </div>

    {{-- ========== 탭 1: Agibot 휴머노이드 로봇 ========== --}}
    <div id="tab-content-1" class="tab-content tab-agibot">
        <nav class="bg-stone-50/90 backdrop-blur-md border-b border-stone-200">
            <div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
                <div class="font-bold text-xl text-indigo-700 tracking-tight">🤖 Agibot Insight</div>
                <div class="hidden md:flex space-x-8">
                    <a href="#agibot-intro" class="text-slate-600 hover:text-indigo-600 text-sm font-medium transition-colors">개요</a>
                    <a href="#agibot-specs" class="text-slate-600 hover:text-indigo-600 text-sm font-medium transition-colors">원정 A1 스펙</a>
                    <a href="#agibot-comparison" class="text-slate-600 hover:text-indigo-600 text-sm font-medium transition-colors">vs 옵티머스</a>
                    <a href="#agibot-vision" class="text-slate-600 hover:text-indigo-600 text-sm font-medium transition-colors">미래 비전</a>
                </div>
            </div>
        </nav>

        <main class="max-w-6xl mx-auto px-4 py-10 space-y-24">

            <!-- Hero / Intro -->
            <section id="agibot-intro" class="text-center space-y-6 animate-fade-in mt-8">
                <div class="inline-block px-3 py-1 rounded-full bg-indigo-100 text-indigo-800 text-xs font-bold tracking-wider uppercase mb-4">Analysis Report</div>
                <h1 class="text-4xl md:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight">
                    화웨이 천재 소년의 반격,<br>
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-teal-500">애지봇 '원정 A1'</span>
                </h1>
                <p class="max-w-2xl mx-auto text-lg text-slate-600 leading-relaxed">
                    화웨이 '천재 소년' 프로젝트 출신 펑즈후이(Zhihui Jun)가 설립한 애지봇(Agibot)은
                    범용 휴머노이드 로봇 '원정(Yuanzheng) A1'을 통해 로보틱스 시장에 파란을 일으키고 있습니다.
                    이 페이지는 원정 A1의 기술적 역량, 테슬라 옵티머스와의 차별점, 그리고 궁극적인 AI 결합 비전을 탐구합니다.
                </p>
            </section>

            <!-- 기술 사양 -->
            <section id="agibot-specs" class="scroll-mt-24 bg-white rounded-3xl p-8 shadow-sm border border-stone-100">
                <div class="mb-8">
                    <h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-4">⚙️ 원정 A1 기술 사양 대시보드</h2>
                    <p class="text-slate-600">이 섹션에서는 원정 A1의 핵심 하드웨어 및 소프트웨어 스펙을 시각적으로 탐색합니다. 아래 데이터 카드와 방사형 차트를 통해 로봇의 물리적 특성과 컴퓨팅 능력이 어떻게 균형을 이루고 있는지 확인할 수 있습니다.</p>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-stone-50 p-6 rounded-2xl border border-stone-200 hover:border-indigo-300 transition-colors">
                            <div class="text-3xl mb-2">📏</div>
                            <div class="text-sm text-slate-500 font-medium mb-1">신장 / 체중</div>
                            <div class="text-xl font-bold text-slate-800">175cm / 53kg</div>
                            <div class="text-xs text-slate-400 mt-2">인간과 유사한 비율</div>
                        </div>
                        <div class="bg-stone-50 p-6 rounded-2xl border border-stone-200 hover:border-indigo-300 transition-colors">
                            <div class="text-3xl mb-2">🦾</div>
                            <div class="text-sm text-slate-500 font-medium mb-1">자유도 (DOF)</div>
                            <div class="text-xl font-bold text-slate-800">49+</div>
                            <div class="text-xs text-slate-400 mt-2">유연한 관절 모터 제어</div>
                        </div>
                        <div class="bg-stone-50 p-6 rounded-2xl border border-stone-200 hover:border-indigo-300 transition-colors">
                            <div class="text-3xl mb-2">⚡</div>
                            <div class="text-sm text-slate-500 font-medium mb-1">최대 보행 속도</div>
                            <div class="text-xl font-bold text-slate-800">7 km/h</div>
                            <div class="text-xs text-slate-400 mt-2">빠른 기동성 확보</div>
                        </div>
                        <div class="bg-stone-50 p-6 rounded-2xl border border-stone-200 hover:border-indigo-300 transition-colors">
                            <div class="text-3xl mb-2">🧠</div>
                            <div class="text-sm text-slate-500 font-medium mb-1">AI 연산 능력</div>
                            <div class="text-xl font-bold text-slate-800">200 TOPS</div>
                            <div class="text-xs text-slate-400 mt-2">자체 개발 로컬 AI 처리</div>
                        </div>
                    </div>
                    <div class="flex flex-col justify-center">
                        <h3 class="text-center text-sm font-semibold text-slate-500 mb-2 uppercase tracking-wider">원정 A1 역량 프로필</h3>
                        <div class="chart-container">
                            <canvas id="capabilityRadarChart"></canvas>
                        </div>
                        <p class="text-center text-xs text-slate-400 mt-4">* 각 지표는 동급 휴머노이드 대비 상대적 평가치입니다.</p>
                    </div>
                </div>
            </section>

            <!-- vs 옵티머스 비교 -->
            <section id="agibot-comparison" class="scroll-mt-24">
                <div class="mb-8 text-center max-w-3xl mx-auto">
                    <h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-4">🥊 원정 A1 vs 테슬라 옵티머스</h2>
                    <p class="text-slate-600">현재 휴머노이드 업계의 기준점인 테슬라 옵티머스(Optimus Gen 2)와의 비교를 통해 애지봇이 취하고 있는 차별화 전략을 분석합니다.</p>
                </div>
                <div class="grid grid-cols-1 gap-8 items-start" style="grid-template-columns: 1fr;">
                    <div class="bg-white rounded-3xl p-6 shadow-sm border border-stone-100 overflow-x-auto" style="grid-column: 1 / -1;">
                        <div style="display: flex; gap: 2rem; align-items: flex-start;">
                            <table class="text-sm" style="flex: 3 1 0; min-width: 500px; border-collapse: collapse;">
                                <thead>
                                    <tr class="font-bold text-slate-700 border-b-2 border-stone-200">
                                        <th class="py-3 text-left" style="width: 20%; min-width: 90px;">비교 항목</th>
                                        <th class="py-3 text-left text-indigo-600" style="width: 40%;">애지봇 원정 A1</th>
                                        <th class="py-3 text-left text-slate-500" style="width: 40%;">테슬라 옵티머스</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-b border-stone-100">
                                        <td class="py-3 font-medium text-slate-600">개발 철학</td>
                                        <td class="py-3">Agile 개발, 오픈소스 생태계, 특화 AI 결합</td>
                                        <td class="py-3">수직 계열화, 대량 양산, 자동차 제조 인프라 활용</td>
                                    </tr>
                                    <tr class="border-b border-stone-100">
                                        <td class="py-3 font-medium text-slate-600">하드웨어 특징</td>
                                        <td class="py-3">PowerFlow 커스텀 모터, 역관절 구조 채택 (경량화)</td>
                                        <td class="py-3">테슬라 자체 설계 액추에이터, 인간과 매우 유사한 관절</td>
                                    </tr>
                                    <tr class="border-b border-stone-100">
                                        <td class="py-3 font-medium text-slate-600">초기 타겟 시장</td>
                                        <td class="py-3">B2B 산업 환경 및 AI 연구 플랫폼</td>
                                        <td class="py-3">테슬라 기가팩토리 내부 투입 후 B2C 확대</td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 font-medium text-slate-600">핵심 강점</td>
                                        <td class="py-3 text-indigo-600 font-medium">소프트웨어 혁신 속도, 경량성</td>
                                        <td class="py-3 text-slate-600 font-medium">제조 단가 절감, 데이터 수집 규모</td>
                                    </tr>
                                </tbody>
                            </table>
                            <div style="flex: 2 1 0; min-width: 280px;">
                                <h3 class="text-center text-sm font-semibold text-slate-500 mb-4 uppercase tracking-wider">주요 물리 제원 비교</h3>
                                <div class="chart-container" style="height: 250px;">
                                    <canvas id="comparisonBarChart"></canvas>
                                </div>
                                <p class="text-xs text-slate-500 mt-4 leading-relaxed">원정 A1은 옵티머스 대비 약간 더 가벼운 무게(53kg vs 57kg)를 유지하면서도 더 많은 관절 자유도를 통해 복잡한 움직임을 구현하는 데 집중하고 있습니다.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 미래 비전 -->
            <section id="agibot-vision" class="scroll-mt-24 bg-indigo-50 rounded-3xl p-8 md:p-12 shadow-lg text-slate-800">
                <div class="mb-10 text-center max-w-3xl mx-auto">
                    <div class="inline-block px-3 py-1 rounded-full bg-indigo-100 text-indigo-700 text-xs font-bold tracking-wider uppercase mb-4">Future Vision</div>
                    <h2 class="text-2xl md:text-4xl font-bold mb-4 text-slate-900">🧠 'AI + 하드웨어' : Embodied AI의 실현</h2>
                    <p class="text-slate-600">펑즈후이가 지향하는 궁극적인 목표는 단순한 자동화 기계가 아닙니다. 소프트웨어 세상에 갇혀 있던 AI에게 물리적 신체를 부여하여 현실 세계와 상호작용하는 <strong class="text-slate-800">'Embodied AI (구현된 AI)'</strong> 모델을 구축하는 것입니다. 아래 단계를 클릭하여 비전을 확인하세요.</p>
                </div>
                <div class="flex flex-col md:flex-row justify-center gap-4 mb-8">
                    <button onclick="updateVision(1)" id="btn-vision-1" class="vision-tab active flex-1 py-4 px-6 rounded-xl bg-white text-center cursor-pointer border border-indigo-200 hover:border-indigo-400 text-slate-700">
                        <div class="text-2xl mb-2">🌐</div>
                        <div class="font-bold">1단계: Foundation Model</div>
                    </button>
                    <button onclick="updateVision(2)" id="btn-vision-2" class="vision-tab flex-1 py-4 px-6 rounded-xl bg-white text-center cursor-pointer border border-indigo-200 hover:border-indigo-400 text-slate-700">
                        <div class="text-2xl mb-2">🦾</div>
                        <div class="font-bold">2단계: Hardware Integration</div>
                    </button>
                    <button onclick="updateVision(3)" id="btn-vision-3" class="vision-tab flex-1 py-4 px-6 rounded-xl bg-white text-center cursor-pointer border border-indigo-200 hover:border-indigo-400 text-slate-700">
                        <div class="text-2xl mb-2">🚀</div>
                        <div class="font-bold">3단계: AGI & Ecosystem</div>
                    </button>
                </div>
                <div id="vision-content" class="bg-white rounded-2xl p-6 md:p-8 min-h-[200px] flex items-center border border-indigo-200">
                    <div class="animate-fade-in text-lg leading-relaxed text-slate-700">
                        <h3 class="text-xl font-bold text-indigo-700 mb-3">대규모 언어/시각 모델의 진화</h3>
                        <p>첫 번째 단계는 뛰어난 인지 능력과 추론 능력을 갖춘 AI 파운데이션 모델(Foundation Model)의 활용입니다. 애지봇은 자체적인 200 TOPS 연산 모듈을 통해 클라우드에 의존하지 않고 로컬에서 방대한 시각 데이터와 언어 명령을 실시간으로 처리할 수 있는 '두뇌'를 개발합니다. 이는 로봇이 인간의 언어를 이해하고 시각적으로 환경을 인식하는 핵심 기반이 됩니다.</p>
                    </div>
                </div>
            </section>

        </main>

        <footer class="bg-stone-100 border-t border-stone-200 py-8 text-center text-slate-500 text-sm">
            <p>&copy; 2026 Agibot & Robotics Analysis SPA. Generated for educational demonstration.</p>
            <p class="mt-2 text-xs">Note: Specs are based on publicly available data and estimations.</p>
        </footer>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 탭별 차트 초기화 상태 추적
const chartInitialized = { 0: false, 1: false };

function switchTab(index) {
    // 탭 버튼 활성화
    document.querySelectorAll('.bigtech-tab').forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
    });
    // 탭 콘텐츠 전환
    document.querySelectorAll('.tab-content').forEach((content, i) => {
        content.classList.toggle('active', i === index);
    });
    // 해당 탭 차트 초기화 (최초 1회)
    if (!chartInitialized[index]) {
        if (index === 0) initCambriconCharts();
        if (index === 1) initAgibotCharts();
        chartInitialized[index] = true;
    }
    // 스크롤 맨 위로
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

// === Agibot 비전 탭 상호작용 ===
const visionData = {
    1: { title: "대규모 언어/시각 모델의 진화", text: "첫 번째 단계는 뛰어난 인지 능력과 추론 능력을 갖춘 AI 파운데이션 모델(Foundation Model)의 활용입니다. 애지봇은 자체적인 200 TOPS 연산 모듈을 통해 클라우드에 의존하지 않고 로컬에서 방대한 시각 데이터와 언어 명령을 실시간으로 처리할 수 있는 '두뇌'를 개발합니다. 이는 로봇이 인간의 언어를 이해하고 시각적으로 환경을 인식하는 핵심 기반이 됩니다." },
    2: { title: "소프트웨어의 물리적 체화 (Embodied AI)", text: "두 번째는 원정 A1과 같은 정교한 하드웨어에 AI를 이식하는 것입니다. 'AI + 하드웨어' 모델의 핵심은 AI가 가상 세계를 넘어 현실의 물리 법칙, 중력, 마찰력 등을 경험하며 학습하는 것입니다. 고성능 조인트 모터(PowerFlow)와 49+ 자유도의 결합은 AI의 판단을 정확한 물리적 움직임으로 변환하는 필수적인 브릿지 역할을 합니다." },
    3: { title: "범용 인공지능(AGI)과 오픈 생태계 구축", text: "마지막으로 펑즈후이는 애지봇 플랫폼을 오픈소스화하여 전 세계 연구자들이 참여하는 생태계를 꿈꿉니다. 특정한 작업만 수행하는 로봇이 아닌, 어떤 환경에서도 적응하고 학습할 수 있는 AGI(범용 인공지능)를 로보틱스를 통해 달성하고자 합니다. 스마트폰이 모바일 생태계를 만든 것처럼, 휴머노이드가 물리적 노동의 플랫폼이 되는 미래입니다." }
};

function updateVision(step) {
    document.querySelectorAll('.vision-tab').forEach(btn => {
        btn.classList.remove('active');
        btn.classList.add('bg-white');
    });
    const activeBtn = document.getElementById('btn-vision-' + step);
    activeBtn.classList.add('active');
    activeBtn.classList.remove('bg-white');

    const data = visionData[step];
    document.getElementById('vision-content').innerHTML =
        '<div class="text-lg leading-relaxed text-slate-700" style="animation: fadeIn 0.5s ease-in-out;">' +
        '<h3 class="text-xl font-bold text-indigo-700 mb-3">' + data.title + '</h3>' +
        '<p>' + data.text + '</p></div>';
}

// === 캄브리콘 차트 초기화 ===
function initCambriconCharts() {
    const wrapLabel = (label, max = 16) => {
        const words = label.split(' ');
        const lines = []; let cur = '';
        words.forEach(w => { if ((cur + w).length > max) { if (cur) lines.push(cur.trim()); cur = w + ' '; } else { cur += w + ' '; } });
        if (cur) lines.push(cur.trim());
        return lines;
    };
    const commonTooltip = { callbacks: { title: function(items) { let l = items[0].chart.data.labels[items[0].dataIndex]; return Array.isArray(l) ? l.join(' ') : l; } } };
    const commonOpts = { responsive: true, maintainAspectRatio: false, plugins: { tooltip: commonTooltip, legend: { labels: { font: { family: "'Noto Sans KR', sans-serif" } } } } };

    // 주가 차트
    new Chart(document.getElementById('stockChart').getContext('2d'), {
        type: 'line',
        data: {
            labels: ['2023 Q1 (생성AI 붐)', '2023 Q2', '2023 Q3 (수출규제 강화)', '2023 Q4', '2024 Q1 (대규모 수주)', '2024 Q2', '2024 Q3 (Siyuan 590)'].map(l => wrapLabel(l)),
            datasets: [{ label: '상대적 주가 지수 추이 (추정)', data: [60, 150, 140, 135, 180, 240, 290], borderColor: '#16a34a', backgroundColor: 'rgba(22, 163, 74, 0.1)', borderWidth: 3, pointBackgroundColor: '#2563eb', pointRadius: 5, fill: true, tension: 0.3 }]
        },
        options: { ...commonOpts, scales: { y: { beginAtZero: true, grid: { color: '#e2e8f0' } }, x: { grid: { display: false }, ticks: { font: { size: 11 } } } } }
    });

    // 매출 비중 차트
    new Chart(document.getElementById('revenueChart').getContext('2d'), {
        type: 'bar',
        data: {
            labels: ['모바일 IP (화웨이 등)', '클라우드/서버 가속기', '엣지 컴퓨팅', '기타 서비스'].map(l => wrapLabel(l)),
            datasets: [
                { label: '2018년 매출 비중 (%)', data: [95, 2, 0, 3], backgroundColor: '#ef4444', borderRadius: 4 },
                { label: '2023년 매출 비중 (%)', data: [5, 65, 20, 10], backgroundColor: '#3b82f6', borderRadius: 4 }
            ]
        },
        options: { ...commonOpts, indexAxis: 'y', scales: { x: { stacked: false, beginAtZero: true, max: 100 }, y: { stacked: false, ticks: { font: { size: 11 } } } } }
    });

    // 성능 비교 레이더
    new Chart(document.getElementById('performanceChart').getContext('2d'), {
        type: 'radar',
        data: {
            labels: ['AI 연산 (INT8 TOPS)', 'AI 연산 (FP32 TFLOPS)', '메모리 대역폭 (GB/s)', '에너지 효율성'].map(l => wrapLabel(l)),
            datasets: [
                { label: 'Siyuan 590 (Cambricon)', data: [75, 70, 80, 85], borderColor: '#06b6d4', backgroundColor: 'rgba(6, 182, 212, 0.2)', pointBackgroundColor: '#06b6d4', borderWidth: 2 },
                { label: 'NVIDIA H20 (수출통제용)', data: [70, 65, 85, 75], borderColor: '#f97316', backgroundColor: 'rgba(249, 115, 22, 0.2)', pointBackgroundColor: '#f97316', borderWidth: 2 },
                { label: 'NVIDIA A100', data: [65, 80, 95, 70], borderColor: '#8b5cf6', backgroundColor: 'rgba(139, 92, 246, 0.2)', pointBackgroundColor: '#8b5cf6', borderWidth: 2 }
            ]
        },
        options: { ...commonOpts, scales: { r: { angleLines: { color: '#e2e8f0' }, grid: { color: '#e2e8f0' }, pointLabels: { font: { size: 11 }, color: '#475569' }, ticks: { display: false, min: 0, max: 100 } } } }
    });
}

// === Agibot 차트 초기화 ===
function initAgibotCharts() {
    Chart.defaults.font.family = "'Noto Sans KR', sans-serif";

    // 역량 레이더
    new Chart(document.getElementById('capabilityRadarChart').getContext('2d'), {
        type: 'radar',
        data: {
            labels: ['인지 능력 (Vision)', '연산/AI (Compute)', '민첩성 (Agility)', '조작 정밀도 (Dexterity)', '적재 하중 (Payload)'],
            datasets: [{ label: '원정 A1 역량지수', data: [85, 95, 90, 80, 60], backgroundColor: 'rgba(79, 70, 229, 0.2)', borderColor: 'rgba(79, 70, 229, 1)', pointBackgroundColor: 'rgba(79, 70, 229, 1)', pointBorderColor: '#fff', borderWidth: 2 }]
        },
        options: {
            responsive: true, maintainAspectRatio: false,
            scales: { r: { angleLines: { color: 'rgba(0,0,0,0.05)' }, grid: { color: 'rgba(0,0,0,0.05)' }, pointLabels: { font: { size: 12, weight: '500' }, color: '#475569' }, ticks: { display: false, min: 0, max: 100 } } },
            plugins: { legend: { display: false }, tooltip: { backgroundColor: 'rgba(15, 23, 42, 0.9)', padding: 12 } }
        }
    });

    // 비교 바 차트
    new Chart(document.getElementById('comparisonBarChart').getContext('2d'), {
        type: 'bar',
        data: {
            labels: ['무게 (Weight, kg)', '자유도 (DOF)'],
            datasets: [
                { label: '애지봇 원정 A1', data: [53, 49], backgroundColor: 'rgba(79, 70, 229, 0.8)', borderRadius: 6 },
                { label: '테슬라 옵티머스 (Gen 2)', data: [57, 28], backgroundColor: 'rgba(148, 163, 184, 0.6)', borderRadius: 6 }
            ]
        },
        options: {
            responsive: true, maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            scales: { y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)', drawBorder: false } }, x: { grid: { display: false } } },
            plugins: {
                legend: { position: 'bottom', labels: { padding: 20, usePointStyle: true, pointStyle: 'circle' } },
                tooltip: { backgroundColor: 'rgba(15, 23, 42, 0.9)', padding: 12, callbacks: { label: function(ctx) { let l = ctx.dataset.label || ''; if (l) l += ': '; l += ctx.parsed.y + (ctx.dataIndex === 0 ? ' kg' : ' 개'); return l; } } }
            }
        }
    });
}

// 페이지 로드 시 탭 0 차트 초기화
document.addEventListener('DOMContentLoaded', function() {
    initCambriconCharts();
    chartInitialized[0] = true;
});
</script>
@endpush
