<?php
session_start();
include("db.php");

$categoria = isset($_GET['cat']) ? $_GET['cat'] : '';

if ($categoria == '' || $categoria == 'Todos') {
    $titulo_pagina = "Nuestro Menú";
    $subtitulo_pagina = "Descubrí todas las delicias caseras listas para vos";
    $query = "SELECT * FROM productos WHERE activo = 1 AND id != 999";
} else {
    $titulo_pagina = htmlspecialchars($categoria);
    $subtitulo_pagina = "Los mejores platos de nuestra cocina a tu mesa";
    $cat_segura = $conexion->real_escape_string($categoria);
    $query = "SELECT * FROM productos WHERE categoria = '$cat_segura' AND activo = 1 AND id != 999";
}

$resultado = $conexion->query($query);

$query_promo = "SELECT p.mensaje 
                FROM promociones p 
                WHERE p.fecha_publicacion >= NOW() - INTERVAL 1 DAY 
                ORDER BY p.id DESC LIMIT 1";
$res_promo = $conexion->query($query_promo);

$promo_activa = null;
if ($res_promo && $res_promo->num_rows > 0) {
    $datos_promo = $res_promo->fetch_assoc();
    
    $query_prod_999 = "SELECT precio, imagen, stock FROM productos WHERE id = 999 AND activo = 1";
    $res_999 = $conexion->query($query_prod_999);
    
    if ($res_999 && $res_999->num_rows > 0) {
        $prod_999 = $res_999->fetch_assoc();
        $promo_activa = array(
            'mensaje' => $datos_promo['mensaje'],
            'precio'  => $prod_999['precio'],
            'imagen'  => $prod_999['imagen'],
            'stock'   => $prod_999['stock']
        );
    }
}

// Contador del pedido (solo lectura de sesión, no modifica la lógica del carrito)
$cant_pedido = 0;
if (!empty($_SESSION['carrito']) && is_array($_SESSION['carrito'])) {
    foreach ($_SESSION['carrito'] as $item) {
        if (is_array($item) && isset($item['cantidad'])) {
            $cant_pedido += (int) $item['cantidad'];
        } else {
            $cant_pedido += 1;
        }
    }
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Productos - La Pecosa</title>
    <link rel="stylesheet" href="css/all.min.css">
    <style>
        /* ══════════════════════════════════════
           BASE
        ══════════════════════════════════════ */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #fffef8;
            color: #333;
            padding-bottom: 70px; /* espacio para barra inferior fija */
        }

        .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

        /* ══════════════════════════════════════
           NAVBAR (estilo index.php)
        ══════════════════════════════════════ */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 5%;
            background-color: #e02828;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
            flex-wrap: wrap;
            gap: 10px;
        }

        .nav-left {
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .nav-brand {
            color: #fffef8;
            font-size: 1.2rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .nav-brand i { font-size: 1rem; }

        .nav-links {
            display: flex;
            gap: 7px;
            list-style: none;
            align-items: center;
            flex-wrap: wrap;
        }

        /* Botones finos del navbar */
        .nav-pill {
            text-decoration: none;
            background-color: rgba(255,255,255,0.15);
            color: #fff;
            padding: 6px 14px;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            border: 1px solid rgba(255,255,255,0.25);
            transition: all 0.25s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }
        .nav-pill:hover {
            background-color: #fff;
            color: #e02828;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        /* Variante destacada (LOGIN) */
        .nav-pill.pill-login {
            background-color: #fff;
            color: #e02828;
        }
        .nav-pill.pill-login:hover {
            background-color: #1a1a1a;
            color: #fff;
        }

        /* Etiqueta de usuario logueado */
        .nav-user {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(0,0,0,0.18);
            color: #fff;
            padding: 6px 14px;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            border: 1px solid rgba(255,255,255,0.25);
        }

        /* ══════════════════════════════════════
           TÍTULO DE SECCIÓN
        ══════════════════════════════════════ */
        .titulo-seccion-contenedor {
            text-align: center;
            margin: 48px 0 36px;
            padding: 36px 20px;
            background: #fffef8;
        }
        .titulo-seccion-contenedor h1 {
            font-size: 2.4rem;
            font-weight: 800;
            color: #1a1a1a;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }
        .titulo-seccion-contenedor h1::after {
            content: '';
            display: block;
            width: 64px;
            height: 4px;
            background: linear-gradient(90deg, #e02828, #ff8585);
            margin: 14px auto 0;
            border-radius: 2px;
        }
        .titulo-seccion-contenedor p {
            font-size: 1.05rem;
            color: #777;
            font-style: italic;
            margin-top: 14px;
        }

        /* ══════════════════════════════════════
           BANNER SLIDER
        ══════════════════════════════════════ */
        .product-banner-slider {
            width: 100vw;
            margin-left: calc(-50vw + 50%);
            margin-right: calc(-50vw + 50%);
            margin-bottom: 40px;
            height: 220px;
            overflow: hidden;
            border-radius: 0;
            position: relative;
        }
        .product-slider-wrapper {
            display: flex;
            gap: 0;
            width: max-content;
            height: 100%;
            animation: scrollContinuo 40s linear infinite;
        }
        .product-slide {
            width: 300px;
            height: 100%;
            flex-shrink: 0;
        }
        .product-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .product-banner-slider:hover .product-slider-wrapper {
            animation-play-state: paused;
        }
        @keyframes scrollContinuo {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* ══════════════════════════════════════
           CARD DE PROMOCIÓN EN TIEMPO REAL
        ══════════════════════════════════════ */
        .promo-realtime-card {
            background: #fff;
            border: 2px dashed #e02828;
            padding: 24px;
            border-radius: 22px;
            margin-bottom: 40px;
            display: flex;
            gap: 24px;
            align-items: center;
            box-shadow: 0 8px 28px rgba(224, 40, 40, 0.07);
            animation: pulseCard 2.5s infinite;
        }
        @keyframes pulseCard {
            0%   { border-color: #e02828; }
            50%  { border-color: #f59e0b; }
            100% { border-color: #e02828; }
        }
        .promo-thumb {
            width: 120px;
            height: 120px;
            flex-shrink: 0;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid #f0f0f0;
            background-color: #fff;
        }
        .promo-thumb img { width: 100%; height: 100%; object-fit: cover; }

        .promo-info-layout {
            display: flex;
            flex: 1;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }
        .promo-content h4 {
            background: #e02828;
            color: white;
            padding: 5px 14px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
            text-transform: uppercase;
        }
        .promo-content p {
            font-size: 1.3rem;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.3;
        }
        .promo-price-tag {
            font-size: 1.7rem;
            font-weight: 800;
            color: #e02828;
            display: block;
            margin-top: 6px;
        }
        .promo-action {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
        }
        .btn-promo-carrito {
            background: #10b981;
            color: white;
            padding: 13px 26px;
            border-radius: 50px;
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25);
            transition: 0.2s;
        }
        .btn-promo-carrito:hover { background: #059669; transform: scale(1.03); }

        /* ══════════════════════════════════════
           GRID DE PRODUCTOS
        ══════════════════════════════════════ */
        .productos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 28px;
        }
        .producto-card {
            background: #fff;
            border-radius: 20px;
            padding: 18px;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0,0,0,0.03);
            border: 1px solid rgba(224, 40, 40, 0.08);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        /* Acento superior al hacer hover */
        .producto-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 4px;
            background: linear-gradient(90deg, #e02828, #ff8585);
            opacity: 0;
            transition: opacity 0.3s;
        }
        .producto-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 36px rgba(224, 40, 40, 0.12);
            border-color: rgba(224, 40, 40, 0.25);
        }
        .producto-card:hover::before { opacity: 1; }

        .producto-card img {
            width: 100%;
            height: 190px;
            object-fit: cover;
            border-radius: 14px;
            margin-bottom: 16px;
            background-color: #fdfdfd;
            transition: transform 0.4s ease;
        }
        .producto-card:hover img { transform: scale(1.05); }

        .producto-card h3 {
            font-size: 1.15rem;
            font-weight: 700;
            margin-bottom: 8px;
            color: #2d2d2d;
        }
        .precio {
            display: block;
            font-size: 1.5rem;
            font-weight: 800;
            color: #e02828;
            margin-bottom: 12px;
        }
        .stock-info { margin-top: auto; }

        /* Botón de compra */
        .btn-carrito {
            background: #e02828;
            color: white;
            border: none;
            padding: 13px 20px;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 700;
            font-size: 0.95rem;
            width: 100%;
            transition: 0.2s ease-in-out;
            box-shadow: 0 4px 12px rgba(224, 40, 40, 0.15);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .btn-carrito:hover { background: #be1e1e; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(224,40,40,0.22); }

        .no-hay {
            text-align: center;
            grid-column: 1 / -1;
            padding: 70px;
            color: #999;
            font-style: italic;
            background: #fff;
            border-radius: 20px;
            border: 1px dashed #e5e5e5;
        }

        /* ══════════════════════════════════════
           BARRA INFERIOR FIJA (estilo index.php)
        ══════════════════════════════════════ */
        .bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #e02828;
            color: #fffef8;
            padding: 12px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            box-shadow: 0 -2px 16px rgba(0,0,0,0.12);
        }
        .footer-text { font-size: 0.85rem; font-weight: 600; opacity: 0.92; }
        .btn-red {
            background: rgba(255,255,255,0.15);
            color: #fff;
            border: 1px solid rgba(255,255,255,0.3);
            padding: 8px 18px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.25s;
        }
        .btn-red:hover {
            background: #fff;
            color: #e02828;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        /* Contador del pedido (estilo index.php) */
        #cart-count {
            background: #fff;
            color: #e02828;
            font-size: 0.72rem;
            min-width: 22px;
            height: 22px;
            padding: 0 5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50px;
            font-weight: 800;
            transition: all 0.25s;
        }
        .btn-red:hover #cart-count {
            background: #e02828;
            color: #fff;
            outline: 2px solid #fff;
        }

        /* ══════════════════════════════════════
           RESPONSIVE
        ══════════════════════════════════════ */
        @media (max-width: 768px) {
            .navbar { flex-direction: column; padding: 10px 4%; }
            .nav-left { justify-content: center; }
            .nav-links { justify-content: center; }
            .nav-pill, .nav-user { padding: 6px 12px; font-size: 10px; }

            .titulo-seccion-contenedor h1 { font-size: 1.8rem; }

            .promo-realtime-card { flex-direction: column; text-align: center; }
            .promo-info-layout { flex-direction: column; gap: 15px; }
            .promo-action { align-items: center; }

            .product-banner-slider { height: 160px; }
            .product-slide { width: 220px; }

            .bottom-bar { padding: 10px 4%; }
            .footer-text { font-size: 0.75rem; }
        }
    </style>
</head>
<body>

<!-- NAVBAR estilo index.php -->
<header class="navbar">
    <div class="nav-left">
        <a href="index.php" class="nav-brand"><i class="fa-solid fa-apple-whole"></i> La Pecosa</a>
    </div>

    <nav>
        <ul class="nav-links">
            <li><a href="index.php" class="nav-pill"><i class="fa-solid fa-house"></i> Inicio</a></li>
            <li><a href="productos.php?cat=Todos" class="nav-pill"><i class="fa-solid fa-bowl-food"></i> Productos</a></li>
            <li><a href="carrito.php" class="nav-pill"><i class="fa-solid fa-cart-shopping"></i> Carrito</a></li>

            <?php if (isset($_SESSION['rol']) && $_SESSION['rol'] == 'admin'): ?>
                <li><a href="panel_admin.php" class="nav-pill"><i class="fa-solid fa-gauge"></i> Admin</a></li>
            <?php endif; ?>

            <?php if(isset($_SESSION['usuario'])): ?>
                <li><span class="nav-user"><i class="fa-solid fa-user"></i> <?php echo strtoupper($_SESSION['usuario']); ?></span></li>
                <li><a href="logout.php" class="nav-pill"><i class="fa-solid fa-right-from-bracket"></i> Salir</a></li>
            <?php else: ?>
                <li><a href="login.php" class="nav-pill pill-login"><i class="fa-solid fa-right-to-bracket"></i> Login</a></li>
            <?php endif; ?>
        </ul>
    </nav>
</header>

<div class="container">

    <div class="titulo-seccion-contenedor">
        <h1><?php echo $titulo_pagina; ?></h1>
        <p><?php echo $subtitulo_pagina; ?></p>
    </div>

    <div class="product-banner-slider">
    <div class="product-slider-wrapper">
        <div class="product-slide"><img src="imagenes/imagen3.jpg" alt="Promo 3"></div>
        <div class="product-slide"><img src="imagenes/imagen4.jpg" alt="Promo 4"></div>
        <div class="product-slide"><img src="imagenes/imagen5.jpg" alt="Promo 5"></div>
        <div class="product-slide"><img src="imagenes/imagen6.jpg" alt="Promo 6"></div>
        <div class="product-slide"><img src="imagenes/imagen7.jpg" alt="Promo 7"></div>
        <div class="product-slide"><img src="imagenes/imagen8.jpg" alt="Promo 8"></div>
        <div class="product-slide"><img src="imagenes/imagen9.jpg" alt="Promo 9"></div>
        <div class="product-slide"><img src="imagenes/imagen10.jpg" alt="Promo 10"></div>
        <div class="product-slide"><img src="imagenes/imagen11.jpg" alt="Promo 11"></div>
        <div class="product-slide"><img src="imagenes/imagen12.jpg" alt="Promo 12"></div>
        <div class="product-slide"><img src="imagenes/imagen13.jpg" alt="Promo 13"></div>
        <div class="product-slide"><img src="imagenes/imagen14.jpg" alt="Promo 14"></div>
        <div class="product-slide"><img src="imagenes/imagen15.jpg" alt="Promo 15"></div>
        <div class="product-slide"><img src="imagenes/imagen16.jpg" alt="Promo 16"></div>
        <div class="product-slide"><img src="imagenes/imagen17.jpg" alt="Promo 17"></div>
        <div class="product-slide"><img src="imagenes/imagen18.jpg" alt="Promo 18"></div>

        <div class="product-slide"><img src="imagenes/imagen3.jpg" alt="Promo 3"></div>
        <div class="product-slide"><img src="imagenes/imagen4.jpg" alt="Promo 4"></div>
        <div class="product-slide"><img src="imagenes/imagen5.jpg" alt="Promo 5"></div>
        <div class="product-slide"><img src="imagenes/imagen6.jpg" alt="Promo 6"></div>
        <div class="product-slide"><img src="imagenes/imagen7.jpg" alt="Promo 7"></div>
        <div class="product-slide"><img src="imagenes/imagen8.jpg" alt="Promo 8"></div>
        <div class="product-slide"><img src="imagenes/imagen9.jpg" alt="Promo 9"></div>
        <div class="product-slide"><img src="imagenes/imagen10.jpg" alt="Promo 10"></div>
        <div class="product-slide"><img src="imagenes/imagen11.jpg" alt="Promo 11"></div>
        <div class="product-slide"><img src="imagenes/imagen12.jpg" alt="Promo 12"></div>
        <div class="product-slide"><img src="imagenes/imagen13.jpg" alt="Promo 13"></div>
        <div class="product-slide"><img src="imagenes/imagen14.jpg" alt="Promo 14"></div>
        <div class="product-slide"><img src="imagenes/imagen15.jpg" alt="Promo 15"></div>
        <div class="product-slide"><img src="imagenes/imagen16.jpg" alt="Promo 16"></div>
        <div class="product-slide"><img src="imagenes/imagen17.jpg" alt="Promo 17"></div>
        <div class="product-slide"><img src="imagenes/imagen18.jpg" alt="Promo 18"></div>
    </div>
</div>

    <?php if ($promo_activa && ($categoria == '' || $categoria == 'Todos' || $categoria == 'Promociones')): ?>
        <div class="promo-realtime-card">
            
            <div class="promo-thumb">
                <img src="<?php echo !empty($promo_activa['imagen']) ? $promo_activa['imagen'] : 'img/default_promo.jpg'; ?>" alt="Imagen de la Promo">
            </div>

            <div class="promo-info-layout">
                <div class="promo-content">
                    <h4><i class="fa-solid fa-bullhorn"></i> Súper Promo de Hoy</h4>
                    <p><?php echo htmlspecialchars($promo_activa['mensaje']); ?></p>
                    <span class="promo-price-tag">$<?php echo number_format($promo_activa['precio'], 0, ',', '.'); ?></span>
                </div>
                
                <div class="promo-action">
                    <?php if (isset($promo_activa['stock']) && $promo_activa['stock'] > 0): ?>
                        <span style="font-size: 0.8rem; color: #666; font-weight: 600; margin-bottom: 2px;">
                            ¡Quedan solo <?php echo $promo_activa['stock']; ?> unidades!
                        </span>
                        <a href="gestionar_carrito.php?accion=agregar&id=999&cat=<?php echo urlencode($categoria); ?>&origen=menu" class="btn-promo-carrito">
                            <i class="fa-solid fa-cart-plus"></i> Añadir Promo al Carrito
                        </a>
                    <?php else: ?>
                        <button class="btn-promo-carrito" disabled style="background-color: #e5e5e5; color: #999; cursor: not-allowed; box-shadow: none;">
                            <i class="fa-solid fa-ban"></i> Promo Agotada
                        </button>
                    <?php endif; ?>
                </div>
            </div>

        </div>
    <?php endif; ?>

    <div class="productos-grid">
        <?php
        if ($resultado && $resultado->num_rows > 0) {
            while($row = $resultado->fetch_assoc()) {
                ?>
                <div class="producto-card" id="prod-<?php echo $row['id']; ?>">
                    <img src="<?php echo !empty($row['imagen']) ? $row['imagen'] : 'img/default.jpg'; ?>" alt="<?php echo htmlspecialchars($row['nombre']); ?>">
                    <h3><?php echo htmlspecialchars($row['nombre']); ?></h3>
                    <span class="precio">$<?php echo number_format($row['precio'], 0, ',', '.'); ?></span>
                    <?php if (isset($row['stock']) && $row['stock'] > 0): ?>
                        <span class="stock-info" style="display: block; font-size: 0.85rem; color: #666; margin-bottom: 12px;">
                            Disponibles: <strong><?php echo $row['stock']; ?></strong> un.
                        </span>
                        
                        <a href="gestionar_carrito.php?accion=agregar&id=<?php echo $row['id']; ?>&cat=<?php echo urlencode($categoria); ?>&origen=menu#prod-<?php echo $row['id']; ?>" class="btn-carrito" style="text-decoration: none; display: flex;">
                            <i class="fa-solid fa-cart-plus"></i> Añadir al carrito
                        </a>
                    <?php else: ?>
                        <span class="stock-info" style="display: block; font-size: 0.85rem; color: #e02828; font-weight: bold; margin-bottom: 12px;">
                            ¡Agotado por hoy!
                        </span>
                        
                        <button class="btn-carrito" disabled style="display: flex; width: 100%; background-color: #e5e5e5; border: none; color: #999; cursor: not-allowed; box-shadow: none;">
                            <i class="fa-solid fa-ban"></i> Sin Stock
                        </button>
                    <?php endif; ?>
                </div>
                <?php
            }
        } else {
            echo "<div class='no-hay'><i class='fa-solid fa-utensils' style='font-size: 2rem; display:block; margin-bottom:10px; color:#ccc;'></i>No hay productos disponibles por el momento en esta sección.</div>";
        }
        ?>
    </div>
    
</div>

<!-- BARRA INFERIOR FIJA estilo index.php -->
<footer class="bottom-bar">
    <span class="footer-text">© LA PECOSA — Paraná, Entre Ríos.</span>
    <a href="carrito.php" class="btn-red"><i class="fa-solid fa-utensils"></i> Pedido <span id="cart-count"><?php echo $cant_pedido; ?></span></a>
</footer>

</body>
</html>
