@extends('layouts.app')

@section('title', 'Thư viện - LVT GLOBAL Technologies Group')
@section('description', 'Thư viện tài liệu và tài nguyên của LVT GLOBAL Technologies Group')

@section('content')
    <!-- Hero Section -->
    <section id="brxe-hero" class="brxe-section bricks-lazy-hidden">
        <div id="brxe-hero-container" class="brxe-container bricks-lazy-hidden">
            <h3 class="hero-title">Thư viện<br>Tài nguyên</h3>
            <div class="hero-content">
                <p>Kho tài liệu và tài nguyên phong phú cho phát triển</p>
            </div>
        </div>
    </section>

    <!-- Library Categories -->
    <section id="brxe-library-categories" class="brxe-section bricks-lazy-hidden">
        <div id="brxe-categories-container" class="brxe-container bricks-lazy-hidden">
            <h3 class="section-title">Danh mục tài liệu</h3>
            <div class="categories-grid">
                <div class="category-item">
                    <h4>API Documentation</h4>
                    <p>Tài liệu API cho các sản phẩm của chúng tôi</p>
                    <div class="category-count">50+ Documents</div>
                </div>

                <div class="category-item">
                    <h4>SDK Guides</h4>
                    <p>Hướng dẫn sử dụng SDK và thư viện</p>
                    <div class="category-count">30+ Guides</div>
                </div>

                <div class="category-item">
                    <h4>Best Practices</h4>
                    <p>Thực hành tốt nhất trong phát triển</p>
                    <div class="category-count">25+ Articles</div>
                </div>

                <div class="category-item">
                    <h4>Case Studies</h4>
                    <p>Nghiên cứu trường hợp thực tế</p>
                    <div class="category-count">15+ Studies</div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('styles')
    <style>
        .hero-title {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 1rem;
            line-height: 1.2;
        }

        .categories-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .category-item {
            padding: 2rem;
            border: 1px solid #ddd;
            border-radius: 12px;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .category-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .category-count {
            background-color: #e8f5e8;
            color: #2e7d32;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: bold;
            margin-top: 1rem;
            display: inline-block;
        }
    </style>
@endpush