@extends('layouts.app')

@section('content')
<div class="container-fluid px-0" style="margin-top: -1.5rem; margin-bottom: 2rem;">
    <div class="position-relative text-center text-white d-flex align-items-center justify-content-center w-100" 
         style="height: 610px;
                background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.55)), url('{{ asset('images/bg_desa.jpeg') }}'); 
                background-size: cover; 
                background-position: center; 
                background-repeat: no-repeat;
                background-color: #222;">
        
        <div class="position-relative px-4 d-flex flex-column align-items-center justify-content-center w-100" style="z-index: 3; max-width: 900px;">
            <h1 class="display-4 fw-normal m-0 mb-1 text-center" style="font-family: 'Segoe UI', sans-serif; text-shadow: 2px 3px 8px rgba(0,0,0,0.8); font-size: 2.5rem;">
                Selamat Datang
            </h1>
            <h2 class="display-5 fw-bold text-uppercase m-0 mb-3 text-center" style="letter-spacing: 1px; text-shadow: 2px 4px 12px rgba(0,0,0,0.9); font-size: 2.2rem;">
                Website Resmi Desa Kadumbul
            </h2>
            <div class="mx-auto my-2 bg-white opacity-75" style="width: 100px; height: 3px; border-radius: 2px;"></div>
            <p class="fs-6 opacity-90 text-center fw-medium m-0 mt-2" style="max-width: 700px; text-shadow: 1px 2px 6px rgba(0,0,0,0.95); line-height: 1.6;">
                Semua informasi terbaru tentang pemerintahan di Desa Kadumbul dan transparansi publik.
            </p>
        </div>
    </div>
</div>

<div class="container py-4">
    <div class="mb-5 text-center">
        <h3 class="fw-bold text-dark text-uppercase" style="letter-spacing: 0.5px;">Layanan & Informasi Desa</h3>
        <p class="text-secondary small">Klik pada salah satu menu di bawah ini untuk melihat detail informasi resmi</p>
        <div class="mx-auto bg-success" style="width: 50px; height: 3px; border-radius: 2px;"></div>
    </div>

    <div class="row g-4 justify-content-center">
        <div class="col-md-6 col-lg-3">
            <a href="{{ route('desa.pemerintahan') }}" class="text-decoration-none card h-100 border-0 shadow-sm rounded-4 text-center custom-card-hover">
                <div class="card-body p-4">
                    <div class="mx-auto bg-success bg-opacity-10 text-success rounded-circle mb-3 d-flex align-items-center justify-content-center" style="width: 65px; height: 65px;">
                        <i class="bi bi-diagram-3-fill fs-3"></i>
                    </div>
                    <h5 class="fw-bold text-dark mb-2">Pemerintahan</h5>
                    <p class="text-muted small mb-0">Total Aparatur Aktif: <strong>{{ count($pemerintahan) }}</strong> orang.</p>
                </div>
            </a>
        </div>

        <div class="col-md-6 col-lg-3">
            <a href="{{ route('desa.pengumuman') }}" class="text-decoration-none card h-100 border-0 shadow-sm rounded-4 text-center custom-card-hover">
                <div class="card-body p-4">
                    <div class="mx-auto bg-warning bg-opacity-10 text-warning rounded-circle mb-3 d-flex align-items-center justify-content-center" style="width: 65px; height: 65px;">
                        <i class="bi bi-megaphone-fill fs-3"></i>
                    </div>
                    <h5 class="fw-bold text-dark mb-2">Pengumuman</h5>
                    <p class="text-muted small mb-0">Terdapat <strong>{{ count($pengumuman) }}</strong> maklumat publik terbaru.</p>
                </div>
            </a>
        </div>

        <div class="col-md-6 col-lg-3">
            <a href="{{ route('desa.berita') }}" class="text-decoration-none card h-100 border-0 shadow-sm rounded-4 text-center custom-card-hover">
                <div class="card-body p-4">
                    <div class="mx-auto bg-primary bg-opacity-10 text-primary rounded-circle mb-3 d-flex align-items-center justify-content-center" style="width: 65px; height: 65px;">
                        <i class="bi bi-newspaper fs-3"></i>
                    </div>
                    <h5 class="fw-bold text-dark mb-2">Berita Desa</h5>
                    <p class="text-muted small mb-0">Mengulas <strong>{{ count($berita) }}</strong> aktivitas & Kegiatan Desa.</p>
                </div>
            </a>
        </div>

        <div class="col-md-6 col-lg-3">
            <a href="{{ route('desa.potensi') }}" class="text-decoration-none card h-100 border-0 shadow-sm rounded-4 text-center custom-card-hover">
                <div class="card-body p-4">
                    <div class="mx-auto bg-danger bg-opacity-10 text-danger rounded-circle mb-3 d-flex align-items-center justify-content-center" style="width: 65px; height: 65px;">
                        <i class="bi bi-gem fs-3"></i>
                    </div>
                    <h5 class="fw-bold text-dark mb-2">Potensi Desa</h5>
                    <p class="text-muted small mb-0">Memiliki <strong>{{ count($potensi) }}</strong> sektor komoditas unggulan.</p>
                </div>
            </a>
        </div>
    </div>
</div>

<style>
    .custom-card-hover { display: block; background-color: #ffffff; transition: transform 0.2s, box-shadow 0.2s; }
    .custom-card-hover:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0,0,0,0.12) !important; }
</style>
@endsection