script.js

// Interactive script modules for navigation, scrollspy, and booking validation
// Enable strict mode for better error catching
'use strict';

/**
 * Aura Premium Fine Dining - Main Interaction Script
 */

document.addEventListener('DOMContentLoaded', () => {
    initNavbar();
    initMobileMenu();
    initMenuFilters();
    initReviews();
    initReservationForm();
    initBookingManager();
    initLanguageToggle();
    initBackToTop();
    initCopyrightYear();
    initScrollSpy();
});

/**
 * Navbar Scroll Effect
 */
function initNavbar() {
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    });
}

/**
 * Mobile Navigation Toggle
 */
function initMobileMenu() {
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');

    if (!hamburger || !navLinks) return;

    // Toggle menu state and update hamburger icon classes on click
    const toggleMenu = () => {
        const isActive = hamburger.classList.toggle('active');
        navLinks.classList.toggle('active');
        hamburger.setAttribute('aria-expanded', isActive ? 'true' : 'false');
    };

    const closeMenu = () => {
        hamburger.classList.remove('active');
        navLinks.classList.remove('active');
        hamburger.setAttribute('aria-expanded', 'false');
    };

    hamburger.addEventListener('click', toggleMenu);

    // Support keyboard triggers (Enter / Space) for hamburger menu
    hamburger.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            toggleMenu();
        }
    });

    // Close menu when a link is clicked
    document.querySelectorAll('.nav-links a').forEach(link => {
        link.addEventListener('click', closeMenu);
    });
}

/**
 * Reservation Form Handling
 */
function initReservationForm() {
    const form = document.getElementById('reservationForm');
    const btn = document.getElementById('submitBtn');
    const dateInput = document.getElementById('date');

    if (dateInput) {
        const today = new Date();
        const year = today.getFullYear();
        const month = String(today.getMonth() + 1).padStart(2, '0');
        const day = String(today.getDate()).padStart(2, '0');
        dateInput.min = `${year}-${month}-${day}`;
    }

    if (!form) return;

    form.addEventListener('submit', (e) => {
        e.preventDefault();
        
        const nameInput = document.getElementById('name');
        const dateVal = dateInput ? dateInput.value : '';
        const guestsSelect = document.getElementById('guests');
        const guestsVal = guestsSelect ? guestsSelect.value : '2';

        if (!nameInput.value.trim() || !dateVal) return;

        const originalText = btn.innerText;
        btn.innerText = 'Processing...';
        btn.style.opacity = '0.8';
        
        setTimeout(() => {
            // Save Booking to LocalStorage
            const bookings = JSON.parse(localStorage.getItem('aura_bookings') || '[]');
            const newBooking = {
                id: Date.now(),
                name: nameInput.value.trim(),
                date: dateVal,
                guests: guestsVal
            };
            bookings.push(newBooking);
            localStorage.setItem('aura_bookings', JSON.stringify(bookings));

            // Refresh Bookings display if helper exists
            if (window.refreshBookingsList) {
                window.refreshBookingsList();
            }

            btn.innerText = 'Reservation Confirmed!';
            btn.style.background = '#28a745';
            btn.style.color = '#fff';
            
            form.reset();
            if (dateInput) {
                const today = new Date();
                const year = today.getFullYear();
                const month = String(today.getMonth() + 1).padStart(2, '0');
                const day = String(today.getDate()).padStart(2, '0');
                dateInput.min = `${year}-${month}-${day}`;
            }
            
            setTimeout(() => {
                btn.innerText = originalText;
                btn.style.background = 'var(--primary-color)';
                btn.style.color = 'var(--bg-color)';
                btn.style.opacity = '1';
            }, 3000);
            
        }, 1500);
    });
}

/**
 * Back to Top Button Logic
 */
function initBackToTop() {
    const backToTopBtn = document.getElementById('backToTop');
    if (!backToTopBtn) return;

    window.addEventListener('scroll', () => {
        if (window.scrollY > 300) {
            backToTopBtn.style.display = 'block';
        } else {
            backToTopBtn.style.display = 'none';
        }
    });

    backToTopBtn.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
}

/**
 * Dynamically Update Copyright Year
 */
function initCopyrightYear() {
    const yearEl = document.getElementById('currentYear');
    if (yearEl) {
        yearEl.textContent = new Date().getFullYear();
    }
}

/**
 * ScrollSpy: Highlight active section in navbar
 */
function initScrollSpy() {
    const sections = document.querySelectorAll('section[id]');
    const navLinks = document.querySelectorAll('.nav-links a:not(.nav-cta)');

    const observerOptions = {
        root: null,
        rootMargin: '-30% 0px -70% 0px',
        threshold: 0
    };

    const spyObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const id = entry.target.getAttribute('id');
                navLinks.forEach(link => {
                    if (link.getAttribute('href') === `#${id}`) {
                        link.setAttribute('aria-current', 'page');
                    } else {
                        link.removeAttribute('aria-current');
                    }
                });
            }
        });
    }, observerOptions);

    sections.forEach(section => {
        if (document.querySelector(`.nav-links a[href="#${section.id}"]`)) {
            spyObserver.observe(section);
        }
    });
}

// End of main application logic

/**
 * Menu Category Filtering Logic
 */
function initMenuFilters() {
    const filterBtns = document.querySelectorAll('.filter-btn');
    const menuCards = document.querySelectorAll('.menu-card');

    if (!filterBtns.length || !menuCards.length) return;

    filterBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const filterValue = btn.getAttribute('data-filter');

            // Update active state for buttons
            filterBtns.forEach(b => {
                b.classList.remove('active');
                b.setAttribute('aria-selected', 'false');
            });
            btn.classList.add('active');
            btn.setAttribute('aria-selected', 'true');

            // Filter menu items
            menuCards.forEach(card => {
                const category = card.getAttribute('data-category');

                if (filterValue === 'all' || category === filterValue) {
                    card.classList.remove('hidden');
                    // Reset animation state
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                } else {
                    card.classList.add('hidden');
                }
            });
        });
    });

    // Handle Beverages navigation link redirecting to Menu with beverages filter
    const beveragesNavLink = document.querySelector('a[href="#beverages"]');
    if (beveragesNavLink) {
        beveragesNavLink.addEventListener('click', (e) => {
            e.preventDefault();
            const menuSection = document.getElementById('menu');
            if (menuSection) {
                menuSection.scrollIntoView({ behavior: 'smooth' });
                // Trigger the click event on the beverages filter button
                const beveragesFilterBtn = document.querySelector('.filter-btn[data-filter="beverages"]');
                if (beveragesFilterBtn) {
                    beveragesFilterBtn.click();
                }
            }
        });
    }
}

/**
 * Testimonial Reviews System (Local Storage)
 */
function initReviews() {
    const testimonialForm = document.getElementById('testimonialForm');
    const testimonialsGrid = document.querySelector('.testimonials-grid');
    const stars = document.querySelectorAll('.star-rating .star');
    let selectedRating = 5;

    if (!testimonialForm || !testimonialsGrid) return;

    // Handle Star Clicks
    stars.forEach(star => {
        // Mark stars selected by default
        star.classList.add('selected');

        star.addEventListener('click', () => {
            selectedRating = parseInt(star.getAttribute('data-value'));
            stars.forEach(s => {
                const val = parseInt(s.getAttribute('data-value'));
                if (val <= selectedRating) {
                    s.classList.add('selected');
                } else {
                    s.classList.remove('selected');
                }
            });
        });

        // Add keyboard support
        star.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                star.click();
            }
        });
    });

    // Helper to generate stars string
    const getStarsString = (count) => '★'.repeat(count) + '☆'.repeat(5 - count);

    // Helper to render a testimonial card
    const renderTestimonial = (name, text, rating, isNew = false) => {
        const card = document.createElement('div');
        card.className = 'testimonial-card';
        card.innerHTML = `
            <div class="rating">${getStarsString(rating)}</div>
            <p class="testimonial-text">"${text}"</p>
            <p class="guest-name">— ${name}</p>
        `;
        
        if (isNew) {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = 'all 0.6s ease-out';
            testimonialsGrid.appendChild(card);
            // Trigger reflow & animate
            void card.offsetWidth;
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        } else {
            testimonialsGrid.appendChild(card);
        }
    };

    // Load saved reviews
    const savedReviews = JSON.parse(localStorage.getItem('aura_reviews') || '[]');
    savedReviews.forEach(rev => {
        renderTestimonial(rev.name, rev.text, rev.rating);
    });

    // Handle Form Submission
    testimonialForm.addEventListener('submit', (e) => {
        e.preventDefault();

        const nameInput = document.getElementById('reviewName');
        const textInput = document.getElementById('reviewText');
        const submitBtn = document.getElementById('submitReviewBtn');

        if (!nameInput.value.trim() || !textInput.value.trim()) return;

        const name = nameInput.value.trim();
        const text = textInput.value.trim();
        const rating = selectedRating;

        const originalText = submitBtn.innerText;
        submitBtn.innerText = 'Submitting...';
        submitBtn.disabled = true;

        setTimeout(() => {
            // Save to LocalStorage
            const currentReviews = JSON.parse(localStorage.getItem('aura_reviews') || '[]');
            currentReviews.push({ name, text, rating });
            localStorage.setItem('aura_reviews', JSON.stringify(currentReviews));

            // Render testimonial
            renderTestimonial(name, text, rating, true);

            // Reset form
            testimonialForm.reset();
            selectedRating = 5;
            stars.forEach(s => s.classList.add('selected'));

            submitBtn.innerText = 'Thank You!';
            submitBtn.style.background = '#28a745';
            submitBtn.style.color = '#fff';

            setTimeout(() => {
                submitBtn.innerText = originalText;
                submitBtn.disabled = false;
                submitBtn.style.background = 'var(--primary-color)';
                submitBtn.style.color = 'var(--bg-color)';
            }, 2000);
        }, 1000);
    });
}




const newsletterForm = document.querySelector('.newsletter-form');
if (newsletterForm) {
    newsletterForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const btn = newsletterForm.querySelector('.newsletter-btn');
        const originalText = btn.innerText;
        btn.innerText = 'Subscribed!';
        btn.style.background = '#28a745';
        btn.style.color = '#fff';
        newsletterForm.reset();
        setTimeout(() => {
            btn.innerText = originalText;
            btn.style.background = 'var(--primary-color)';
            btn.style.color = 'var(--bg-color)';
        }, 3000);
    });
}

/**
 * Reservations Booking Manager (Local Storage & Simulation)
 */
function initBookingManager() {
    const listContainer = document.getElementById('bookingsList');
    const searchInput = document.getElementById('bookingSearchInput');

    if (!listContainer) return;

    // Helper to refresh bookings from localStorage
    window.refreshBookingsList = function(searchTerm = '') {
        const bookings = JSON.parse(localStorage.getItem('aura_bookings') || '[]');
        listContainer.innerHTML = '';

        const filtered = bookings.filter(b => 
            b.name.toLowerCase().includes(searchTerm.toLowerCase())
        );

        if (filtered.length === 0) {
            listContainer.innerHTML = searchTerm 
                ? '<p class="no-bookings">No matching reservations found.</p>'
                : '<p class="no-bookings">No active bookings yet.</p>';
            return;
        }

        filtered.forEach(booking => {
            const item = document.createElement('div');
            item.className = 'booking-item';
            item.setAttribute('data-id', booking.id);
            item.innerHTML = `
                <div class="booking-details">
                    <span class="booking-name">${escapeHTML(booking.name)}</span>
                    <span class="booking-meta">${booking.guests} ${parseInt(booking.guests) === 1 ? 'Person' : 'People'} • ${booking.date}</span>
                </div>
                <div class="booking-actions">
                    <span class="booking-badge confirmed">Confirmed</span>
                    <button class="cancel-booking-btn" data-id="${booking.id}">Cancel</button>
                </div>
            `;
            listContainer.appendChild(item);
        });
    };

    // Helper to escape HTML to prevent XSS
    function escapeHTML(str) {
        return str.replace(/[&<>'"]/g, 
            tag => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[tag] || tag)
        );
    }

    // Handle cancellation delegation
    listContainer.addEventListener('click', (e) => {
        if (e.target.classList.contains('cancel-booking-btn')) {
            const bookingId = parseInt(e.target.getAttribute('data-id'));
            const bookingItem = e.target.closest('.booking-item');

            if (bookingItem) {
                bookingItem.classList.add('cancelling');
                
                setTimeout(() => {
                    let bookings = JSON.parse(localStorage.getItem('aura_bookings') || '[]');
                    bookings = bookings.filter(b => b.id !== bookingId);
                    localStorage.setItem('aura_bookings', JSON.stringify(bookings));
                    window.refreshBookingsList(searchInput ? searchInput.value : '');
                }, 300);
            }
        }
    });

    // Handle Search input
    if (searchInput) {
        searchInput.addEventListener('input', (e) => {
            window.refreshBookingsList(e.target.value);
        });
    }

    // Initial render
    window.refreshBookingsList();
}

/**
 * Multi-language (English/Hindi) Translation Logic
 */
function initLanguageToggle() {
    const langBtn = document.getElementById('langToggleBtn');
    if (!langBtn) return;

    const translationMap = {
        '.logo': 'औरा',
        '.nav-links a[href="#hero"]': 'होम',
        '.nav-links a[href="#menu"]': 'मेनू',
        '.nav-links a[href="#beverages"]': 'पेय',
        '.nav-links a[href="#reservation"]': 'आरक्षण',
        '.nav-links .nav-cta': 'ऑनलाइन ऑर्डर',
        '.announcement-banner': '🎉 विशेष ऑफर: इस सप्ताह बुक किए गए सभी आरक्षणों पर 20% की छूट का आनंद लें!',
        '.hero-title': 'पाक कला की उत्कृष्टता <br> <span class="highlight">परिष्कृत</span>',
        '.hero-subtitle': 'स्वाद की एक परिष्कृत यात्रा शुरू करें, जहां हर व्यंजन प्रामाणिक भारतीय विरासत की उत्कृष्ट कृति है।',
        '.hero-btns a[href="#reservation"]': 'टेबल बुक करें',
        '.hero-btns a[href="#menu"]': 'मेनू देखें',
        '#heritage h2.section-title': 'हमारी पाक विरासत',
        '#heritage p:nth-of-type(1)': '1984 से, औरा प्रामाणिक भारतीय पाक परंपराओं का ध्वजवाहक रहा है। दिल्ली के केंद्र में एक छोटे से पारिवारिक रसोईघर से जो शुरू हुआ था, वह आज भोजन प्रेमियों के लिए एक अभयारण्य बन गया है।',
        '#heritage p:nth-of-type(2)': 'हमारे मसाले खारी बावली के मसाला बाजारों से हाथ से चुने जाते हैं, और हमारी तकनीकें प्राचीन भारत के शाही रसोइयों से जुड़ी हुई हैं। औरा में, हम सिर्फ भोजन नहीं परोसते; हम थाली में कहानियाँ परोसते हैं।',
        '.premium-badge': '1984 से',
        '#menu h2.section-title': 'विशिष्ट व्यंजन',
        '.filter-btn[data-filter="all"]': 'सभी व्यंजन',
        '.filter-btn[data-filter="mains"]': 'मुख्य भोजन',
        '.filter-btn[data-filter="desserts"]': 'स्वादिष्ट डेसर्ट',
        '.filter-btn[data-filter="beverages"]': 'विशिष्ट पेय',
        '#testimonials h2.section-title': 'अतिथि अनुभव',
        '.review-form-title': 'अपना अनुभव साझा करें',
        'label[for="reviewName"]': 'नाम <span class="required">*</span>',
        'label[for="reviewText"]': 'आपकी समीक्षा <span class="required">*</span>',
        '#submitReviewBtn': 'प्रतिक्रिया भेजें',
        '#reviewName': { placeholder: 'उदा. विक्रम सेठी' },
        '#reviewText': { placeholder: 'औरा में अपने भोजन के अनुभव का वर्णन करें...' },
        '.reservation-info h2': 'शाम को हमारे साथ जुड़ें',
        '.reservation-info p': 'अपने विशेष भोजन अनुभव को सुरक्षित करें। स्थान सीमित हैं।',
        '#myBookingsContainer h3': 'आपके आरक्षण',
        '#bookingSearchInput': { placeholder: 'नाम से खोजें...' },
        '.no-bookings': 'अभी कोई सक्रिय आरक्षण नहीं है।',
        'label[for="name"]': 'पूरा नाम <span class="required">*</span>',
        'label[for="date"]': 'तारीख',
        'label[for="guests"]': 'अतिथि',
        '#name': { placeholder: 'जॉन डो' },
        '#submitBtn': 'आरक्षण की पुष्टि करें',
        '#newsletter h2': 'संपर्क में रहें',
        '#newsletter p': 'विशेष ऑफर, मौसमी मेनू अपडेट और हमारे विशेष कार्यक्रमों के निमंत्रण प्राप्त करने के लिए सदस्यता लें।',
        '.newsletter-form input': { placeholder: 'आपका ईमेल पता' },
        '.newsletter-btn': 'सदस्य बनें',
        'footer .brand p': 'प्रामाणिक भारतीय विरासत आधुनिक विलासिता से मिलती है। एक अनूठी पाक यात्रा।',
        'footer .hours h3': 'खुलने का समय',
        'footer .contact h3': 'हमसे मिलें',
        'footer .contact p:nth-of-type(1)': '123 क्युलिनरी लेन, एपिक्यूरियन सिटी'
    };

    function applyTranslation(lang) {
        if (lang === 'hi') {
            for (const [selector, translation] of Object.entries(translationMap)) {
                const elements = document.querySelectorAll(selector);
                elements.forEach(element => {
                    if (typeof translation === 'object' && translation.placeholder) {
                        if (!element.hasAttribute('data-en-placeholder')) {
                            element.setAttribute('data-en-placeholder', element.placeholder || '');
                        }
                        element.placeholder = translation.placeholder;
                    } else {
                        if (!element.hasAttribute('data-en-html')) {
                            element.setAttribute('data-en-html', element.innerHTML);
                        }
                        element.innerHTML = translation;
                    }
                });
            }
            langBtn.textContent = 'English';
            langBtn.setAttribute('aria-label', 'Switch to English');
            langBtn.setAttribute('data-lang', 'hi');
        } else {
            // Restore English
            document.querySelectorAll('[data-en-html]').forEach(element => {
                element.innerHTML = element.getAttribute('data-en-html');
            });
            document.querySelectorAll('[data-en-placeholder]').forEach(element => {
                element.placeholder = element.getAttribute('data-en-placeholder');
            });
            langBtn.textContent = 'हिन्दी';
            langBtn.setAttribute('aria-label', 'Switch to Hindi');
            langBtn.setAttribute('data-lang', 'en');
        }
        localStorage.setItem('aura_lang', lang);
    }

    langBtn.addEventListener('click', () => {
        const currentLang = langBtn.getAttribute('data-lang');
        const nextLang = currentLang === 'en' ? 'hi' : 'en';
        applyTranslation(nextLang);
    });

    // Check saved language selection on load
    const savedLang = localStorage.getItem('aura_lang');
    if (savedLang === 'hi') {
        applyTranslation('hi');
    }
}

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
            observer.unobserve(entry.target);
        }
    });
}, { threshold: 0.15 }); // Trigger when 15% of the element is visible in the viewport

document.querySelectorAll('.menu-card, .testimonial-card').forEach((el) => {
    el.style.opacity = '0';
    el.style.transform = 'translateY(20px)';
    el.style.transition = 'all 0.6s ease-out';
    observer.observe(el);
});