@props(['title' => null, 'subtitle' => null, 'generasi' => null])

<section
@if($generasi == '1')
    class="bg-gradient-to-br from-[#198754]/95 via-[#0d5738]/90 to-[#000000]/95 border-2 border-green-400/40 rounded-2xl p-6 md:p-8 shadow-2xl backdrop-blur-lg hover:border-green-300/50 transition-all-smooth hover:shadow-[0_20px_60px_rgba(25,135,84,0.3)]"
@elseif($generasi == '2')
    class="bg-gradient-to-br from-[#0d6efd]/95 via-[#0847a6]/90 to-[#000000]/95 border-2 border-blue-400/40 rounded-2xl p-6 md:p-8 shadow-2xl backdrop-blur-lg hover:border-blue-300/50 transition-all-smooth hover:shadow-[0_20px_60px_rgba(13,110,253,0.3)]"
@elseif($generasi == '3')
    class="bg-gradient-to-br from-[#dc3545]/95 via-[#a02332]/90 to-[#000000]/95 border-2 border-red-400/40 rounded-2xl p-6 md:p-8 shadow-2xl backdrop-blur-lg hover:border-red-300/50 transition-all-smooth hover:shadow-[0_20px_60px_rgba(220,53,69,0.3)]"
@else
    class="bg-gradient-to-br from-white/10 via-white/5 to-transparent border-2 border-white/30 rounded-2xl p-6 md:p-8 shadow-2xl backdrop-blur-lg hover:border-white/40 transition-all-smooth hover:shadow-[0_20px_60px_rgba(255,255,255,0.15)]"
@endif
>
    @if($title)
        <h1 class="text-2xl md:text-3xl font-bold mb-2 text-white animate-fade-in">{{ $title }}</h1>
    @endif
    @if($subtitle)
        <p class="text-white/90 mb-6 text-sm md:text-base animate-fade-in" style="animation-delay: 0.2s;">{{ $subtitle }}</p>
    @endif

    <div class="animate-fade-in" style="animation-delay: 0.4s;">
        {{ $slot }}
    </div>
</section>