@extends('layouts.app')

@section('content')
    
        <!-- Animated Background Elements -->
        <div class="absolute inset-0 opacity-10">
            <div class="absolute top-20 left-10 w-32 h-32 bg-white rounded-full animate-float"></div>
            <div class="absolute top-40 right-20 w-24 h-24 bg-white rounded-full animate-float" style="animation-delay: 2s;"></div>
            <div class="absolute bottom-20 left-1/4 w-16 h-16 bg-white rounded-full animate-float" style="animation-delay: 4s;"></div>
        </div>
        
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
    <div class="grid lg:grid-cols-2 gap-12 items-center min-h-[80vh]">
        <div class="space-y-8 text-center lg:text-left">
            <div class="space-y-4">
                <div class="inline-flex items-center px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full text-sm font-medium mb-4 text-black">
                    <span class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
                    Siap Melayani 24/7
                </div>
                <h1 class="text-5xl md:text-7xl font-bold leading-tight text-black animated-pulse">               
                    <span class="bg-clip-text text-black animate-pulse">
                        Kelezatan untuk 
                        Setiap Acara
                    </span>
                </h1>
                <p class="text-xl md:text-2xl text-black opacity-90 max-w-2xl">
                    Layanan katering premium dengan cita rasa istimewa untuk momen spesial Anda. 
                    Dari acara intim hingga perayaan besar, kami hadirkan pengalaman kuliner tak terlupakan.
                </p>
                    </div>

                    <!-- Stats -->
                    <div class="grid grid-cols-3 gap-8 pt-8">
                        <div class="text-center">
                            <div class="text-3xl md:text-4xl font-bold mb-2">500+</div>
                            <div class="text-sm opacity-80">Pesanan Sukses</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl md:text-4xl font-bold mb-2">8+</div>
                            <div class="text-sm opacity-80">Menu Pilihan</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl md:text-4xl font-bold mb-2">5★</div>
                            <div class="text-sm opacity-80">Rating Pelanggan</div>
                        </div>
                    </div>
                </div>
                
                <div class="relative">
                    <div class="relative bg-white/10 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-white/20">
                        <img src="https://images.deliveryhero.io/image/fd-sg/LH/w3va-hero.jpg" 
                             alt="Delicious Food" class="rounded-2xl shadow-2xl w-full h-80 object-cover">
                        
                        <!-- Floating Elements -->
                        <div class="absolute -top-4 -right-4 bg-green-500 text-white p-4 rounded-2xl shadow-xl animate-bounce-slow">
                            <div class="text-2xl font-bold">100%</div>
                            <div class="text-xs">Fresh</div>
                        </div>
                        
                        <div class="absolute -bottom-6 -left-6 bg-green-500 text-white p-4 rounded-2xl shadow-xl animate-pulse-slow">
                            <div class="text-2xl font-bold">24/7</div>
                            <div class="text-xs">Available</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
@endsection