@using kehati.Models.View
@{
    ViewData["Title"] = "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">
        @foreach(LokasiModel loc in Model.FeaturedLocations)
        {
            <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>
                                @loc.FloraCount Flora
                            </span>
                            <span class="flex items-center gap-1">
                                <i data-lucide="bird"
                                class="h-4 w-4 text-primary"></i>
                                @loc.FaunaCount Fauna
                            </span>
                        </div>
                    </div>
                </a>
        }
    </div>
</section>