<x-public-layout :company="$company">
    {{-- Gold Luxury hero --}}
    <section class="relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-[#07050a] via-[#0b0711] to-[#05040a]"></div>
        <div class="absolute inset-0 opacity-80 bg-[radial-gradient(circle_at_16%_22%,rgba(245,158,11,0.22),transparent_55%),radial-gradient(circle_at_84%_18%,rgba(250,204,21,0.16),transparent_50%),radial-gradient(circle_at_50%_92%,rgba(217,119,6,0.14),transparent_60%)]"></div>
        <div class="absolute inset-0 opacity-[0.18] [background-image:radial-gradient(rgba(255,255,255,0.12)_1px,transparent_1px)] [background-size:22px_22px]"></div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
            <div class="max-w-3xl">
                <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 backdrop-blur ring-1 ring-amber-200/20 text-amber-50 text-xs font-semibold">
                    <span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>
                    Contact us
                </div>

                <h1 class="mt-4 text-3xl sm:text-4xl font-extrabold tracking-tight text-white">
                    Let’s talk —
                    <span class="bg-gradient-to-r from-amber-200 via-yellow-300 to-white bg-clip-text text-transparent">fast support</span>
                </h1>

                <p class="mt-4 text-white/75 text-lg leading-relaxed">
                    Need help quickly? Call us or message us on WhatsApp. You can also submit the visa inquiry form on the homepage.
                </p>

                <div class="mt-8 flex flex-wrap gap-3">
                    <a href="tel:{{ $company['phone'] ?? '' }}" class="inline-flex items-center justify-center rounded-2xl px-5 py-3 bg-gradient-to-r from-amber-500 to-yellow-400 text-slate-900 font-semibold shadow-sm hover:brightness-110 transition">Call now</a>
                    <a href="{{ $company['whatsapp_link'] ?? '#' }}" target="_blank" class="inline-flex items-center justify-center rounded-2xl px-5 py-3 bg-white/10 text-white ring-1 ring-white/15 hover:bg-white/15 font-semibold">WhatsApp</a>
                    <a href="{{ route('home') }}" class="inline-flex items-center justify-center rounded-2xl px-5 py-3 bg-white text-slate-900 font-semibold shadow-sm hover:bg-slate-100 transition">Visa inquiry form</a>
                </div>
            </div>
        </div>
    </section>

    {{-- Content --}}
    <section class="py-14 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
                <div class="lg:col-span-7">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <div class="rounded-3xl bg-white ring-1 ring-slate-200 shadow-sm hover:shadow-md transition p-6">
                            <div class="text-sm text-slate-500">Phone</div>
                            <div class="mt-2 font-semibold text-slate-900">{{ $company['phone'] ?? '' }}@if(!empty($company['phone_secondary']))<br>{{ $company['phone_secondary'] }}@endif</div>
                            <div class="mt-4"><a href="tel:{{ $company['phone'] ?? '' }}" class="btn-primary">Call now</a></div>
                        </div>

                        <div class="rounded-3xl bg-white ring-1 ring-slate-200 shadow-sm hover:shadow-md transition p-6">
                            <div class="text-sm text-slate-500">WhatsApp</div>
                            <div class="mt-2 font-semibold text-slate-900">{{ $company['whatsapp'] ?? ($company['phone'] ?? '') }}</div>
                            <div class="mt-4"><a href="{{ $company['whatsapp_link'] ?? '#' }}" target="_blank" class="btn-soft">Chat on WhatsApp</a></div>
                        </div>
                    </div>

                    <div class="mt-6 rounded-3xl bg-slate-50 ring-1 ring-slate-200 p-6">
                        <div class="text-sm text-slate-500">Email</div>
                        <div class="mt-2 font-semibold text-slate-900">{{ $company['email'] ?? '' }}</div>
                    </div>

                    <div class="mt-6 rounded-3xl bg-slate-50 ring-1 ring-slate-200 p-6">
                        <div class="text-sm text-slate-500">Address | ঠিকানা</div>
                        <div class="mt-2 font-semibold text-slate-900">{{ $company['address'] ?? '15/3, West Tower, China Town, Naya Paltan, Dhaka' }}</div>
                        <div class="mt-1 font-semibold text-slate-900">{{ $company['address_bn'] ?? '১৫/৩, ওয়েস্ট টাওয়ার, চায়নাটাউন, নয়া পল্টন, ঢাকা' }}</div>
                    </div>
                </div>

                <div class="lg:col-span-5">
                    <div class="rounded-3xl bg-white ring-1 ring-slate-200 shadow-sm p-6">
                        <div class="font-semibold text-slate-900">Office hours</div>
                        <p class="mt-2 text-sm text-slate-600">Every day: 10:00 AM – 8:00 PM (Bangladesh time)</p>

                        <div class="mt-6 rounded-2xl bg-amber-50 ring-1 ring-amber-200 p-4">
                            <div class="text-sm font-semibold text-amber-900">Tip</div>
                            <p class="mt-1 text-sm text-amber-900/80">For the fastest service, submit your visa inquiry from the homepage with your destination and contact number.</p>
                        </div>

                        <div class="mt-6 flex gap-2">
                            <a href="{{ route('home') }}" class="btn-primary">Go to visa form</a>
                            <a href="{{ route('services') }}" class="btn-soft">See services</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</x-public-layout>
