@extends('layouts.main')

@section('title', 'PPNI DPK BaliMéd | Rumah Sakit BaliMéd Denpasar')
@section('meta_description', 'Website resmi PPNI DPK Rumah Sakit BaliMéd Denpasar sebagai media informasi, berita, agenda kegiatan, dan dokumentasi organisasi profesi perawat.')
@section('og_title', 'PPNI DPK BaliMéd | Rumah Sakit BaliMéd Denpasar')
@section('og_description', 'Website resmi PPNI DPK Rumah Sakit BaliMéd Denpasar sebagai media informasi, berita, agenda kegiatan, dan dokumentasi organisasi profesi perawat.')
@section('og_image', asset('assets/images/hero-rs-balimed.jpg'))

@section('content')

    <!-- Hero -->
    <section class="relative overflow-hidden">
        <div class="absolute inset-0">
            <img src="{{ asset('assets/images/hero-rs-balimed.jpg') }}" alt="Hero BaliMéd"
                class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-blue-950/65"></div>
        </div>

        <div class="relative max-w-7xl mx-auto px-4 py-16 sm:py-20 md:py-28 lg:py-32">
            <div class="grid lg:grid-cols-2 gap-10 items-center">
                <div class="text-white">
                    <div class="flex items-center gap-3 mb-6">
                        <img src="{{ asset('assets/images/logo-ppni.png') }}" alt="PPNI"
                            class="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl bg-white p-2 object-contain">

                        <img src="{{ asset('assets/images/logo-balimed.png') }}" alt="BaliMéd"
                            class="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl bg-white p-2 object-contain">
                    </div>

                    <p class="uppercase tracking-[0.25em] text-xs sm:text-sm text-blue-100 mb-4">
                        Website Resmi Organisasi
                    </p>

                    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">
                        PPNI DPK <br> Rumah Sakit <br> BaliMéd Denpasar
                    </h1>

                    <p class="text-base sm:text-lg leading-8 text-blue-100 max-w-2xl mb-8">
                        Wadah komunikasi, informasi, dan pengembangan profesionalisme perawat
                        untuk mendukung pelayanan keperawatan yang bermutu, humanis, dan berkelanjutan.
                    </p>

                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="{{ route('tentang') }}"
                            class="inline-flex items-center justify-center bg-white text-blue-900 px-6 py-3 rounded-2xl font-semibold hover:bg-slate-100">
                            Tentang Kami
                        </a>

                        <a href="{{ route('agenda') }}"
                            class="inline-flex items-center justify-center border border-white text-white px-6 py-3 rounded-2xl font-semibold hover:bg-white/10">
                            Lihat Kegiatan
                        </a>
                    </div>
                </div>

                <div>
                    <div
                        class="bg-white/10 backdrop-blur-md border border-white/15 rounded-3xl p-4 sm:p-6 grid grid-cols-2 gap-4">
                        <div class="bg-white/10 rounded-3xl p-6 text-white text-center">
                            <h3 class="text-3xl sm:text-4xl font-extrabold">100+</h3>
                            <p class="mt-2 text-sm sm:text-base text-blue-100">Anggota Aktif</p>
                        </div>

                        <div class="bg-white/10 rounded-3xl p-6 text-white text-center">
                            <h3 class="text-3xl sm:text-4xl font-extrabold">12+</h3>
                            <p class="mt-2 text-sm sm:text-base text-blue-100">Program Kegiatan</p>
                        </div>

                        <div class="bg-white/10 rounded-3xl p-6 text-white text-center">
                            <h3 class="text-3xl sm:text-4xl font-extrabold">24+</h3>
                            <p class="mt-2 text-sm sm:text-base text-blue-100">Agenda Tahunan</p>
                        </div>

                        <div class="bg-white/10 rounded-3xl p-6 text-white text-center">
                            <h3 class="text-3xl sm:text-4xl font-extrabold">1</h3>
                            <p class="mt-2 text-sm sm:text-base text-blue-100">Organisasi Solid</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Berita -->
    <section class="bg-white">
        <div class="max-w-7xl mx-auto px-4 py-14 sm:py-16">
            <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-10">
                <div>
                    <p class="text-blue-700 font-semibold mb-2">Informasi Terbaru</p>
                    <h3 class="text-3xl md:text-4xl font-bold">Berita dan Kegiatan</h3>
                </div>
                <a href="{{ route('berita') }}" class="text-blue-700 font-semibold hover:underline">Lihat Semua</a>
            </div>

            <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
                @forelse($latestPosts as $post)
                    <div class="bg-slate-50 rounded-3xl overflow-hidden shadow-sm border border-slate-100">
                        @if($post->image)
                            <img src="{{ asset($post->image) }}" alt="{{ $post->title }}" class="h-52 w-full object-cover">
                        @else
                            <div class="h-52 bg-blue-100 flex items-center justify-center font-bold text-blue-900">
                                Foto Berita
                            </div>
                        @endif

                        <div class="p-6">
                            <p class="text-sm text-slate-500 mb-2">
                                {{ optional($post->published_at)->format('d M Y') ?? $post->created_at->format('d M Y') }}
                            </p>

                            <h4 class="text-xl font-bold mb-3 leading-snug">{{ $post->title }}</h4>

                            <p class="text-slate-600 leading-7 mb-4">
                                {{ $post->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($post->content), 110) }}
                            </p>

                            <a href="{{ route('berita.show', $post->slug) }}"
                                class="inline-block text-blue-700 font-semibold hover:underline">
                                Baca Selengkapnya →
                            </a>
                        </div>
                    </div>
                @empty
                    <div class="md:col-span-2 xl:col-span-3 text-center text-slate-500">
                        Belum ada berita terbaru.
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <!-- Agenda -->
    <section class="max-w-7xl mx-auto px-4 py-14 sm:py-16">
        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-10">
            <div>
                <p class="text-blue-700 font-semibold mb-2">Agenda Terbaru</p>
                <h3 class="text-3xl md:text-4xl font-bold">Kegiatan Mendatang</h3>
            </div>
            <a href="{{ route('agenda') }}" class="text-blue-700 font-semibold hover:underline">Lihat Semua</a>
        </div>

        <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
            @forelse($latestAgendas as $agenda)
                <div class="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden">
                    @if($agenda->image)
                        <img src="{{ asset($agenda->image) }}" alt="{{ $agenda->title }}" class="w-full h-52 object-cover">
                    @else
                        <div class="w-full h-52 bg-blue-100 flex items-center justify-center text-blue-900 font-bold">
                            Agenda
                        </div>
                    @endif

                    <div class="p-6">
                        <p class="text-sm text-slate-500 mb-2">{{ $agenda->event_date->format('d M Y') }}</p>
                        <h4 class="text-xl font-bold mb-3 leading-snug">{{ $agenda->title }}</h4>
                        <p class="text-slate-600 leading-7 mb-2">
                            {{ \Illuminate\Support\Str::limit(strip_tags($agenda->description), 100) }}
                        </p>

                        @if($agenda->location)
                            <p class="text-sm text-blue-700 font-medium">{{ $agenda->location }}</p>
                        @endif
                    </div>
                </div>
            @empty
                <div class="md:col-span-2 xl:col-span-3 text-center text-slate-500">
                    Belum ada agenda terbaru.
                </div>
            @endforelse
        </div>
    </section>

    <!-- Galeri -->
    <section class="max-w-7xl mx-auto px-4 py-14 sm:py-16">
        <div class="text-center max-w-3xl mx-auto mb-12">
            <p class="text-blue-700 font-semibold mb-2">Dokumentasi</p>
            <h3 class="text-3xl md:text-4xl font-bold mb-4">Galeri Kegiatan</h3>
            <p class="text-slate-600 leading-8">
                Dokumentasi kegiatan organisasi sebagai media informasi, arsip, dan penguatan identitas organisasi.
            </p>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            @forelse($latestGalleries as $gallery)
                <div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-slate-100">
                    <img src="{{ asset($gallery->image) }}" alt="{{ $gallery->title }}"
                        class="w-full h-40 sm:h-48 object-cover">
                </div>
            @empty
                <div class="col-span-2 md:col-span-4 text-center text-slate-500">
                    Belum ada dokumentasi galeri.
                </div>
            @endforelse
        </div>

        <div class="text-center mt-8">
            <a href="{{ route('galeri') }}"
                class="inline-block bg-blue-900 text-white px-6 py-3 rounded-2xl hover:bg-blue-800">
                Lihat Semua Galeri
            </a>
        </div>
    </section>

@endsection