@extends('layouts.app')

@section('content')
<!-- Category Hero Section -->
<header class="hero-section">
    <div class="bg-mesh">
        <div class="mesh-circle-1"></div>
        <div class="mesh-circle-2"></div>
    </div>
    <div class="container hero-content">
        <div class="mb-4" data-aos="fade-up">
            <h6 class="text-primary text-uppercase fw-bold ls-2 mb-3">Category</h6>
            <h1 class="display-3 fw-bold mb-3">{{ $category->name }}</h1>
            @if($category->description)
                <p class="lead text-muted mx-auto" style="max-width: 600px;">{{ $category->description }}</p>
            @endif
        </div>
    </div>
</header>

<section class="py-5 bg-dark">
    <div class="container">
        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb" class="mb-5" data-aos="fade-up">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-muted text-decoration-none hover-white">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('blog.index') }}" class="text-muted text-decoration-none hover-white">Blog</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">{{ $category->name }}</li>
            </ol>
        </nav>

        <div class="row g-4">
            @forelse($posts as $index => $post)
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ $index * 50 }}">
                    <article class="modern-blog-card">
                        @if($post->featured_image)
                            <div class="card-image">
                                <img src="{{ asset('storage/' . $post->featured_image) }}" alt="{{ $post->title }}">
                            </div>
                        @else
                            <div class="card-image bg-dark-accent d-flex align-items-center justify-content-center">
                                <i class="fas fa-image fa-3x text-muted opacity-10"></i>
                            </div>
                        @endif
                        <div class="card-body p-4">
                            <div class="meta mb-2">
                                <small class="text-muted"><i class="far fa-calendar-alt me-1"></i> {{ $post->published_at->format('M d, Y') }}</small>
                            </div>
                            <h5 class="fw-bold mb-3">
                                <a href="{{ route('blog.show', $post->slug) }}" class="text-white text-decoration-none hover-primary">
                                    {{ $post->title }}
                                </a>
                            </h5>
                            <p class="text-muted small mb-4">{{ Str::limit($post->excerpt, 100) }}</p>
                            <a href="{{ route('blog.show', $post->slug) }}" class="read-more-link mt-auto">
                                <span>Read Insight</span>
                                <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                    </article>
                </div>
            @empty
                <div class="col-12 text-center py-5" data-aos="fade-up">
                    <div class="modern-card p-5">
                        <i class="fas fa-inbox fa-3x text-muted mb-4 opacity-20"></i>
                        <h4 class="text-white mb-3">No insights found</h4>
                        <p class="text-muted mb-4">We haven't published any articles in this category yet.</p>
                        <a href="{{ route('blog.index') }}" class="btn btn-outline-light px-4">
                            <i class="fas fa-arrow-left me-2"></i>Back to Blog
                        </a>
                    </div>
                </div>
            @endforelse
        </div>

        @if($posts->hasPages())
            <div class="mt-5 d-flex justify-content-center" data-aos="fade-up">
                {{ $posts->links() }}
            </div>
        @endif
    </div>
</section>
@endsection