@{
    ViewData["Title"] = "Tentang";
}

<div class="mx-auto max-w-5xl px-4 py-20 sm:px-6 lg:px-8">
    <div class="max-w-2xl">
        <div class="text-xs font-medium uppercase tracking-widest text-primary">
            Tentang Kami
        </div>
        <h1 class="mt-3 font-serif text-5xl leading-tight text-foreground">
            Dinas Lingkungan Hidup Provinsi DKI Jakarta
        </h1>
    </div>
    <div class="mt-10 space-y-6 text-lg leading-relaxed text-muted-foreground">
        <p>
            Portal <em class="text-foreground">Kehati Jakarta</em> adalah inisiatif
            Dinas Lingkungan Hidup Provinsi DKI Jakarta untuk mendokumentasikan
            keanekaragaman hayati ibu kota — flora, fauna, dan kawasan konservasi yang
            menjadi rumah bagi mereka.
        </p>
        <p>
            Jakarta bukan hanya kota metropolitan. Di sela-sela gedung tinggi dan
            padatnya lalu lintas, terdapat taman kota, hutan kota, dan hutan mangrove
            yang menjadi habitat penting bagi ratusan spesies. Portal ini dirancang agar
            warga dapat mengenal, mempelajari, dan ikut menjaga warisan alam Jakarta.
        </p>
    </div>
    <!-- Pillars -->
    <div class="mt-16 grid gap-5 sm:grid-cols-2">
        <div class="rounded-2xl border border-border bg-card p-6">
            <span class="flex h-11 w-11 items-center justify-center rounded-lg bg-primary/10 text-primary">
                <i data-lucide="trees" class="h-5 w-5"></i>
            </span>
            <h3 class="mt-4 font-serif text-xl text-foreground">
                Ruang Hijau
            </h3>
            <p class="mt-2 text-sm leading-relaxed text-muted-foreground">
                Melestarikan taman kota dan hutan kota sebagai paru-paru Jakarta.
            </p>
        </div>
        <div class="rounded-2xl border border-border bg-card p-6">
            <span class="flex h-11 w-11 items-center justify-center rounded-lg bg-primary/10 text-primary">
                <i data-lucide="fish" class="h-5 w-5"></i>
            </span>
            <h3 class="mt-4 font-serif text-xl text-foreground">
                Mangrove &amp; Pesisir
            </h3>
            <p class="mt-2 text-sm leading-relaxed text-muted-foreground">
                Menjaga kawasan mangrove sebagai benteng alami pesisir utara Jakarta.
            </p>
        </div>
        <div class="rounded-2xl border border-border bg-card p-6">
            <span class="flex h-11 w-11 items-center justify-center rounded-lg bg-primary/10 text-primary">
                <i data-lucide="shield-check" class="h-5 w-5"></i>
            </span>
            <h3 class="mt-4 font-serif text-xl text-foreground">
                Konservasi Spesies
            </h3>
            <p class="mt-2 text-sm leading-relaxed text-muted-foreground">
                Mendokumentasikan dan melindungi flora dan fauna khas Jakarta.
            </p>
        </div>
        <div class="rounded-2xl border border-border bg-card p-6">
            <span class="flex h-11 w-11 items-center justify-center rounded-lg bg-primary/10 text-primary">
                <i data-lucide="leaf" class="h-5 w-5"></i>
            </span>
            <h3 class="mt-4 font-serif text-xl text-foreground">
                Edukasi Publik
            </h3>
            <p class="mt-2 text-sm leading-relaxed text-muted-foreground">
                Membangun kesadaran warga akan pentingnya keanekaragaman hayati.
            </p>
        </div>
    </div>
    <!-- Contact -->
    <div class="mt-16 rounded-2xl border border-primary/20 bg-primary/5 p-8 sm:p-10">
        <h2 class="font-serif text-2xl text-foreground">
            Hubungi Kami
        </h2>
        <div class="mt-4 space-y-2 text-sm text-muted-foreground">
            <div>Dinas Lingkungan Hidup Provinsi DKI Jakarta</div>
            <div>
                Jl. Mandala V No.67, Cililitan, Jakarta Timur
            </div>
            <div>
                Situs:
                <a href="https://lingkunganhidup.jakarta.go.id"
                   target="_blank"
                   class="text-primary hover:underline">
                    lingkunganhidup.jakarta.go.id
                </a>
            </div>

        </div>

    </div>

</div>