@extends('layouts.app')
@section('content')
<div class="grid gap-6 lg:grid-cols-[.9fr_1.1fr]">
    <section class="card overflow-hidden p-8">
        <span class="badge"><i class="fa-solid fa-seedling"></i> Profil Lingkungan</span>
        <h2 class="mt-5 text-4xl font-black tracking-tight text-slate-950">{{ $settings['profile_title'] }}</h2>
        <p class="mt-4 text-lg leading-8 text-slate-600">{{ $settings['profile_description'] }}</p>
        <div class="mt-8 grid gap-4 sm:grid-cols-2">
            <div class="rounded-3xl bg-teal-50 p-5 ring-1 ring-teal-100"><i class="fa-solid fa-map-location-dot mb-3 text-2xl text-teal-700"></i><p class="text-sm font-bold text-teal-700">Wilayah</p><h3 class="mt-1 text-2xl font-black">{{ $settings['area_name'] }}</h3></div>
            <div class="rounded-3xl bg-emerald-50 p-5 ring-1 ring-emerald-100"><i class="fa-solid fa-hand-holding-heart mb-3 text-2xl text-emerald-700"></i><p class="text-sm font-bold text-emerald-700">Layanan</p><h3 class="mt-1 text-2xl font-black">{{ $settings['main_services'] }}</h3></div>
        </div>
    </section>
    <section class="grid gap-4">
        @foreach([['Keamanan Lingkungan','Ronda warga, pengingat jadwal, dan denda ronda tercatat rapi.','fa-shield-halved'],['Kebersihan & Jimpitan','Program kebersihan dan jimpitan lebih transparan untuk warga.','fa-broom'],['Layanan Administrasi','Permohonan surat pengantar bisa diajukan online.','fa-file-signature'],['Pengaduan Warga','Laporan warga masuk ke pengurus dan dapat ditindaklanjuti.','fa-bullhorn']] as $item)
            <div class="card flex gap-5 p-5"><div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-slate-950 text-2xl text-white"><i class="fa-solid {{ $item[2] }}"></i></div><div><h3 class="text-lg font-black text-slate-950">{{ $item[0] }}</h3><p class="mt-1 leading-6 text-slate-500">{{ $item[1] }}</p></div></div>
        @endforeach
    </section>
</div>
@endsection