@{
    ViewData["Title"] = "Lokasi Detail";
    var statusColor = new Dictionary<string, string>
    {
        { "Aman", "bg-primary/10 text-primary border-primary/20" },
        { "Rentan", "bg-amber-100 text-amber-800 border-amber-200" },
        { "Terancam", "bg-orange-100 text-orange-800 border-orange-200" },
        { "Kritis", "bg-red-100 text-red-800 border-red-200" },
        { "Dilindungi", "bg-emerald-100 text-emerald-800 border-emerald-200" }
    };
    @model kehati.Models.HomeViewModel
    var flora = Model.FeaturedSpesies.Where(x => x.Type == "flora").ToList();
    var fauna = Model.FeaturedSpesies.Where(x => x.Type == "fauna").ToList();
}

<div>
    <div class="relative h-[45vh] min-h-[320px] overflow-hidden">
        <img src="~/images/@Model.Location.Image" asp-append-version="true" alt="@Model.Location.Name" class="h-full w-full object-cover"/>
        <div class="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-background/10"></div>
    </div>
</div>

<div class="mx-auto mt-24 max-w-5xl px-4 sm:px-6 lg:px-8">
    <div class="rounded-2xl border border-border bg-card p-8 shadow-sm sm:p-10">
        <a asp-controller="lokasi"
           asp-action="index"
           class="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground">
            <i data-lucide="arrow-left" class="h-4 w-4"></i>
            Semua lokasi
        </a>
        <h1 class="mt-4 font-serif text-4xl leading-tight text-foreground sm:text-5xl">
            @Model.Location.Name
        </h1>
        <div class="mt-4 flex flex-wrap gap-x-6 gap-y-2 text-sm text-muted-foreground">
            <span class="inline-flex items-center gap-1.5">
                <i data-lucide="map-pin" class="h-4 w-4 text-primary"></i>
                @Model.Location.Region
            </span>
            <span class="inline-flex items-center gap-1.5">
                <i data-lucide="ruler" class="h-4 w-4 text-primary"></i>
                @Model.Location.Area
            </span>
        </div>
        <p class="mt-6 max-w-3xl text-base leading-relaxed text-muted-foreground">
            @Model.Location.Description
        </p>
        <div class="mt-6 flex gap-8 text-sm">
            <div>
                <div class="font-serif text-3xl text-primary">
                    @Model.Location.FloraCount
                </div>
                <div class="text-xs uppercase tracking-widest text-muted-foreground">
                    Flora
                </div>
            </div>
            <div>
                <div class="font-serif text-3xl text-primary">
                    @Model.Location.FaunaCount
                </div>
                <div class="text-xs uppercase tracking-widest text-muted-foreground">
                    Fauna
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8">

    <div class="flex flex-wrap gap-3">
        <button class="tab-btn active" data-tab="all">
            Semua (@Model.FeaturedSpesies.Count)
        </button>
        <button class="tab-btn" data-tab="flora">
            Flora (@flora.Count)
        </button>
        <button class="tab-btn" data-tab="fauna">
            Fauna (@fauna.Count)
        </button>
    </div>

    <div id="tab-all" class="tab-content mt-8">

        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">

            @foreach(SpesiesModel s in Model.FeaturedSpesies)
            {
                <a asp-controller="katalog" asp-action="detail" asp-route-slug="@s.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-[4/3] overflow-hidden bg-muted">
                            <img src="~/images/@s.Image"
                                alt="@s.CommonName"
                                loading="lazy"
                                asp-append-version="true"
                                class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />

                            <!-- Type Badge -->
                            <div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full bg-background/90 px-2.5 py-1 text-[11px] font-medium capitalize backdrop-blur">
                                @if(s.Type == "Flora")
                                {
                                    <i data-lucide="leaf" class="h-3 w-3"></i>
                                }
                                else
                                {
                                    <i data-lucide="bird" class="h-3 w-3"></i>
                                }
                                @s.Type
                            </div>
                        </div>
                        <!-- Content -->
                        <div class="p-4">
                            <div class="flex items-start justify-between gap-2">
                                <h3 class="font-serif text-lg leading-tight text-foreground">
                                    @s.CommonName
                                </h3>
                            </div>
                            <p class="mt-0.5 text-xs italic text-muted-foreground">
                                @s.ScientificName
                            </p>
                            <!-- Status Badge -->
                            <div class="mt-3">
                                <span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-medium
                                    @(statusColor.ContainsKey(s.ConservationStatus)
                                        ? statusColor[s.ConservationStatus]
                                        : "")">
                                    @s.ConservationStatus
                                </span>
                            </div>
                        </div>
                    </a>
                }
        </div>

    </div>

    <div id="tab-flora" class="tab-content mt-8 hidden">

        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">

            @foreach(var s in flora)
            {
                <a asp-controller="katalog" asp-action="detail" asp-route-slug="@s.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-[4/3] overflow-hidden bg-muted">
                        <img src="~/images/@s.Image"
                            alt="@s.CommonName"
                            loading="lazy"
                            asp-append-version="true"
                            class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />

                        <!-- Type Badge -->
                        <div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full bg-background/90 px-2.5 py-1 text-[11px] font-medium capitalize backdrop-blur">
                            @if(s.Type == "Flora")
                            {
                                <i data-lucide="leaf" class="h-3 w-3"></i>
                            }
                            else
                            {
                                <i data-lucide="bird" class="h-3 w-3"></i>
                            }
                            @s.Type
                        </div>
                    </div>
                    <!-- Content -->
                    <div class="p-4">
                        <div class="flex items-start justify-between gap-2">
                            <h3 class="font-serif text-lg leading-tight text-foreground">
                                @s.CommonName
                            </h3>
                        </div>
                        <p class="mt-0.5 text-xs italic text-muted-foreground">
                            @s.ScientificName
                        </p>
                        <!-- Status Badge -->
                        <div class="mt-3">
                            <span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-medium
                                @(statusColor.ContainsKey(s.ConservationStatus)
                                    ? statusColor[s.ConservationStatus]
                                    : "")">
                                @s.ConservationStatus
                            </span>
                        </div>
                    </div>
                </a>
            }

        </div>

    </div>

    <div id="tab-fauna" class="tab-content mt-8 hidden">

        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">

            @foreach(SpesiesModel s in fauna)
            {
                <a asp-controller="katalog" asp-action="detail" asp-route-slug="@s.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-[4/3] overflow-hidden bg-muted">
                        <img src="~/images/@s.Image"
                            alt="@s.CommonName"
                            loading="lazy"
                            asp-append-version="true"
                            class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />

                        <!-- Type Badge -->
                        <div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full bg-background/90 px-2.5 py-1 text-[11px] font-medium capitalize backdrop-blur">
                            @if(s.Type == "Flora")
                            {
                                <i data-lucide="leaf" class="h-3 w-3"></i>
                            }
                            else
                            {
                                <i data-lucide="bird" class="h-3 w-3"></i>
                            }
                            @s.Type
                        </div>
                    </div>
                    <!-- Content -->
                    <div class="p-4">
                        <div class="flex items-start justify-between gap-2">
                            <h3 class="font-serif text-lg leading-tight text-foreground">
                                @s.CommonName
                            </h3>
                        </div>
                        <p class="mt-0.5 text-xs italic text-muted-foreground">
                            @s.ScientificName
                        </p>
                        <!-- Status Badge -->
                        <div class="mt-3">
                            <span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-medium
                                @(statusColor.ContainsKey(s.ConservationStatus)
                                    ? statusColor[s.ConservationStatus]
                                    : "")">
                                @s.ConservationStatus
                            </span>
                        </div>
                    </div>
                </a>
            }

        </div>

    </div>
</div>

@section Scripts{

<script>

document.querySelectorAll(".tab-btn").forEach(btn=>{

    btn.addEventListener("click",function(){

        document.querySelectorAll(".tab-btn")
            .forEach(x=>x.classList.remove("active"));

        this.classList.add("active");

        document.querySelectorAll(".tab-content")
            .forEach(x=>x.classList.add("hidden"));

        document
            .getElementById("tab-"+this.dataset.tab)
            .classList.remove("hidden");

    });

});

</script>

}