@extends('layouts.app')

@section('title', '더존비즈온 기업 분석 리포트')

@push('styles')
<style>
    body {
        font-family: 'Noto Sans KR', sans-serif;
    }
    .chart-container {
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }
    .nav-btn {
        transition: all 0.3s ease;
    }
    .active-btn {
        background-color: #2563EB;
        color: white;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    }
    .product-content {
        transition: opacity 0.3s ease-in-out;
    }
    .timeline-item {
        position: relative;
        padding-bottom: 2rem;
        padding-left: 2rem;
        border-left: 2px solid #D1D5DB;
    }
    .timeline-dot {
        position: absolute;
        left: -0.5rem;
        top: 0;
        width: 1rem;
        height: 1rem;
        border-radius: 9999px;
        background-color: #2563EB;
        border: 2px solid white;
    }
    .scroll-mt-20 {
        scroll-margin-top: 5rem;
    }
</style>
@endpush

@section('content')
<div class="bg-slate-50 text-slate-800 min-h-screen">
    <!-- Header -->
    <header class="bg-white shadow-md sticky top-0 z-40 w-full">
        <nav class="container mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-16">
            <h1 class="text-2xl font-bold text-blue-600">더존비즈온 (Douzone Bizon)</h1>
            <div class="hidden md:flex space-x-6">
                <a href="#overview" class="text-slate-600 hover:text-blue-600 font-medium">기업 개요</a>
                <a href="#solutions" class="text-slate-600 hover:text-blue-600 font-medium">핵심 솔루션</a>
                <a href="#history" class="text-slate-600 hover:text-blue-600 font-medium">성장 스토리</a>
                <a href="#financials" class="text-slate-600 hover:text-blue-600 font-medium">재무 성과</a>
            </div>
        </nav>
    </header>

    <main class="container mx-auto p-4 md:p-8 pt-8 md:pt-12">
        <!-- Section 1: Overview -->
        <section id="overview" class="mb-16 scroll-mt-20">
            <h2 class="text-3xl font-bold text-slate-900 mb-4">기업 개요: 대한민국 No.1 ICT 솔루션 기업</h2>
            <p class="text-lg text-slate-600 mb-8">
                더존비즈온은 1993년 설립 이래 대한민국 중소·중견기업(SME) 시장을 중심으로 ERP, 클라우드, 그룹웨어 솔루션을 제공해 온 ICT 분야의 선도 기업입니다.
            </p>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-12">
                <div class="bg-white p-6 rounded-xl shadow-lg text-center">
                    <h3 class="text-sm font-semibold text-slate-500 uppercase">설립일</h3>
                    <p class="text-3xl font-bold text-blue-600 mt-2">1993년</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-lg text-center">
                    <h3 class="text-sm font-semibold text-slate-500 uppercase">임직원 수</h3>
                    <p class="text-3xl font-bold text-blue-600 mt-2">약 1,550명</p>
                    <span class="text-xs text-slate-400">(2023년 기준)</span>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-lg text-center">
                    <h3 class="text-sm font-semibold text-slate-500 uppercase">2023년 매출액</h3>
                    <p class="text-3xl font-bold text-blue-600 mt-2">3,535 억원</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-lg text-center">
                    <h3 class="text-sm font-semibold text-slate-500 uppercase">본사 위치</h3>
                    <p class="text-3xl font-bold text-blue-600 mt-2">강원도 춘천</p>
                    <span class="text-xs text-slate-400">(더존 ICT 그룹 강촌캠퍼스)</span>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center bg-white p-8 rounded-xl shadow-lg">
                <div>
                    <h3 class="text-2xl font-bold text-slate-900 mb-4">핵심 사업 영역</h3>
                    <p class="text-slate-600 mb-6">
                        더존비즈온의 사업은 크게 세 축으로 나뉩니다. 기업 경영의 핵심인 ERP 솔루션, 클라우드 기반의 비즈니스 플랫폼, 그리고 협업을 위한 그룹웨어입니다.
                    </p>
                    <ul class="space-y-4">
                        <li class="flex items-center">
                            <span class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">1</span>
                            <span class="ml-4 text-lg font-medium text-slate-700">ERP (전사적 자원관리)</span>
                        </li>
                        <li class="flex items-center">
                            <span class="flex-shrink-0 w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center font-bold">2</span>
                            <span class="ml-4 text-lg font-medium text-slate-700">Cloud Platform (WEHAGO)</span>
                        </li>
                        <li class="flex items-center">
                            <span class="flex-shrink-0 w-8 h-8 bg-blue-400 text-white rounded-full flex items-center justify-center font-bold">3</span>
                            <span class="ml-4 text-lg font-medium text-slate-700">Groupware (협업 솔루션)</span>
                        </li>
                    </ul>
                </div>
                <div class="chart-container w-full max-w-sm h-80 md:h-96 max-h-[400px]">
                    <canvas id="bizMixChart"></canvas>
                </div>
            </div>
        </section>

        <!-- Section 2: Solutions -->
        <section id="solutions" class="mb-16 scroll-mt-20">
            <h2 class="text-3xl font-bold text-slate-900 mb-4">핵심 솔루션 포트폴리오</h2>
            <p class="text-lg text-slate-600 mb-8">
                더존비즈온은 기업의 규모와 필요에 맞는 다양한 솔루션 라인업을 보유하고 있습니다.
            </p>

            <div class="flex flex-wrap gap-2 mb-6">
                <button class="nav-btn font-medium py-3 px-5 rounded-lg bg-white shadow active-btn" data-target="content-amaranth">Amaranth 10</button>
                <button class="nav-btn font-medium py-3 px-5 rounded-lg bg-white shadow" data-target="content-wehago">WEHAGO</button>
                <button class="nav-btn font-medium py-3 px-5 rounded-lg bg-white shadow" data-target="content-icube">iCUBE</button>
                <button class="nav-btn font-medium py-3 px-5 rounded-lg bg-white shadow" data-target="content-smarta">Smart A</button>
            </div>

            <div class="bg-white p-8 rounded-xl shadow-lg min-h-[300px]">
                <div id="content-amaranth" class="product-content">
                    <h3 class="text-2xl font-bold text-blue-600 mb-3">Amaranth 10 (아마란스 10)</h3>
                    <p class="text-sm font-medium text-slate-500 mb-4">차세대 클라우드 네이티브 ERP & 그룹웨어</p>
                    <p class="text-slate-700 mb-4">
                        'Amaranth 10'은 더존비즈온의 최신 주력 제품으로, ERP, 그룹웨어, 문서관리 기능이 하나의 플랫폼에서 완벽하게 통합된 클라우드 네이티브 솔루션입니다.
                    </p>
                    <ul class="list-disc list-inside space-y-2 text-slate-600">
                        <li><strong>특징:</strong> ERP + 그룹웨어 + 문서관리 완전 통합</li>
                        <li><strong>기술:</strong> 클라우드 네이티브, 마이크로서비스 아키텍처(MSA)</li>
                        <li><strong>핵심 기능:</strong> AI 비서, 실시간 경영 분석, 자동 회계 처리</li>
                        <li><strong>대상:</strong> 중견·대기업 (Digital Transformation 추진 기업)</li>
                    </ul>
                </div>
                <div id="content-wehago" class="product-content hidden opacity-0">
                    <h3 class="text-2xl font-bold text-blue-600 mb-3">WEHAGO (위하고)</h3>
                    <p class="text-sm font-medium text-slate-500 mb-4">중소기업을 위한 비즈니스 플랫폼</p>
                    <p class="text-slate-700 mb-4">
                        'WEHAGO'는 중소기업(SME)이 별도의 시스템 구축 없이도 경영에 필요한 모든 ICT 서비스를 구독형(SaaS)으로 이용할 수 있는 비즈니스 플랫폼입니다.
                    </p>
                    <ul class="list-disc list-inside space-y-2 text-slate-600">
                        <li><strong>특징:</strong> 올인원(All-in-One) SaaS 플랫폼</li>
                        <li><strong>핵심 기능:</strong> 경영관리(ERP), 협업(메일, 메신저), 전자결재, 웹스토리지</li>
                        <li><strong>확장:</strong> 'WEHAGO T' (세무회계사무소용), 'WEHAGO V' (공공용)</li>
                        <li><strong>대상:</strong> 중소기업, 스타트업</li>
                    </ul>
                </div>
                <div id="content-icube" class="product-content hidden opacity-0">
                    <h3 class="text-2xl font-bold text-blue-600 mb-3">iCUBE (아이큐브)</h3>
                    <p class="text-sm font-medium text-slate-500 mb-4">중견기업 맞춤형 구축형 ERP</p>
                    <p class="text-slate-700 mb-4">
                        'iCUBE'는 중견기업의 특화된 업무 프로세스를 반영할 수 있는 구축형(On-premise) ERP 솔루션입니다.
                    </p>
                    <ul class="list-disc list-inside space-y-2 text-slate-600">
                        <li><strong>특징:</strong> 강력한 커스터마이징, 안정적인 온프레미스 방식</li>
                        <li><strong>핵심 기능:</strong> 회계, 인사, 물류, 생산 등 전사적 관리</li>
                        <li><strong>연동:</strong> 그룹웨어(Bizbox Alpha)와 완벽 연동</li>
                        <li><strong>대상:</strong> 중견기업 (제조, 유통, 서비스 등)</li>
                    </ul>
                </div>
                <div id="content-smarta" class="product-content hidden opacity-0">
                    <h3 class="text-2xl font-bold text-blue-600 mb-3">Smart A (스마트 에이)</h3>
                    <p class="text-sm font-medium text-slate-500 mb-4">중소기업 및 세무회계 시장의 표준</p>
                    <p class="text-slate-700 mb-4">
                        'Smart A'는 국내 중소기업 회계 프로그램 시장에서 압도적인 점유율을 차지하고 있는 표준 소프트웨어입니다.
                    </p>
                    <ul class="list-disc list-inside space-y-2 text-slate-600">
                        <li><strong>특징:</strong> 세무회계 시장 표준, 높은 시장 점유율</li>
                        <li><strong>핵심 기능:</strong> 회계관리, 급여관리, 세무신고</li>
                        <li><strong>연동:</strong> 세무회계사무소와의 데이터 연동 (Key-Link)</li>
                        <li><strong>대상:</strong> 중소기업, 세무회계사무소</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Section 3: History -->
        <section id="history" class="mb-16 scroll-mt-20">
            <h2 class="text-3xl font-bold text-slate-900 mb-4">성장 스토리: 도전과 혁신의 역사</h2>
            <p class="text-lg text-slate-600 mb-8">
                1993년 '키컴'으로 시작한 더존비즈온은 대한민국 IT 역사와 함께 성장해왔습니다.
            </p>

            <div class="relative">
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <time class="text-sm font-semibold text-blue-600 mb-1">1993년</time>
                    <h3 class="text-xl font-bold text-slate-800">키컴(KICOM) 설립</h3>
                    <p class="text-slate-600">회계 프로그램 '세무사' 출시, 중소기업 회계 S/W 시장 진출</p>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <time class="text-sm font-semibold text-blue-600 mb-1">2000년대 초반</time>
                    <h3 class="text-xl font-bold text-slate-800">시장 지배력 확보</h3>
                    <p class="text-slate-600">iPlus(현 Smart A) 출시, 세무회계 시장 점유율 80% 이상 장악</p>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <time class="text-sm font-semibold text-blue-600 mb-1">2011년</time>
                    <h3 class="text-xl font-bold text-slate-800">'더존비즈온' 사명 변경</h3>
                    <p class="text-slate-600">강촌캠퍼스 이전 및 데이터센터 구축, 본격적인 클라우드 사업 시작</p>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <time class="text-sm font-semibold text-blue-600 mb-1">2010년대 중반</time>
                    <h3 class="text-xl font-bold text-slate-800">클라우드 플랫폼 'WEHAGO' 출시</h3>
                    <p class="text-slate-600">SME를 위한 구독형 비즈니스 플랫폼으로 클라우드 기업 전환 가속화</p>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <time class="text-sm font-semibold text-blue-600 mb-1">2021년</time>
                    <h3 class="text-xl font-bold text-slate-800">차세대 ERP 'Amaranth 10' 출시</h3>
                    <p class="text-slate-600">AI 기반의 클라우드 네이티브 ERP를 출시하며 중견·대기업 시장 공략</p>
                </div>
                <div class="timeline-item border-l-transparent">
                    <div class="timeline-dot"></div>
                    <time class="text-sm font-semibold text-blue-600 mb-1">현재</time>
                    <h3 class="text-xl font-bold text-slate-800">AI 및 데이터 기업으로 진화</h3>
                    <p class="text-slate-600">ERP 데이터를 기반으로 한 AI, 핀테크, 빅데이터 등 신사업 영역 확장 중</p>
                </div>
            </div>
        </section>

        <!-- Section 4: Financials -->
        <section id="financials" class="scroll-mt-20">
            <h2 class="text-3xl font-bold text-slate-900 mb-4">주요 재무 성과</h2>
            <p class="text-lg text-slate-600 mb-8">
                더존비즈온은 클라우드 사업 전환에 성공하며 꾸준하고 안정적인 성장세를 보여주고 있습니다.
            </p>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div class="bg-white p-6 md:p-8 rounded-xl shadow-lg">
                    <h3 class="text-xl font-bold text-slate-900 mb-4">연도별 매출액 추이 (억원)</h3>
                    <div class="chart-container w-full max-w-2xl h-80 md:h-96 max-h-[400px]">
                        <canvas id="revenueChart"></canvas>
                    </div>
                </div>
                <div class="bg-white p-6 md:p-8 rounded-xl shadow-lg">
                    <h3 class="text-xl font-bold text-slate-900 mb-4">연도별 영업이익 추이 (억원)</h3>
                    <div class="chart-container w-full max-w-2xl h-80 md:h-96 max-h-[400px]">
                        <canvas id="profitChart"></canvas>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-slate-800 text-slate-300 mt-16 py-8">
        <div class="container mx-auto px-4 md:px-8 text-center">
            <p class="text-sm">본 리포트는 더존비즈온에 대한 공개 정보를 기반으로 작성된 분석입니다.</p>
        </div>
    </footer>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const chartData = {
        bizMix: {
            labels: ['ERP', 'Cloud Platform', 'Groupware & 기타'],
            data: [45, 35, 20],
            colors: ['#2563EB', '#3B82F6', '#60A5FA']
        },
        financials: {
            labels: ['2020', '2021', '2022', '2023'],
            revenue: [3065, 3258, 3303, 3535],
            profit: [767, 701, 510, 707]
        }
    };

    const commonChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: { color: '#475569', font: { family: "'Noto Sans KR', sans-serif" } }
            }
        }
    };

    // Donut Chart
    const bizMixCtx = document.getElementById('bizMixChart');
    if (bizMixCtx) {
        new Chart(bizMixCtx, {
            type: 'doughnut',
            data: {
                labels: chartData.bizMix.labels,
                datasets: [{
                    label: '사업 비중',
                    data: chartData.bizMix.data,
                    backgroundColor: chartData.bizMix.colors,
                    borderColor: '#FFFFFF',
                    borderWidth: 2
                }]
            },
            options: { ...commonChartOptions, cutout: '60%' }
        });
    }

    // Revenue Line Chart
    const revenueCtx = document.getElementById('revenueChart');
    if (revenueCtx) {
        new Chart(revenueCtx, {
            type: 'line',
            data: {
                labels: chartData.financials.labels,
                datasets: [{
                    label: '매출액 (억원)',
                    data: chartData.financials.revenue,
                    borderColor: '#2563EB',
                    backgroundColor: 'rgba(37, 99, 235, 0.1)',
                    fill: true,
                    tension: 0.3
                }]
            },
            options: {
                ...commonChartOptions,
                plugins: { ...commonChartOptions.plugins, legend: { display: false } },
                scales: {
                    y: { beginAtZero: false, ticks: { color: '#475569' }, grid: { color: '#E2E8F0' } },
                    x: { ticks: { color: '#475569' }, grid: { display: false } }
                }
            }
        });
    }

    // Profit Bar Chart
    const profitCtx = document.getElementById('profitChart');
    if (profitCtx) {
        new Chart(profitCtx, {
            type: 'bar',
            data: {
                labels: chartData.financials.labels,
                datasets: [{
                    label: '영업이익 (억원)',
                    data: chartData.financials.profit,
                    backgroundColor: '#3B82F6',
                    borderRadius: 4
                }]
            },
            options: {
                ...commonChartOptions,
                plugins: { ...commonChartOptions.plugins, legend: { display: false } },
                scales: {
                    y: { beginAtZero: true, ticks: { color: '#475569' }, grid: { color: '#E2E8F0' } },
                    x: { ticks: { color: '#475569' }, grid: { display: false } }
                }
            }
        });
    }

    // Product Tab Navigation
    const productNavBtns = document.querySelectorAll('.nav-btn');
    const productContents = document.querySelectorAll('.product-content');

    productNavBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const targetId = btn.dataset.target;
            productNavBtns.forEach(b => b.classList.remove('active-btn'));
            btn.classList.add('active-btn');

            productContents.forEach(content => {
                if (content.id === targetId) {
                    content.classList.remove('hidden', 'opacity-0');
                } else {
                    content.classList.add('hidden', 'opacity-0');
                }
            });
        });
    });

    // Smooth scroll for nav links
    const navLinks = document.querySelectorAll('header a[href^="#"]');
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                targetElement.scrollIntoView({ behavior: 'smooth' });
            }
        });
    });
});
</script>
@endpush