<?php
session_start();

if (isset($_SESSION['rol']) && $_SESSION['rol'] === 'admin') {
    header("Location: admin/dashboard.php");
    exit();
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La Pecosa - Rotisería</title>
    <link rel="stylesheet" href="diseño.css">
    <link rel="stylesheet" href="css/all.min.css">
    <link rel="icon" href="imagenes/favicon.png" type="image/png">
    <meta name="theme-color" content="#e02828">
    <meta property="og:title" content="La Pecosa - Rotisería">
    <meta property="og:image" content="imagenes/logo-pecosa.png">
</head>

<body>

<header>
    <nav class="navbar">
        <div class="info-contacto">
            <a href="https://www.google.com/maps/search/?api=1&query=México+571+Paraná" target="_blank" style="color:white; text-decoration:none;">
                <i class="fa-solid fa-location-dot"></i> México 571
            </a>
            <a href="tel:+543434231400" style="color:white; text-decoration:none;">
                <i class="fa-solid fa-phone"></i> 0343 423-1400
            </a>
        </div>

        <ul class="nav-links">
            <?php if(isset($_SESSION['usuario'])): ?>
                <li>
                    <span class="user-name-nav">
                        <i class="fa-solid fa-user"></i> <?php echo htmlspecialchars($_SESSION['usuario']); ?>
                    </span>
                </li>
                <li><a href="logout.php">SALIR</a></li>
            <?php else: ?>
                <li><a href="login.php">LOGIN</a></li>
            <?php endif; ?>

            <li class="dropdown">
                <a href="javascript:void(0);" class="dropbtn" onclick="toggleDropdown(event)">
                    CATEGORÍAS <i class="fa-solid fa-chevron-down" style="font-size:0.75rem; margin-left:4px;"></i>
                </a>
                <div class="dropdown-content" id="myDropdown">
                    <a href="productos.php?cat=Todos">Todos los productos</a>
                    <a href="productos.php?cat=Carne">Carne</a>
                    <a href="productos.php?cat=Verdura">Verdura</a>
                    <a href="productos.php?cat=Vinoteca">Vinoteca</a>
                    <a href="productos.php?cat=Bebidas">Bebidas</a>
                    <a href="productos.php?cat=Lacteos">Lácteos</a>
                    <a href="productos.php?cat=Panaderia">Panadería</a>
                    <a href="productos.php?cat=Limpieza">Limpieza</a>
                    <a href="productos.php?cat=Almacen">Almacén</a>
                </div>
            </li>

            <li><a href="#nosotros">NOSOTROS</a></li>
            <li><a href="ayuda.php">AYUDA</a></li>
            <li><a href="#" onclick="toggleMapa(); return false;">UBICACIÓN</a></li>
        </ul>
    </nav>
</header>

<main>

    <?php if (isset($_GET['exito']) && $_GET['exito'] == 1): ?>
        <div style="background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; padding:14px 20px; margin:20px 5%; border-radius:10px; font-weight:600; font-size:0.9rem; display:flex; align-items:center; gap:8px;">
            <i class="fa-solid fa-circle-check"></i> ¡Pedido realizado con éxito! Ya estamos preparándolo.
        </div>
    <?php endif; ?>

    <!-- HERO -->
    <section class="hero"></section>

    <!-- SLIDER -->
    <div class="product-banner-slider">
        <div class="product-slider-wrapper" id="slider">
            <div class="product-slide"><img src="imagenes/imagen1.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen2.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen3.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen19.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen25.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen23.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen55.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen56.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen57.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen54.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen53.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen52.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen51.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen50.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen49.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen24.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen25.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen10.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen8.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen30.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen14.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen9.jpg" alt="Producto"></div>
            <div class="product-slide"><img src="imagenes/imagen47.jpg" alt="Producto"></div>
        </div>
    </div>

    <!-- NOSOTROS + HORARIOS -->
    <section class="seccion-info">
        <div id="nosotros" class="clean-card">
            <div class="clean-card-icon">
                <i class="fa-solid fa-store"></i>
            </div>
            <h2>Nosotros</h2>
            <div class="clean-card-body">
                <p>Nació como una pequeña verdulería de barrio. Con el pasar de los años, en <span class="highlight-red">1971</span> fue fundada y bautizada como</p>
                <p style="font-size:1.15rem; font-weight:700; color:#e02828;">"La Pecosa"</p>
                <p>Convirtiéndose en una rotisería familiar, con recetas caseras, con el objetivo de llevar comida rica y abundante a cada mesa.</p>
                <p style="margin-top:18px;"><span class="highlight-red">Dueños:</span> Edgardo y Daniel Picarella.</p>
            </div>
        </div>

        <div id="horarios" class="clean-card">
            <div class="clean-card-icon">
                <i class="fa-solid fa-clock"></i>
            </div>
            <h2>Horarios</h2>
            <div class="clean-card-body">
                <p><span class="highlight-red">Lunes a Sábado</span></p>
                <p style="font-size:1.1rem; font-weight:600; color:#333;">08:30 – 13:30 · 17:30 – 21:00</p>
                <p style="margin-top:18px;"><span class="highlight-red">Domingos</span></p>
                <p style="font-size:1.1rem; font-weight:600; color:#333;">08:30 – 13:30</p>
            </div>
        </div>
    </section>

    <!-- MODAL MAPA -->
    <div id="modal-mapa" class="modal">
        <div class="modal-content">
            <span onclick="toggleMapa()" style="position:absolute; top:14px; right:18px; font-size:22px; cursor:pointer; color:#aaa; line-height:1;">&times;</span>
            <h2 style="margin-bottom:20px; color:#222; font-size:1.3rem;">Nuestra ubicación</h2>
            <div style="border-radius:12px; overflow:hidden; margin-bottom:18px; border:1px solid #eee;">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3392.235941865985!2d-60.5255476!3d-31.7367851!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95b45262fbc9ca09%3A0x61de87bb770beff1!2sM%C3%A9xico%20571%2C%20E3100%20Paran%C3%A1%2C%20Entre%20R%C3%ADos!5e0!3m2!1ses-419!2sar!4v1710795000000!5m2!1ses-419!2sar"
                    width="100%" height="320" style="border:0;" allowfullscreen="" loading="lazy">
                </iframe>
            </div>
            <p style="font-size:14px; color:#666;">
                <i class="fa-solid fa-location-dot" style="color:#e02828;"></i> México 571, Paraná.
            </p>
        </div>
    </div>

    <!-- MODAL HORARIOS VISUAL (nuevo) -->
    <div id="modal-horarios-visual" class="modal">
        <div class="modal-content" style="max-width:400px; text-align:center;">
            <span onclick="cerrarModal('modal-horarios-visual')" style="position:absolute; top:14px; right:18px; font-size:22px; cursor:pointer; color:#aaa; line-height:1;">&times;</span>
            <h2 style="margin-bottom:16px; color:#222; font-size:1.3rem;">Nuestros Horarios</h2>
            <img src="imagenes/im4.jpg" alt="Horarios" style="width:100%; border-radius:10px; margin-bottom:14px;">
            <p style="font-size:14px; color:#666;">¡Te esperamos en México 571!</p>
        </div>
    </div>

    <!-- MODAL NOVEDADES (nuevo) -->
    <div id="modal-novedades" class="modal">
        <div class="modal-content" style="max-width:400px; text-align:center;">
            <span onclick="cerrarModal('modal-novedades')" style="position:absolute; top:14px; right:18px; font-size:22px; cursor:pointer; color:#aaa; line-height:1;">&times;</span>
            <h2 style="margin-bottom:16px; color:#222; font-size:1.3rem;">🍎 Novedades</h2>
            <img src="imagenes/im1.jpg" alt="Novedades de la semana" style="width:100%; border-radius:10px; margin-bottom:14px;">
            <p style="font-size:14px; color:#666;">¡No te pierdas nuestras promociones y platos especiales de esta semana!</p>
        </div>
    </div>

</main>

<!-- BARRA INFERIOR -->
<footer class="bottom-bar">
    <div class="footer-text">© LA PECOSA — Paraná, Entre Ríos.</div>
    <a href="carrito.php" class="btn-red">
        <i class="fa-solid fa-utensils"></i>
        <span>PEDIDO</span>
        <span id="cart-count">
            <?php echo isset($_SESSION['carrito']) ? array_sum($_SESSION['carrito']) : 0; ?>
        </span>
    </a>
</footer>

<!-- CHATBOT -->
<div id="chat-circle" onclick="toggleChat()">
    <i class="fa-solid fa-comments"></i>
</div>

<div class="chat-box" id="chat-box">
    <div class="chat-box-header">
        <span>La Pecosa Asistente Virtual 🍎</span>
        <span onclick="toggleChat()" style="cursor:pointer; font-size:20px; line-height:1;">&times;</span>
    </div>
    <div class="chat-box-body" id="chat-logs">
        <div class="chat-msg">
            <div class="cm-msg-text">¡Hola! Soy el asistente de La Pecosa. ¿En qué puedo ayudarte?</div>
        </div>
    </div>
    <!-- Input de texto libre (mejora de la compañera) -->
    <div class="chat-input-wrapper">
        <input type="text" id="chat-input-text" placeholder="Escribí tu consulta..." autocomplete="off">
        <button onclick="enviarMensaje()" class="chat-send-btn" aria-label="Enviar">
            <i class="fa-solid fa-paper-plane"></i>
        </button>
    </div>
    <!--<div class="chat-hints">
        horarios · ubicación · nosotros · pagos · teléfono · promo · novedades · redes
    </div>-->
</div>

<!-- Alerta promo flotante -->
<div id="alerta-flotante-promo">
    <button onclick="cerrarAlertaFlotante()" style="position:absolute;top:6px;right:10px;background:none;border:none;font-size:1rem;cursor:pointer;color:#aaa;">&times;</button>
    <div style="display:flex; gap:10px; align-items:flex-start; margin-top:4px;">
        <span style="font-size:1.4rem;">📢</span>
        <div>
            <h4 style="margin:0 0 4px 0; color:#e02828; font-size:0.9rem; font-weight:800;">¡MENÚ DEL DÍA!</h4>
            <p id="texto-alerta-flotante" style="margin:0; font-size:0.875rem; color:#333; line-height:1.4;"></p>
        </div>
    </div>
</div>

<script src="script.js"></script>

</body>
</html>