@using kehati.Models.View
@using kehati.Models.Entity.Master
@using kehati.Models.Common

@{
    ViewData["Title"] = "Lokasi";
    var lokasi = ViewBag.LokasiHome as PagedResult<Lokasi>;
}

<section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
    <div class="max-w-2xl">
        <div class="text-xs font-medium uppercase tracking-widest text-primary">
          Lokasi Konservasi
        </div>
        <h1 class="mt-3 font-serif text-5xl leading-tight text-foreground">
          Habitat yang kami jaga
        </h1>
        <p class="mt-4 text-lg text-muted-foreground">
          Ruang hijau, hutan kota, dan kawasan mangrove yang menjadi rumah bagi flora
          dan fauna Jakarta.
        </p>
    </div>
    <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        @if (lokasi != null)
        {
            @foreach (Lokasi loc in lokasi.Items)
            {
                <a asp-controller="lokasi"
                    asp-action="detail"
                    asp-route-slug="@loc.Slug"
                    class="group block overflow-hidden rounded-2xl border border-border bg-card transition-all hover:-translate-y-1 hover:shadow-lg">
                        <!-- Image -->
                        <div class="relative aspect-[16/10] overflow-hidden bg-muted">
                            <img src="~/images/@loc.Image"
                                alt="@loc.Name"
                                loading="lazy"
                                asp-append-version="true"
                                class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />
                            <!-- Gradient -->
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent"></div>
                            <!-- Overlay Text -->
                            <div class="absolute inset-x-0 bottom-0 p-4 text-white">
                                <div class="flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-white/80">
                                    <i data-lucide="map-pin" class="h-3 w-3"></i>
                                    @loc.Region
                                </div>
                                <h3 class="mt-1 font-serif text-xl leading-tight">
                                    @loc.Name
                                </h3>
                            </div>
                        </div>
                        <!-- Footer Card -->
                        <div class="flex items-center justify-between p-4 text-sm">
                            <span class="text-muted-foreground">
                                @loc.Area
                            </span>
                            <div class="flex gap-3 text-foreground">
                                <span class="flex items-center gap-1">
                                    <i data-lucide="leaf"
                                    class="h-4 w-4 text-primary"></i>
                                    12 Flora
                                </span>
                                <span class="flex items-center gap-1">
                                    <i data-lucide="bird"
                                    class="h-4 w-4 text-primary"></i>
                                    13 Fauna
                                </span>
                            </div>
                        </div>
                </a>
            }
        }else{
            <h4>Data Tidak Ada</h4>
        }
    </div>
    <partial name="_Pagination" model="lokasi" />
</section>