@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') ?: []);
    // product_showcase is a split layout too: copy on one side, the showcase on
    // the other. Without this the showcase stacked under a centred headline.
    $split = in_array($variant, ['split_start', 'split_end', 'product_showcase'], true);

    // Ambient motion for the showcase image only — the section around it stays put.
    $showcaseMotion = trim([
        'float' => 'ec-float',
        'glow' => 'ec-glow',
        'float_glow' => 'ec-float ec-glow',
    ][$block->get('showcase_motion', 'none')] ?? '');
@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 {{ $showcaseMotion }}"><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">
                    {!! website_highlight($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") ?: website_text(data_get($btn, 'label')) }}
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>

            @if ($variant === 'product_showcase' && $products->isNotEmpty())
                @php
                    $autoplay = (bool) $block->get('showcase_autoplay', true);
                    $interval = (int) ($block->get('showcase_interval') ?: 2500);
                    $controls = (bool) $block->get('showcase_controls');
                @endphp

                {{--
                    Each design holds for a beat, turns on its Y axis to show the
                    back, holds again, then hands over to the next. A real 3D flip
                    rather than a crossfade between two pictures, so the garment
                    reads as one object being turned around.
                --}}
                <div class="flex flex-col items-center gap-6"
                     x-data="{
                        i: 0,
                        back: false,
                        n: {{ $products->count() }},
                        timer: null,
                        reduced: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
                        step() {
                            if (this.back) { this.back = false; this.i = (this.i + 1) % this.n; }
                            else { this.back = true; }
                        },
                        start() {
                            @if ($autoplay)
                            if (this.reduced || this.n < 1) return;
                            this.timer = setInterval(() => this.step(), {{ $interval }});
                            @endif
                        },
                        stop() { clearInterval(this.timer); this.timer = null; },
                        show(idx) { this.stop(); this.i = idx; this.back = false; this.start(); },
                     }"
                     x-init="start()"
                     x-on:mouseenter="stop()" x-on:mouseleave="start()">

                    <div class="ec-jersey-stage relative w-full max-w-md aspect-square {{ $showcaseMotion }}">
                        @foreach ($products as $idx => $product)
                            @php
                                $front = data_get($product, 'front');
                                $back = data_get($product, 'back') ?: $front;
                                $label = website_text(data_get($product, 'name'));
                            @endphp
                            @continue (! $front)
                            <div class="ec-jersey-card" x-bind:class="i === {{ $idx }} && 'is-active'"
                                 @if ($idx > 0) aria-hidden="true" @endif>
                                <div class="ec-jersey-inner" x-bind:class="(i === {{ $idx }} && back) && 'is-flipped'">
                                    <img src="{{ $front }}" alt="{{ $label }}"
                                         class="ec-jersey-face" @if ($idx > 0) loading="lazy" @endif>
                                    <img src="{{ $back }}" alt="" aria-hidden="true"
                                         class="ec-jersey-face ec-jersey-face--back" loading="lazy">
                                </div>
                            </div>
                        @endforeach
                    </div>

                    @if ($controls)
                        <div class="flex items-center gap-2.5">
                            @foreach ($products as $idx => $product)
                                <button type="button" x-on:click="show({{ $idx }})"
                                        class="h-1.5 rounded-full transition-all"
                                        x-bind:class="i === {{ $idx }} ? 'w-6 bg-[var(--site-accent)]' : 'w-1.5 bg-current opacity-40'"
                                        aria-label="{{ website_text(data_get($product, 'name')) ?: __('تصميم').' '.($idx + 1) }}"></button>
                            @endforeach
                        </div>
                    @endif
                </div>
            @elseif ($split && $variant === 'split_end' && $block->get('image'))
                <div class="{{ $showcaseMotion }}"><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>
