@extends('layouts.app')
@section('title', 'Blog & Insights')
@section('keywords', 'Facility management blog, Cleaning tips, Home maintenance, Office cleaning guides, Professional cleaning advice')
@section('content')
<style>
    .hero-slider {
        position: relative;
    }

    .hero-slider::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 1;
    }
</style>
<!-- Hero Section -->
<section class="relative min-h-[60vh] overflow-hidden bg-gradient-to-br from-blue-900 via-indigo-800 to-purple-900 hero-slider">
    <!-- Background Image -->
    <div class="absolute inset-0 bg-gradient-to-br from-slate-900/90 via-gray-800/85 to-blue-900/90"
        style="background-image: url('{{ asset('images/blog-hero.webp') }}'); background-size: cover; background-position: center;">
        <div class="absolute inset-0 bg-gradient-to-r from-slate-600/20 via-transparent to-blue-600/20"></div>
    </div>

    <!-- Animated Particles -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="particle absolute w-2 h-2 bg-white/30 rounded-full animate-float-1" style="top: 20%; left: 10%;"></div>
        <div class="particle absolute w-1 h-1 bg-white/40 rounded-full animate-float-2" style="top: 60%; left: 80%;"></div>
        <div class="particle absolute w-3 h-3 bg-white/20 rounded-full animate-float-3" style="top: 30%; left: 70%;"></div>
        <div class="particle absolute w-1.5 h-1.5 bg-white/50 rounded-full animate-float-4" style="top: 80%; left: 20%;"></div>
        <div class="particle absolute w-2.5 h-2.5 bg-white/25 rounded-full animate-float-5" style="top: 40%; left: 90%;"></div>
    </div>

    <!-- Content -->
    <div class="relative z-20 min-h-[60vh] flex items-center" style="z-index: 999;">
        <div class="container mx-auto px-4 py-16">
            <div class="text-center space-y-8">
                <!-- Badge -->
                <div class="inline-flex items-center gap-3 px-6 py-3 rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white text-sm font-semibold shadow-2xl">
                    <div class="w-2.5 h-2.5 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full animate-pulse"></div>
                    <i class="fas fa-blog text-yellow-400"></i>
                    <span class="tracking-wide">Expert Insights & Tips</span>
                </div>

                <!-- Main Heading -->
                <div class="space-y-4">
                    <h1 class="text-5xl md:text-6xl lg:text-7xl font-black leading-tight tracking-tight">
                        <span class="block text-white drop-shadow-2xl">Blog &</span>
                        <span class="block bg-gradient-to-r from-yellow-400 via-orange-400 to-red-400 bg-clip-text text-transparent drop-shadow-2xl">
                            Insights
                        </span>
                    </h1>
                    <p class="text-xl md:text-2xl text-white/90 max-w-3xl mx-auto leading-relaxed">
                        Discover expert tips, industry insights, and professional advice for maintaining your spaces
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Blog Posts Grid -->
<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="blog-grid">
            @foreach($blogs as $blog)
            <a href="{{ route('blog-details.page', ['slug' => $blog->slug]) }}">
                <article class="blog-post group cursor-pointer" data-category="maintenance" data-animate="fade-up" data-delay="100">
                    <div class="relative overflow-hidden rounded-2xl bg-white shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2">
                        <div class="relative h-48 overflow-hidden">
                            <img src="{{ $blog->featured_image ? asset($blog->featured_image) : asset('images/elementor-placeholder-image.png') }}" alt="{{$blog->title}}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent"></div>
                        </div>
                        <div class="p-6">
                            <div class="flex items-center gap-4 text-gray-500 text-sm mb-3">
                                <span class="flex items-center gap-1">
                                    <i class="fas fa-calendar"></i>
                                    {{ $blog->created_at->format('F d, Y') }}
                                </span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors duration-300">
                                {{$blog->title}}
                            </h3>
                            <p class="text-gray-600 leading-relaxed mb-4">
                                 {{$blog->excerpt}}
                            </p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <div class="w-8 h-8 rounded-full bg-gradient-to-r from-green-500 to-emerald-500 flex items-center justify-center">
                                        <i class="fas fa-user text-white text-xs"></i>
                                    </div>
                                    <span class="text-sm font-medium text-gray-700"> {{$blog->author}}</span>
                                </div>
                                <div class="flex items-center text-blue-600 font-medium group-hover:text-blue-700 transition-colors">
                                    <span class="mr-1 text-sm">Read</span>
                                    <i class="fas fa-arrow-right text-sm group-hover:translate-x-1 transition-transform duration-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </a>
            @endforeach

        </div>

    </div>
</section>



<!-- Custom Styles and Scripts -->
<style>
    .hero-slider::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        transform: scale(1);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Additional blog-specific styles */
    .blog-filter.active {
        background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
        color: white !important;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
    }

    .blog-post:hover .blog-image {
        transform: scale(1.05);
    }

    .blog-image {
        transition: transform 0.5s ease;
    }

    /* Particle animations */
    @keyframes float-1 {

        0%,
        100% {
            transform: translateY(0px) translateX(0px);
        }

        33% {
            transform: translateY(-10px) translateX(5px);
        }

        66% {
            transform: translateY(5px) translateX(-5px);
        }
    }

    @keyframes float-2 {

        0%,
        100% {
            transform: translateY(0px) translateX(0px);
        }

        50% {
            transform: translateY(-15px) translateX(10px);
        }
    }

    @keyframes float-3 {

        0%,
        100% {
            transform: translateY(0px) translateX(0px);
        }

        25% {
            transform: translateY(-8px) translateX(-8px);
        }

        75% {
            transform: translateY(8px) translateX(8px);
        }
    }

    @keyframes float-4 {

        0%,
        100% {
            transform: translateY(0px) translateX(0px);
        }

        40% {
            transform: translateY(-12px) translateX(-6px);
        }

        80% {
            transform: translateY(6px) translateX(12px);
        }
    }

    @keyframes float-5 {

        0%,
        100% {
            transform: translateY(0px) translateX(0px);
        }

        60% {
            transform: translateY(-6px) translateX(-10px);
        }
    }

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

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

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

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

    .animate-float-5 {
        animation: float-5 5s ease-in-out infinite;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Blog Filter Functionality
        const filterButtons = document.querySelectorAll('.blog-filter');
        const blogPosts = document.querySelectorAll('.blog-post');

        filterButtons.forEach(button => {
            button.addEventListener('click', function() {
                const category = this.getAttribute('data-category');

                // Update active button
                filterButtons.forEach(btn => {
                    btn.classList.remove('active', 'bg-gradient-to-r', 'from-blue-600', 'to-indigo-600', 'text-white');
                    btn.classList.add('bg-white', 'text-gray-700');
                });

                this.classList.add('active', 'bg-gradient-to-r', 'from-blue-600', 'to-indigo-600', 'text-white');
                this.classList.remove('bg-white', 'text-gray-700');

                // Filter posts
                blogPosts.forEach(post => {
                    const postCategory = post.getAttribute('data-category');

                    if (category === 'all' || postCategory === category) {
                        post.style.display = 'block';
                        post.classList.add('animate-fade-in-up');
                    } else {
                        post.style.display = 'none';
                    }
                });
            });
        });

        // Blog post click handlers
        blogPosts.forEach(post => {
            post.addEventListener('click', function() {
                // Navigate to blog detail page
                window.location.href = '/blog/post-slug'; // Replace with actual routing
            });
        });
    });
</script>

@endsection