@php
    $height = match ($block->get('height', 'three_quarter')) {
        'auto' => 'min-h-0 py-20', 'half' => 'min-h-[50vh]',
        'three_quarter' => 'min-h-[75vh]', 'full' => 'min-h-screen', default => 'min-h-[75vh]',
    };
    $align = $block->get('align', 'center');
    $alignClass = ['start' => 'text-start items-start', 'center' => 'text-center items-center', 'end' => 'text-end items-end'][$align] ?? 'text-center items-center';
    $buttons = collect($block->get('buttons') ?: []);
    $products = collect($block->get('products') ?: []);
    $slides = collect($block->get('slides') ?: []);
    $split = in_array($variant, ['split_start', 'split_end'], true);
@endphp

<div class="relative {{ $height }} flex items-center">
    @if ($variant === 'video_bg' && $block->get('video_url'))
        <video class="absolute inset-0 -z-10 h-full w-full object-cover" autoplay muted loop playsinline aria-hidden="true">
            <source src="{{ $block->get('video_url') }}">
        </video>
        <div class="absolute inset-0 -z-10 bg-black/50" aria-hidden="true"></div>
    @endif

    @if ($variant === 'slideshow' && $slides->isNotEmpty())
        <div class="absolute inset-0 -z-10 ec-hero-slideshow" x-data="{ i: 0, n: {{ $slides->count() }} }"
             x-init="setInterval(() => i = (i + 1) % n, 6000)">
            @foreach ($slides as $idx => $slide)
                <img src="{{ is_array($slide) ? ($slide['url'] ?? '') : $slide }}" alt=""
                     class="absolute inset-0 h-full w-full object-cover transition-opacity duration-1000"
                     x-bind:class="i === {{ $idx }} ? 'opacity-100' : 'opacity-0'">
            @endforeach
        </div>
        <div class="absolute inset-0 -z-10 bg-black/45" aria-hidden="true"></div>
    @endif

    <div class="relative max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8">
        <div class="@if ($split) grid md:grid-cols-2 gap-12 items-center @endif">

            @if ($split && $variant === 'split_start' && $block->get('image'))
                <div class="order-1"><img src="{{ $block->get('image') }}" alt="{{ $block->get('title') }}" class="w-full rounded-2xl object-cover"></div>
            @endif

            <div class="flex flex-col gap-6 {{ $split ? 'text-start items-start' : $alignClass }} @if (! $split) max-w-3xl mx-auto @endif">
                @if ($block->get('eyebrow'))
                    <p class="ec-eyebrow text-base font-medium tracking-wide">{{ $block->get('eyebrow') }}</p>
                @endif
                <h1 class="ec-heading text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight">{{ $block->get('title') }}</h1>
                @if ($block->get('subtitle'))
                    <p class="ec-muted text-lg sm:text-xl leading-relaxed max-w-2xl">{{ $block->get('subtitle') }}</p>
                @endif

                @if ($buttons->isNotEmpty())
                    <div class="flex flex-wrap gap-3 {{ $align === 'center' && ! $split ? 'justify-center' : '' }}">
                        @foreach ($buttons as $btn)
                            @php $btnHref = safe_url(data_get($btn, 'url')); @endphp
                            @continue (! $btnHref)
                            <a href="{{ $btnHref }}"
                               class="ec-btn ec-btn--{{ data_get($btn, 'style', 'primary') }} inline-flex items-center gap-2 rounded-full px-7 py-3 font-semibold transition">
                                @if (data_get($btn, 'icon'))
                                    <x-website.icon :name="data_get($btn, 'icon')" class="w-5 h-5" />
                                @endif
                                {{ $block->get("buttons.{$loop->index}.label") ?: data_get($btn, 'label') }}
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>

            @if ($variant === 'product_showcase' && $products->isNotEmpty())
                <div x-data="{ active: 0, back: false }" class="flex flex-col items-center gap-6">
                    <div class="relative w-full max-w-sm aspect-square">
                        @foreach ($products as $idx => $product)
                            @foreach (['front', 'back'] as $face)
                                @if (data_get($product, $face))
                                    <img src="{{ data_get($product, $face) }}"
                                         alt="{{ data_get($product, 'name') }}"
                                         class="absolute inset-0 h-full w-full object-contain transition-all duration-500"
                                         x-bind:class="(active === {{ $idx }} && back === {{ $face === 'back' ? 'true' : 'false' }}) ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'">
                                @endif
                            @endforeach
                        @endforeach
                    </div>
                    <div class="flex items-center gap-3">
                        @foreach ($products as $idx => $product)
                            <button type="button" x-on:click="active = {{ $idx }}"
                                    class="w-8 h-8 rounded-full border-2 transition"
                                    x-bind:class="active === {{ $idx }} ? 'ring-2 ring-offset-2 scale-110' : 'opacity-70'"
                                    style="background:{{ data_get($product, 'swatch', '#ccc') }}"
                                    aria-label="{{ data_get($product, 'name') }}"></button>
                        @endforeach
                    </div>
                    <button type="button" x-on:click="back = !back" class="ec-muted text-sm underline">
                        <span x-show="!back">{{ __('عرض الخلف') }}</span>
                        <span x-show="back" x-cloak>{{ __('عرض الأمام') }}</span>
                    </button>
                </div>
            @elseif ($split && $variant === 'split_end' && $block->get('image'))
                <div><img src="{{ $block->get('image') }}" alt="{{ $block->get('title') }}" class="w-full rounded-2xl object-cover"></div>
            @endif
        </div>
    </div>

    @if ($block->get('show_scroll_hint', true) && $variant !== 'centered_minimal')
        <div class="absolute bottom-8 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 ec-bounce-subtle" aria-hidden="true">
            <svg class="w-6 h-6 opacity-70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
            </svg>
        </div>
    @endif
</div>
