<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurant Reservaties - RESERVIBE</title>
    <meta name="description" content="Reserveer een tafel bij de beste restaurants: POULE&POULETTE, ELLIS Burgers, BAVET en WASBAR">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="manifest.json">
    <link rel="apple-touch-icon" href="icons/icon-192x192.png">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Leaflet CSS and JS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <h1>RESERVIBE</h1>
                </div>
                <nav class="nav">
                    <button class="hamburger" id="hamburger">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                    <ul class="nav-menu" id="nav-menu">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#restaurants">Restaurants</a></li>
                        <li><a href="#about">Over ons</a></li>
                        <li><a href="#contact">Contact</a></li>
                        <li><a href="https://reservibexppv1.pages.dev" target="_blank" class="bedrijven-link">
                            <svg class="bedrijven-icon" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10z"/>
                            </svg>
                            Bedrijven
                        </a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h2>Reserveer je perfecte avond</h2>
                <p>Ontdek de beste restaurants en boek direct je tafel</p>
                <a href="#restaurants" class="cta-button">Bekijk restaurants</a>
            </div>
        </div>
    </section>

    <!-- Restaurants Section -->
    <section class="restaurants" id="restaurants">
        <div class="container">
            <div class="restaurants-header">
                <h2 class="section-title">Onze Restaurants</h2>
                <div class="view-controls">
                    <button class="view-btn active" id="listViewBtn" onclick="switchToListView()">
                        <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
                        </svg>
                        Lijst
                    </button>
                    <button class="view-btn" id="mapViewBtn" onclick="switchToMapView()">
                        <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"/>
                        </svg>
                        Kaart
                    </button>
                </div>
            </div>
            
            <!-- List View -->
            <div class="restaurants-grid" id="listView">
                <!-- Restaurant cards will be generated dynamically -->
            </div>

            <!-- Map View -->
            <div class="map-container" id="mapView" style="display: none;">
                <div class="map-controls">
                    <button class="back-to-list-btn" onclick="switchToListView()">
                        <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                        </svg>
                        Terug naar lijst
                    </button>
                </div>
                <div id="map" class="map"></div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section class="about" id="about">
        <div class="container">
            <div class="about-content">
                <h2>Over RESERVIBE</h2>
                <p>Wij maken het reserveren van een tafel bij de beste restaurants eenvoudig en snel. Ontdek nieuwe culinaire ervaringen en boek direct online.</p>
                <div class="features">
                    <div class="feature">
                        <div class="feature-icon">⚡</div>
                        <h3>Snel reserveren</h3>
                        <p>Binnen 30 seconden je tafel geboekt</p>
                    </div>
                    <div class="feature">
                        <div class="feature-icon">📱</div>
                        <h3>Mobile first</h3>
                        <p>Perfecte ervaring op alle apparaten</p>
                    </div>
                    <div class="feature">
                        <div class="feature-icon">🎯</div>
                        <h3>Betrouwbaar</h3>
                        <p>Directe bevestiging van je reservering</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="contact" id="contact">
        <div class="container">
            <h2>Contact</h2>
            <div class="contact-content">
                <div class="contact-info">
                    <h3>Neem contact op</h3>
                    <p>📧 info@reservibe.be</p>
                    <p>📞 +32 2 123 45 67</p>
                    <p>📍 Brussel, België</p>
                </div>
                <form class="contact-form">
                    <input type="text" placeholder="Naam" required>
                    <input type="email" placeholder="Email" required>
                    <textarea placeholder="Bericht" rows="4" required></textarea>
                    <button type="submit" class="submit-button">Verstuur</button>
                </form>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>RESERVIBE</h3>
                    <p>De beste manier om te reserveren</p>
                </div>
                <div class="footer-section">
                    <h4>Restaurants</h4>
                    <ul>
                        <li><a href="#restaurants">POULE&POULETTE</a></li>
                        <li><a href="#restaurants">ELLIS Burgers</a></li>
                        <li><a href="#restaurants">BAVET</a></li>
                        <li><a href="#restaurants">WASBAR</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>Links</h4>
                    <ul>
                        <li><a href="#about">Over ons</a></li>
                        <li><a href="#contact">Contact</a></li>
                        <li><a href="#privacy">Privacy</a></li>
                        <li><a href="#terms">Voorwaarden</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 RESERVIBE. Alle rechten voorbehouden.</p>
            </div>
        </div>
    </footer>

    <!-- Modern Booking Modal -->
    <div class="modal" id="bookingModal">
        <div class="modal-content modern-booking-modal">
            <span class="close" onclick="closeBookingModal()">&times;</span>
            
            <!-- Step 1: Restaurant Info & Date Selection -->
            <div class="booking-step" id="step1">
                <div class="restaurant-info-header">
                    <div class="restaurant-info-image">
                        <img id="bookingRestaurantImage" src="" alt="Restaurant">
                    </div>
                    <div class="restaurant-info-details">
                        <h2 id="modalRestaurantName">Reserveer een tafel</h2>
                        <div class="restaurant-meta">
                            <span class="rating">
                                <svg class="star-icon" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                                </svg>
                                <span id="bookingRestaurantRating">4.5</span>
                            </span>
                            <span class="price" id="bookingRestaurantPrice">€€</span>
                            <span class="cuisine" id="bookingRestaurantCuisine">Internationale keuken</span>
                        </div>
                    </div>
                </div>
                
                <div class="date-selection">
                    <h3>Kies een datum</h3>
                    <div class="date-picker" id="datePicker">
                        <!-- Dates will be generated dynamically -->
                    </div>
                </div>
                
                <div class="time-selection" id="timeSelection" style="display: none;">
                    <h3>Kies een tijdsslot</h3>
                    <div class="time-slots" id="timeSlots">
                        <!-- Time slots will be generated dynamically -->
                    </div>
                </div>
                
                <div class="party-selection" id="partySelection" style="display: none;">
                    <h3>Aantal personen</h3>
                    <div class="party-options" id="partyOptions">
                        <!-- Party options will be generated dynamically -->
                    </div>
                </div>
                
                <div class="step-actions">
                    <button class="btn-secondary" onclick="closeBookingModal()">Annuleren</button>
                    <button class="btn-primary" id="nextStep1" onclick="nextStep(1)" disabled>Volgende</button>
                </div>
            </div>
            
            <!-- Step 2: Contact Details -->
            <div class="booking-step" id="step2" style="display: none;">
                <div class="step-header">
                    <h2>Contactgegevens</h2>
                    <p>Vul je gegevens in om je reservering te bevestigen</p>
                </div>
                
                <form class="contact-form" id="contactForm">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="name">Voornaam *</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="lastName">Achternaam *</label>
                            <input type="text" id="lastName" name="lastName" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="email">Email *</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">Telefoon *</label>
                            <input type="tel" id="phone" name="phone" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="special">Speciale verzoeken</label>
                        <textarea id="special" name="special" rows="3" placeholder="Allergieën, voorkeuren, speciale gelegenheden..."></textarea>
                    </div>
                </form>
                
                <div class="step-actions">
                    <button class="btn-secondary" onclick="previousStep(2)">Terug</button>
                    <button class="btn-primary" onclick="nextStep(2)">Bevestig reservering</button>
                </div>
            </div>
            
            <!-- Step 3: Confirmation -->
            <div class="booking-step" id="step3" style="display: none;">
                <div class="confirmation-content">
                    <div class="confirmation-icon">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                        </svg>
                    </div>
                    <h2>Reservering bevestigd!</h2>
                    <div class="reservation-details" id="reservationDetails">
                        <!-- Reservation details will be populated here -->
                    </div>
                    <p class="confirmation-message">
                        Je ontvangt binnenkort een bevestiging per email. 
                        Tot ziens!
                    </p>
                </div>
                
                <div class="step-actions">
                    <button class="btn-primary" onclick="closeBookingModal()">Sluiten</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Restaurant Info Modal -->
    <div class="modal" id="restaurantModal">
        <div class="modal-content restaurant-info-modal">
            <span class="close" onclick="closeRestaurantModal()">&times;</span>
            <div class="restaurant-details">
                <div class="restaurant-header">
                    <img id="modalRestaurantImage" src="" alt="">
                    <div class="restaurant-title">
                        <h2 id="modalRestaurantName"></h2>
                        <p id="modalRestaurantCuisine"></p>
                        <div class="restaurant-stats">
                            <span id="modalRestaurantRating"></span>
                            <span id="modalRestaurantPrice"></span>
                            <span id="modalRestaurantLocation"></span>
                        </div>
                    </div>
                </div>
                
                <div class="restaurant-content">
                    <div class="restaurant-description">
                        <h3>Over dit restaurant</h3>
                        <p id="modalRestaurantDescription"></p>
                    </div>
                    
                    <!-- Location Selector -->
                    <div class="location-selector">
                        <h4>Kies een vestiging</h4>
                        <select id="locationSelect" onchange="changeLocation()">
                            <!-- Options will be populated dynamically -->
                        </select>
                    </div>
                    
                    <div class="restaurant-info-grid">
                        <div class="info-item">
                            <h4>
                                <svg class="info-icon" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                                </svg>
                                Adres
                            </h4>
                            <p id="modalRestaurantAddress"></p>
                        </div>
                        <div class="info-item">
                            <h4>
                                <svg class="info-icon" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
                                </svg>
                                Telefoon
                            </h4>
                            <p id="modalRestaurantPhone"></p>
                        </div>
                        <div class="info-item">
                            <h4>
                                <svg class="info-icon" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
                                    <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                                </svg>
                                Openingstijden
                            </h4>
                            <p id="modalRestaurantHours"></p>
                        </div>
                        <div class="info-item">
                            <h4>
                                <svg class="info-icon" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
                                </svg>
                                Website
                            </h4>
                            <a id="modalRestaurantWebsite" href="" target="_blank">Bezoek website</a>
                        </div>
                    </div>
                    
                    <div class="restaurant-features">
                        <h3>Faciliteiten</h3>
                        <div class="features-list" id="modalRestaurantFeatures">
                            <!-- Features will be populated by JavaScript -->
                        </div>
                    </div>
                    
                    <div class="restaurant-actions-modal">
                        <button class="book-button-modal" onclick="openBookingModalFromInfo()">Reserveer tafel</button>
                        <button class="takeaway-button-modal" id="takeawayButtonModal" onclick="openTakeawayModalFromInfo()" style="display: none;">Bestel takeaway</button>
                        <button class="directions-button" onclick="openDirections()">Route</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Takeaway Modal -->
    <div class="modal" id="takeawayModal">
        <div class="modal-content">
            <span class="close" onclick="closeTakeawayModal()">&times;</span>
            <h2 id="takeawayRestaurantName">Takeaway bestellen</h2>
            <form class="takeaway-form" id="takeawayForm">
                <div class="form-group">
                    <label for="takeawayName">Naam *</label>
                    <input type="text" id="takeawayName" required>
                </div>
                <div class="form-group">
                    <label for="takeawayEmail">Email *</label>
                    <input type="email" id="takeawayEmail" required>
                </div>
                <div class="form-group">
                    <label for="takeawayPhone">Telefoon *</label>
                    <input type="tel" id="takeawayPhone" required>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="takeawayDate">Datum *</label>
                        <input type="date" id="takeawayDate" required>
                    </div>
                    <div class="form-group">
                        <label for="takeawayTime">Tijd *</label>
                        <select id="takeawayTime" required>
                            <option value="">Selecteer tijd</option>
                            <option value="12:00">12:00</option>
                            <option value="12:30">12:30</option>
                            <option value="13:00">13:00</option>
                            <option value="13:30">13:30</option>
                            <option value="18:00">18:00</option>
                            <option value="18:30">18:30</option>
                            <option value="19:00">19:00</option>
                            <option value="19:30">19:30</option>
                            <option value="20:00">20:00</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="takeawayItems">Bestelling *</label>
                    <textarea id="takeawayItems" rows="4" placeholder="Beschrijf je bestelling..." required></textarea>
                </div>
                <div class="form-group">
                    <label for="takeawayNotes">Speciale verzoeken</label>
                    <textarea id="takeawayNotes" rows="3" placeholder="Allergieën, voorkeuren, etc."></textarea>
                </div>
                <button type="submit" class="submit-takeaway">Bevestig bestelling</button>
            </form>
        </div>
    </div>

    <!-- Chain Overview Modal -->
    <div class="modal" id="chainOverviewModal">
        <div class="modal-content chain-overview-modal">
            <span class="close" onclick="closeChainOverviewModal()">&times;</span>
            <div class="chain-overview">
                <div class="chain-header">
                    <img id="chainOverviewImage" src="" alt="">
                    <div class="chain-title">
                        <h2 id="chainOverviewName"></h2>
                        <p id="chainOverviewCuisine"></p>
                        <div class="chain-stats">
                            <span id="chainOverviewRating"></span>
                            <span id="chainOverviewPrice"></span>
                            <span id="chainOverviewLocationsCount"></span>
                        </div>
                    </div>
                </div>
                
                <div class="chain-content">
                    <div class="chain-description">
                        <h3>Over deze restaurantketen</h3>
                        <p id="chainOverviewDescription"></p>
                    </div>
                    
                    <div class="locations-overview">
                        <h3>Vestigingen</h3>
                        <div class="locations-grid" id="locationsGrid">
                            <!-- Locations will be populated dynamically -->
                        </div>
                    </div>
                    
                    <div class="chain-features">
                        <h3>Faciliteiten</h3>
                        <div class="features-list" id="chainOverviewFeatures">
                            <!-- Features will be populated by JavaScript -->
                        </div>
                    </div>
                    
                    <div class="chain-actions" id="chainActions">
                        <!-- Special actions will be populated by JavaScript -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Success Modal -->
    <div class="modal" id="successModal">
        <div class="modal-content success">
            <div class="success-content">
                <div class="success-icon">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                    </svg>
                </div>
                <h2>Reservering bevestigd!</h2>
                <p>Je reservering is succesvol geplaatst. Je ontvangt binnenkort een bevestiging per email.</p>
                <button onclick="closeSuccessModal()" class="close-success">Sluiten</button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
