script.js

document.addEventListener('DOMContentLoaded', () => {
    // Mobile Menu Toggle
    const mobileToggle = document.querySelector('.mobile-toggle');
    const navbar = document.querySelector('.navbar');

    if (mobileToggle) {
        mobileToggle.addEventListener('click', () => {
            navbar.classList.toggle('active');
            // Simple mobile menu implementation
            if (navbar.classList.contains('active')) {
                navbar.style.display = 'block';
                navbar.style.position = 'absolute';
                navbar.style.top = '100%';
                navbar.style.left = '0';
                navbar.style.width = '100%';
                navbar.style.background = '#3E2723';
                navbar.style.padding = '1rem';
                navbar.style.textAlign = 'center';
            } else {
                navbar.style.display = 'none';
            }
        });
    }

    // Sticky Header Scroll Effect
    const header = document.querySelector('.header');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            header.style.boxShadow = '0 4px 10px rgba(0,0,0,0.1)';
        } else {
            header.style.boxShadow = 'none';
        }
    });

    // Smooth Scroll for Anchors
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth'
                });
                // Close mobile menu if open
                if (navbar.classList.contains('active')) {
                    navbar.style.display = 'none';
                    navbar.classList.remove('active');
                }
            }
        });
    });

    // --- Interaction Logic ---

    // 1. Toast Notification System
    const createToast = (message) => {
        const existingToast = document.querySelector('.toast');
        if (existingToast) existingToast.remove();

        const toast = document.createElement('div');
        toast.className = 'toast';
        toast.innerHTML = `<i class="fa-solid fa-check-circle"></i> ${message}`;
        document.body.appendChild(toast);

        // Trigger reflow
        void toast.offsetWidth;

        setTimeout(() => toast.classList.add('show'), 10);

        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => toast.remove(), 400);
        }, 3000);
    };

    // Attach Toast to Buttons
    const buttons = document.querySelectorAll('.btn, .icon-btn, .arrow-btn');
    buttons.forEach(btn => {
        btn.addEventListener('click', (e) => {
            // If it's a link, let it bubble (or specific logic)
            // Here we just show feedback for demo purposes on non-navigation buttons
            if (btn.classList.contains('arrow-btn')) {
                createToast('Added to Wishlist!');
            } else if (btn.getAttribute('aria-label') === 'Cart') {
                createToast('Cart updated!');
            } else if (btn.getAttribute('aria-label') === 'Search') {
                // Focus search bar (hypothetical)
                createToast('Search active...');
            } else if (btn.classList.contains('btn-primary')) {
                // Book table logic
                // Let default navigation happen if it has href, else:
                if (!btn.getAttribute('href')) createToast('Booking initiated!');
            }
        });
    });

    // 2. Crafted Menu Tabs Logic
    const menuItems = document.querySelectorAll('.menu-item');
    const menuImage = document.querySelector('.menu-image img');
    const menuTitleSpan = document.querySelector('.menu-details .section-title span');
    const menuList = document.querySelector('.menu-list');

    // Data for menus
    const menuData = {
        'Appetizers': {
            img: 'public/img/DONUTS-1-300x300.png',
            highlight: 'Starter',
            items: [
                { name: 'Cheese Puffs', desc: 'Light, airy, and cheesy.' },
                { name: 'Garlic Twists', desc: 'Buttery garlic goodness.' }
            ]
        },
        'Main Courses': {
            img: 'public/img/Picsart_26-02-07_21-09-14-417.jpg.jpeg', // Using existing cupcake as placeholder
            highlight: 'Feast',
            items: [
                { name: 'Savory Pie', desc: 'Chicken and mushroom filling.' },
                { name: 'Gourmet Burger', desc: 'Brioche bun with artisan patty.' }
            ]
        },
        'Desserts': {
            img: 'public/img/Picsart_26-02-07_21-09-14-417.jpg.jpeg',
            highlight: 'Sweet',
            items: [
                { name: 'Glazed Delight', desc: 'Soft, sweet, and perfect.' },
                { name: 'Choco Bomb', desc: 'Explosion of chocolate.' }
            ]
        },
        'Beverages': {
            img: 'public/img/Picsart_26-02-07_21-07-32-206.jpg.jpeg', // Placeholder
            highlight: 'Sip',
            items: [
                { name: 'Cappuccino', desc: 'Rich espresso with foam.' },
                { name: 'Berry Smoothie', desc: 'Fresh blend of seasonal berries.' }
            ]
        }
    };

    menuItems.forEach(item => {
        item.addEventListener('click', () => {
            // Remove active class
            menuItems.forEach(i => i.classList.remove('active'));
            // Add active class
            item.classList.add('active');

            // Get category name
            const category = item.querySelector('span').textContent;
            const data = menuData[category];

            if (data) {
                // Animate Out
                menuImage.style.opacity = '0';
                menuList.style.opacity = '0';

                setTimeout(() => {
                    // Update Content
                    menuImage.src = data.img;
                    menuTitleSpan.textContent = data.highlight;

                    // Update List
                    menuList.innerHTML = data.items.map(dish => `
                        <div class="menu-list-item">
                            <h4>${dish.name}</h4>
                            <p>${dish.desc}</p>
                        </div>
                    `).join('');

                    // Animate In
                    menuImage.style.opacity = '1';
                    menuList.style.opacity = '1';
                }, 300);
            }
        });
    });

    // Add simple transitions to those elements
    if (menuImage) menuImage.style.transition = 'opacity 0.3s ease';
    if (menuList) menuList.style.transition = 'opacity 0.3s ease';

});