@extends('layouts.app')

@section('title', 'Beranda BKKBN Kanigoro')

@section('content')

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

    <!-- BACKGROUND -->
    <div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-blue-900 to-indigo-900"></div>

    <!-- GLOW -->
    <div class="absolute w-96 h-96 bg-indigo-500 rounded-full blur-3xl opacity-20 -top-20 -left-20"></div>
    <div class="absolute w-96 h-96 bg-cyan-400 rounded-full blur-3xl opacity-10 bottom-0 right-0"></div>

    <div class="relative z-10 py-28 px-6 text-center max-w-5xl mx-auto">

        <h1 class="text-5xl md:text-7xl font-extrabold mb-6 tracking-tight leading-tight">
            PUSYANGATRA
        </h1>

        <p class="text-lg md:text-2xl text-blue-100 mb-10 leading-relaxed max-w-3xl mx-auto">
            Mewujudkan ketahanan keluarga melalui 
            <span class="text-white font-semibold">Pusat Pelayanan Keluarga Sejahtera</span>
            yang terpadu, modern, dan profesional.
        </p>

        <div class="flex flex-col sm:flex-row gap-4 justify-center">

            <a href="#program"
                class="bg-white text-blue-700 font-bold py-3 px-8 rounded-full shadow-lg hover:bg-blue-100 transition transform hover:-translate-y-1">
                🚀 Lihat Program
            </a>

            <a href="#artikel"
                class="bg-white/10 border border-white/30 text-white py-3 px-8 rounded-full hover:bg-white/20 transition">
                📚 Artikel Edukasi
            </a>

        </div>

        <div class="mt-12 grid grid-cols-3 gap-6 max-w-md mx-auto text-sm">
            <div>
                <p class="text-2xl font-bold">100+</p>
                <p class="text-blue-300">Keluarga</p>
            </div>
            <div>
                <p class="text-2xl font-bold">6+</p>
                <p class="text-blue-300">Program</p>
            </div>
            <div>
                <p class="text-2xl font-bold">24/7</p>
                <p class="text-blue-300">Layanan</p>
            </div>
        </div>

    </div>
</section>

    <section class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row items-center gap-12">
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative">
                        <div class="absolute -inset-1 bg-blue-100 rounded-lg blur-lg opacity-50"></div>
                        <img src="{{ asset('img/lambang_Kab.Blitar.png') }}" alt="Lambang Kabupaten Blitar"
                            class="relative rounded-lg shadow-2xl max-w-xs md:max-w-md transition-transform duration-500 hover:scale-105" />
                    </div>
                </div>

                <div class="md:w-1/2">
                    <span
                        class="inline-block px-4 py-1.5 mb-4 text-xs font-bold tracking-widest text-blue-600 uppercase bg-blue-50 rounded-full border border-blue-100">
                        Profil
                    </span>
                    <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-6 leading-tight">
                        PUSYANGATRA <span class="text-blue-600 italic">Kecamatan Kanigoro</span>
                    </h2>
                    <div class="space-y-6 text-gray-700 text-lg leading-relaxed">
                        <p>
                            <strong class="text-gray-900">PUSYANGATRA</strong> (Pusat Pelayanan Keluarga Sejahtera) adalah
                            wadah pelayanan publik berbasis masyarakat yang dibentuk oleh <span
                                class="font-bold text-blue-600">BKKBN</span>.
                        </p>
                        <p>
                            Kami hadir sebagai pusat rujukan keluarga di wilayah Kabupaten Blitar untuk memberikan akses
                            informasi, konseling, dan bantuan komprehensif guna menciptakan keluarga yang
                            <span
                                class="text-blue-600 font-semibold underline decoration-blue-200 decoration-4 underline-offset-4">
                                tangguh, mandiri, dan sejahtera
                            </span>.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="program" class="py-24 bg-gray-50 border-y border-gray-100">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="text-blue-600 font-bold tracking-widest uppercase text-sm">Layanan Terpadu</span>
                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-4">Program Unggulan PUSYANGATRA</h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                    Komitmen kami dalam mendampingi setiap fase kehidupan keluarga di Kecamatan Kanigoro untuk mewujudkan
                    masyarakat yang berkualitas.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div
                    class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl transition-all duration-300 group">
                    <div
                        class="w-14 h-14 bg-pink-50 text-pink-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-pink-600 group-hover:text-white transition-all">
                        <i class="fas fa-heart text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Pelayanan Pranikah</h3>
                    <p class="text-gray-600 text-sm leading-relaxed mb-6">Persiapan mental dan kesehatan bagi calon
                        pengantin untuk membangun pondasi keluarga yang kokoh.</p>
                    <ul class="text-gray-500 text-xs space-y-3 border-t pt-5">
                        <li class="flex items-center"><i class="fas fa-check-circle text-pink-500 mr-2"></i> Konseling Calon
                            Pengantin</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-pink-500 mr-2"></i> Pemeriksaan
                            Kesehatan</li>
                    </ul>
                </div>

                <div
                    class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl transition-all duration-300 group">
                    <div
                        class="w-14 h-14 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-blue-600 group-hover:text-white transition-all">
                        <i class="fas fa-baby text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Keluarga & Anak</h3>
                    <p class="text-gray-600 text-sm leading-relaxed mb-6">Fokus pengasuhan 1000 Hari Pertama Kehidupan (HPK)
                        untuk mencegah stunting secara dini.</p>
                    <ul class="text-gray-500 text-xs space-y-3 border-t pt-5">
                        <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Bina Keluarga
                            Balita (BKB)</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Pemantauan
                            Tumbuh Kembang</li>
                    </ul>
                </div>

                <div
                    class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl transition-all duration-300 group">
                    <div
                        class="w-14 h-14 bg-orange-50 text-orange-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-orange-600 group-hover:text-white transition-all">
                        <i class="fas fa-users text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Remaja & Keluarga</h3>
                    <p class="text-gray-600 text-sm leading-relaxed mb-6">Pendampingan masa pubertas dan edukasi Generasi
                        Berencana (GenRe) bagi masa depan.</p>
                    <ul class="text-gray-500 text-xs space-y-3 border-t pt-5">
                        <li class="flex items-center"><i class="fas fa-check-circle text-orange-500 mr-2"></i> Bina Keluarga
                            Remaja (BKR)</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-orange-500 mr-2"></i> PIK-Remaja
                        </li>
                    </ul>
                </div>

                <div
                    class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl transition-all duration-300 group">
                    <div
                        class="w-14 h-14 bg-green-50 text-green-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-green-600 group-hover:text-white transition-all">
                        <i class="fas fa-notes-medical text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">KB & Kespro</h3>
                    <p class="text-gray-600 text-sm leading-relaxed mb-6">Pelayanan kontrasepsi dan edukasi kesehatan
                        reproduksi yang aman dan terencana.</p>
                    <ul class="text-gray-500 text-xs space-y-3 border-t pt-5">
                        <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Konseling Alat
                            Kontrasepsi</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Layanan
                            Kesehatan Ibu</li>
                    </ul>
                </div>

                <div
                    class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl transition-all duration-300 group">
                    <div
                        class="w-14 h-14 bg-purple-50 text-purple-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-purple-600 group-hover:text-white transition-all">
                        <i class="fas fa-blind text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Lansia & Keluarga</h3>
                    <p class="text-gray-600 text-sm leading-relaxed mb-6">Mewujudkan lansia yang tangguh, mandiri, dan tetap
                        produktif di masa tua.</p>
                    <ul class="text-gray-500 text-xs space-y-3 border-t pt-5">
                        <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Bina Keluarga
                            Lansia (BKL)</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Sosialisasi
                            Lansia Produktif</li>
                    </ul>
                </div>

                <div
                    class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl transition-all duration-300 group">
                    <div
                        class="w-14 h-14 bg-yellow-50 text-yellow-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-yellow-600 group-hover:text-white transition-all">
                        <i class="fas fa-hand-holding-usd text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Pemberdayaan Ekonomi</h3>
                    <p class="text-gray-600 text-sm leading-relaxed mb-6">Peningkatan pendapatan keluarga melalui kelompok
                        usaha ekonomi produktif (UPPKA).</p>
                    <ul class="text-gray-500 text-xs space-y-3 border-t pt-5">
                        <li class="flex items-center"><i class="fas fa-check-circle text-yellow-500 mr-2"></i> Pelatihan
                            Keterampilan</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-yellow-500 mr-2"></i> Pendampingan
                            Usaha Mikro</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section id="artikel" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-end mb-12">
                <div class="text-left">
                    <h2 class="text-3xl font-bold text-gray-800 mb-2">Artikel & Edukasi</h2>
                    <p class="text-gray-600">Informasi terbaru seputar kesehatan dan keluarga</p>
                </div>
                <a href="{{ route('articles.index') }}"
                    class="text-blue-600 font-semibold hover:underline hidden md:block">
                    Lihat Semua Artikel →
                </a>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @forelse ($articles as $article)
                    <div
                        class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col transition-all hover:shadow-md">
                        <a href="{{ route('articles.show', $article) }}" class="overflow-hidden">
                            @if ($article->images->isNotEmpty())
                                <img src="{{ asset('storage/' . $article->images->first()->path) }}"
                                    alt="{{ $article->title }}"
                                    class="w-full h-56 object-cover transform hover:scale-110 transition-transform duration-500">
                            @else
                                <div class="w-full h-56 bg-gray-100 flex items-center justify-center">
                                    <i class="fas fa-image text-gray-300 text-5xl"></i>
                                </div>
                            @endif
                        </a>
                        <div class="p-6 flex flex-col flex-grow">
                            <span class="text-blue-600 text-xs font-bold uppercase mb-2">Edukasi</span>
                            <h3 class="text-xl font-bold mb-3 text-gray-800 line-clamp-2">{{ $article->title }}</h3>
                            <p class="text-gray-500 text-xs mb-5">
                                <i class="far fa-calendar-alt mr-1"></i>
                                {{ $article->created_at->translatedFormat('d F Y') }}
                            </p>
                            <a href="{{ route('articles.show', $article) }}"
                                class="text-blue-600 font-bold text-sm inline-flex items-center mt-auto hover:text-blue-800 transition-colors">
                                Baca Selengkapnya <i class="fas fa-arrow-right ml-2 text-xs"></i>
                            </a>
                        </div>
                    </div>
                @empty
                    <div
                        class="col-span-full text-center py-20 bg-gray-50 rounded-3xl border-2 border-dashed border-gray-200">
                        <i class="fas fa-newspaper text-gray-300 text-6xl mb-4"></i>
                        <p class="text-gray-500 font-medium text-lg">Belum ada artikel yang dipublikasikan.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <section id="kontak" class="h-96 w-full grayscale hover:grayscale-0 transition-all duration-700">
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3949.7221246535323!2d112.21778097354378!3d-8.129747081380389!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e78ebe73c4a8b5b%3A0xec24f7169deddc44!2sBalai%20Penyuluhan%20KB%20Kecamatan%20Kanigoro!5e0!3m2!1sen!2sid!4v1770195810830!5m2!1sen!2sid"
            width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade">
        </iframe>
    </section>

@endsection