@extends('layouts.app')

@section('title', 'Artikel & Edukasi')

@section('content')

   <section class="relative overflow-hidden text-white">

    <div class="absolute inset-0 bg-gradient-to-br from-blue-900 via-blue-700 to-blue-500"></div>

    <div class="absolute w-96 h-96 bg-blue-300 blur-3xl opacity-30 -top-20 -left-20"></div>

    <div class="relative z-10 text-center py-24 px-6">

        <h1 class="text-5xl md:text-6xl font-extrabold mb-4">
            Artikel & Edukasi
        </h1>

        <p class="text-blue-100 text-lg md:text-xl max-w-2xl mx-auto">
            Wawasan untuk keluarga sehat & sejahtera
        </p>

    </div>
</section>

    <main class="bg-gray-50 py-16">
        <div class="container mx-auto px-4 lg:px-8">
            <div class="flex flex-col lg:flex-row gap-12">

                <div class="w-full lg:w-2/3">
                    <div class="mb-10">
                        <h2 class="text-3xl font-bold text-gray-800 inline-block border-b-4 border-blue-500 pb-2">Artikel
                            Terbaru</h2>
                        <p class="text-gray-600 mt-3">Temukan informasi terkini seputar keluarga berencana, kesehatan, dan
                            kesejahteraan.</p>
                    </div>

                    <div class="space-y-10">

                        @forelse ($articles as $article)
                            <div
                                class="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col md:flex-row transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group">
                                <div class="w-full md:w-5/12 flex-shrink-0">
                                    @if ($article->images->isNotEmpty())
                                        <img src="{{ asset('storage/' . $article->images->first()->path) }}"
                                            alt="Gambar untuk artikel {{ $article->title }}"
                                            class="w-full h-64 md:h-full object-cover transition-transform duration-300 group-hover:scale-105">
                                    @else
                                        <div class="w-full h-64 md:h-full bg-gray-200 flex items-center justify-center">
                                            <span class="text-gray-400">Tidak ada gambar</span>
                                        </div>
                                    @endif
                                </div>

                                <div class="p-6 flex flex-col flex-1 min-w-0">
                                    <div>
                                        <h3 class="text-2xl font-bold text-gray-900 mb-3">
                                            <a href="{{ route('articles.show', $article) }}"
                                                class="hover:text-blue-700 transition-colors duration-300">
                                                {{ $article->title }}
                                            </a>
                                        </h3>
                                        <p class="text-gray-600 leading-relaxed mb-4 break-words">
                                            {{ Str::limit(strip_tags($article->content), 150) }}
                                        </p>
                                    </div>
                                    <div class="mt-auto">
                                        <div class="flex items-center text-sm text-gray-500 mb-4">
                                            <i class="far fa-user mr-2"></i>
                                            <span>Admin BKKBN</span>
                                            <span class="mx-2">•</span>
                                            <i class="far fa-calendar-alt mr-2"></i>
                                            <span>{{ $article->created_at->translatedFormat('d F Y') }}</span>
                                        </div>
                                        <a href="{{ route('articles.show', $article) }}"
                                            class="inline-block text-blue-600 font-semibold hover:underline">
                                            Baca Selengkapnya &rarr;
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="bg-white p-8 rounded-lg shadow-md text-center">
                                <svg class="mx-auto h-12 w-12 text-gray-400" xmlns="http://www.w3.org/2000/svg"
                                    fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z" />
                                </svg>
                                <p class="text-gray-500 mt-2">Saat ini belum ada artikel yang dipublikasikan. Silakan
                                    kembali lagi nanti.</p>
                            </div>
                        @endforelse
                    </div>

                    <div class="mt-12">
                        {{ $articles->links() }}
                    </div>
                </div>

                @include('partials.sidebar')
            </div>
        </div>
    </main>
@endsection
