@php
            $supportChannels = [
                ['route' => @jannah_opt('support_phone'), 'icon' => 'phone', 'label' => 'Phone', 'color' => 'bg-yellow-500'],
                ['route' => @jannah_opt('support_facebook'), 'icon' => 'facebook', 'label' => 'Facebook', 'color' => 'bg-blue-600'],
                ['route' => @jannah_opt('support_whatsapp'), 'icon' => 'message-circle', 'label' => 'WhatsApp', 'color' => 'bg-green-500'],
                ['route' => @jannah_opt('support_telegram'), 'icon' => 'send', 'label' => 'Telegram', 'color' => 'bg-blue-400'],
                ['route' => @jannah_opt('support_gmail'), 'icon' => 'mail', 'label' => 'Email', 'color' => 'bg-red-500'],
                ['route' => @jannah_opt('support_group'), 'icon' => 'users', 'label' => 'Group', 'color' => 'bg-purple-600'],
                ['route' => @jannah_opt('support_youtube'), 'icon' => 'youtube', 'label' => 'YouTube', 'color' => 'bg-red-600'],
                ['route' => @jannah_opt('support_instagram'), 'icon' => 'instagram', 'label' => 'Instagram', 'color' => 'bg-pink-500'],
            ];
            @endphp
<x-form-layout :drk="false" title="Update Password">
    <x-app.frame2 title="Help and Support" des="Reach out for assistance with your account, services, and more. We're here to help you!">
        <x-app.form>
            <div class="bg-primary p-4 rounded-xl">
                <div class="flex items-center mt-2 text-sm text-white">
                    Having an issue? Find quick solutions...
                </div>
                <div class="relative top-8">
                    <div class="bg-white rounded-xl p-2 shadow shadow-lg">
                        <div class="relative">
                            <i class="jannah-search-normal text-lg absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                            <input type="text" placeholder="Search here..." class="w-full text-xs p-2 pl-10 pr-10 border border-none rounded-lg" />
                            <i class="jannah-setting-4 text-lg absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-4 gap-2 mt-12 bg-white rounded-lg">
                @foreach ($supportChannels as $channel)
                    @if (!empty($channel['route']))
                        <a href="{{ $channel['route'] }}" class="flex flex-col items-center space-y-2" target="_blank">
                            <div class="{{ $channel['color'] }} p-3 text-lg rounded-full">
                                <i data-feather="{{ $channel['icon'] }}" class="text-white text-2xl"></i>
                            </div>
                            <span class="text-2xs">{{ $channel['label'] }}</span>
                        </a>
                    @endif
                @endforeach
            </div>

            <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
            <script>
                feather.replace();
            </script>
        </x-app.form>
    </x-app.frame2>
</x-form-layout>