class CustomMenuSection extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.render();
        window.restaurantApp.eventBus.addEventListener('dataUpdated', () => this.render());
    }

    render() {
        const data = window.restaurantApp.getData();
        this.shadowRoot.innerHTML = `
            <style>
                .menu-item {
                    transition: all 0.2s ease;
                }
                .menu-item:hover {
                    transform: translateY(-2px);
                }
                .category-tab {
                    transition: all 0.2s ease;
                }
                .category-tab.active {
                    background-color: #6366f1;
                    color: white;
                }
            </style>
            <div class="bg-gray-800 rounded-xl shadow p-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-semibold">Menu Items</h2>
                    <button class="text-primary-500 hover:text-primary-400 flex items-center">
                        <span>View All</span>
                        <i data-feather="chevron-right" class="ml-1"></i>
                    </button>
                </div>
                
                <div class="flex space-x-2 mb-4 overflow-x-auto pb-2">
                    <button class="category-tab active px-4 py-2 rounded-full text-sm font-medium">All</button>
                    <button class="category-tab px-4 py-2 rounded-full text-sm font-medium bg-gray-