
document.addEventListener('DOMContentLoaded', () => {
    // Smooth Scrolling for Navigation
    document.querySelectorAll('a.nav-link, .hero-buttons a.btn, a.logo').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            const href = this.getAttribute('href');
            if (href.startsWith('#')) {
                e.preventDefault();
                const targetId = href.substring(1);
                const targetElement = document.getElementById(targetId);

                if (targetElement) {
                    const headerOffset = document.querySelector('.header').offsetHeight;
                    const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
                    const offsetPosition = elementPosition - headerOffset - 20; // Added 20px buffer

                    window.scrollTo({
                        top: offsetPosition,
                        behavior: 'smooth'
                    });

                    // Close mobile nav after clicking
                    if (document.querySelector('.nav-list').classList.contains('active')) {
                        document.querySelector('.nav-toggle').classList.remove('active');
                        document.querySelector('.nav-list').classList.remove('active');
                    }
                }
            }
        });
    });

    // Mobile Navigation Toggle
    const navToggle = document.getElementById('navToggle');
    const navList = document.querySelector('.nav-list');

    navToggle.addEventListener('click', () => {
        navToggle.classList.toggle('active');
        navList.classList.toggle('active');
    });

    // Menu Filtering
    const categoryButtons = document.querySelectorAll('.category-btn');
    const menuItems = document.querySelectorAll('.menu-item');

    categoryButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Remove 'active' from previous button
            document.querySelector('.category-btn.active').classList.remove('active');
            // Add 'active' to clicked button
            button.classList.add('active');

            const filterCategory = button.dataset.category;

            menuItems.forEach(item => {
                const itemCategory = item.dataset.category;

                if (filterCategory === 'all' || itemCategory === filterCategory) {
                    item.style.display = 'flex'; // Show item
                } else {
                    item.style.display = 'none'; // Hide item
                }
            });
        });
    });

    // Reservation Form Submission (Client-side simulation)
    const reservationForm = document.getElementById('reservationForm');
    const reservationMessage = document.getElementById('reservationMessage');

    if (reservationForm) {
        reservationForm.addEventListener('submit', function (e) {
            e.preventDefault(); // Prevent actual form submission

            const name = document.getElementById('name').value.trim();
            const email = document.getElementById('email').value.trim();
            const phone = document.getElementById('phone').value.trim();
            const date = document.getElementById('date').value;
            const time = document.getElementById('time').value;
            const guests = document.getElementById('guests').value;
            const message = document.getElementById('message').value.trim();

            // Basic validation
            if (!name || !email || !date || !time || !guests) {
                reservationMessage.textContent = 'Please fill in all required fields.';
                reservationMessage.style.color = '#dc3545'; // Red for error
                reservationMessage.style.display = 'block';
                return;
            }

            // Simulate sending data (in a real app, you'd use fetch() here)
            console.log('Reservation Details:', { name, email, phone, date, time, guests, message });

            // Display success message
            reservationMessage.textContent = `Thank you, ${name}! Your reservation for ${guests} on ${date} at ${time} has been received.`;
           // reservationMessage.style.color = var ('--primary-color'); // Using CSS variable in JS
            reservationMessage.style.display = 'block';

            // Clear the form
            reservationForm.reset();

            // Hide message after a few seconds
            setTimeout(() => {
                reservationMessage.style.display = 'none';
                reservationMessage.textContent = '';
            }, 5000);
        });
    }

    // Set minimum date for reservation form to today
    const dateInput = document.getElementById('date');
    if (dateInput) {
        const today = new Date();
        const yyyy = today.getFullYear();
        const mm = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
        const dd = String(today.getDate()).padStart(2, '0');
        dateInput.min = `${yyyy}-${mm}-${dd}`;
    }
});