@extends('layouts.app')

@section('title', 'Blog - ' . \App\Models\Setting::get('site_title', 'Hannah Arinaitwe'))

@section('content')

<style>
    .blog-card {
        background: white;
        border-radius: 1.25rem;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        border: 1px solid #f0ebe3;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .blog-card:hover {
        box-shadow: 0 20px 40px -12px rgba(0,0,0,0.1);
        transform: translateY(-4px);
    }
    .blog-card .card-img-wrap {
        position: relative;
        overflow: hidden;
        aspect-ratio: 16 / 10;
    }
    .blog-card .card-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }
    .blog-card:hover .card-img-wrap img {
        transform: scale(1.06);
    }
    .blog-card .card-img-wrap .img-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f5f0e8, #ece4d8);
    }
    .blog-card .card-content {
        padding: 1.5rem 1.75rem 1.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    .blog-card .card-meta {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.75rem;
        color: #9a8c7a;
        font-weight: 500;
    }
    .blog-card .card-meta .cat-pill {
        background: #f5f0e8;
        color: var(--color-theme-700, #5e4a35);
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-weight: 600;
        letter-spacing: 0.03em;
    }
    .blog-card h2 {
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.4;
        color: var(--color-theme-900, #1a120b);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .blog-card h2 a { color: inherit; text-decoration: none; }
    .blog-card h2 a:hover { color: var(--color-theme-600, #7a5f3f); }
    .blog-card .card-excerpt {
        font-size: 0.9rem;
        line-height: 1.65;
        color: #7a7068;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .blog-card .read-more {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--color-theme-900, #1a120b);
        margin-top: auto;
        transition: gap 0.25s ease;
    }
    .blog-card:hover .read-more { gap: 0.625rem; }

    /* Featured (hero) card */
    .blog-hero {
        display: grid;
        grid-template-columns: 1fr;
        background: white;
        border-radius: 1.5rem;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        border: 1px solid #f0ebe3;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @media (min-width: 768px) {
        .blog-hero { grid-template-columns: 1fr 1fr; }
    }
    .blog-hero:hover {
        box-shadow: 0 24px 48px -12px rgba(0,0,0,0.12);
        transform: translateY(-4px);
    }
    .blog-hero .hero-img {
        position: relative;
        overflow: hidden;
        min-height: 280px;
    }
    .blog-hero .hero-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s ease;
    }
    .blog-hero:hover .hero-img img { transform: scale(1.05); }
    .blog-hero .hero-body {
        padding: 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
    }

    .filter-pill {
        padding: 0.5rem 1.25rem;
        border-radius: 9999px;
        font-size: 0.8rem;
        font-weight: 600;
        transition: all 0.25s ease;
        border: 1px solid transparent;
    }
    .filter-pill.active {
        background: var(--color-theme-900, #1a120b);
        color: white;
    }
    .filter-pill:not(.active) {
        background: white;
        color: #6b5e51;
        border-color: #e8e0d5;
    }
    .filter-pill:not(.active):hover {
        background: #faf6f0;
        border-color: #d4c9ba;
    }
</style>

<div style="background: linear-gradient(180deg, #FCFBF9 0%, #F5F0E8 100%); min-height: 100vh;" class="pt-36 md:pt-44 pb-24">
    <div class="max-w-7xl mx-auto px-6 md:px-12">

        <!-- Header -->
        <div class="text-center mb-14">
            <p class="text-sm uppercase tracking-widest text-theme-500 mb-3 font-semibold">Stories & Insights</p>
            <h1 class="text-4xl md:text-6xl font-bold font-heading text-theme-900 mb-4 tracking-tight">The Blog</h1>
            <p class="text-lg text-gray-500 max-w-2xl mx-auto leading-relaxed">Thoughts on storytelling, personal branding, and the journey of becoming.</p>
        </div>

        <!-- Filters -->
        <div class="flex flex-col md:flex-row justify-between items-center mb-12 gap-6">
            <div class="flex flex-wrap gap-2 justify-center">
                <a href="{{ route('blog.index') }}" class="filter-pill {{ !request('category') ? 'active' : '' }}">All Articles</a>
                @foreach($categories as $category)
                    <a href="{{ route('blog.index', ['category' => $category->slug]) }}" class="filter-pill {{ request('category') === $category->slug ? 'active' : '' }}">
                        {{ $category->name }}
                    </a>
                @endforeach
            </div>

            <form action="{{ route('blog.index') }}" method="GET" class="w-full md:w-auto flex relative">
                @if(request('category'))
                    <input type="hidden" name="category" value="{{ request('category') }}">
                @endif
                <input type="text" name="search" placeholder="Search articles..." value="{{ request('search') }}" class="w-full md:w-64 pl-10 pr-4 py-3 rounded-full border border-gray-200 bg-white text-sm focus:border-theme-500 focus:ring-2 focus:ring-theme-200 focus:outline-none">
                <svg class="w-4 h-4 text-gray-400 absolute left-4 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                <button type="submit" class="hidden">Search</button>
            </form>
        </div>

        @if($posts->count() > 0)

            @php $firstPost = $posts->first(); @endphp

            <!-- Hero / Featured Post -->
            <a href="{{ route('blog.show', $firstPost->slug) }}" class="block blog-hero mb-12 group">
                <div class="hero-img">
                    @if($firstPost->featured_image)
                        <img src="{{ asset('storage/' . $firstPost->featured_image) }}" alt="{{ $firstPost->title }}">
                    @else
                        <div class="w-full h-full flex items-center justify-center" style="background: linear-gradient(135deg, #f5f0e8, #e8dccf);">
                            <svg class="w-16 h-16 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path></svg>
                        </div>
                    @endif
                </div>
                <div class="hero-body">
                    <div class="flex items-center gap-3 text-xs">
                        @if($firstPost->category)
                            <span class="bg-theme-100 text-theme-800 px-3 py-1 rounded-full font-semibold">{{ $firstPost->category->name }}</span>
                        @endif
                        <span class="text-gray-400">{{ $firstPost->published_at->format('M j, Y') }}</span>
                        <span class="text-gray-300">&bull;</span>
                        <span class="text-gray-400">{{ $firstPost->reading_time }} min read</span>
                    </div>
                    <h2 class="text-2xl md:text-3xl font-bold font-heading text-theme-900 leading-tight">{{ $firstPost->title }}</h2>
                    <p class="text-gray-500 leading-relaxed line-clamp-3">{{ $firstPost->excerpt ?? Str::limit(strip_tags($firstPost->body), 180) }}</p>
                    <span class="read-more inline-flex items-center gap-2 text-sm font-semibold text-theme-900 group-hover:gap-3 transition-all mt-2">
                        Read Article
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                    </span>
                </div>
            </a>

            <!-- Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($posts->skip(1) as $post)
                    <div class="blog-card">
                        <a href="{{ route('blog.show', $post->slug) }}" class="block card-img-wrap">
                            @if($post->featured_image)
                                <img src="{{ asset('storage/' . $post->featured_image) }}" alt="{{ $post->title }}">
                            @else
                                <div class="img-placeholder">
                                    <svg class="w-10 h-10 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                </div>
                            @endif
                        </a>
                        <div class="card-content">
                            <div class="card-meta">
                                @if($post->category)
                                    <span class="cat-pill">{{ $post->category->name }}</span>
                                @endif
                                <span>{{ $post->published_at->format('M j, Y') }}</span>
                                <span>&bull;</span>
                                <span>{{ $post->reading_time }} min</span>
                            </div>
                            <h2><a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a></h2>
                            <p class="card-excerpt">{{ $post->excerpt ?? Str::limit(strip_tags($post->body), 120) }}</p>
                            <a href="{{ route('blog.show', $post->slug) }}" class="read-more">
                                Read More
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-14 flex justify-center">
                {{ $posts->links() }}
            </div>

        @else
            <div class="text-center py-24 bg-white rounded-2xl shadow-sm border border-gray-100">
                <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                <h3 class="text-xl font-medium text-gray-900 mb-2">No articles found</h3>
                <p class="text-gray-500 mb-6">Try adjusting your search or filter to find what you're looking for.</p>
                <a href="{{ route('blog.index') }}" class="text-theme-500 font-medium hover:underline">Clear all filters</a>
            </div>
        @endif

    </div>
</div>
@endsection