@extends('layouts.app')

@section('title', 'Thư viện - Apero Technologies Group')
@section('description', 'Thư viện tài liệu và tài nguyên của Apero 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