@using kehati.Models.View
@{
    ViewData["Title"] = "Beranda";
    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.View.HomeViewModel

<!-- HERO SECTION -->
<section class="relative overflow-hidden">
    <!-- Background Image -->
    <div class="absolute inset-0 -z-10">
        <img src="~/images/hero.jpg"
             asp-append-version="true"
             alt="Kanopi hutan Jakarta"
             class="h-full w-full object-cover" />
        <div class="absolute inset-0 bg-gradient-to-r from-background via-background/85 to-background/40"></div>
    </div>
    <div class="mx-auto max-w-7xl px-4 py-24 sm:px-6 sm:py-32 lg:px-8 lg:py-40">
        <div class="max-w-2xl">
            <!-- Badge -->
            <div class="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3.5 py-1.5 text-xs font-medium text-primary">
                <i data-lucide="sparkles" class="h-3.5 w-3.5"></i>
                Portal Keanekaragaman Hayati DKI Jakarta
            </div>
            <!-- Title -->
            <h1 class="mt-6 font-serif text-5xl leading-[1.05] tracking-tight text-foreground sm:text-6xl lg:text-7xl">
                Menjaga kekayaan hayati
                <em class="text-primary">
                    ibu kota
                </em>.
            </h1>
            <!-- Description -->
            <p class="mt-6 max-w-xl text-lg leading-relaxed text-muted-foreground">
                Jelajahi flora, fauna, dan lokasi konservasi Jakarta.
                Sebuah inisiatif Dinas Lingkungan Hidup untuk mendokumentasikan
                dan melestarikan keragaman hayati di setiap sudut kota.
            </p>
            <!-- Button -->
            <div class="mt-8 flex flex-wrap gap-3">
                <a asp-controller="lokasi"
                   asp-action="Index"
                   class="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-3 text-sm font-medium text-primary-foreground shadow-sm transition-all hover:bg-primary/90 hover:shadow-md">
                    Jelajahi Lokasi
                    <i data-lucide="arrow-right" class="h-4 w-4"></i>
                </a>
                <a asp-controller="katalog"
                   asp-action="Index"
                   class="inline-flex items-center gap-2 rounded-lg border border-border bg-background/80 px-5 py-3 text-sm font-medium text-foreground backdrop-blur transition-colors hover:bg-secondary">
                    Lihat Katalog
                </a>
            </div>
        </div>
    </div>
</section>

<!-- STATISTIK SECTION -->
<section class="border-y border-border/60 bg-secondary/30">
    <div class="mx-auto grid max-w-7xl grid-cols-2 divide-x divide-border/60 px-4 sm:px-6 lg:grid-cols-4 lg:px-8">
        @{
            var stats = new[]
            {
                new {
                    Label = "Lokasi Konservasi",
                    Value = @Model.Statistik.TotalLocations
                },
                new {
                    Label = "Jenis Flora",
                    Value = @Model.Statistik.TotalFlora
                },
                new {
                    Label = "Jenis Fauna",
                    Value = @Model.Statistik.TotalFauna
                },
                new {
                    Label = "Total Spesies",
                    Value = @Model.Statistik.TotalSpecies
                }
            };
        }
        @foreach (var item in stats)
        {
            <div class="px-4 py-8 text-center sm:py-10">
                <div class="font-serif text-4xl text-primary sm:text-5xl">
                    @item.Value
                </div>
                <div class="mt-2 text-xs uppercase tracking-widest text-muted-foreground">
                    @item.Label
                </div>
            </div>
        }
    </div>
</section>

<!-- DESKRIPSI SECTION -->
<section class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
    <div class="grid gap-12 lg:grid-cols-5 lg:gap-16">
        <div class="lg:col-span-2">
        <div class="inline-flex items-center gap-2 text-xs font-medium uppercase tracking-widest text-primary">
            <i data-lucide="leaf" class="h-4 w-4"></i>
            <span>Tentang Keanekaragaman Hayati</span>
        </div>
        <h2 class="mt-4 font-serif text-4xl leading-tight text-foreground">
            Kota yang hidup butuh alam yang beragam.
        </h2>
        </div>
        <div class="space-y-5 text-base leading-relaxed text-muted-foreground lg:col-span-3">
        <p>
            Keanekaragaman hayati adalah keragaman makhluk hidup — dari pohon peneduh
            di taman kota, burung yang berkicau di pagi hari, hingga bakau yang
            menjaga pesisir dari abrasi. Di Jakarta, kekayaan ini tumbuh berdampingan
            dengan kepadatan penduduk lebih dari 10 juta jiwa.
        </p>
        <p>
            Melalui program konservasi ruang hijau, hutan kota, dan kawasan mangrove,
            Dinas Lingkungan Hidup berkomitmen menjaga habitat asli Jakarta. Portal
            ini dirancang agar warga dapat mengenal, mempelajari, dan ikut menjaga
            flora dan fauna yang menjadi warisan alam ibu kota.
        </p>
        </div>
    </div>
</section>

<!-- LOKASI -->
<section class="mx-auto max-w-7xl px-4 pb-20 sm:px-6 lg:px-8">
    <div class="flex items-end justify-between gap-4">
        <div>
            <div class="inline-flex items-center gap-2 text-xs font-medium uppercase tracking-widest text-primary">
                <i data-lucide="map-pin" class="h-4 w-4"></i>
                Lokasi Pilihan
            </div>
            <h2 class="mt-3 font-serif text-4xl text-foreground">
                Habitat di jantung Jakarta
            </h2>
        </div>
        <a asp-controller="LokasiModel"
           asp-action="Index"
           class="hidden shrink-0 items-center gap-1.5 text-sm font-medium text-primary hover:underline sm:inline-flex">
            Semua lokasi
            <i data-lucide="arrow-right" class="h-4 w-4"></i>
        </a>
    </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>

<!-- SPESIES -->

<section class="mx-auto max-w-7xl px-4 pb-24 sm:px-6 lg:px-8">
    <div class="flex items-end justify-between gap-4">
        <div>
            <div class="inline-flex items-center gap-2 text-xs font-medium uppercase tracking-widest text-primary">
                <i data-lucide="leaf" class="h-4 w-4"></i>
                Katalog Pilihan
            </div>
            <h2 class="mt-3 font-serif text-4xl text-foreground">
                Flora & Fauna khas Jakarta
            </h2>
        </div>
        <a asp-controller="Katalog"
           asp-action="Index"
           class="hidden shrink-0 items-center gap-1.5 text-sm font-medium text-primary hover:underline sm:inline-flex">
            Semua spesies
            <i data-lucide="arrow-right" class="h-4 w-4"></i>
        </a>
    </div>
    <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        @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>
</section>