@php
    $googlePlayUrl = $googlePlayUrl ?? null;
    $appleAppStoreUrl = $appleAppStoreUrl ?? null;
    $align = $align ?? 'start';
    $justify = match ($align) {
        'center' => 'justify-center',
        'end' => 'justify-end',
        default => 'justify-start',
    };
@endphp

<div class="flex flex-wrap items-center gap-3 {{ $justify }}">
    @if (filled($googlePlayUrl))
        <a href="{{ $googlePlayUrl }}" target="_blank" rel="noopener noreferrer"
           class="inline-block transition hover:scale-[1.03] hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-teal-400/50 rounded-lg"
           title="تحميل من Google Play">
            <img src="{{ asset('images/badges/google-play.svg') }}" alt="Google Play" width="180" height="54" class="h-12 w-auto md:h-14">
        </a>
    @else
        <span class="inline-flex opacity-40 grayscale" title="رابط Google Play غير مضبوط بعد">
            <img src="{{ asset('images/badges/google-play.svg') }}" alt="Google Play — قريباً" width="180" height="54" class="h-12 w-auto md:h-14">
        </span>
    @endif

    @if (filled($appleAppStoreUrl))
        <a href="{{ $appleAppStoreUrl }}" target="_blank" rel="noopener noreferrer"
           class="inline-block transition hover:scale-[1.03] hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-teal-400/50 rounded-lg"
           title="تحميل من App Store">
            <img src="{{ asset('images/badges/app-store.svg') }}" alt="App Store" width="180" height="54" class="h-12 w-auto md:h-14">
        </a>
    @else
        <span class="inline-flex opacity-40 grayscale" title="رابط App Store غير مضبوط بعد">
            <img src="{{ asset('images/badges/app-store.svg') }}" alt="App Store — قريباً" width="180" height="54" class="h-12 w-auto md:h-14">
        </span>
    @endif
</div>

@if (!filled($googlePlayUrl) && !filled($appleAppStoreUrl) && ($showHint ?? false))
    <p class="mt-2 text-xs text-zinc-500">أضف روابط المتاجر من لوحة الأدمن → الإعدادات.</p>
@endif