<!DOCTYPE html>
<html lang="es" class="<%= systemTag %>">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menú de Platillos</title>
    <link rel="icon" href="/img/icon/logo<%= systemTag %>.webp" type="image/x-icon">
    <link rel="stylesheet" href="/css/general/reset.css">
    <link rel="stylesheet" href="/css/menuSystem/menuStyles.css">
    <link rel="stylesheet" href="/css/general/footer.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
    <header>
        <h1 id="encabezado">
            <a href="/menu/<%= systemTag %>/section1" class="logo">
                <img src="/img/icon/logo<%= systemTag %>.webp" alt="<%= systemTag %> Icon">
               <%=bussinesType%> <%=title%>
            </a>
        </h1>
        <nav>
            <ul>
                <li><a href="/">Principal</a></li>
                <li><a href="/principal">Conocenos</a></li>
                <li><a href="/principal">Contacto</a></li>
            </ul>
        </nav>
    </header>



    <main>
        <section class="promoted-product-<%= destacado %>">
            <div class="product-content">
                <h1 class="product-title">Prueba</h1>
                <p class="product-description">
                    Descubra los irresistibles sabores de nuestra nueva seleccion de <%= destacado %>.
                </p>
                <a href="#<%= destacado %>" class="order-button scroll-link">Ordene ahora</a>
            </div>
        </section>
        <section class="weekly-dishes <%= showed %>">
            <div class="section-header">
                <h2 class="section-title">Platillos de la Semana</h2>
                <p class="section-subtitle">Explora nuestras recomendaciones semanales, llenas de sabor y frescura</p>
            </div>
            <div class="dish-container">
                <!-- Platillo 1 -->
                <div class="dish-item">
                    <img src="/img/exampleMainDISH.webp" alt="Salads" class="dish-image">
                    <h3 class="dish-title">Ensalada del chef</h3>
                    <p class="dish-description">Refrescante y ligera</p>
                </div>
                <!-- Platillo 2 -->
                <div class="dish-item">
                    <img src="/img/exampleMainDISH.webp" alt="Soups" class="dish-image">
                    <h3 class="dish-title">Sopas</h3>
                    <p class="dish-description">Calida y con opciones saludables</p>
                </div>
                <!-- Platillo 3 -->
                <div class="dish-item">
                    <img src="/img/exampleMainDISH.webp" alt="Desserts" class="dish-image">
                    <h3 class="dish-title">Postres</h3>
                    <p class="dish-description">Un dulce trato</p>
                </div>
            </div>
        </section>
        <section>
            <div class="menu-container">
                <div class="menu-header">Menu</div>
                <ul class="menu-list">
                    <% for (let categoria in platillosPorCategoria) { %>
                        <li onclick="scrollToCategoria('<%= categoria %>')">
                            <%= categoria %>
                        </li>
                        <% } %>
                </ul>
            </div>
        </section>

        <!--Categorias-->
        <% if (Object.keys(platillosPorCategoria).length> 0) { %>
            <% for (let categoria in platillosPorCategoria) { %>
                <section id="<%= categoria %>" class="categoria">
                    <h2 id=<%=categoria.toLowerCase() %>><%= categoria %>
                    </h2>
                    <img src="/img/categorias/<%= categoria.toLowerCase() %>.webp" alt="<%= categoria %>"
                        class="categoria-imagen">
                    <ul class="platillos-lista">
                        <% platillosPorCategoria[categoria].forEach(platillo=> { %>
                            <li class="platillo-item">
                                <h3>
                                    <%= platillo.nombre %>
                                </h3>
                                <p>
                                    <%= platillo.descripcion %>
                                </p>
                                <p>Precio: $<%= platillo.precio %>
                                </p>
                            </li>
                            <% }) %>
                    </ul>
                </section>
                <% } %>
                    <% } else { %>
                        <p>No hay platillos disponibles en este momento.</p>
                        <% } %>
    </main>


    <footer>
        <p>© 2024 Jorge Melgarejo</p>
    </footer>

    <div class="bottom-menu" id="bottomMenu">
        <a href="/menu/<%= systemTag %>/section1">
            <img src="/img/icon/croosSpoon.webp" alt="Alimentos">
            <span>Alimentos</span>
        </a>
        <a href="/menu/<%= systemTag %>/section2">
            <img src="/img/icon/cracketCup.webp" alt="Bebidas">
            <span>Bebidas</span>
        </a>
        <a href="/menu/<%= systemTag %>/section3">
            <img src="/img/icon/<%= section3 %>.webp" alt=<%= section3 %>>
            <span><%= section3 %></span>
        </a>
        <a href="/menu/<%= systemTag %>/section4">
            <img src="/img/icon/<%= section4 %>.webp" alt=<%= section4 %>>
            <span><%= section4 %></span>
        </a>
    </div>


    <!-- Botón flotante -->
    <button id="boton-arriba" class="boton-flotante" onclick="scrollToTop()">↑</button>
    <div id="floating-cart-button" class="boton-flotante hidden">
        <i class="fas fa-shopping-cart"></i>
    </div>

    <script>
        // Función para desplazarse a una categoría específica
        function scrollToCategoria(categoriaId) {
            const categoriaSection = document.getElementById(categoriaId);
            if (categoriaSection) {
                categoriaSection.scrollIntoView({ behavior: 'smooth' });
            }
        }

        // Función para desplazarse al carrusel
        function scrollToTop() {
            const carrusel = document.querySelector('.menu-container');
            if (encabezado) {
                carrusel.scrollIntoView({ behavior: 'smooth' });
            }
        }

        // Mostrar/ocultar el botón flotante según la posición de desplazamiento
        window.addEventListener('scroll', () => {
            const boton = document.getElementById('boton-arriba');
            if (window.scrollY > 1800) {
                boton.style.display = 'block'; // Mostrar botón
            } else {
                boton.style.display = 'none'; // Ocultar botón
            }
        });
    </script>

    <script>
        // Función para desplazarse a una sección específica
        function smoothScroll(target) {
            const targetSection = document.getElementById(target);
            if (targetSection) {
                targetSection.scrollIntoView({ behavior: 'smooth' });
            }
        }

        // Agregar evento de clic a los enlaces con la clase 'scroll-link'
        document.querySelectorAll('.scroll-link').forEach(link => {
            link.addEventListener('click', function(event) {
                event.preventDefault(); // Prevenir el comportamiento predeterminado del enlace
                const targetId = this.getAttribute('href').substring(1); // Obtener el ID del destino
                smoothScroll(targetId); // Llamar a la función de desplazamiento suave
            });
        });

        // Función para desplazarse al carrusel
        function scrollToTop() {
            const carrusel = document.querySelector('.menu-container');
            if (carrusel) {
                carrusel.scrollIntoView({ behavior: 'smooth' });
            }
        }

        // Mostrar/ocultar el botón flotante según la posición de desplazamiento
        window.addEventListener('scroll', () => {
            const boton = document.getElementById('boton-arriba');
            if (window.scrollY > 1800) {
                boton.style.display = 'block'; // Mostrar botón
            } else {
                boton.style.display = 'none'; // Ocultar botón
            }
        });
    </script>

</body>

</html>