@extends('publik.layouts.app')
@section('title', 'Beranda')

@push('styles')
<style>
    .hero-section {
        background: url('/images/bg-desa.jpg') center/cover no-repeat;
        position: relative;
        min-height: 480px;
        display: flex;
        align-items: center;
    }

    .hero-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(10, 40, 20, 0.75) 0%, rgba(26, 92, 56, 0.65) 100%);
    }

    .hero-content {
        position: relative;
        z-index: 2;
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(6px);
        color: #fff;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.82rem;
        margin-bottom: 16px;
    }

    .hero-title {
        font-size: 2.4rem;
        font-weight: 800;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 14px;
    }

    .hero-title span {
        color: #7ee8a2;
    }

    .hero-desc {
        color: rgba(255, 255, 255, 0.85);
        font-size: 1rem;
        max-width: 520px;
        margin-bottom: 28px;
        line-height: 1.7;
    }

    .hero-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.95rem;
        text-decoration: none;
        transition: all 0.2s;
    }

    .hero-btn-primary {
        background: #2d7a4f;
        color: #fff;
        border: 2px solid #2d7a4f;
    }

    .hero-btn-primary:hover {
        background: #1a5c38;
        color: #fff;
        border-color: #1a5c38;
    }

    .hero-btn-outline {
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(255, 255, 255, 0.4);
        color: #fff;
        backdrop-filter: blur(4px);
    }

    .hero-btn-outline:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .stat-card {
        background: #fff;
        border-radius: 14px;
        padding: 24px 20px;
        text-align: center;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        border-top: 4px solid var(--green-primary);
        transition: transform 0.2s;
    }

    .stat-card:hover {
        transform: translateY(-4px);
    }

    .stat-icon {
        width: 52px;
        height: 52px;
        background: #e8f5ee;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 12px;
        font-size: 1.5rem;
        color: #2d7a4f;
    }

    .stat-number {
        font-size: 2rem;
        font-weight: 800;
        color: #1a3c2e;
        line-height: 1;
    }

    .stat-label {
        color: #6b7280;
        font-size: 0.82rem;
        margin-top: 4px;
    }

    .alur-step {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        padding: 20px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.2s;
    }

    .alur-step:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .alur-number {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: var(--green-primary);
        color: #fff;
        font-weight: 800;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .section-title {
        font-size: 1.6rem;
        font-weight: 800;
        color: #1a3c2e;
        margin-bottom: 8px;
    }

    .section-sub {
        color: #6b7280;
        font-size: 0.9rem;
        margin-bottom: 36px;
    }
</style>
@endpush

@section('content')

<div class="hero-section" style="min-height: 480px; background: url('/images/bg-desa.jpg') center center / cover no-repeat; position: relative; display: flex; align-items: center;">
    {{-- Gradient Overlay --}}
    <div style="position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 40, 20, 0.75) 0%, rgba(26, 92, 56, 0.65) 100%); z-index: 1;"></div>

    <div class="container hero-content" style="position: relative; z-index: 2; width: 100%;">
        <div class="row align-items-center">
            <div class="col-lg-7">
                <div class="hero-badge">
                    <i class="bi bi-shield-check"></i>
                    Sistem Resmi Desa Pungging
                </div>
                <h1 class="hero-title">
                    Seleksi BLT Dana Desa<br>
                    <span>Transparan & Objektif</span>
                </h1>
                <p class="hero-desc">
                    Sistem Pendukung Keputusan berbasis metode <strong style="color:#7ee8a2;">Simple Additive Weighting (SAW)</strong>
                    untuk menentukan penerima Bantuan Langsung Tunai Dana Desa secara adil dan terstruktur.
                </p>
                <div class="d-flex gap-3 flex-wrap">
                    <a href="{{ route('publik.penerima') }}" class="hero-btn hero-btn-primary">
                        <i class="bi bi-people-fill"></i>Lihat Penerima BLT
                    </a>
                    <a href="{{ route('publik.peta') }}" class="hero-btn hero-btn-outline">
                        <i class="bi bi-geo-alt-fill"></i>Peta Distribusi
                    </a>
                </div>
            </div>
            <div class="col-lg-5 d-none d-lg-flex justify-content-end">
                <div style="background:rgba(255,255,255,0.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);border-radius:16px;padding:24px;min-width:220px;">
                    @if($periodeAktif)
                    <div style="color:rgba(255,255,255,0.6);font-size:0.75rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;">Periode Aktif</div>
                    <div style="color:#fff;font-weight:700;font-size:1rem;margin-bottom:4px;">{{ $periodeAktif->nama }}</div>
                    <div style="color:#7ee8a2;font-size:0.82rem;margin-bottom:16px;">
                        <i class="bi bi-calendar3 me-1"></i>
                        {{ \Carbon\Carbon::parse($periodeAktif->tanggal_mulai)->format('d M Y') }}
                    </div>
                    <div style="background:rgba(255,255,255,0.1);border-radius:8px;padding:10px 14px;color:#fff;font-size:0.85rem;">
                        <div style="color:rgba(255,255,255,0.6);font-size:0.72rem;">Kuota Penerima</div>
                        <div style="font-size:1.4rem;font-weight:800;color:#7ee8a2;">{{ $periodeAktif->kuota_penerima }}</div>
                        <div style="font-size:0.72rem;color:rgba(255,255,255,0.5);">orang</div>
                    </div>
                    @else
                    <div style="color:rgba(255,255,255,0.6);font-size:0.85rem;text-align:center;padding:16px 0;">
                        <i class="bi bi-calendar-x" style="font-size:2rem;display:block;margin-bottom:8px;opacity:0.5;"></i>
                        Belum ada periode aktif
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

{{-- STAT CARDS --}}
<div class="container" style="margin-top:-40px;position:relative;z-index:10;">
    <div class="row g-3">
        <div class="col-6 col-md-3">
            <a href="{{ route('publik.penerima') }}" style="text-decoration:none;">
            <div class="stat-card">
                <div class="stat-icon"><i class="bi bi-people-fill"></i></div>
                <div class="stat-number">{{ number_format($totalWarga) }}</div>
                <div class="stat-label">Total Warga Terdaftar</div>
            </div></a>
        </div>
        <div class="col-6 col-md-3">
            <a href="{{ route('publik.penerima') }}" style="text-decoration:none;">
            <div class="stat-card">
                <div class="stat-icon" style="background:#fef9c3;color:#ca8a04;"><i class="bi bi-check-circle-fill"></i></div>
                <div class="stat-number">{{ number_format($totalPenerima) }}</div>
                <div class="stat-label">Total Penerima BLT</div>
            </div></a>
        </div>
        <div class="col-6 col-md-3">
            <a href="{{ route('publik.peta') }}" style="text-decoration:none;">
            <div class="stat-card">
                <div class="stat-icon" style="background:#dbeafe;color:#2563eb;"><i class="bi bi-calendar-check"></i></div>
                <div class="stat-number">{{ $periodeSelesai }}</div>
                <div class="stat-label">Periode Selesai</div>
            </div></a>
        </div>
        <div class="col-6 col-md-3">
            <div class="stat-card">
                <div class="stat-icon" style="background:#fce7f3;color:#db2777;"><i class="bi bi-graph-up-arrow"></i></div>
                <div class="stat-number">SAW</div>
                <div class="stat-label">Metode Seleksi</div>
            </div>
        </div>
    </div>
</div>

{{-- ALUR SELEKSI --}}
<div class="container mt-5 pt-3">
    <div class="text-center mb-5">
        <div class="section-title">Alur Proses Seleksi BLT</div>
        <div class="section-sub">Proses seleksi dilakukan secara sistematis dan transparan menggunakan metode SAW</div>
    </div>
    <div class="row g-3 justify-content-center">
        @php
        $alur = [
        ['icon'=>'bi-person-plus-fill','title'=>'Input Data Warga','desc'=>'Perangkat desa menginput data calon penerima beserta informasi sosial ekonomi.'],
        ['icon'=>'bi-clipboard-data-fill','title'=>'Penilaian Kriteria','desc'=>'Setiap warga dinilai berdasarkan 7 kriteria: penghasilan, tanggungan, tempat tinggal, dan lainnya.'],
        ['icon'=>'bi-calculator-fill','title'=>'Perhitungan SAW','desc'=>'Sistem menghitung normalisasi dan skor akhir menggunakan metode Simple Additive Weighting.'],
        ['icon'=>'bi-trophy-fill','title'=>'Ranking & Penetapan','desc'=>'Warga diurutkan berdasarkan skor tertinggi dan ditetapkan sesuai kuota per periode.'],
        ['icon'=>'bi-eye-fill','title'=>'Publikasi Transparan','desc'=>'Hasil seleksi dipublikasikan secara terbuka agar dapat diakses masyarakat.'],
        ];
        @endphp
        @foreach($alur as $i => $step)
        <div class="col-md-6 col-lg-4">
            <div class="alur-step">
                <div class="alur-number">{{ $i+1 }}</div>
                <div>
                    <div style="font-weight:700;color:#1a3c2e;margin-bottom:4px;">
                        <i class="bi {{ $step['icon'] }} me-2 text-green"></i>{{ $step['title'] }}
                    </div>
                    <div style="font-size:0.83rem;color:#6b7280;line-height:1.6;">{{ $step['desc'] }}</div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>

{{-- PERIODE TERBARU --}}
@if($periodeList->isNotEmpty())
<div class="container mt-5 pt-3">
    <div class="text-center mb-4">
        <div class="section-title">Riwayat Periode Seleksi</div>
        <div class="section-sub">Histori seleksi BLT Dana Desa Pungging</div>
    </div>
    <div class="row g-3 justify-content-center">
        @foreach($periodeList as $p)
        <div class="col-md-4">
            <div class="card p-3">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <div style="font-weight:700;color:#1a3c2e;font-size:0.9rem;">{{ $p->nama }}</div>
                    @if($p->status === 'aktif')
                    <span class="badge bg-success">Aktif</span>
                    @else
                    <span class="badge bg-primary">Selesai</span>
                    @endif
                </div>
                <div style="font-size:0.8rem;color:#6b7280;">
                    <i class="bi bi-calendar3 me-1"></i>
                    {{ \Carbon\Carbon::parse($p->tanggal_mulai)->format('d M Y') }} –
                    {{ \Carbon\Carbon::parse($p->tanggal_selesai)->format('d M Y') }}
                </div>
                <div style="font-size:0.8rem;color:#6b7280;margin-top:4px;">
                    <i class="bi bi-people me-1"></i>Kuota: {{ $p->kuota_penerima }} orang
                </div>
                <a href="{{ route('publik.penerima', ['periode_id' => $p->id]) }}" class="btn btn-sm btn-primary mt-3 w-100">
                    <i class="bi bi-list-check me-1"></i>Lihat Penerima
                </a>
                <a href="{{ route('publik.peta', ['periode_id' => $p->id]) }}" class="btn btn-sm btn-outline-success mt-1 w-100">
                    <i class="bi bi-geo-alt me-1"></i>Lihat Peta
                </a>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endif

{{-- TRANSPARANSI BANNER --}}
<div class="container mt-5 pt-3 mb-4">
    <div style="background:linear-gradient(135deg,#1a3c2e,#2d7a4f);border-radius:16px;padding:36px;color:#fff;text-align:center;">
        <i class="bi bi-shield-check" style="font-size:2.5rem;color:#7ee8a2;margin-bottom:12px;display:block;"></i>
        <h4 style="font-weight:800;margin-bottom:8px;">Komitmen Transparansi Desa</h4>
        <p style="color:rgba(255,255,255,0.8);max-width:500px;margin:0 auto 20px;font-size:0.9rem;line-height:1.7;">
            Seleksi BLT dilakukan secara objektif berbasis data menggunakan sistem komputasi.
            Seluruh hasil dapat diverifikasi dan diakses oleh masyarakat.
        </p>
        <div class="d-flex justify-content-center gap-3 flex-wrap">
            <a href="{{ route('publik.penerima') }}" class="hero-btn hero-btn-primary" style="background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);">
                <i class="bi bi-list-ul"></i>Daftar Penerima
            </a>
            <a href="{{ route('publik.peta') }}" class="hero-btn" style="background:rgba(255,255,255,0.1);border:2px solid rgba(255,255,255,0.3);color:#fff;">
                <i class="bi bi-map"></i>Peta Distribusi
            </a>
        </div>
    </div>
</div>

@endsection