@extends('frontend::layouts.master')

@section('content')
    @php
        $supportPage = $data['support']['page'] ?? [];
        $supportHeroImage = !empty(trim((string) ($supportPage['image'] ?? ''))) ? $supportPage['image'] : asset('modules/frontend/images/bg/bg-image-section-01.png');
        $heroButtonUrl = trim((string) ($supportPage['link'] ?? ''));
        $showHeroButton = $heroButtonUrl !== '';
        $heroButtonOpenInNewTab = $showHeroButton && (str_starts_with($heroButtonUrl, 'http://') || str_starts_with($heroButtonUrl, 'https://'));
    @endphp
    <x-frontend::page-hero title="{{ $supportPage['name'] ?? 'Our Support' }}" :image="$supportHeroImage" :showButton="$showHeroButton" buttonLabel="Request A Quote" buttonUrl="{{ $heroButtonUrl }}" :buttonOpenInNewTab="$heroButtonOpenInNewTab">
        {{ $supportPage['desc'] ?? '' }}
    </x-frontend::page-hero>

    <section class="relative py-16 bg-black overflow-hidden">
        <div class="container mx-auto px-4">
            <div class="grid gap-8 md:grid-cols-3">
                @foreach ($data['support']['list'] ?? [] as $key => $item)
                    <div class="relative rounded-3xl text-center py-12 px-6 shadow-[0_32px_80px_rgba(0,0,0,0.6)] overflow-hidden">
                        {{-- Full card background image --}}
                        <div class="pointer-events-none absolute inset-0">
                            <img class="w-full h-full object-cover" src="{{ $item['image'] }}" alt="{{ $item['name'] }}">
                        </div>

                        {{-- Dark overlay to keep text readable --}}
                        <div class="pointer-events-none absolute inset-0 bg-black/50"></div>

                        <div class="relative z-10 flex flex-col items-center gap-6">
                            <h3 class="text-2xl font-semibold text-white">
                                {{ $item['name'] }}
                            </h3>
                            <a class="inline-flex items-center gap-2 rounded-full bg-[#3B2CCF] px-6 py-2 text-sm font-medium text-white shadow-lg shadow-[#3B2CCF]/50 hover:bg-[#2718a3] transition-colors" href="{{ $item['link'] }}" target="_blank" rel="noopener noreferrer">
                                Link
                                <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                    <path d="M11.293 4.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 1 1-1.414-1.414L13.586 10l-2.293-2.293a1 1 0 0 1 0-1.414Z" />
                                    <path d="M4 10a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" />
                                </svg>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection