<html>
    <head>
        <title>Experience Booking Website</title>
        
        <!-- Styles -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="/css/home.css"/>
    </head>
    <body>
        <header>
            <!-- Including the navbar partial -->
            <%- include('partials/navbar.ejs') %>
        </header>
        <div class="jumbotron jumbotron-fluid bg-info text-white">
            <div class="container">
                <h1 class="display-4">Welcome to Our Experiences</h1>
                <p class="lead">Explore and book the most unforgettable experiences around the globe.</p>
            </div>
        </div>
        <div class="container my-5">
            <!-- Browse Experiences -->
            <section class="hero text-center my-5">
                <h2 class="display-4">Featured Experience</h2>
                <p class="lead">See below the most popular attractions</p>
                <div id="experienceCarousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                
                        <% topExperiences.forEach((experience, index) => { %>
                            <div class="carousel-item <%= index === 0 ? 'active' : '' %>">
                                <!-- Content for each experience -->
                                <!-- Using a placeholder image from the internet as an example -->
                                <img src="/img/<%= experience.exp_name %>.jpg" class="d-block w-100" alt="<%= experience.exp_name %>">
                                <div class="carousel-caption d-none d-md-block">
                                    <h5><%= experience.exp_name %></h5>
                                    <p><%= experience.exp_description %></p>
                                </div>
                            </div>
                        <% }); %>
                
                    </div>
                
                    <!-- Carousel controls -->
                    <a class="carousel-control-prev" href="#experienceCarousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#experienceCarousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
                
                 
            </section>

            <!-- Booking Form -->
            <section class="booking-form my-5">
                <h2 class="mb-4">Quick Search</h2>
                <form action="/experiences" method="get" class="form-group">
                    <label for="experience" class="form-label">Choose an experience type:</label>                    
                    <select name="type" id="experience" class="form-control mb-3">
                        <option value="Photography">Photography</option>
                        <option value="Hiking">Hiking</option>
                        <option value="Wildlife Safari">Wildlife Safari</option>
                        <option value="Historical Tours">Historical Tours</option>
                        <option value="Music">Music</option>
                        <option value="Art">Art</option>
                        <option value="Cultural Tours">Cultural Tours</option>
                        <option value="Sightseeing">Sightseeing</option>
                        <option value="Wildlife Exploration">Wildlife Exploration</option>
                        <option value="Entertainment">Entertainment</option>
                        <option value="Boat Tours">Boat Tours</option>
                        <option value="Outdoor Activities">Outdoor Activities</option>
                        <option value="Architecture">Architecture</option>
                        <option value="Trekking">Trekking</option>
                        <option value="Scuba Diving">Scuba Diving</option>
                        <option value="Science">Science</option>
                        <option value="Beach Vacation">Beach Vacation</option>
                        <option value="Nature">Nature</option>
                        <option value="Scenic Drives">Scenic Drives</option>
                        <option value="Beaches">Beaches</option>
                        <option value="Skiing">Skiing</option>
                        <option value="Theme Parks">Theme Parks</option>
                        <option value="Gardens">Gardens</option>
                        <option value="Parks">Parks</option>
                        <option value="Spa">Spa</option>
                        <option value="Film">Film</option>
                        <option value="History">History</option>
                        <option value="Education">Education</option>
                                                
                    </select>                   
                    <input type="submit" value="Search" class="btn btn-success">
                </form>
            </section>

            <!-- Testimonials -->
            <section class="testimonials my-5">
                <h2 class="mb-4">What Our Clients Say</h2>
                <%- include('partials/home/testimonials.ejs') %>
            </section>

        </div>

        <!-- Including the footer partial -->
        <%- include('partials/footer.ejs') %>

        <!-- Scripts -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    </body>
</html>