<?php
// CRÍTICO: Ajustar las rutas a tus modelos. Si 'catalogo.php' está en 'views/',
// entonces los modelos están en '../models/'.
require_once '../models/model_producto.php';
require_once '../models/model_categoria.php';
// Asumimos que la conexión a la base de datos se inicializa aquí o en los modelos:
require_once '../services/pdo_connection.php'; 

// Inicializa la conexión a la base de datos
$database = new Database();
$db = $database->getConnection();

// Inicialización de modelos
$productoModel = new ModelProducto();
$categoriaModel = new ModelCategoria();
$categorias = $categoriaModel->leerTodas()['data'];

$categoria_url = isset($_GET['categoria']) ? htmlspecialchars($_GET['categoria']) : '';
$productos_a_mostrar = [];
$titulo_catalogo = 'Catálogo General';
$descripcion_catalogo = 'Explora toda nuestra variedad de auténtica comida mexicana.';

// 1. Encontrar la categoría por el nombre limpio de la URL
$categoria_encontrada = null;

$url_limpia = strtolower(str_replace([' ', '-'], '', $categoria_url)); 

foreach ($categorias as $cat) {
    $nombre_limpio_db = strtolower(str_replace([' ', '-'], '', $cat['nombre']));
    
    if ($nombre_limpio_db === $url_limpia) {
        $categoria_encontrada = $cat;
        $titulo_catalogo = $cat['nombre'];
        $descripcion_catalogo = $cat['descripcion'];
        break;
    }
}

// 2. Filtrar productos
if ($categoria_encontrada) {
    // Consulta directa para obtener productos de la categoría encontrada
    $query_prods = "
        SELECT id_producto, titulo, descripcion, precio, foto_url
        FROM producto 
        WHERE id_categoria = :id_cat AND activo = 1 
        ORDER BY titulo ASC
    ";
    $stmt_prods = $db->prepare($query_prods);
    $stmt_prods->bindParam(':id_cat', $categoria_encontrada['id_categoria']);
    $stmt_prods->execute();
    $productos_a_mostrar = $stmt_prods->fetchAll(PDO::FETCH_ASSOC);

} else {
    // Si no se encuentra la categoría o no se pasa el parámetro, redirigir al menú completo
    header('Location: menu.php');
    exit;
}

// === META PIXEL DINÁMICO: Preparar datos para ViewContent ===
$pixel_content_name = $titulo_catalogo;
$pixel_content_type = 'product_group'; // Categoría
$pixel_content_ids = [];
$pixel_value = 0.00; // Valor promedio o 0 para categoría

// Calcular IDs de productos y valor promedio si hay productos
if (!empty($productos_a_mostrar)) {
    foreach ($productos_a_mostrar as $prod) {
        $pixel_content_ids[] = $prod['id_producto'];
        $pixel_value += $prod['precio'];
    }
    if (count($productos_a_mostrar) > 0) {
        $pixel_value /= count($productos_a_mostrar); // Promedio
    }
}

// === META TAGS DINÁMICOS PARA SEO Y REDES SOCIALES ===
$meta_description = htmlspecialchars($descripcion_catalogo . ' en Taquería el Mexicano. Precios desde $' . number_format($pixel_value, 2) . ' MXN. ¡Ordena ahora!');
$meta_title = htmlspecialchars($titulo_catalogo . ' | Taquería el Mexicano');
$og_image = 'https://taqueriaelmexicano.com.mx/imgs/logo.png'; // Imagen por defecto; puedes dinamizar con primera foto de producto
if (!empty($productos_a_mostrar) && !empty($productos_a_mostrar[0]['foto_url'])) {
    $og_image = 'https://taqueriaelmexicano.com.mx/' . htmlspecialchars($productos_a_mostrar[0]['foto_url']);
}
$og_url = 'https://taqueriaelmexicano.com.mx/views/catalogo.php?categoria=' . urlencode($categoria_url);
?>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title><?php echo $meta_title; ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="<?php echo $meta_description; ?>">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="<?php echo $meta_title; ?>">
    <meta property="og:description" content="<?php echo $meta_description; ?>">
    <meta property="og:image" content="<?php echo $og_image; ?>">
    <meta property="og:url" content="<?php echo $og_url; ?>">
    <meta property="og:site_name" content="Taquería el Mexicano">
    
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="<?php echo $meta_title; ?>">
    <meta name="twitter:description" content="<?php echo $meta_description; ?>">
    <meta name="twitter:image" content="<?php echo $og_image; ?>">
    
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="shortcut icon" href="imgs/logo.png" type="image/x-icon">
    
    <!-- Meta Pixel Code MEJORADO DINÁMICO -->
    <script>
    !function(f,b,e,v,n,t,s) {
        if(f.fbq)return;
        n=f.fbq=function(){n.callMethod?
        n.callMethod.apply(n,arguments):n.queue.push(arguments)};
        if(!f._fbq)f._fbq=n; n.push=n; n.loaded=!0; n.version='2.0';
        n.queue=[]; t=b.createElement(e); t.async=!0;
        t.src=v; s=b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t,s)
    }(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js');
    
    fbq('init', '2057411288352776');
    fbq('track', 'PageView');
    
    // Track ViewContent dinámico para categoría y productos
    <?php if ($categoria_encontrada): ?>
        fbq('track', 'ViewContent', {
            content_name: '<?php echo addslashes($pixel_content_name); ?>',
            content_category: 'Menu Category',
            content_type: '<?php echo $pixel_content_type; ?>',
            <?php if (!empty($pixel_content_ids)): ?>
            content_ids: <?php echo json_encode($pixel_content_ids); ?>,
            <?php endif; ?>
            value: <?php echo number_format($pixel_value, 2); ?>,
            currency: 'MXN'
        });
        console.log('FB Pixel: ViewContent tracked for category <?php echo addslashes($pixel_content_name); ?> with <?php echo count($pixel_content_ids); ?> products');
    <?php endif; ?>
    
    // Función reutilizable para track AddToCart (si agregas carrito aquí en futuro)
    function trackAddToCart(productName, productId, price) {
        fbq('track', 'AddToCart', {
            content_name: productName,
            content_ids: [productId],
            content_type: 'product',
            value: price,
            currency: 'MXN'
        });
    }
    </script>
    <noscript>
        <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=2057411288352776&ev=PageView&noscript=1"/>
    </noscript>
    <!-- End Meta Pixel Code -->
    
    
    <style>
        :root {
            --dominant-color: #B92117;
            --dominant-text: #FFFFFF;
            --yellow: #F9A825;
            --orange: #E65100;
            --white: #FFFFFF;
            --light-gray: #F5F5F5;
            --dark-gray: #212121;
            --medium-gray: #616161;
            --soft-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            --hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, var(--dominant-color) 0%, var(--orange) 100%);
            color: var(--dominant-text);
            min-height: 100vh;
            position: relative;
        }
        
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.03"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            pointer-events: none;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem 3rem;
            position: relative;
            z-index: 1;
        }
        
        /* Header Mejorado */
        .brand-header {
            text-align: center;
            padding: 2rem 1rem 1rem;
            margin-bottom: 2rem;
            position: relative;
        }
        
        .brand-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 4px;
            background: linear-gradient(90deg, transparent, var(--yellow), transparent);
            border-radius: 2px;
        }
        
        .logo-section {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        
        .logo-img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--yellow);
            box-shadow: var(--soft-shadow);
        }
        
        .brand-text {
            text-align: left;
        }
        
        .brand-title {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--yellow);
            text-transform: uppercase;
            letter-spacing: 1px;
            line-height: 1.2;
        }
        
        .brand-subtitle {
            font-size: 1rem;
            font-weight: 600;
            color: var(--white);
            opacity: 0.9;
        }
        
        .years-tradition {
            font-size: 1.4rem;
            font-weight: 300;
            letter-spacing: 3px;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .tacos-title {
            font-size: 3.2rem;
            font-weight: 900;
            color: var(--yellow);
            text-transform: uppercase;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            letter-spacing: 2px;
            margin-bottom: 0.5rem;
        }
        
        /* Categoría actual */
        .current-category {
            text-align: center;
            margin-bottom: 3rem;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: var(--soft-shadow);
        }
        
        .category-title {
            font-size: 2.8rem;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 1rem;
            color: var(--yellow);
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }
        
        .category-desc {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
            font-weight: 400;
        }
        
        /* Grid de productos */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }
        
        .product-card {
            background: rgba(255, 255, 255, 0.12);
            border-radius: 20px;
            padding: 1.8rem;
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.25);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }
        
        .product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--yellow), var(--orange));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
        
        .product-card:hover {
            transform: translateY(-10px) scale(1.02);
            background: rgba(255, 255, 255, 0.18);
            box-shadow: var(--hover-shadow);
        }
        
        .product-card:hover::before {
            transform: scaleX(1);
        }
        
        .product-img {
            width: 100%;
            height: 220px;
            border-radius: 15px;
            overflow: hidden;
            margin-bottom: 1.5rem;
            background: rgba(255, 255, 255, 0.1);
            position: relative;
        }
        
        .product-img::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
        }
        
        .product-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
        
        .product-card:hover .product-img img {
            transform: scale(1.1);
        }
        
        .product-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.8rem;
            color: var(--white);
            line-height: 1.3;
        }
        
        .product-desc {
            font-size: 0.95rem;
            opacity: 0.85;
            margin-bottom: 1.2rem;
            line-height: 1.5;
            font-weight: 400;
        }
        
        .product-price {
            font-size: 2rem;
            font-weight: 800;
            color: var(--yellow);
            margin-bottom: 1.8rem;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
        
        /* Botón de acción */
        .btn-menu {
            display: block;
            width: 100%;
            background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%);
            color: var(--white);
            text-decoration: none;
            padding: 1.2rem 2rem;
            border-radius: 12px;
            font-weight: 700;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(249, 168, 37, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .btn-menu::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }
        
        .btn-menu:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(249, 168, 37, 0.4);
        }
        
        .btn-menu:hover::before {
            left: 100%;
        }
        
        /* Estado vacío */
        .empty-state {
            text-align: center;
            padding: 4rem 2rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .empty-state h2 {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: var(--yellow);
        }
        
        .empty-state p {
            font-size: 1.1rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }
        
        .empty-state .btn-menu {
            max-width: 300px;
            margin: 0 auto;
        }
        
        /* Navegación simple */
        .simple-nav {
            text-align: center;
            margin-top: 4rem;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .nav-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--yellow);
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            padding: 0.8rem 1.5rem;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }
        
        .nav-link:hover {
            background: rgba(255, 255, 255, 0.2);
            color: var(--white);
            transform: translateY(-2px);
        }
        
       /* Botón flotante de casa */
        .floating-home-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: var(--white);
            font-size: 1.5rem;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            z-index: 1000;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
        
        .floating-home-btn:hover {
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
            color: var(--white);
        }
        
        .floating-home-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .floating-home-btn:hover::before {
            opacity: 1;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .brand-title {
                font-size: 1.5rem;
            }
            
            .brand-subtitle {
                font-size: 0.9rem;
            }
            
            .years-tradition {
                font-size: 1.2rem;
            }
            
            .tacos-title {
                font-size: 2.5rem;
            }
            
            .category-title {
                font-size: 2.2rem;
            }
            
            .products-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            .container {
                padding: 0 0.5rem 2rem;
            }
            
            .floating-home-btn {
                bottom: 20px;
                right: 20px;
                width: 55px;
                height: 55px;
                font-size: 1.3rem;
            }
        }
        
        @media (max-width: 480px) {
            .logo-section {
                flex-direction: column;
                text-align: center;
            }
            
            .brand-text {
                text-align: center;
            }
            
            .brand-title {
                font-size: 1.3rem;
            }
            
            .years-tradition {
                font-size: 1rem;
            }
            
            .tacos-title {
                font-size: 2rem;
            }
            
            .category-title {
                font-size: 1.8rem;
            }
            
            .product-card {
                padding: 1.2rem;
            }
            
            .product-img {
                height: 180px;
            }
            
            .floating-home-btn {
                bottom: 15px;
                right: 15px;
                width: 50px;
                height: 50px;
                font-size: 1.2rem;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- Header Mejorado -->
        <header class="brand-header">
            <div class="logo-section">
                <img src="imgs/logo.png" alt="Taquería el Mexicano" class="logo-img">
                <div class="brand-text">
                    <h1 class="brand-title">CATÁLOGO - TAQUERÍA EL MEXICANO</h1>
                    <p class="brand-subtitle">LOS MEROS BUENOS DE CHILPANCINGO</p>
                </div>
            </div>
        
        </header>
        
        <!-- Categoría actual -->
        <section class="current-category">
            <h1 class="category-title"><?php echo htmlspecialchars($titulo_catalogo); ?></h1>
            <p class="category-desc"><?php echo htmlspecialchars($descripcion_catalogo); ?></p>
        </section>
        
        <!-- Productos -->
        <?php if (!empty($productos_a_mostrar)): ?>
            <div class="products-grid">
                <?php foreach ($productos_a_mostrar as $prod): ?>
                    <div class="product-card">
                        <div class="product-img">
    <?php if (!empty($prod['foto_url'])): ?>
        <img src="/<?php echo htmlspecialchars($prod['foto_url']); ?>" alt="<?php echo htmlspecialchars($prod['titulo']); ?>">
    <?php else: ?>
        <img src="imgs/default_image.png" alt="Imagen por defecto">
    <?php endif; ?>
</div>
                        <h3 class="product-title"><?php echo htmlspecialchars($prod['titulo']); ?></h3>
                        <p class="product-desc"><?php echo htmlspecialchars($prod['descripcion']); ?></p>
                        <div class="product-price">$<?php echo number_format($prod['precio'], 2); ?> MXN</div>
                        <a href="menu.php?cat_id=<?php echo $categoria_encontrada['id_categoria']; ?>" class="btn-menu">
                                <i class="fas fa-shopping-cart"></i> Ordenar Ahora
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <div class="empty-state">
                <h2>No hay productos en esta categoría</h2>
                <p>Lo sentimos, actualmente no tenemos productos disponibles en <?php echo htmlspecialchars($titulo_catalogo); ?>.</p>
                <a href="menu.php" class="btn-menu">
                    <i class="fas fa-utensils"></i> Ver Menú Completo
                </a>
            </div>
        <?php endif; ?>
        
         <!-- Botón flotante de casa -->
    <a href="../index.php" class="floating-home-btn" title="Ir al Inicio">
        <i class="fas fa-home"></i>
    </a>
    
    </div>
    
    <script>
        // Función para track clic en "Ordenar" como InitiateCheckout o AddToCart proxy
        function trackOrderClick(productId, productName, price) {
            if (typeof fbq !== 'undefined') {
                fbq('track', 'InitiateCheckout', {
                    content_name: productName,
                    content_ids: [productId],
                    content_type: 'product',
                    value: price,
                    currency: 'MXN'
                });
                console.log('FB Pixel: InitiateCheckout tracked for product ' + productName);
            }
        }
        
        // Efectos mejorados de interacción
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.product-card');
            
            cards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-10px) scale(1.02)';
                });
                
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0) scale(1)';
                });
            });
            
            // Efecto de aparición suave
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };
            
            const observer = new IntersectionObserver(function(entries) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, observerOptions);
            
            // Aplicar a las tarjetas de producto
            document.querySelectorAll('.product-card').forEach(card => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
                observer.observe(card);
            });
        });
    </script>
</body>

</html>