@extends('layouts.app')

@section('title', 'Blog HAndipartner — Guides AGEFIPH & OETH')
@section('description', 'Tous nos articles sur la réglementation AGEFIPH, le quota OETH, l\'optimisation de la contribution handicap et les bonnes pratiques RH.')

@section('content')

{{-- Header --}}
<section style="background:#0D2B5E;padding:clamp(3rem,6vw,4.5rem) 0">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div style="display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem">
            <span style="width:26px;height:1.5px;background:#F5820A"></span>
            <span style="font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#7FA7E0">Ressources</span>
        </div>
        <h1 style="font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;margin:0 0 1rem;letter-spacing:-.022em">Analyses &amp; guides AGEFIPH</h1>
        <p style="font-size:1.02rem;color:#9FB8DC;line-height:1.7;max-width:560px;margin:0 auto">Actualités, guides pratiques et décryptages sur l'obligation d'emploi des travailleurs handicapés.</p>
    </div>
</section>

{{-- Liste --}}
<section style="padding:4.5rem 0;background:#F4F8FE">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.75rem">
            @forelse($posts as $post)
            <article class="card-lift reveal" style="background:white;border-radius:16px;overflow:hidden;border:1px solid #E0E8F5;display:flex;flex-direction:column">
                @if($post->featured_image)
                <div style="height:200px;overflow:hidden">
                    <img loading="lazy" decoding="async" src="{{ $post->featured_image }}" alt="{{ $post->title }}" style="width:100%;height:100%;object-fit:cover">
                </div>
                @else
                <div style="height:6px;background:linear-gradient(90deg,#0D2B5E,#1A4B9C)"></div>
                @endif
                <div style="padding:1.75rem;flex:1;display:flex;flex-direction:column">
                    <div style="display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;flex-wrap:wrap">
                        <span style="font-size:.68rem;color:#9BA8C0;font-weight:600;text-transform:uppercase;letter-spacing:.08em">
                            {{ $post->published_at?->translatedFormat('d M Y') ?? '' }}
                        </span>
                        @if(!empty($post->categories))
                        @foreach(array_slice((array)$post->categories, 0, 1) as $cat)
                        <span style="font-size:.65rem;padding:2px 8px;border-radius:10px;background:#EEF3FB;color:#1A4B9C;font-weight:700">{{ $cat }}</span>
                        @endforeach
                        @endif
                    </div>
                    <h2 style="font-size:.95rem;font-weight:800;color:#091E42;line-height:1.45;margin:0 0 .75rem;flex:1">
                        <a href="/{{ $post->slug }}" style="text-decoration:none;color:inherit" onmouseenter="this.style.color='#1A4B9C'" onmouseleave="this.style.color='inherit'">
                            {{ $post->title }}
                        </a>
                    </h2>
                    @if($post->excerpt)
                    <p style="font-size:.78rem;color:#6B7280;line-height:1.6;margin:0 0 1.25rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">
                        {{ strip_tags($post->excerpt) }}
                    </p>
                    @endif
                    <a href="/{{ $post->slug }}" style="font-size:.75rem;font-weight:800;color:#1A4B9C;text-decoration:none;display:flex;align-items:center;gap:4px;margin-top:auto" onmouseenter="this.style.color='#0D2B5E'" onmouseleave="this.style.color='#1A4B9C'">
                        Lire l'article
                        <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                    </a>
                </div>
            </article>
            @empty
            <div style="grid-column:1/-1;text-align:center;padding:4rem;color:#9BA8C0">Aucun article pour le moment.</div>
            @endforelse
        </div>

        {{-- Pagination --}}
        @if($posts->hasPages())
        <div style="margin-top:3rem;display:flex;justify-content:center">
            {{ $posts->links() }}
        </div>
        @endif
    </div>
</section>

@endsection