{{--
    Social profile links for the landing footer, from Settings → Social Media
    Links (App\Support\SocialLinks). Inline SVG so the self-contained landing
    needs no icon library. Renders nothing when no profile is configured.
--}}
@php
    $social = \App\Support\SocialLinks::all();
    $icons = [
        'facebook'  => '<path d="M14 9h3V6h-3c-1.7 0-3 1.3-3 3v2H8v3h3v7h3v-7h3l1-3h-4V9c0-.6.4-1 1-1z"/>',
        'instagram' => '<rect x="4" y="4" width="16" height="16" rx="5" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="12" r="3.5" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="17" cy="7" r="1.2"/>',
        'x'         => '<path d="M4 4h4l4 5.5L16 4h4l-6.5 8.5L20 20h-4l-4.2-5.8L7 20H3l7-9L4 4z"/>',
        'youtube'   => '<path d="M22 8.2c-.2-1.4-.8-2-2.2-2.2C17.9 5.7 12 5.7 12 5.7s-5.9 0-7.8.3C2.8 6.2 2.2 6.8 2 8.2 1.7 10 1.7 12 1.7 12s0 2 .3 3.8c.2 1.4.8 2 2.2 2.2 1.9.3 7.8.3 7.8.3s5.9 0 7.8-.3c1.4-.2 2-.8 2.2-2.2.3-1.8.3-3.8.3-3.8s0-2-.3-3.8zM10 15V9l5 3-5 3z"/>',
        'tiktok'    => '<path d="M15 4c.4 2 1.8 3.4 3.8 3.6v2.6c-1.4 0-2.7-.4-3.8-1.1v5.4c0 3-2.4 5.5-5.5 5.5S4 17.5 4 14.5 6.4 9 9.5 9c.3 0 .6 0 .9.1v2.7c-.3-.1-.6-.2-.9-.2-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.8-1.2 2.8-2.7V4h2.7z"/>',
        'linkedin'  => '<path d="M6.5 8A1.5 1.5 0 106.5 5a1.5 1.5 0 000 3zM5 10h3v9H5v-9zm5 0h2.8v1.3h.04c.4-.7 1.4-1.5 2.9-1.5 3 0 3.6 2 3.6 4.6V19h-3v-4c0-1-.02-2.3-1.4-2.3-1.4 0-1.6 1.1-1.6 2.2V19h-3v-9z"/>',
        'telegram'  => '<path d="M21 5L3 12l5 1.8L17 8l-6.5 7 .3 4 2.4-2.9 3.9 2.9L21 5z"/>',
    ];
@endphp

@if ($social !== [])
    <div class="lp-foot-social" style="display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;">
        @foreach ($social as $network => $url)
            <a href="{{ $url }}" target="_blank" rel="noopener noreferrer nofollow" aria-label="{{ ucfirst($network) }}"
               style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;transition:background .15s;"
               onmouseover="this.style.background='var(--lp-brand)'" onmouseout="this.style.background='rgba(255,255,255,.08)'">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">{!! $icons[$network] ?? '' !!}</svg>
            </a>
        @endforeach
    </div>
@endif