@php
    $iconSvg = function (string $name, string $class = 'h-4 w-4') {
        $paths = [
            'mail' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l9 6 9-6M3 6h18v12H3z"/>',
            'phone' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h4l2 5-3 2a14 14 0 006 6l2-3 5 2v4a2 2 0 01-2 2A18 18 0 013 7a2 2 0 012-2z"/>',
            'map' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11a3 3 0 100-6 3 3 0 000 6z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11c0 7-7 11-7 11s-7-4-7-11a7 7 0 1114 0z"/>',
        ];

        return '<svg class="' . $class . '" fill="none" viewBox="0 0 24 24" stroke="currentColor">' . ($paths[$name] ?? $paths['map']) . '</svg>';
    };
@endphp

<footer class="zl-pixel-footer">
    <div class="zl-pixel-shell grid gap-8 py-10 lg:grid-cols-[1.2fr_.8fr_.9fr_1fr_1fr]">
        <div>
            <img src="{{ asset('assets/zlhost/logo-wide.png') }}?v=20260429-2050" alt="ZLHOST" class="zl-footer-logo h-16 w-auto rounded-xl bg-white px-2 py-1">
            <p class="mt-4 text-sm leading-7 text-navy-300">استضافة بلا حدود وحلول رقمية متكاملة للمؤسسات والمتاجر والمشاريع.</p>
            <div class="mt-4 flex gap-2">
                <a href="#" class="zl-pixel-social" aria-label="X">X</a>
                <a href="#" class="zl-pixel-social" aria-label="Instagram">in</a>
                <a href="#" class="zl-pixel-social" aria-label="Facebook">f</a>
                <a href="#" class="zl-pixel-social" aria-label="LinkedIn">L</a>
            </div>
        </div>

        <div>
            <h3 class="mb-3 font-black text-white">روابط سريعة</h3>
            <ul class="space-y-2 text-sm">
                <li><a href="{{ route('services.index') }}">خدماتنا</a></li>
                <li><a href="{{ route('pricing.index') }}">الباقات</a></li>
                <li><a href="{{ route('portfolio.index') }}">أعمالنا</a></li>
                <li><a href="{{ route('blog.index') }}">المدونة</a></li>
            </ul>
        </div>

        <div>
            <h3 class="mb-3 font-black text-white">خدماتنا</h3>
            <ul class="space-y-2 text-sm">
                <li>استضافة المواقع</li>
                <li>تصميم المواقع</li>
                <li>صيانة ووردبريس</li>
                <li>حلول الذكاء الاصطناعي</li>
            </ul>
        </div>

        <div>
            <h3 class="mb-3 font-black text-white">معلومات التواصل</h3>
            <ul class="space-y-2 text-sm">
                <li class="flex items-center gap-2">{!! $iconSvg('map') !!} نخدم أعمالك عن بُعد وبمرونة</li>
                <li class="flex items-center gap-2">{!! $iconSvg('mail') !!} info@zlhost.com</li>
                <li class="flex items-center gap-2">{!! $iconSvg('phone') !!} <span dir="ltr">+966 50 000 0000</span></li>
            </ul>
        </div>

        <div class="zl-pixel-footer-map">
            <div class="zl-pixel-footer-map-icon">
                {!! $iconSvg('map', 'h-8 w-8') !!}
            </div>
            <div>
                <h3 class="font-black text-white">نخدم عملاءنا بمرونة</h3>
                <p class="mt-2 text-sm leading-6 text-navy-300">حلول رقمية موثوقة للمشاريع مع دعم عربي وتجربة طلب واضحة.</p>
            </div>
        </div>
    </div>
</footer>

<div class="zl-pixel-payment-strip">
    <span class="mx-2">دفع يدوي عبر التحويل البنكي</span>
    <span class="mx-2 rounded bg-navy-50 px-2 py-1">mada</span>
    <span class="mx-2 rounded bg-navy-50 px-2 py-1">VISA</span>
    <span class="mx-2 rounded bg-navy-50 px-2 py-1">MasterCard</span>
    <span class="mx-2 rounded bg-navy-50 px-2 py-1">Apple Pay</span>
</div>