@php
    $trending = getContent('trending.content', true);
    // Use destination images instead of artworks
    $trendingDestinations = [
        [
            'name' => 'Cultural Triangle & North Central',
            'image' => 'assets/images/destinations/cultural-triangle.jpg',
            'link' => route('browse') . '?locations=cultural-triangle'
        ],
        [
            'name' => 'Central Highlands',
            'image' => 'assets/images/destinations/central-highlands.jpg',
            'link' => route('browse') . '?locations=central-highlands'
        ],
        [
            'name' => 'Hill Country',
            'image' => 'assets/images/destinations/hill-country.jpg',
            'link' => route('browse') . '?locations=hill-country'
        ],
        [
            'name' => 'Ella',
            'image' => 'assets/images/destinations/ella.jpg',
            'link' => route('browse') . '?locations=ella'
        ],
        [
            'name' => 'Capital City',
            'image' => 'assets/images/destinations/capital-city.jpg',
            'link' => route('browse') . '?locations=capital-city'
        ],
        [
            'name' => 'South Coast',
            'image' => 'assets/images/destinations/south-coast.jpg',
            'link' => route('browse') . '?locations=south-coast'
        ],
        [
            'name' => 'Yala',
            'image' => 'assets/images/destinations/yala.jpg',
            'link' => route('browse') . '?locations=yala'
        ]
    ];
@endphp
<section class="category--section  py-100  z--1">
    <div class="container">
        <div class="row gy-5 mb-60">
            <div class="col-xl-6 col-lg-6 col-md-8">
                <div class="section-content-4 position-relative d-flex justify-content-start flex-column align-items-start">
                    <span class="strok--heading">Trending Destinations</span>
                    <h6 class="title heading--title wow animate__animated animate__fadeInUp text-start fs--40 fw--700 splite-text mb-0" data-splitting data-wow-delay="0.2s">Trending Destinations</h6>
                </div>
            </div>
            <div class="col-lg-6 col-md-4 d-none d-md-block">
                <div class="btn--wrap text-start text-md-end">
                    <a href="{{route('browse')}}" class="btn btn-outline--base btn--lg">See More</a>
                </div>
            </div>
        </div>
        <div class="row gy-4 justify-content-center">
            @foreach ($trendingDestinations as $index => $item)
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="destination-card position-relative overflow-hidden radius--20" style="height: 250px; cursor: pointer;">
                        <img src="{{ asset($item['image']) }}?v={{ time() }}" alt="{{ $item['name'] }}" 
                             style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;">
                        <div class="destination-overlay position-absolute w--100 h--100 d-flex justify-content-center align-items-center" 
                             style="background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.3)); top: 0; left: 0;">
                            <div class="content text-center">
                                <h6 class="title text--white fs--20 fw--600 mb-0">{{ $item['name'] }}</h6>
                            </div>
                        </div>
                        <a href="{{ $item['link'] }}" class="stretched-link" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;"></a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<style>
.destination-card:hover img {
    transform: scale(1.1);
}
.destination-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.3)) !important;
}
</style>