@php
$benefits = [
    ['icon' => 'clock', 'text' => __('Available 24/7, Including Holidays')],
    ['icon' => 'calendar', 'text' => __('No Appointments Needed')],
    ['icon' => 'pill', 'text' => __('UNLIMITED GENERIC MEDICATIONS & VIRTUAL DOCTOR VISITS FOR YOUR WHOLE FAMILY')],
    ['icon' => 'cash', 'text' => __('NO CO-PAYS, NO WAITING, NO HASSLE')],
    // ['icon' => 'gift', 'text' => __('7-DAY FREE TRIAL + FIRST MEDICATIONS ORDER FREE')],
    ['icon' => 'truck', 'text' => __('Your Medication Delivered Free in 48 Hours!')]
];
@endphp
<section class="bg-blue-900 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <!-- Mobile-only image at the top -->
        <div class="md:hidden mb-8">
            <img
                src="{{ asset('images/telemed-hero.jpg') }}"
                alt="Telemedicine Hero Image"
                class="w-full rounded-xl shadow-lg"
            >
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
            <div class="space-y-6">
                <h1 class="text-4xl font-bold mb-4">{{ __('Healthcare Made Simple') }}</h1>
                <p class="text-xl mb-6">{{ __('Online Medical Care When You Need It') }}</p>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pb-6">
                    @foreach ($benefits as $index => $benefit)
                        @php
                            $gradients = [
                                'from-blue-500 to-purple-600',
                                'from-green-500 to-teal-600',
                                'from-orange-500 to-red-600',
                                'from-pink-500 to-purple-600',
                                'from-indigo-500 to-blue-600',
                                'from-yellow-500 to-orange-600'
                            ];
                            $gradient = $gradients[$index % count($gradients)];
                            $colSpan = ($index === 2) ? 'sm:col-span-2' : '';
                        @endphp
                        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20 shadow-lg transform transition-all duration-300 hover:scale-105 hover:bg-white/20 {{ $colSpan }}">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 bg-gradient-to-br {{ $gradient }} p-3 rounded-full mr-4 shadow-inner">
                                    <x-dynamic-component :component="'icons.' . $benefit['icon']" class="h-6 w-6 text-white" />
                                </div>
                                <span class="text-white text-sm font-medium">{{ $benefit['text'] }}</span>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="flex flex-col space-y-6 mt-4">
                    <div class="flex flex-col items-center sm:items-start">
                        <a href="#get-treated"
                            class="inline-block bg-orange-600 hover:bg-orange-700 text-white text-xl font-bold
                                        py-3 px-8 rounded-lg transition-all duration-300
                                        transform hover:scale-105 shadow-lg"
                        >
                            Get Treated Now
                        </a>
                        <p class="text-sm mt-2 text-white">Connect with licensed providers for fast, same-day care — no waiting rooms, no delays.</p>
                    </div>

                    <div class="flex flex-col items-center sm:items-start">
                        <x-splade-link href="{{ route('rx.index') }}"
                            class="inline-block bg-blue-600 hover:bg-blue-700 text-white text-xl font-bold
                                        py-3 px-8 rounded-lg transition-all duration-300
                                        transform hover:scale-105 shadow-lg"
                        >
                            Go to RX Site
                        </x-splade-link>
                        <p class="text-sm mt-2 text-white">Already know what you need? Submit a medication request in just minutes.</p>
                    </div>
                </div>
            </div>

            <div class="hidden md:block">
                <img
                    src="{{ asset('images/telemed-hero.jpg') }}"
                    alt="Telemedicine Hero Image"
                    class="w-full rounded-xl shadow-2xl transform transition-all duration-500 hover:scale-105"
                >
            </div>
        </div>
    </div>
</section>