{{-- Banners Block --}}
@props(['block'])

@php
    $banners = App\Helpers\BannerHelper::getActiveBanners();
    $settings = $block->settings ?? [];
    $maxBanners = $settings['max_banners'] ?? 3;
@endphp

<div class="my-8" data-block-id="{{ $block->id }}" data-block-type="banners">
    <div class="grid grid-cols-1 md:grid-cols-{{ min($maxBanners, 3) }} gap-6">
        @foreach($banners->take($maxBanners) as $banner)
            <div class="relative overflow-hidden rounded-lg shadow-lg group">
                @if($banner->image)
                    <img src="{{ Storage::url($banner->image) }}" alt="{{ App\Helpers\BannerHelper::getTitle($banner) }}" class="w-full h-64 object-cover group-hover:scale-110 transition duration-300">
                @endif
                
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
                    <div>
                        <h3 class="text-white text-2xl font-bold mb-2">{{ App\Helpers\BannerHelper::getTitle($banner) }}</h3>
                        @if($banner->button_text)
                            <a href="{{ $banner->link_url }}" class="inline-block bg-white text-coffee-600 px-6 py-2 rounded-lg font-semibold hover:bg-coffee-50 transition">
                                {{ app()->getLocale() === 'ar' ? ($banner->button_text_ar ?? $banner->button_text) : ($banner->button_text_en ?? $banner->button_text) }}
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>