@{
    var bgColor = ViewData["FooterBgColor"]?.ToString() ?? "bg-green-950";
    var hoverColor = ViewData["FooterHoverColor"]?.ToString() ?? "bg-green-800/20";
    var showLeaf = ViewData["FooterShowLeaf"]?.ToString() != "false";
}

<footer class="w-full py-8 lg:py-20 relative @bgColor overflow-hidden">
    @if (showLeaf)
    {
        <!-- Background overlay -->
        <div class="absolute inset-0 overflow-hidden">
            <img src="/images/leaf.svg" class="w-full h-full object-cover opacity-20" alt="Background Pattern" style="mix-blend-mode: overlay;" />
        </div>
    }

    <!-- Footer Content -->
    <div class="w-full mx-auto px-4 lg:px-28 xl:px-48 relative z-10 flex flex-col justify-start items-start gap-2 lg:gap-20">
        <div class="self-stretch flex flex-col lg:flex-row justify-start items-start gap-8">
            <!-- Logo -->
            <div class="flex-1 flex justify-start items-center gap-2 overflow-hidden">
                <div class="w-16 h-16 relative">
                    <img class="w-16 h-16" src="/images/logo-white.png" alt="Logo" />
                </div>
            </div>

            <!-- Navigation Menu -->
            <div class="grid gap-1 lg:gap-3 grid-cols-5">
                <a href="#" class="rounded-full flex justify-center items-center gap-2 hover:@hoverColor px-4 py-2 transition-colors">
                    <div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Beranda</div>
                </a>
                <a href="#" class="rounded-full flex justify-center items-center gap-2 hover:@hoverColor px-4 py-2 transition-colors">
                    <div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Tentang</div>
                </a>
                <a href="#" class="rounded-full flex justify-center items-center gap-2 hover:@hoverColor px-4 py-2 transition-colors">
                    <div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Regulasi</div>
                </a>
                <a href="#" class="rounded-full flex justify-center items-center gap-2 hover:@hoverColor px-4 py-2 transition-colors">
                    <div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Panduan</div>
                </a>
                <a href="#" class="rounded-full flex justify-center items-center gap-2 hover:@hoverColor px-4 py-2 transition-colors">
                    <div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Edukasi</div>
                </a>
            </div>

            <!-- Right space -->
            <div class="flex-1 flex justify-end items-center gap-3"></div>
        </div>

        <!-- Footer Bottom -->
        <div class="self-stretch flex flex-col justify-start items-center gap-8">
            <div class="flex justify-start items-start gap-6">
                <div class="text-white text-sm font-normal leading-tight">
                    Copyright © @DateTime.Now.Year Dinas Lingkungan Hidup Provinsi DKI Jakarta.
                </div>
            </div>
        </div>
    </div>
</footer>