@extends('layouts.app')

@section('title', 'Blog Legal Strategist - HOCHMAN Legal')
@section('description', 'Actualités et conseils juridiques pour dirigeants : droit des affaires, droit immobilier, droit fiscal et droit du travail à Paris et Île-de-France.')

@section('content')
<div class="min-h-screen bg-gray-50">
    <!-- Hero Section -->
    <x-hero-section 
    title="Blog Juridique"
    subtitle="Expertise & Actualités"
    description="Expertise, conseils et actualités juridiques par Maître Boris Hochman"
    background-image="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80"
    overlay-opacity="0.8"
/>

    <!-- Categories Filter -->
    @if($categories->count() > 0)
    <section class="py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-wrap justify-center gap-4">
                <a href="{{ route('blog.index') }}" class="px-6 py-3 bg-white rounded-full shadow-md hover:shadow-lg transition-all duration-300 text-gray-700 hover:text-red-600 font-medium">
                    Tous les articles
                </a>
                @foreach($categories as $category)
                <a href="{{ route('blog.category', $category) }}" class="px-6 py-3 bg-white rounded-full shadow-md hover:shadow-lg transition-all duration-300 text-gray-700 hover:text-red-600 font-medium">
                    {{ $category->name }}
                    @if($category->posts_count > 0)
                        <span class="ml-2 px-2 py-1 bg-red-100 text-red-600 rounded-full text-xs">{{ $category->posts_count }}</span>
                    @endif
                </a>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Articles Grid -->
    <section class="py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            @if($posts->count() > 0)
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach($posts as $post)
                    <article class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:scale-105 overflow-hidden">
                        @if($post->featured_image)
                        <div class="aspect-video overflow-hidden">
                            <img src="{{ Storage::url($post->featured_image) }}" alt="{{ $post->title }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                        </div>
                        @endif
                        
                        <div class="p-6">
                            <div class="flex items-center text-sm text-gray-500 mb-3">
                                <time datetime="{{ $post->published_at->format('Y-m-d') }}">
                                    {{ $post->published_at->format('d M Y') }}
                                </time>
                                <span class="mx-2">•</span>
                                <span>{{ $post->reading_time }} min de lecture</span>
                            </div>
                            
                            @if($post->categories->count() > 0)
                            <div class="flex flex-wrap gap-2 mb-3">
                                @foreach($post->categories as $category)
                                <span class="px-3 py-1 bg-red-100 text-red-600 rounded-full text-xs font-medium">
                                    {{ $category->name }}
                                </span>
                                @endforeach
                            </div>
                            @endif
                            
                            <h2 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-red-600 transition-colors duration-300">
                                <a href="{{ route('blog.show', $post) }}" class="stretched-link">
                                    {{ $post->title }}
                                </a>
                            </h2>
                            
                            <p class="text-gray-600 leading-relaxed">
                                {{ $post->excerpt }}
                            </p>
                        </div>
                    </article>
                    @endforeach
                </div>
                
                <!-- Pagination -->
                <div class="mt-12">
                    {{ $posts->links() }}
                </div>
            @else
                <!-- No Articles Yet -->
                <div class="text-center py-20">
                    <div class="w-32 h-32 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-8 animate-bounce-slow">
                        <svg class="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                        </svg>
                    </div>
                    
                    <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
                        Contenu en cours de rédaction
                    </h2>
                    
                    <p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto leading-relaxed">
                        Notre équipe prépare actuellement des articles de qualité sur les sujets juridiques qui vous préoccupent. 
                        Revenez bientôt pour découvrir nos analyses et conseils stratégiques.
                    </p>
                    
                    <a href="{{ route('contact') }}" class="group inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-xl text-lg font-bold transition-all duration-500 transform hover:scale-105 shadow-2xl hover:shadow-red-500/25">
                        <span class="mr-3">Être notifié des nouveaux articles</span>
                        <svg class="w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                        </svg>
                    </a>
                </div>
            @endif
        </div>
    </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

/* Roboto Font */
* {
    font-family: 'Roboto', sans-serif;
}

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

@keyframes float-delayed {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-30px) rotate(-5deg);
    }
}

@keyframes float-slow {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(3deg);
    }
}

@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

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

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

.animate-bounce-slow {
    animation: bounce-slow 3s ease-in-out infinite;
}
</style>
@endsection