<section class="section-padding flex items-center relative border-b border-border/30">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
        <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            {{-- Left Content --}}
            <div class="space-y-8">
                <div class="space-y-6 slide-right delay-200">
                    <h1 class="text-hero-alt">
                        {!! $content['title'] !!}
                    </h1>
                    <p class="text-xl text-muted-foreground max-w-md leading-relaxed">
                        {!! $content['subtitle'] !!}
                    </p>
                </div>

                <div class="flex flex-col sm:flex-row gap-4 slide-right delay-300">
                    <a href="{{ $content['cta1_link'] }}" class="btn-primary-accent">
                        {{ $content['cta1_text'] }}
                    </a>
                    <a href="{{ $content['cta2_link'] }}" class="btn-secondary-accent">
                        {{ $content['cta2_text'] }}
                    </a>
                </div>

                    @if(isset($content['stats']))
                    <div class="flex flex-wrap items-center gap-6 pt-10 mt-10 border-t border-border/80 slide-right delay-300">
                        @foreach ($content['stats'] as $stat)
                            <div class="flex items-center gap-2 text-md text-muted-foreground font-light">
                                @svg('heroicon-o-check-circle', 'w-6 h-6 text-secondary')
                                <span>{{ $stat }}</span>
                            </div>
                        @endforeach
                    </div>
                    @endif

            </div>

            {{-- Right Image --}}
            <div class="relative">
                <div class="relative rounded-3xl overflow-hidden shadow-elevated slide-left delay-300">
                    <img src="{{ asset('img/assets/' . $content['image']) }}" alt="{{ $content['image_alt'] }}"
                        class="w-full h-[600px] object-cover" />
                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                </div>

                {{-- Floating info card --}}
                <div
                class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50 slide-left delay-400">
                <div class="text-xl font-medium text-muted-foreground">{{ $content['card_title'] }}</div>
                <div class="text-lg font-medium font-secondary">{!! $content['card_text'] !!}</div>
            </div>
            </div>
        </div>
    </div>
</section>
