@extends('layouts.app')
@section('content')
<section class="relative overflow-hidden rounded-[2rem] border border-white/70 bg-slate-950 px-6 py-12 shadow-soft sm:px-10 lg:px-14">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(20,184,166,.55),transparent_35%),radial-gradient(circle_at_bottom_right,rgba(34,197,94,.42),transparent_30%)]"></div>
    <div class="absolute inset-0 opacity-20 bg-grid"></div>
    <div class="relative grid items-center gap-10 lg:grid-cols-[1.08fr_.92fr]">
        <div>
            <div class="mb-5 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-bold text-teal-100 backdrop-blur"><i class="fa-solid fa-sparkles text-emerald-300"></i> Pelayanan Warga Digital</div>
            <h2 class="max-w-3xl text-4xl font-black tracking-tight text-white sm:text-5xl lg:text-6xl">{{ $settings['cluster_name'] ?? 'Website RT Digital' }}</h2>
            <p class="mt-5 max-w-2xl text-lg leading-8 text-slate-300">Sistem informasi Cluster Permata RT015/RW008 Telaga Asih Cikarang Barat untuk profil lingkungan, struktur organisasi, program RT, permohonan surat, pengaduan warga, iuran, ronda, dan jimpitan.</p>
            <div class="mt-8 flex flex-wrap gap-3">@auth<a class="btn-primary" href="{{ route('letters.create') }}"><i class="fa-solid fa-file-signature"></i>Ajukan Surat</a><a class="rounded-2xl border border-white/15 bg-white/10 px-5 py-3 font-extrabold text-white backdrop-blur transition hover:bg-white/20" href="{{ route('payments.index') }}"><i class="fa-solid fa-wallet"></i> Lihat Keuangan</a>@else<a class="btn-primary" href="{{ route('login') }}"><i class="fa-solid fa-right-to-bracket"></i>Login untuk Akses Layanan</a>@endauth</div>
        </div>
        <div class="grid gap-4 sm:grid-cols-2">@foreach([['Iuran Bulanan','Reminder otomatis via WhatsApp','fa-credit-card'],['Pengaduan Warga','Tracking status laporan','fa-bullhorn'],['Program RT','Rencana, progress, laporan','fa-clipboard-list'],['Ronda & Jimpitan','Jadwal warga dan jimpitan','fa-shield-halved']] as $item)<div class="rounded-3xl border border-white/15 bg-white/10 p-5 text-white backdrop-blur-xl transition hover:-translate-y-1 hover:bg-white/15">
                <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-white/10 text-2xl text-emerald-300 ring-1 ring-white/15"><i class="fa-solid {{ $item[2] }}"></i></div>
                <h3 class="text-lg font-black">{{ $item[0] }}</h3>
                <p class="mt-1 text-sm text-slate-300">{{ $item[1] }}</p>
            </div>@endforeach</div>
    </div>
</section>
<section class="mt-8 grid gap-5 md:grid-cols-2 lg:grid-cols-4">@foreach([['Laporan Keuangan','Daftar iuran, tunggakan, denda ronda, dan kwitansi WA.','payments.index','Buka','fa-sack-dollar'],['Program RT','Rencana kegiatan, progress, dan laporan kegiatan.','programs.index','Buka','fa-rocket'],['Permohonan Surat','Warga isi form, pengurus mendapat notifikasi WA.','letters.create','Ajukan','fa-file-lines'],['Pengaduan Warga','Warga isi form, pengurus menindaklanjuti.','complaints.create','Laporkan','fa-bell']] as $card)<div class="card group p-6 transition hover:-translate-y-1 hover:shadow-soft">
        <div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-teal-100 to-emerald-100 text-2xl text-emerald-700 ring-1 ring-teal-100 transition group-hover:scale-110"><i class="fa-solid {{ $card[4] }}"></i></div>
        <h3 class="text-xl font-black text-slate-950">{{ $card[0] }}</h3>
        <p class="mt-2 min-h-[52px] text-sm leading-6 text-slate-500">{{ $card[1] }}</p>@auth<a class="mt-5 btn-soft w-full" href="{{ route($card[2]) }}">{{ $card[3] }} <i class="fa-solid fa-arrow-right text-xs"></i></a>@else<a class="mt-5 btn-soft w-full" href="{{ route('login') }}">Login dulu <i class="fa-solid fa-lock text-xs"></i></a>@endauth
    </div>@endforeach</section>
@endsection