@extends('frontend.layout')

@section('title', 'Inve Security - ' . t('blog_title'))
@section('description',
    'Expert insights, security trends, and digital protection strategies from Inve Security professionals.')

@section('content')
    <!-- HERO SECTION -->
    <section
        class="relative min-h-[60vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-gold-50 via-white to-gold-50/30 dark:from-gray-950 dark:via-gray-900 dark:to-gold-900/10 transition-colors duration-500">
        <!-- Background Elements -->
        <div class="absolute inset-0 overflow-hidden">
            <!-- Gradient Orbs -->
            <div
                class="absolute top-1/4 -left-20 w-96 h-96 bg-gradient-to-br from-gold-500/20 to-gold-300/30 dark:from-gold-500/10 dark:to-gold-300/5 rounded-full blur-3xl animate-pulse-gold opacity-60 dark:opacity-30">
            </div>
            <div
                class="absolute bottom-1/3 -right-24 w-80 h-80 bg-gradient-to-tr from-gold-500/15 to-transparent dark:from-gold-500/5 dark:to-transparent rounded-full blur-3xl opacity-40 dark:opacity-20 animate-pulse-gold"
                style="animation-delay: 2s">
            </div>

            <!-- Animated Grid Pattern -->
            <div class="absolute inset-0 opacity-20 dark:opacity-10">
                <div
                    class="absolute inset-0 bg-[linear-gradient(90deg,transparent_95%,rgba(250,204,21,0.1)_100%)] animate-shimmer bg-[length:200%_100%]">
                </div>
                <div
                    class="absolute inset-0 bg-[linear-gradient(rgba(250,204,21,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(250,204,21,0.03)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_50%,black,transparent)]">
                </div>
            </div>

            <!-- Floating Particles -->
            <div class="absolute inset-0">
                <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-gold-500 rounded-full animate-float"
                    style="animation-delay: 0s"></div>
                <div class="absolute top-1/3 right-1/3 w-1 h-1 bg-gold-400 rounded-full animate-float"
                    style="animation-delay: 1s"></div>
                <div class="absolute bottom-1/4 left-1/3 w-3 h-3 bg-gold-600 rounded-full animate-float"
                    style="animation-delay: 2s"></div>
            </div>
        </div>

        <div class="max-w-6xl mx-auto px-6 relative z-10 py-20">
            <div class="text-center animate-slide-up">

                <!-- Premium Badge -->
                <div
                    class="inline-flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-gold-500/10 to-gold-300/10 dark:from-gold-500/20 dark:to-gold-300/5 border border-gold-500/30 dark:border-gold-500/40 rounded-full mb-8 backdrop-blur-sm group hover:border-gold-500 transition-all duration-300">
                    <div class="w-2 h-2 bg-gradient-to-r from-gold-500 to-gold-300 rounded-full animate-pulse"></div>
                    <span class="text-sm font-semibold text-gold-600 dark:text-gold-400 group-hover:scale-105 transition-transform">
                        {{ t('blog_latest') }}
                    </span>
                    <svg class="w-4 h-4 text-gold-500 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </div>

                <!-- Main Heading -->
                <h1 class="text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight mb-6">
                    <span class="block text-gray-900 dark:text-white">{{ t('blog_title_line1') }}</span>
                    <span class="block bg-gradient-to-r from-gold-500 via-gold-400 to-gold-500 bg-clip-text text-transparent animate-gradient-x mt-2">
                        {{ t('blog_title_line2') }}
                    </span>
                </h1>

                <!-- Subheading -->
                <p class="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
                    {{ t('blog_description') }}
                </p>

                <!-- Search Bar -->
                <div class="max-w-2xl mx-auto animate-slide-up animation-delay-200">
                    <form method="GET" action="{{ route('blogs') }}" class="relative">
                        @if (request()->has('category'))
                            <input type="hidden" name="category" value="{{ request('category') }}">
                        @endif

                        <input type="text" name="search" value="{{ request('search') }}"
                            placeholder="{{ t('blog_search_placeholder') }}"
                            class="w-full px-6 py-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm 
                        border-2 border-gray-200 dark:border-gray-700 
                        rounded-2xl 
                        focus:border-gold-500 
                        focus:ring-2 focus:ring-gold-500/20 
                        dark:focus:border-gold-400 
                        dark:focus:ring-gold-400/20 
                        outline-none transition-all duration-200 
                        text-gray-900 dark:text-white 
                        placeholder-gray-500 dark:placeholder-gray-400 shadow-lg">

                        <button type="submit"
                            class="absolute right-3 top-1/2 -translate-y-1/2 p-3 
                        bg-gradient-to-r from-gold-500 to-gold-600 dark:from-gold-500 dark:to-gold-600
                        text-white rounded-xl 
                        hover:shadow-lg hover:shadow-gold-500/30
                        transition-all duration-300 btn-gold">
                            <svg class="w-5 h-5" 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" />
                            </svg>
                        </button>
                    </form>
                </div>

            </div>
        </div>
    </section>


    <!-- BLOG CONTENT -->
    <section class="py-20 bg-gradient-to-b from-transparent via-gold-50/20 to-transparent dark:from-transparent dark:via-gold-900/5 dark:to-transparent">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
                <!-- Main Content -->
                <div class="lg:col-span-2">
                    <!-- Search Results Info -->
                    @if (request()->has('search') || request()->has('category'))
                        <div
                            class="mb-8 p-6 bg-gradient-to-r from-gold-500/10 to-gold-300/10 dark:from-gold-500/20 dark:to-gold-300/5 rounded-2xl border border-gold-500/20 dark:border-gold-500/40 backdrop-blur-sm animate-slide-up">
                            <div class="flex items-center justify-between">
                                <div>
                                    <span class="text-gold-600 dark:text-gold-400 font-medium">
                                        @if (request()->has('search') && request()->has('category'))
                                            Showing results for "{{ request('search') }}" in
                                            @php
                                                $category = $categories->firstWhere('slug', request('category'));
                                            @endphp
                                            <span class="font-bold bg-gradient-to-r from-gold-500 to-gold-400 bg-clip-text text-transparent">
                                                {{ $category->name ?? 'Category' }}
                                            </span>
                                        @elseif(request()->has('search'))
                                            Search results for "{{ request('search') }}"
                                        @elseif(request()->has('category'))
                                            @php
                                                $category = $categories->firstWhere('slug', request('category'));
                                            @endphp
                                            Showing posts in
                                            <span class="font-bold bg-gradient-to-r from-gold-500 to-gold-400 bg-clip-text text-transparent">
                                                {{ $category->name ?? 'Category' }}
                                            </span>
                                        @endif
                                    </span>

                                    <span class="text-gray-600 dark:text-gray-400 text-sm ml-2">
                                        ({{ $recentPosts->total() }} {{ t('posts_found') }})
                                    </span>
                                </div>

                                <a href="{{ route('blogs') }}"
                                    class="text-sm text-gray-600 dark:text-gray-400
                      hover:text-gold-600 dark:hover:text-gold-400
                      transition-colors font-medium">
                                    {{ t('clear_filters') }}
                                </a>
                            </div>
                        </div>
                    @endif


                    <!-- Featured Post -->
                    @if ($featuredPost && !request()->has('search'))
                        <div class="mb-16 animate-slide-up">
                            <div
                                class="group relative overflow-hidden rounded-3xl
                   border border-gray-100 dark:border-gray-700
                   bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm
                   shadow-xl hover:shadow-2xl
                   transition-all duration-300">

                                <!-- Featured Badge -->
                                <div class="absolute top-6 left-6 z-10">
                                    <span class="px-4 py-2 bg-gradient-to-r from-gold-500 to-gold-600 text-white text-sm font-semibold rounded-full shadow-lg">
                                        {{ t('featured') }}
                                    </span>
                                </div>

                                <!-- Image -->
                                <div class="aspect-[16/9] overflow-hidden">
                                    @if ($featuredPost->featured_image)
                                        <img src="{{ asset($featuredPost->featured_image) }}"
                                            alt="{{ $featuredPost->title }}"
                                            class="w-full h-full object-cover
                               group-hover:scale-105
                               transition-transform duration-500">
                                    @else
                                        <div
                                            class="w-full h-full bg-gradient-to-br
                               from-gray-100 to-gray-200
                               dark:from-gray-700 dark:to-gray-600
                               flex items-center justify-center">
                                            <i class="fas fa-newspaper text-gray-400 dark:text-gray-500 text-4xl"></i>
                                        </div>
                                    @endif
                                </div>

                                <!-- Content -->
                                <div class="p-8">
                                    <div class="flex items-center gap-4 mb-4">
                                        @if ($featuredPost->category)
                                            <span class="px-3 py-1 text-sm font-medium rounded-full"
                                                style="
                                background-color: {{ $featuredPost->category->color }}20;
                                color: {{ $featuredPost->category->color }};
                                border: 1px solid {{ $featuredPost->category->color }}40;
                            ">
                                                {{ $featuredPost->category->name }}
                                            </span>
                                        @endif

                                        <span class="text-sm text-gray-500 dark:text-gray-400">
                                            {{ $featuredPost->read_time }} {{ t('min_read') }}
                                        </span>
                                    </div>

                                    <h2
                                        class="text-3xl font-bold text-gray-900 dark:text-white mb-4
                           group-hover:text-gold-600
                           dark:group-hover:text-gold-500
                           transition-colors duration-200">
                                        <a href="{{ route('blog.show', $featuredPost->slug) }}">
                                            {{ $featuredPost->title }}
                                        </a>
                                    </h2>

                                    <p class="text-gray-600 dark:text-gray-300 mb-6 text-lg">
                                        {{ $featuredPost->excerpt }}
                                    </p>

                                    <div
                                        class="flex items-center justify-between pt-6
                           border-t border-gray-100 dark:border-gray-700">

                                        <div class="flex items-center gap-3">
                                            <div
                                                class="w-10 h-10 rounded-full overflow-hidden
                                   bg-gradient-to-br from-gray-100 to-gray-200
                                   dark:from-gray-700 dark:to-gray-600
                                   flex items-center justify-center">
                                                @if ($featuredPost->author)
                                                    <span class="font-medium text-gray-600 dark:text-gray-300">
                                                        {{ substr($featuredPost->author->name, 0, 1) }}
                                                    </span>
                                                @else
                                                    <i class="fas fa-user text-gray-400"></i>
                                                @endif
                                            </div>

                                            <div>
                                                @if ($featuredPost->author)
                                                    <div class="font-medium text-gray-900 dark:text-white">
                                                        {{ $featuredPost->author->name }}
                                                    </div>
                                                @endif
                                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                                    {{ $featuredPost->published_at->format('M j, Y') }}
                                                </div>
                                            </div>
                                        </div>

                                        <a href="{{ route('blog.show', $featuredPost->slug) }}"
                                            class="text-gold-600 dark:text-gold-400
                               hover:text-gold-700 dark:hover:text-gold-300
                               font-semibold flex items-center gap-2 group/link">
                                            {{ t('read_more') }}
                                            <svg class="w-4 h-4 transform group-hover/link:translate-x-1 transition-transform" 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>
                            </div>
                        </div>
                    @endif


                    <!-- Blog Posts Grid -->
                    <div class="mb-12">
                        <div class="flex items-center justify-between mb-8 animate-slide-up">
                            <h2 class="text-3xl font-bold text-gray-900 dark:text-white">
                                @if (request()->has('search') || request()->has('category'))
                                    {{ t('search_results') }}
                                @else
                                    {{ t('recent_posts') }}
                                @endif
                            </h2>
                            <div class="flex gap-2">
                                <a href="{{ route('blogs') }}"
                                    class="p-3 rounded-xl {{ !request()->has('category') ? 'bg-gradient-to-r from-gold-500/20 to-gold-300/10 dark:from-gold-500/20 dark:to-gold-300/5 border border-gold-500/30 dark:border-gold-500/40 text-gold-600 dark:text-gold-400' : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300' }} hover:bg-gradient-to-r hover:from-gold-500/20 hover:to-gold-300/10 dark:hover:from-gold-500/20 dark:hover:to-gold-300/5 hover:text-gold-600 dark:hover:text-gold-400 hover:border-gold-500/30 dark:hover:border-gold-500/40 transition-all duration-300">
                                    {{ t('filter_all') }}
                                </a>
                                @foreach ($categories->take(3) as $index => $category)
                                    <a href="{{ route('blogs', ['category' => $category->slug]) }}"
                                        class="p-3 rounded-xl {{ request('category') == $category->slug ? 'bg-gradient-to-r from-gold-500/20 to-gold-300/10 dark:from-gold-500/20 dark:to-gold-300/5 border border-gold-500/30 dark:border-gold-500/40 text-gold-600 dark:text-gold-400' : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300' }} hover:bg-gradient-to-r hover:from-gold-500/20 hover:to-gold-300/10 dark:hover:from-gold-500/20 dark:hover:to-gold-300/5 hover:text-gold-600 dark:hover:text-gold-400 hover:border-gold-500/30 dark:hover:border-gold-500/40 transition-all duration-300"
                                        style="animation-delay: {{ ($index + 1) * 100 }}ms">
                                        {{ $category->name }}
                                    </a>
                                @endforeach
                            </div>
                        </div>

                        @if ($recentPosts->count() > 0)
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                @foreach ($recentPosts as $index => $post)
                                    <article class="group animate-slide-up" style="animation-delay: {{ $index * 100 }}ms">
                                        <div
                                            class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-100 dark:border-gray-700 overflow-hidden hover:border-gold-500/30 dark:hover:border-gold-500/40 transition-all duration-300 hover:-translate-y-1 shadow-lg hover:shadow-xl">
                                            <div class="aspect-[16/9] overflow-hidden">
                                                @if ($post->featured_image)
                                                    <img src="{{ asset($post->featured_image) }}"
                                                        alt="{{ $post->title }}"
                                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                                @else
                                                    <div
                                                        class="w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 flex items-center justify-center">
                                                        <i
                                                            class="fas fa-newspaper text-gray-400 dark:text-gray-500 text-3xl"></i>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="p-6">
                                                <div class="flex items-center gap-3 mb-4">
                                                    @if ($post->category)
                                                        <span class="px-3 py-1 text-sm font-medium rounded-full"
                                                            style="background-color: {{ $post->category->color }}20; color: {{ $post->category->color }}; border: 1px solid {{ $post->category->color }}40;">
                                                            {{ $post->category->name }}
                                                        </span>
                                                    @endif
                                                    <span class="text-sm text-gray-500 dark:text-gray-400">
                                                        {{ $post->read_time }} {{ t('min_read') }}
                                                    </span>
                                                </div>
                                                <h3
                                                    class="text-xl font-bold text-gray-900 dark:text-white mb-3 group-hover:text-gold-600 dark:group-hover:text-gold-500 transition-colors duration-200">
                                                    <a href="{{ route('blog.show', $post->slug) }}">
                                                        {{ Str::limit($post->title, 60) }}
                                                    </a>
                                                </h3>
                                                <p class="text-gray-600 dark:text-gray-300 mb-4">
                                                    {{ Str::limit($post->excerpt, 120) }}
                                                </p>
                                                <div
                                                    class="flex items-center justify-between pt-4 border-t border-gray-100 dark:border-gray-700">
                                                    <div class="flex items-center gap-2">
                                                        <div
                                                            class="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 flex items-center justify-center">
                                                            @if ($post->author)
                                                                <span
                                                                    class="text-sm font-medium text-gray-600 dark:text-gray-300">
                                                                    {{ substr($post->author->name, 0, 1) }}
                                                                </span>
                                                            @else
                                                                <i class="fas fa-user text-gray-400 text-xs"></i>
                                                            @endif
                                                        </div>
                                                        <span class="text-sm text-gray-600 dark:text-gray-400">
                                                            @if ($post->author)
                                                                {{ $post->author->name }}
                                                            @else
                                                                {{ t('unknown_author') }}
                                                            @endif
                                                        </span>
                                                    </div>
                                                    <span class="text-sm text-gray-500 dark:text-gray-400">
                                                        {{ $post->published_at->format('M j, Y') }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                @endforeach
                            </div>

                            <!-- Pagination -->
                            @if ($recentPosts->hasPages())
                                <div class="mt-12">
                                    {{ $recentPosts->links('vendor.pagination.tailwind') }}
                                </div>
                            @endif
                        @else
                            <div class="text-center py-16 animate-fade-in">
                                <div class="max-w-md mx-auto">
                                    <div class="w-32 h-32 mx-auto mb-6 rounded-3xl bg-gradient-to-br from-gold-500/20 to-gold-300/30 flex items-center justify-center">
                                        <i class="fas fa-newspaper text-5xl text-gold-500/60"></i>
                                    </div>
                                    <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
                                        @if (request()->has('search'))
                                            {{ t('no_search_results') }} "{{ request('search') }}"
                                        @elseif(request()->has('category'))
                                            @php
                                                $category = $categories->firstWhere('slug', request('category'));
                                            @endphp
                                            {{ t('no_category_posts') }} "{{ $category->name ?? 'Category' }}"
                                        @else
                                            {{ t('no_posts_found') }}
                                        @endif
                                    </h3>
                                    <p class="text-gray-600 dark:text-gray-400 mb-8">{{ t('check_back_later') }}
                                    </p>
                                    @if (request()->has('search') || request()->has('category'))
                                        <a href="{{ route('blogs') }}"
                                            class="inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-gold-500 to-gold-600 text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-gold-500/30 transition-all duration-300 btn-gold">
                                            <span>{{ t('view_all_posts') }}</span>
                                            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                                            </svg>
                                        </a>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="lg:col-span-1">
                    <!-- Categories -->
                    <div
                        class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-100 dark:border-gray-700 p-6 mb-8 shadow-lg animate-slide-up animation-delay-300">
                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-6">{{ t('categories_title') }}</h3>
                        <div class="space-y-4">
                            @foreach ($categories as $index => $category)
                                <a href="{{ route('blogs', ['category' => $category->slug]) }}"
                                    class="flex items-center justify-between p-3 rounded-xl hover:bg-gradient-to-r hover:from-gold-500/10 hover:to-transparent dark:hover:from-gold-500/5 dark:hover:to-transparent transition-all duration-300 group animate-fade-in"
                                    style="animation-delay: {{ $index * 100 }}ms">
                                    <div class="flex items-center gap-3">
                                        <div class="w-8 h-8 rounded-lg flex items-center justify-center"
                                            style="background-color: {{ $category->color }}20;">
                                            <svg class="w-4 h-4" style="color: {{ $category->color }};" fill="none"
                                                stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10">
                                                </path>
                                            </svg>
                                        </div>
                                        <span
                                            class="font-medium text-gray-700 dark:text-gray-300 group-hover:text-gold-600 dark:group-hover:text-gold-500">
                                            {{ $category->name }}
                                        </span>
                                    </div>
                                    <span
                                        class="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-sm rounded-full">
                                        {{ $category->posts_count }}
                                    </span>
                                </a>
                            @endforeach
                        </div>
                    </div>

                    <!-- Popular Posts -->
                    @if ($popularPosts->count() > 0)
                        <div
                            class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-100 dark:border-gray-700 p-6 mb-8 shadow-lg animate-slide-up animation-delay-400">
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-6">{{ t('popular_posts') }}</h3>
                            <div class="space-y-6">
                                @foreach ($popularPosts as $index => $post)
                                    <div class="flex gap-4 group animate-fade-in" style="animation-delay: {{ $index * 100 }}ms">
                                        <div class="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0">
                                            @if ($post->featured_image)
                                                <img src="{{ asset($post->featured_image) }}" alt="{{ $post->title }}"
                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                                            @else
                                                <div
                                                    class="w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 flex items-center justify-center">
                                                    <i class="fas fa-newspaper text-gray-400 dark:text-gray-500"></i>
                                                </div>
                                            @endif
                                        </div>
                                        <div>
                                            <a href="{{ route('blog.show', $post->slug) }}"
                                                class="font-semibold text-gray-900 dark:text-white group-hover:text-gold-600 dark:group-hover:text-gold-500 transition-colors duration-200 line-clamp-2 mb-2">
                                                {{ Str::limit($post->title, 50) }}
                                            </a>
                                            <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
                                                <span>{{ $post->published_at->format('M j, Y') }}</span>
                                                <span>•</span>
                                                <span>{{ $post->views }} {{ t('views') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Search Widget -->
                    <div
                        class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-100 dark:border-gray-700 p-6 shadow-lg animate-slide-up animation-delay-500">
                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">{{ t('search_posts') }}</h3>
                        <form method="GET" action="{{ route('blogs') }}" class="space-y-4">
                            @if (request()->has('category'))
                                <input type="hidden" name="category" value="{{ request('category') }}">
                            @endif
                            <div class="relative">
                                <input type="text" name="search" value="{{ request('search') }}"
                                    placeholder="{{ t('search_placeholder') }}"
                                    class="w-full pl-10 pr-4 py-3 bg-gray-50/80 dark:bg-gray-700/80 backdrop-blur-sm border border-gray-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-gold-500 focus:border-gold-500 dark:focus:ring-gold-400 dark:focus:border-gold-400 outline-none transition-colors duration-200 text-gray-900 dark:text-white">
                                <i class="fas fa-search absolute left-3 top-3.5 text-gray-400"></i>
                            </div>
                            <button type="submit"
                                class="w-full bg-gradient-to-r from-gold-500 to-gold-600 text-white py-3 rounded-xl hover:shadow-lg hover:shadow-gold-500/30 transition-all duration-300 font-medium btn-gold">
                                {{ t('search_button') }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Custom Animations -->
    <style>
        @keyframes pulse-gold {
            0%, 100% {
                opacity: 0.7;
            }
            50% {
                opacity: 0.4;
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
        }

        @keyframes gradient-x {
            0%, 100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }

        .animate-pulse-gold {
            animation: pulse-gold 3s ease-in-out infinite;
        }

        .animate-float {
            animation: float 6s ease-in-out infinite;
        }

        .animate-gradient-x {
            background-size: 200% auto;
            animation: gradient-x 3s ease infinite;
        }

        .animate-slide-up {
            animation: slideUp 0.6s ease-out forwards;
            opacity: 0;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in {
            animation: fadeIn 0.8s ease-out forwards;
            opacity: 0;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .animation-delay-200 {
            animation-delay: 200ms;
        }

        .animation-delay-300 {
            animation-delay: 300ms;
        }

        .animation-delay-400 {
            animation-delay: 400ms;
        }

        .animation-delay-500 {
            animation-delay: 500ms;
        }
        
        /* Gold Button Styles */
        .btn-gold {
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3);
        }

        .btn-gold:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(250, 204, 21, 0.4);
            background: linear-gradient(135deg, #eab308 0%, #facc15 100%);
        }

        .btn-gold::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transform: translateX(-100%);
        }

        .btn-gold:hover::after {
            animation: shimmer 1.5s infinite;
        }
        
        @keyframes shimmer {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }
        
        /* Pagination Styles */
        .pagination {
            display: flex;
            justify-content: center;
            list-style: none;
            padding: 0;
            margin: 2rem 0 0;
        }

        .pagination li {
            margin: 0 2px;
        }

        .pagination li a,
        .pagination li span {
            display: block;
            padding: 8px 12px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            color: #6b7280;
            text-decoration: none;
            transition: all 0.2s;
            min-width: 40px;
            text-align: center;
        }

        .pagination li a:hover {
            background-color: #f3f4f6;
            border-color: #d1d5db;
        }

        .pagination li.active span {
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            border-color: #eab308;
            color: white;
            box-shadow: 0 2px 10px rgba(250, 204, 21, 0.3);
        }

        .pagination li.disabled span {
            color: #9ca3af;
            background-color: #f9fafb;
        }

        /* Dark mode pagination */
        .dark .pagination li a,
        .dark .pagination li span {
            border-color: #374151;
            color: #9ca3af;
            background-color: #1f2937;
        }

        .dark .pagination li a:hover {
            background-color: #374151;
            border-color: #4b5563;
        }

        .dark .pagination li.active span {
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            border-color: #eab308;
            color: white;
            box-shadow: 0 2px 10px rgba(250, 204, 21, 0.3);
        }

        .dark .pagination li.disabled span {
            color: #6b7280;
            background-color: #374151;
        }
        
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    </style>

    <script>
        // Auto-submit search form on enter
        document.getElementById('searchInput')?.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                this.form.submit();
            }
        });

        // Category filter with search preservation
        document.querySelectorAll('.category-filter').forEach(link => {
            link.addEventListener('click', function(e) {
                const url = new URL(this.href);
                const searchInput = document.getElementById('searchInput');
                if (searchInput && searchInput.value) {
                    url.searchParams.set('search', searchInput.value);
                }
                window.location.href = url.toString();
                e.preventDefault();
            });
        });
    </script>

@endsection