@php
    $settings = $siteSettings ?? \App\Models\Setting::fallback();
@endphp

<x-layouts::public :title="'যোগাযোগ করুন'">
    <section class="bg-[#f8fbf5] py-12 md:py-16">
        <div class="mx-auto grid max-w-6xl gap-10 px-4 md:grid-cols-[0.9fr_1.1fr] md:items-start">
            <div>
                <p class="font-poppins mb-3 text-sm font-semibold uppercase tracking-widest text-orange-500">
                    যোগাযোগ করুন
                </p>
                <h1 class="mb-5 text-4xl font-bold leading-tight text-gray-950 md:text-5xl">
                    আমের অর্ডার নিয়ে সহায়তা দরকার?
                </h1>
                <p class="text-base leading-8 text-gray-600">
                    পণ্য সম্পর্কে প্রশ্ন, অর্ডার আপডেট, ডেলিভারি সহায়তা বা আমলনে কেনাকাটা সম্পর্কিত যেকোনো বিষয়ে আমাদের সঙ্গে যোগাযোগ করুন।
                </p>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div class="rounded-lg border border-green-100 bg-white p-6 shadow-sm">
                    <h2 class="font-poppins text-lg font-bold text-gray-950">ফোন</h2>
                    <a href="{{ $settings->phoneHref() }}" class="mt-3 block text-sm font-semibold text-green-800">
                        {{ $settings->phone }}
                    </a>
                </div>

                <div class="rounded-lg border border-green-100 bg-white p-6 shadow-sm">
                    <h2 class="font-poppins text-lg font-bold text-gray-950">ইমেইল</h2>
                    <a href="{{ $settings->emailHref() }}" class="mt-3 block text-sm font-semibold text-green-800">
                        {{ $settings->email }}
                    </a>
                </div>

                <div class="rounded-lg border border-green-100 bg-white p-6 shadow-sm sm:col-span-2">
                    <h2 class="font-poppins text-lg font-bold text-gray-950">ঠিকানা</h2>
                    <p class="mt-3 text-sm leading-7 text-gray-600">
                        {{ $settings->address }}
                    </p>
                </div>

                @if ($settings->socialLinks() !== [])
                    <div class="rounded-lg border border-green-100 bg-white p-6 shadow-sm sm:col-span-2">
                        <h2 class="font-poppins text-lg font-bold text-gray-950">সোশ্যাল মিডিয়া</h2>
                        <div class="mt-3 flex flex-wrap gap-3">
                            @foreach ($settings->socialLinks() as $link)
                                <a href="{{ $link['url'] }}" target="_blank" rel="noopener noreferrer" class="text-sm font-semibold text-green-800 transition hover:text-orange-500">
                                    {{ $link['label'] }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>
</x-layouts::public>