@php
    $hotelsContent = getContent('hotels.content', true);
    $hotelsElements = getContent('hotels.element', false, 4, true);
    
    // Fixed hotels data - 4 hotels for Sri Lanka
    $fixedHotels = [
        [
            'id' => 'hotel-1',
            'name' => 'Cinnamon Grand Colombo',
            'location' => 'Colombo',
            'price' => 'From $150/night',
            'rating' => '4.8',
            'image' => 'sunset-pool.jpg',
            'description' => 'Luxury beachfront hotel in the heart of Colombo with world-class amenities',
            'route' => 'hotel-cinnamon-grand'
        ],
        [
            'id' => 'hotel-2', 
            'name' => 'Jetwing Vil Uyana',
            'location' => 'Sigiriya',
            'price' => 'From $200/night',
            'rating' => '4.9',
            'image' => 'swimming-pool.jpg',
            'description' => 'Eco-luxury resort near Sigiriya Rock with stunning water villas',
            'route' => 'hotel-jetwing-vil-uyana'
        ],
        [
            'id' => 'hotel-3',
            'name' => 'Tea Factory Hotel',
            'location' => 'Nuwara Eliya',
            'price' => 'From $120/night',
            'rating' => '4.7',
            'image' => 'type-entertainment-complex-popular-resort-with-pools-water-parks-turkey-with-more-than-5-million-visitors-year-amara-dolce-vita-luxury-hotel-resort-tekirova-kemer.jpg',
            'description' => 'Unique hotel converted from a traditional tea factory in the highlands',
            'route' => 'hotel-tea-factory'
        ],
        [
            'id' => 'hotel-4', 
            'name' => 'Shangri-La Hambantota',
            'location' => 'Hambantota',
            'price' => 'From $180/night',
            'rating' => '4.8',
            'image' => 'placa-del-ajuntament-summer-evening-valencia.jpg',
            'description' => 'Beach resort and spa with championship golf course on the south coast',
            'route' => 'hotel-shangri-la-hambantota'
        ]
    ];
    
    // Safely get content data
    $contentData = null;
    if ($hotelsContent && !empty($hotelsContent->data_values)) {
        if (is_string($hotelsContent->data_values)) {
            $contentData = json_decode($hotelsContent->data_values);
        } else {
            $contentData = $hotelsContent->data_values;
        }
    }
    
    // Fallback content if database content is not available
    if (!$contentData) {
        $contentData = (object) [
            'title' => 'Featured Hotels',
            'heading' => 'Premium Accommodations',
            'sub_heading' => 'Discover our handpicked selection of the finest hotels and resorts across Sri Lanka, offering luxury, comfort, and unforgettable experiences.'
        ];
    }
@endphp
<section class="hotels--section position-relative py-50" id="hotels-section">
    <div class="bg--element position-absolute">
        <!--<img src="{{ asset($activeTemplateTrue . 'images/shape/dash-line.png') }}" alt="image">-->
    </div>

    <div class="bg--element-two position-absolute top_image_bounce">
        <!--<img src="{{ asset($activeTemplateTrue . 'images/shape/whychoose-bg3.png') }}" alt="image">-->
    </div>

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

        <div class="row gy-2">
            @forelse ($fixedHotels as $item)
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="hotel-card" style="background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.12); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; border: 1px solid #e9ecef;">
                    <!-- Hover Effect Border -->
                    <div style="position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #D4AF35, #B8860B); transform: scaleX(0); transition: transform 0.3s ease;"></div>
                    
                    <!-- Image Container -->
                    <div class="hotel-image-container" style="position: relative; width: 100%; height: 220px; overflow: hidden;">
                        <a href="{{ route('hotel.details', [$item['route'], $item['id']]) }}" style="display: block; width: 100%; height: 100%;">
                            <img class="hotel-image" 
                                 src="{{ asset('assets/images/' . $item['image']) }}?v={{ time() }}" 
                                 alt="{{ $item['name'] }}" 
                                 style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;">
                        </a>
                        
                        <!-- Image Overlay -->
                        <div class="image-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: flex-end; padding: 20px;">
                            <h6 style="color: white; font-size: 1rem; font-weight: 600; margin: 0;">View Details</h6>
                        </div>
                        
                        <!-- Badge -->
                        <div style="position: absolute; top: 15px; right: 15px; background: linear-gradient(135deg, #D4AF35, #B8860B); color: white; padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; box-shadow: 0 4px 12px rgba(212, 175, 53, 0.3);">
                            FEATURED
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="hotel-content" style="padding: 25px;">
                        <!-- Location & Rating -->
                        <div class="hotel-meta mb-3" style="display: flex; justify-content: space-between; align-items: center;">
                            <div style="display: flex; align-items: center; gap: 8px; color: #6c757d; font-size: 0.9rem;">
                                <i class="fa-solid fa-location-dot" style="color: #228B22;"></i>
                                <span>{{ $item['location'] }}</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 4px;">
                                <i class="fa-solid fa-star" style="color: #D4AF35; font-size: 0.8rem;"></i>
                                <span style="font-size: 0.9rem; font-weight: 600;">{{ $item['rating'] }}</span>
                            </div>
                        </div>

                        <!-- Hotel Name -->
                        <h5 class="hotel-name mb-2" style="font-size: 1.1rem; font-weight: 700; color: #2c3e50; line-height: 1.3;">
                            <a href="{{ route('hotel.details', [$item['route'], $item['id']]) }}" style="color: inherit; text-decoration: none;">
                                {{ $item['name'] }}
                            </a>
                        </h5>

                        <!-- Description -->
                        <p class="hotel-description mb-3" style="font-size: 0.9rem; color: #6c757d; line-height: 1.5; margin-bottom: 15px;">
                            {{ $item['description'] }}
                        </p>

                        <!-- Features -->
                        <div class="hotel-features mb-3" style="display: flex; gap: 8px; flex-wrap: wrap;">
                            <span style="background: linear-gradient(135deg, #D4AF35, #B8860B); color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600;">Luxury</span>
                            <span style="background: linear-gradient(135deg, #228B22, #1F6B1F); color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600;">Premium</span>
                        </div>

                        <!-- Price & Button -->
                        <div class="hotel-footer" style="display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <p class="hotel-price mb-0" style="font-size: 1.1rem; font-weight: 700; color: #D4AF35; margin: 0;">
                                    {{ $item['price'] }}
                                </p>
                            </div>
                            <a href="{{ route('hotel.details', [$item['route'], $item['id']]) }}" 
                               class="btn btn-sm" 
                               style="background: linear-gradient(135deg, #D4AF35, #B8860B); color: white; border: none; border-radius: 20px; padding: 8px 16px; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: all 0.3s ease;">
                                View Details
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12 text-center">
                <p class="text-muted">No hotels available at the moment.</p>
            </div>
            @endforelse
        </div>
    </div>
</section>

<style>
/* Hotels Section Styles */
.hotel-card {
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.hotel-card .hotel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hotel-card .hotel-description {
    flex: 1;
}

.hotel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.hotel-card:hover .image-overlay {
    opacity: 1;
}

.hotel-card:hover .hotel-image {
    transform: scale(1.1);
}

.hotel-card:hover > div:first-child > div:first-child {
    transform: scaleX(1);
}
</style>