@php
    $features = collect($block->get('features') ?: []);
    $stores = collect([
        ['url' => $block->get('ios_url'), 'badge' => $block->get('ios_badge'), 'label' => __('App Store'), 'sub' => __('حمّل من')],
        ['url' => $block->get('android_url'), 'badge' => $block->get('android_badge'), 'label' => __('Google Play'), 'sub' => __('احصل عليه من')],
        ['url' => $block->get('huawei_url'), 'badge' => $block->get('huawei_badge'), 'label' => __('AppGallery'), 'sub' => __('احصل عليه من')],
    ])->filter(fn ($s) => filled($s['url']));
    $split = in_array($variant, ['split', 'floating_mockup'], true);
@endphp
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="{{ $split ? 'grid md:grid-cols-2 gap-12 items-center' : 'text-center max-w-3xl mx-auto' }}">
        <div class="flex flex-col gap-5 {{ $split ? 'text-start' : 'items-center' }}">
            @if ($block->get('eyebrow'))
                <p class="ec-eyebrow text-sm font-semibold uppercase tracking-widest">{{ $block->get('eyebrow') }}</p>
            @endif
            <h2 class="ec-heading text-3xl sm:text-4xl font-bold">{{ $block->get('title') }}</h2>
            @if ($block->get('description'))
                <div class="ec-prose ec-muted leading-relaxed">{!! clean_html($block->get('description')) !!}</div>
            @endif

            @if ($features->isNotEmpty())
                <ul class="grid sm:grid-cols-2 gap-4 mt-2 w-full">
                    @foreach ($features as $i => $f)
                        <li class="flex items-start gap-3">
                            <x-website.icon :name="data_get($f, 'icon', 'check')" class="w-5 h-5 mt-0.5 ec-accent shrink-0" />
                            <div class="min-w-0 text-start">
                                <p class="font-semibold">{{ $block->get("features.{$i}.title") ?: data_get($f, 'title') }}</p>
                                @if (data_get($f, 'body'))
                                    <p class="ec-muted text-sm">{{ $block->get("features.{$i}.body") ?: data_get($f, 'body') }}</p>
                                @endif
                            </div>
                        </li>
                    @endforeach
                </ul>
            @endif

            @if ($stores->isNotEmpty())
                <div class="flex flex-wrap gap-3 mt-3 {{ $split ? '' : 'justify-center' }}">
                    @foreach ($stores as $store)
                        @php $storeHref = safe_url($store['url']); @endphp
                        @continue (! $storeHref)
                        <a href="{{ $storeHref }}" target="_blank" rel="noopener noreferrer"
                           class="inline-flex items-center gap-3 transition hover:-translate-y-0.5 {{ $store['badge'] ? '' : 'rounded-xl border px-5 py-3' }}"
                           aria-label="{{ $store['sub'] }} {{ $store['label'] }}">
                            @if ($store['badge'])
                                {{-- Official badge artwork supplied by the academy. --}}
                                <img src="{{ $store['badge'] }}" alt="{{ $store['label'] }}" class="h-12 w-auto" loading="lazy">
                            @else
                                <x-website.icon name="arrow-down-tray" class="w-6 h-6" />
                                <span class="text-start leading-tight">
                                    <span class="block text-xs opacity-70">{{ $store['sub'] }}</span>
                                    <span class="block font-semibold">{{ $store['label'] }}</span>
                                </span>
                            @endif
                        </a>
                    @endforeach
                </div>
            @endif
        </div>

        @if ($block->get('screenshot'))
            <div class="{{ $split ? '' : 'mt-10' }} flex justify-center">
                <img src="{{ $block->get('screenshot') }}" alt="{{ $block->get('title') }}" loading="lazy"
                     class="w-full max-w-xs {{ $variant === 'floating_mockup' ? 'ec-float drop-shadow-2xl' : 'rounded-2xl' }}">
            </div>
        @endif
    </div>
</div>
