@php
    $topDestinationContent = getContent('top_destination.content', true);
    // Override main title
    $topDestinationContent->data_values->title = 'Top Destinations';
    $topDestinationContent->data_values->heading = 'Locations to Explore';
    $topDestinationContent->data_values->sub_heading = 'Explore a curated list of the world\'s most stunning locations, offering experiences, and breathtaking landscapes.';
    // Use actual Sri Lanka destinations with local images
    $customDestinations = [
        [
            'name' => 'Cultural Triangle & North Central',
            'location' => 'Anuradhapura, Polonnaruwa, Sigiriya',
            'image' => 'assets/images/destinations/tour30.jpeg',
            'slug' => 'cultural-triangle',
            'latitude' => '7.9570',
            'longitude' => '80.7609'
        ],
        [
            'name' => 'Central Highlands',
            'location' => 'Nuwara Eliya, Tea Plantations',
            'image' => 'assets/images/destinations/tour26.jpeg',
            'slug' => 'central-highlands',
            'latitude' => '7.9570',
            'longitude' => '80.7609'
        ],
        [
            'name' => 'Hill Country',
            'location' => 'Ella, Little Adam\'s Peak',
            'image' => 'assets/images/destinations/tour11.jpeg',
            'slug' => 'hill-country',
            'latitude' => '7.2955',
            'longitude' => '80.6356'
        ],
        [
            'name' => 'Ella',
            'location' => 'Nine Arch Bridge, Hiking Trails',
            'image' => 'assets/images/destinations/tour29.jpeg',
            'slug' => 'ella-adams-peak',
            'latitude' => '6.8651',
            'longitude' => '81.0852'
        ],
        [
            'name' => 'Capital City',
            'location' => 'Colombo, Urban Life',
            'image' => 'assets/images/destinations/tour24.jpeg',
            'slug' => 'capital-city',
            'latitude' => '6.6175',
            'longitude' => '81.5311'
        ]
    ];
@endphp
<section class="location--section py-100 position-relative">
    <div class="bg--element position-absolute">
        <!--<img src="{{ asset($activeTemplateTrue . 'images/shape/shape-1.png') }}" alt="image">-->
    </div>
    <div class="bg--element-two position-absolute">
        <!--<img src="{{ asset($activeTemplateTrue . 'images/shape/whychoose-bg2.png') }}" alt="image">-->
    </div>

    <div class="container">

        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="section-content mb-50">
                    <div class="title-wrap">
                        <h6 class="heading third--font text-center fs--32 fw--700 text--base mb-0 scroll-animate">
                            {{ __($topDestinationContent->data_values->title) }}</h6>
                        <h2 class="title text-center mb-3 fs--40 fw--800 splite-text scroll-animate"
                            data-splitting> {{ __($topDestinationContent->data_values->heading) }}
                        </h2>
                        <p class="subtitle text-center fs-16 fw--400 scroll-animate"> {{ __($topDestinationContent->data_values->sub_heading) }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="location--card__wrap d-flex gap--20 flex-wrap justify-content-center">
                    @foreach ($customDestinations as $index => $item)
                        <a href="{{ route('destination.detail', $item['slug']) }}"
                            class="location__card radius--20 overflow-hidden position-relative {{ $index == 2 ? 'active' : '' }}">
                            <div class="location__card-thumb position-relative w--100 h--100">
                                <img class="fit--img" src="{{ asset($item['image']) }}?v={{ time() }}"
                                    alt="{{ $item['name'] }}">
                            </div>

                            <div class="location__card-content position-absolute w--100 d-flex justify-content-between align-items-center" >
                                <div class="content">
                                    <h6 class="title text--white fs--24 mb-0">
                                        <i class="fa-solid fa-location-dot"></i>
                                        {{ $item['name'] }}
                                    </h6>
                                    <p class="text--white custom-location">{{ $item['location'] }}</p>
                                </div>
                                <span class="btn circle"><i class="fa-solid fa-arrow-up-long"></i></span>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>