<!-- File: app/Views/index.view.php -->
<style>
/* --- About Section Badge --- */
.experience-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    z-index: 2;
    display: none; /* Hidden on mobile */
}

@media (min-width: 768px) {
    .experience-badge {
        display: block;
    }
}

/* --- Home Event Card --- */
.home-event-card {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    color: white;
    height: 350px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.home-event-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.home-event-card:hover .home-event-img {
    transform: scale(1.05);
}

.home-event-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(10, 37, 64, 0.95), rgba(10, 37, 64, 0.6) 60%, transparent);
    padding: 25px 20px;
    z-index: 2;
}

.home-event-date {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--secondary-color);
    color: #000;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* --- Gallery Item Hover --- */
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}
.gallery-item img {
    transition: transform 0.5s ease;
}
.gallery-item:hover img {
    transform: scale(1.1);
}
</style>
<!-- Hero Section -->
<section class="hero-section">
    <video autoplay muted loop class="hero-video">
        <source src="{{APP_URL}}/assets/vid/bg-vid.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="hero-overlay"></div>
    <div class="container">
        <div class="hero-content">
            <h1>Experience Unmatched Luxury & Comfort</h1>
            <p>Welcome to {{ HOTEL_NAME }}, where exceptional service meets breathtaking design. Enjoy world-class amenities, exquisite dining, and rooms designed for ultimate relaxation in the heart of the city.</p>
            <div class="d-flex justify-content-between">
                <a href="{{ APP_URL }}/booking" class="btn btn-primary me-3">Book Your Stay</a>
                <a href="{{ APP_URL }}/rooms" class="btn btn-outline-light">Explore Rooms</a>
            </div>
            
            <!-- Booking Widget -->
            <div class="booking-widget fade-in">
                <h3>Find Your Perfect Stay</h3>
                <form id="homeBookingForm" action="{{ APP_URL }}/booking/check" method="POST">
                    <div class="row g-3">
                        <div class="col-md-6 col-lg-3">
                            <label for="checkin" class="form-label">Check-in</label>
                            <input type="date" class="form-control" id="checkin" name="checkin" required>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <label for="checkout" class="form-label">Check-out</label>
                            <input type="date" class="form-control" id="checkout" name="checkout" required>
                        </div>
                        <div class="col-md-6 col-lg-2">
                            <label for="adults" class="form-label">Adults</label>
                            <select class="form-select" id="adults" name="adults">
                                <option value="1">1</option>
                                <option value="2" selected>2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                            </select>
                        </div>
                        <div class="col-md-6 col-lg-2">
                            <label for="children" class="form-label">Children</label>
                            <select class="form-select" id="children" name="children">
                                <option value="0" selected>0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </div>
                        <div class="col-md-12 col-lg-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">Check Availability</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<div class="mobile-space-1"></div>

<!-- About Section -->
<section class="section-padding">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0 fade-in">
                <div class="position-relative">
                    <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?w=800" alt="About {{ HOTEL_NAME }}" class="img-fluid rounded shadow-lg about-img">
                    <div class="experience-badge bg-primary text-white p-4 rounded shadow">
                        <h2 class="display-4 fw-bold mb-0">10+</h2>
                        <span class="text-uppercase small letter-spacing-1">Years of Excellence</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 ps-lg-5 fade-in">
                <h5 class="text-secondary text-uppercase letter-spacing-2 mb-2">About Us</h5>
                <h2 class="mb-4">Redefining Luxury in Port Harcourt</h2>
                <p class="text-muted mb-4">Located in the serene Mgbaraja area, {{ HOTEL_NAME }} offers a unique blend of local hospitality and world-class luxury. Whether you are here for business, leisure, or a special event, our dedicated team ensures every moment is memorable.</p>
                <ul class="list-unstyled mb-4">
                    <li class="mb-2"><i class="bi bi-check-circle-fill text-secondary me-2"></i> Premium accommodation with city views</li>
                    <li class="mb-2"><i class="bi bi-check-circle-fill text-secondary me-2"></i> Award-winning dining experiences</li>
                    <li class="mb-2"><i class="bi bi-check-circle-fill text-secondary me-2"></i> Exclusive boat cruise packages</li>
                </ul>
                <a href="{{ APP_URL }}/about" class="btn btn-outline-primary">Discover More</a>
            </div>
        </div>
    </div>
</section>

<!-- Featured Rooms -->
<section class="section-padding bg-light">
    <div class="container">
        <div class="section-title">
            <h2>Featured Rooms & Suites</h2>
            <p>Each of our rooms is designed with luxury and comfort in mind.</p>
        </div>
        
        <div class="row g-4">
            @if(empty($featuredRooms))
                <div class="col-12 text-center">
                    <p class="text-muted">No rooms currently featured.</p>
                </div>
            @else
                @foreach($featuredRooms as $room)
                <div class="col-lg-4 col-md-6">
                    <div class="room-card fade-in">
                        <div class="room-img">
                            <img src="{{ (strpos($room['image_path'], 'http') === 0) ? $room['image_path'] : MEDIA_URL . '/' . $room['image_path'] }}" 
                                 alt="{{ $room['name'] }}" 
                                 onerror="this.src='https://images.unsplash.com/photo-1611892440504-42a792e24d32?w=800'">
                            <div class="room-badge">
                                <span class="badge bg-primary">Popular</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <h3>{{ $room['name'] }}</h3>
                            <p class="text-muted mb-3">{{ substr(strip_tags($room['description']), 0, 90) }}...</p>
                            <div class="room-price">{{ CURRENCY }}{{ number_format($room['base_price']) }} <span>/ night</span></div>
                            <ul class="room-amenities">
                                @if(!empty($room['amenities_data']))
                                    @foreach(array_slice($room['amenities_data'], 0, 3) as $am)
                                        <li><i class="{{ $am['icon'] ?? 'bi-check-circle' }}"></i> {{ $am['text'] ?? $am }}</li>
                                    @endforeach
                                @else
                                    <li><i class="bi bi-wifi"></i> WiFi</li>
                                    <li><i class="bi bi-tv"></i> TV</li>
                                    <li><i class="bi bi-snow"></i> AC</li>
                                @endif
                            </ul>
                            <div class="d-flex gap-2 mt-3">
                                <a href="{{ APP_URL }}/rooms/{{ $room['slug'] }}" class="btn btn-outline-primary flex-grow-1">View Details</a>
                                <a href="{{ APP_URL }}/booking?room_type_id={{ $room['id'] }}" class="btn btn-primary">Book Now</a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            @endif
        </div>
        
        <div class="text-center mt-5">
            <a href="{{ APP_URL }}/rooms" class="btn btn-primary">View All Rooms</a>
        </div>
    </div>
</section>

<!-- Amenities Preview -->
<section class="section-padding">
    <div class="container">
        <div class="section-title">
            <h2>Hotel Amenities</h2>
            <p>We offer a wide range of amenities designed to make your stay comfortable.</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="text-center fade-in">
                    <div class="amenity-icon"><i class="bi bi-wifi"></i></div>
                    <h4>High-Speed Wi-Fi</h4>
                    <p class="text-muted">Complimentary internet access throughout the hotel.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-center fade-in">
                    <div class="amenity-icon"><i class="bi bi-cup-hot"></i></div>
                    <h4>Gourmet Dining</h4>
                    <p class="text-muted">On-site restaurant offering local and continental meals.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-center fade-in">
                    <div class="amenity-icon"><i class="bi bi-water"></i></div>
                    <h4>Boat Cruise</h4>
                    <p class="text-muted">Partnerships for boat trips from nearby waterways.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Menu Preview -->
<section class="section-padding bg-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-5 mb-4 mb-lg-0 fade-in">
                <div class="section-title text-start mb-4">
                    <h2>Taste of Excellence</h2>
                    <p class="mb-0">From local delicacies like Bole & Fish to international gourmet dishes, our chefs prepare every meal with passion using fresh, local ingredients.</p>
                </div>
                <a href="{{ APP_URL }}/restaurant" class="btn btn-primary">View Full Menu</a>
            </div>
            <div class="col-lg-7 fade-in">
                <div class="bg-white p-4 rounded shadow-sm">
                    @if(empty($menuPreview))
                        <p class="text-muted text-center">Menu highlights coming soon.</p>
                    @else
                        <div class="row g-4">
                            @foreach($menuPreview as $item)
                            <div class="col-md-6 d-flex align-items-center">
                                <img src="{{ (strpos($item['image_path'], 'http') === 0) ? $item['image_path'] : MEDIA_URL . '/' . $item['image_path'] }}" 
                                     class="rounded-circle me-3" 
                                     style="width: 60px; height: 60px; object-fit: cover;"
                                     onerror="this.src='https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=100'">
                                <div>
                                    <h6 class="mb-1">{{ $item['name'] }}</h6>
                                    <span class="text-secondary fw-bold">{{ CURRENCY }}{{ number_format($item['price']) }}</span>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Gallery Preview -->
<section class="section-padding">
    <div class="container">
        <div class="section-title">
            <h2>Visual Journey</h2>
            <p>A glimpse into the luxury that awaits you.</p>
        </div>
        <div class="row g-4">
            @if(empty($galleryPreview))
                 <div class="col-12 text-center py-5 bg-light"><p class="text-muted">Gallery updating...</p></div>
            @else
                @foreach($galleryPreview as $img)
                <div class="col-lg-4 col-md-6">
                    <div class="gallery-item position-relative overflow-hidden rounded shadow-sm">
                         <img src="{{ $img['url'] }}" 
                              alt="{{ $img['title'] }}" 
                              class="w-100 h-100 object-fit-cover"
                              onerror="this.src='https://images.unsplash.com/photo-1566073771259-6a8506099945?w=600'">
                         
                         <!-- Overlay (Uses CSS from style.css for hover effect) -->
                         <div class="gallery-overlay">
                             <div class="text-center">
                                 <h5 class="text-white mb-0">{{ $img['title'] }}</h5>
                             </div>
                         </div>
                    </div>
                </div>
                @endforeach
            @endif
        </div>
        <div class="text-center mt-5">
             <a href="{{ APP_URL }}/gallery" class="btn btn-outline-primary">View Full Gallery</a>
        </div>
    </div>
</section>

<!-- Trending Events -->
@if(!empty($trendingEvents))
<section class="section-padding bg-white">
    <div class="container">
        <div class="section-title">
            <h2>Trending Events</h2>
            <p>Discover what's happening at {{ HOTEL_NAME }} and join the celebration.</p>
        </div>
        
        <div class="row g-4 justify-content-center">
            @foreach($trendingEvents as $event)
            <div class="col-md-4">
                <div class="home-event-card fade-in">
                    <img src="{{ (strpos($event['image_path'], 'http') === 0) ? $event['image_path'] : MEDIA_URL . '/' . $event['image_path'] }}" 
                         alt="{{ $event['title'] }}" 
                         class="home-event-img" 
                         onerror="this.src='https://images.unsplash.com/photo-1511795409834-ef04bbd61622?w=800'">
                    <div class="home-event-date">{{ date('M d', strtotime($event['event_date'])) }}</div>
                    <div class="home-event-overlay">
                        <h4>{{ $event['title'] }}</h4>
                        <p class="mb-2 text-white-50"><i class="bi bi-clock me-1"></i> {{ date('h:i A', strtotime($event['start_time'])) }}</p>
                        <a href="{{ APP_URL }}/events/{{ $event['slug'] }}" class="btn btn-sm btn-outline-light mt-2">View Details</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <div class="text-center mt-4">
            <a href="{{ APP_URL }}/events" class="btn btn-outline-primary">View All Events</a>
        </div>
    </div>
</section>
@endif

<!-- Guest Experiences / Testimonials -->
<section class="section-padding bg-light">
    <div class="container">
        <div class="section-title">
            <h2>Guest Experiences</h2>
            <p>Don't just take our word for it. Here's what our guests have to say about their stay at {{ HOTEL_NAME }}.</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="testimonial-card fade-in">
                    <div class="testimonial-text">
                        "Absolutely breathtaking hotel with impeccable service. The attention to detail is remarkable, from the luxurious rooms to the exquisite dining."
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">
                            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Guest">
                        </div>
                        <div class="author-info">
                            <h5>Sarah Johnson</h5>
                            <p>Business Executive</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="testimonial-card fade-in">
                    <div class="testimonial-text">
                        "Our anniversary stay was unforgettable. The staff went above and beyond to make our celebration special. Highly recommend the spa!"
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">
                            <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="Guest">
                        </div>
                        <div class="author-info">
                            <h5>Michael Chen</h5>
                            <p>Returning Guest</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="testimonial-card fade-in">
                    <div class="testimonial-text">
                        "Perfect blend of modern luxury and classic elegance. The location is ideal for business travelers, and the amenities are world-class."
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">
                            <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Guest">
                        </div>
                        <div class="author-info">
                            <h5>Emma Rodriguez</h5>
                            <p>Travel Blogger</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact CTA -->
<section class="section-padding cta-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h2 class="text-white">Ready to Experience Luxury?</h2>
                <p class="text-white mb-0">Contact us today to book your stay or inquire about our special packages and offers.</p>
            </div>
            <div class="col-lg-4 text-lg-end mt-4 mt-lg-0">
                <a href="{{ APP_URL }}/contact" class="btn btn-light me-3">Contact Us</a>
                <a href="{{ APP_URL }}/booking" class="btn btn-secondary">Book Now</a>
            </div>
        </div>
    </div>
</section>