@{
    var breadcrumbText = ViewData["BreadcrumbText"] as string ?? "Default Breadcrumb";
    var titleBeforeHighlight = ViewData["TitleBeforeHighlight"] as string ?? "Judul Sebelum";
    var titleHighlight = ViewData["TitleHighlight"] as string ?? "Judul Highlight";
}

<div class="relative bg-white text-gray-800 py-12 container mx-auto max-w-6xl rounded-2xl shadow-2xl overflow-hidden mt-6 h-80">
    <!-- Background Image -->
    <div class="absolute inset-0">
        <img src="@Url.Content("~/assets/images/bg-breadcumb.png")" alt="Background" class="w-full h-full object-cover object-right md:object-center" />
    </div>
    
    <!-- Animated Background Pattern -->
    <div class="absolute inset-0 opacity-15">
        <div class="absolute top-0 left-0 w-48 h-48 bg-green-500 rounded-full mix-blend-multiply filter blur-xl animate-pulse"></div>
        <div class="absolute top-0 right-0 w-48 h-48 bg-green-500 rounded-full mix-blend-multiply filter blur-xl animate-pulse animation-delay-2000"></div>
        <div class="absolute bottom-0 left-1/2 w-48 h-48 bg-amber-500 rounded-full mix-blend-multiply filter blur-xl animate-pulse animation-delay-4000"></div>
    </div>
    
    <!-- Grid Pattern Overlay -->
    <div class="absolute inset-0 bg-gradient-to-r from-transparent via-black/5 to-transparent"></div>
    
    <div class="relative px-6 lg:px-12 h-full flex flex-col justify-center">
        <!-- Modern Breadcrumb -->
        <nav class="flex items-center justify-center lg:justify-start mb-6 hidden md:flex" aria-label="breadcrumb">
            <div class="flex items-center space-x-3 bg-orange-500/10 backdrop-blur-sm rounded-full px-5 py-2 border border-gray-300">
                <a href="@Url.Action("Index", "Home")" class="flex items-center space-x-2 text-gray-700 hover:text-gray-900 transition-all duration-300 group">
                    <div class="p-1.5 bg-green-500/20 rounded-full group-hover:bg-green-500/40 transition-all duration-300">
                        <i class="w-3 h-3" data-lucide="home"></i>
                    </div>
                    <span class="font-medium text-sm">Beranda</span>
                </a>
                <div class="w-px h-4 bg-gray-400"></div>
                <span class="text-gray-800 font-medium text-sm">@breadcrumbText</span>
            </div>
        </nav>

        <!-- Hero Title Section -->
        <div class="text-center lg:text-left max-w-4xl mx-auto lg:mx-0">
            <!-- Main Title with Enhanced Typography -->
            <div class="mb-4">
                <h1 class="text-2xl lg:text-4xl font-black mb-2 leading-tight tracking-tight">
                    <span class="block text-gray-800">@titleBeforeHighlight</span>
                    <span class="block bg-gradient-to-r from-green-600 via-amber-600 to-green-600 bg-clip-text text-transparent animate-pulse">
                        @titleHighlight
                    </span>
                </h1>
            </div>

            <!-- Subtitle with Icon -->
            <div class="flex items-center justify-center lg:justify-start space-x-4 mb-4">
                @* <div class="hidden lg:block w-12 h-px bg-gradient-to-r from-transparent to-green-600"></div> *@
                <div class="flex items-center space-x-3 bg-green-300/10 backdrop-blur-sm rounded-xl px-4 py-2 border border-gray-300">
                    <div class="p-1.5 bg-green-500/20 rounded-full hidden md:block">
                        <i class="w-4 h-4 text-green-600" data-lucide="leaf"></i>
                    </div>
                    <p class="text-sm lg:text-base text-gray-700 font-medium">
                        Dinas Lingkungan Hidup Provinsi DKI Jakarta
                    </p>
                </div>
                @* <div class="hidden lg:block w-12 h-px bg-gradient-to-l from-transparent to-green-600"></div> *@
            </div>

            <!-- Decorative Elements -->
            @* <div class="flex justify-center lg:justify-start items-center space-x-3">
                <div class="w-6 h-6 border-2 border-green-600 rounded-full animate-spin-slow"></div>
                <div class="w-24 h-0.5 bg-gradient-to-r from-green-600 via-green-600 to-amber-600 rounded-full shadow-lg shadow-green-500/50"></div>
                <div class="w-6 h-6 border-2 border-green-600 rounded-full animate-spin-slow animation-reverse"></div>
            </div> *@
        </div>
    </div>

    <!-- Bottom Glow Effect -->
    <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-3/4 h-1 bg-gradient-to-r from-transparent via-green-600 to-transparent blur-sm"></div>
</div>

<register-block dynamic-section="css" key="cssBreadcumb">
<style>
    @@keyframes spin-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .animate-spin-slow {
        animation: spin-slow 8s linear infinite;
    }
    .animation-reverse {
        animation-direction: reverse;
    }
    .animation-delay-2000 {
        animation-delay: 2s;
    }
    .animation-delay-4000 {
        animation-delay: 4s;
    }
</style>
</register-block>