{% extends "base.html" %}

{% block title %}{{ empresa.Nombre }} - TallArt{% endblock %}

{% block extra_css %}
<style>
    /* Hero Gradient Animation */
    @keyframes heroGradient {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    
    .hero-gradient-empresa {
        background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #4facfe);
        background-size: 400% 400%;
        animation: heroGradient 15s ease infinite;
    }
    
    /* Float Animation */
    @keyframes float {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(5deg); }
    }
    
    .float-particle {
        animation: float 6s ease-in-out infinite;
    }
    
    /* Fade In Up */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .animate-fade-in-up {
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        opacity: 0;
    }
    
    /* Shimmer Effect */
    @keyframes shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }
    
    .shimmer-effect {
        position: relative;
        overflow: hidden;
    }
    
    .shimmer-effect::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        animation: shimmer 3s infinite;
    }
    
    /* Product Card Enhanced */
    .product-card-enhanced {
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .product-card-enhanced:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
    
    .product-card-enhanced:nth-child(1) { animation-delay: 0.1s; }
    .product-card-enhanced:nth-child(2) { animation-delay: 0.2s; }
    .product-card-enhanced:nth-child(3) { animation-delay: 0.3s; }
    .product-card-enhanced:nth-child(4) { animation-delay: 0.4s; }
    
    /* Image Zoom */
    .product-image-wrapper {
        position: relative;
        overflow: hidden;
        height: 240px;
    }
    
    .product-image-wrapper img {
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .product-card-enhanced:hover .product-image-wrapper img {
        transform: scale(1.15);
    }
    
    /* Button Ripple */
    .btn-modern {
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .btn-modern::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }
    
    .btn-modern:hover::before {
        width: 300px;
        height: 300px;
    }
    
    /* Sidebar Animation */
    .sidebar-card {
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        opacity: 0;
    }
    
    .sidebar-card:nth-child(1) { animation-delay: 0.2s; }
    .sidebar-card:nth-child(2) { animation-delay: 0.3s; }
    .sidebar-card:nth-child(3) { animation-delay: 0.4s; }
    
    /* Badge Animation */
    @keyframes badgePulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
    
    .badge-animated {
        animation: badgePulse 2s ease-in-out infinite;
    }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <!-- Hero Section Mejorado -->
    <div class="hero-gradient-empresa text-white py-24 relative overflow-hidden">
        <!-- Floating Particles -->
        <div class="absolute inset-0 overflow-hidden pointer-events-none">
            <div class="float-particle absolute top-20 left-10 w-32 h-32 bg-white opacity-10 rounded-full blur-xl"></div>
            <div class="float-particle absolute top-40 right-20 w-40 h-40 bg-purple-300 opacity-10 rounded-full blur-2xl" style="animation-delay: 1s;"></div>
            <div class="float-particle absolute bottom-20 left-1/3 w-36 h-36 bg-blue-300 opacity-10 rounded-full blur-xl" style="animation-delay: 2s;"></div>
        </div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div class="animate-fade-in-up">
                    <div class="inline-block mb-4">
                        <span class="badge-animated bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full text-sm font-bold">
                            Empresa Destacada
                        </span>
                    </div>
                    <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">{{ empresa.Nombre }}</h1>
                    <p class="text-xl text-white/90 mb-8 leading-relaxed">{{ empresa.Descripcion or 'Descubre productos artesanales únicos' }}</p>
                    
                    <div class="flex items-center mb-8 bg-white/10 backdrop-blur-md rounded-2xl p-4 inline-block">
                        <div class="flex text-yellow-400 mr-3">
                            {% for i in range(5) %}
                                <svg class="w-7 h-7 fill-current" viewBox="0 0 24 24">
                                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                </svg>
                            {% endfor %}
                        </div>
                        <span class="text-2xl font-bold mr-2">{{ empresa.CalificacionPromedio or '5.0' }}</span>
                    </div>
                    
                    <div class="flex flex-wrap gap-4">
                        {% if empresa.Latitud and empresa.Longitud %}
                        <a href="https://www.google.com/maps?q={{ empresa.Latitud }},{{ empresa.Longitud }}" target="_blank" class="bg-white/20 backdrop-blur-md rounded-xl px-6 py-4 border border-white/30 hover:bg-white/40 transition-all duration-300 cursor-pointer group">
                            <div class="flex items-center space-x-2 mb-1">
                                <svg class="w-5 h-5 text-white group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                                <span class="text-sm text-white/80 font-medium">Ubicación</span>
                                <svg class="w-4 h-4 text-white/60 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                                </svg>
                            </div>
                            <div class="text-white font-bold text-lg group-hover:underline">{{ empresa.Ubicacion or 'Perú' }}</div>
                        </a>
                        {% else %}
                        <div class="bg-white/20 backdrop-blur-md rounded-xl px-6 py-4 border border-white/30 hover:bg-white/30 transition-all duration-300">
                            <div class="flex items-center space-x-2 mb-1">
                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                                <span class="text-sm text-white/80 font-medium">Ubicación</span>
                            </div>
                            <div class="text-white font-bold text-lg">{{ empresa.Ubicacion or 'Perú' }}</div>
                        </div>
                        {% endif %}
                        <div class="bg-white/20 backdrop-blur-md rounded-xl px-6 py-4 border border-white/30 hover:bg-white/30 transition-all duration-300">
                            <div class="flex items-center space-x-2 mb-1">
                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                                </svg>
                                <span class="text-sm text-white/80 font-medium">Especialidad</span>
                            </div>
                            <div class="text-white font-bold text-lg">{{ empresa.Especialidad or 'Artesanías' }}</div>
                        </div>
                    </div>
                </div>
                
                <div class="relative animate-fade-in-up" style="animation-delay: 0.2s;">
                    <div class="shimmer-effect rounded-2xl overflow-hidden shadow-2xl border-4 border-white/30">
                        {% if empresa.LogoURL %}
                            <img src="{{ url_for('static', filename=empresa.LogoURL) }}" 
                                 alt="{{ empresa.Nombre }}" 
                                 class="w-full h-96 object-cover">
                        {% elif empresa.ImagenPrincipal %}
                            <img src="{% if empresa.ImagenPrincipal.startswith('http') %}{{ empresa.ImagenPrincipal }}{% else %}{{ url_for('static', filename=empresa.ImagenPrincipal) }}?v=3{% endif %}" 
                                 alt="{{ empresa.Nombre }}" 
                                 class="w-full h-96 object-cover">
                        {% else %}
                            <div class="bg-white/20 backdrop-blur-sm h-96 flex flex-col items-center justify-center">
                                <svg class="w-32 h-32 text-white/50 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                </svg>
                                <p class="text-white/75 text-lg">Imagen no disponible</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        
        <!-- SVG Wave -->
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 105C120 90 240 60 360 45C480 30 600 30 720 37.5C840 45 960 60 1080 67.5C1200 75 1320 75 1380 75L1440 75V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z" fill="#F9FAFB"/>
            </svg>
        </div>
    </div>

    <!-- Content Section -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Main Content -->
            <div class="lg:col-span-2 space-y-10">
                <!-- About Section Mejorada -->
                <div class="bg-white rounded-2xl shadow-xl p-8 animate-fade-in-up border-2 border-gray-100 hover:border-purple-200 transition-all duration-300">
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="w-12 h-12 bg-gradient-to-r from-purple-600 to-blue-500 rounded-xl flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <h2 class="text-3xl font-bold bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent">
                            Acerca de {{ empresa.Nombre }}
                        </h2>
                    </div>
                    <p class="text-gray-600 leading-relaxed text-lg">
                        {{ empresa.DescripcionLarga or 'Empresa dedicada a la creación de productos artesanales de alta calidad, comprometida con preservar las tradiciones y técnicas ancestrales de nuestros artesanos.' }}
                    </p>
                </div>

                <!-- Products Section Mejorada -->
                <div class="bg-white rounded-2xl shadow-xl p-8 animate-fade-in-up border-2 border-gray-100" style="animation-delay: 0.1s;">
                    <div class="flex items-center justify-between mb-8">
                        <div class="flex items-center space-x-3">
                            <div class="w-12 h-12 bg-gradient-to-r from-purple-600 to-blue-500 rounded-xl flex items-center justify-center">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                                </svg>
                            </div>
                            <h2 class="text-3xl font-bold bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent">
                                Productos Destacados
                            </h2>
                        </div>
                        {% if productos %}
                        <span class="text-sm font-semibold text-gray-500 bg-gray-100 px-4 py-2 rounded-full">
                            {{ productos|length }} productos
                        </span>
                        {% endif %}
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {% if productos %}
                            {% for producto in productos %}
                            <div class="product-card-enhanced bg-white rounded-2xl shadow-lg overflow-hidden border-2 border-gray-100 hover:border-purple-300">
                                <div class="product-image-wrapper">
                                    {% if producto.ImagenPrincipal %}
                                        {% if producto.ImagenPrincipal.startswith('http') %}
                                            <img src="{{ producto.ImagenPrincipal }}" alt="{{ producto.Nombre }}" class="w-full h-full object-cover producto-detalle cursor-pointer"
                                                data-nombre="{{ producto.Nombre }}"
                                                data-descripcion="{{ producto.Descripcion }}"
                                                data-precio="S/ {{ '%.2f'|format(producto.Precio) }}"
                                                data-imagen="{{ producto.ImagenPrincipal }}"
                                                data-categoria="{{ producto.CategoriaNombre if producto.CategoriaNombre else 'General' }}"
                                                data-stock="{{ producto.Stock if producto.Stock else 0 }}"
                                                data-producto-id="{{ producto.ProductoID }}">
                                        {% else %}
                                            <img src="{{ url_for('static', filename=producto.ImagenPrincipal.lstrip('/').replace('static/', '')) }}" alt="{{ producto.Nombre }}" class="w-full h-full object-cover producto-detalle cursor-pointer"
                                                data-nombre="{{ producto.Nombre }}"
                                                data-descripcion="{{ producto.Descripcion }}"
                                                data-precio="S/ {{ '%.2f'|format(producto.Precio) }}"
                                                data-imagen="{{ url_for('static', filename=producto.ImagenPrincipal.lstrip('/').replace('static/', '')) }}"
                                                data-categoria="{{ producto.CategoriaNombre if producto.CategoriaNombre else 'General' }}"
                                                data-stock="{{ producto.Stock if producto.Stock else 0 }}"
                                                data-producto-id="{{ producto.ProductoID }}">
                                        {% endif %}
                                    {% else %}
                                        <div class="w-full h-full bg-gradient-to-br from-purple-100 to-blue-100 flex items-center justify-center">
                                            <svg class="w-20 h-20 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                            </svg>
                                        </div>
                                    {% endif %}
                                    <!-- Badge superior y botón Ver detalles -->
                                    <div class="absolute top-3 right-3 bg-gradient-to-r from-purple-600 to-blue-500 text-white px-3 py-1.5 rounded-full text-xs font-bold shadow-lg">
                                        Destacado
                                    </div>
                                    <!-- Botón Ver detalles en hover -->
                                    <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-60 transition-all duration-300 flex items-center justify-center opacity-0 hover:opacity-100">
                                        <button class="ver-detalles-btn bg-white text-purple-600 px-6 py-3 rounded-full font-bold shadow-xl transform hover:scale-110 transition-all duration-300 flex items-center space-x-2"
                                                data-nombre="{{ producto.Nombre }}"
                                                data-descripcion="{{ producto.Descripcion }}"
                                                data-precio="S/ {{ '%.2f'|format(producto.Precio) }}"
                                                data-imagen="{% if producto.ImagenPrincipal %}{% if producto.ImagenPrincipal.startswith('http') %}{{ producto.ImagenPrincipal }}{% else %}{{ url_for('static', filename=producto.ImagenPrincipal.lstrip('/').replace('static/', '')) }}{% endif %}{% endif %}"
                                                data-categoria="{{ producto.CategoriaNombre if producto.CategoriaNombre else 'General' }}"
                                                data-stock="{{ producto.Stock if producto.Stock else 0 }}"
                                                data-producto-id="{{ producto.ProductoID }}">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                            </svg>
                                            <span>Ver detalles</span>
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="p-6">
                                    <h3 class="text-xl font-bold text-gray-900 mb-2 line-clamp-1 hover:text-purple-600 transition-colors">
                                        {{ producto.Nombre }}
                                    </h3>
                                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">{{ producto.Descripcion }}</p>
                                    
                                    <div class="flex items-center justify-between mb-5">
                                        <span class="text-3xl font-bold bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent">
                                            S/ {{ "%.2f"|format(producto.Precio) }}
                                        </span>
                                        {% if producto.Stock %}
                                        <span class="text-sm font-semibold text-gray-500 bg-gray-100 px-3 py-1 rounded-full">
                                            Stock: {{ producto.Stock }}
                                        </span>
                                        {% endif %}
                                    </div>
                                    
                                    <div class="flex space-x-2">
                                        <button onclick="addToCart({{ producto.ProductoID }})" 
                                                class="btn-modern flex-1 bg-gradient-to-r from-purple-600 to-blue-500 text-white py-3 px-4 rounded-xl hover:from-purple-700 hover:to-blue-600 transition-all duration-300 font-bold text-sm shadow-lg hover:shadow-xl flex items-center justify-center space-x-2">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                                            </svg>
                                            <span>Agregar</span>
                                        </button>
                                        <button onclick="addToFavorites({{ producto.ProductoID }})" 
                                                class="btn-modern px-4 py-3 border-2 border-purple-200 text-purple-600 rounded-xl hover:bg-purple-50 hover:border-purple-400 transition-all duration-300">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        {% else %}
                            <div class="col-span-full">
                                <div class="bg-gradient-to-br from-white to-gray-50 border-2 border-dashed border-gray-300 rounded-2xl p-12 text-center">
                                    <div class="mx-auto w-20 h-20 rounded-full bg-gradient-to-r from-purple-100 to-blue-100 flex items-center justify-center mb-4">
                                        <svg class="w-10 h-10 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                                        </svg>
                                    </div>
                                    <h3 class="text-gray-800 font-bold text-2xl mb-2">Próximamente nuevos productos</h3>
                                    <p class="text-gray-500 text-lg">Estamos preparando artesanías únicas para ti</p>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
    </div>

            <!-- Sidebar Mejorado -->
            <div class="space-y-6">
                <!-- Información de Contacto -->
                <div class="sidebar-card bg-white rounded-2xl shadow-xl p-6 border-2 border-gray-100 hover:border-purple-200 transition-all duration-300">
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="w-10 h-10 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg flex items-center justify-center">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900">Información de Contacto</h3>
                    </div>
                    <div class="space-y-4">
                        {% if empresa.Latitud and empresa.Longitud %}
                        <a href="https://www.google.com/maps?q={{ empresa.Latitud }},{{ empresa.Longitud }}" target="_blank" class="flex items-center p-3 bg-gray-50 rounded-xl hover:bg-purple-100 transition-colors duration-300 group cursor-pointer">
                            <svg class="w-5 h-5 text-purple-600 mr-3 flex-shrink-0 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                            <span class="text-gray-700 font-medium group-hover:text-purple-600 group-hover:underline flex-1">{{ empresa.Ubicacion or 'Perú' }}</span>
                            <svg class="w-4 h-4 text-gray-400 group-hover:text-purple-600 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                            </svg>
                        </a>
                        {% else %}
                        <div class="flex items-center p-3 bg-gray-50 rounded-xl hover:bg-purple-50 transition-colors duration-300">
                            <svg class="w-5 h-5 text-purple-600 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                            <span class="text-gray-700 font-medium">{{ empresa.Ubicacion or 'Perú' }}</span>
                        </div>
                        {% endif %}
                        {% if empresa.Telefono %}
                        <a href="https://wa.me/{{ empresa.Telefono|replace(' ', '')|replace('+', '')|replace('-', '') }}" target="_blank" rel="noopener noreferrer" class="flex items-center p-3 bg-green-50 rounded-xl hover:bg-green-100 transition-all duration-300 group cursor-pointer border-2 border-transparent hover:border-green-300">
                            <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center mr-3 group-hover:scale-110 transition-transform">
                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                                </svg>
                            </div>
                            <div class="flex-1">
                                <p class="text-xs text-green-700 font-medium">WhatsApp</p>
                                <p class="text-gray-800 font-bold group-hover:text-green-600">{{ empresa.Telefono }}</p>
                            </div>
                            <svg class="w-4 h-4 text-gray-400 group-hover:text-green-600 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                            </svg>
                        </a>
                        {% else %}
                        <div class="flex items-center p-3 bg-gray-50 rounded-xl hover:bg-purple-50 transition-colors duration-300">
                            <svg class="w-5 h-5 text-purple-600 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                            </svg>
                            <span class="text-gray-700 font-medium">Contactar</span>
                        </div>
                        {% endif %}
                        <div class="flex items-center p-3 bg-gray-50 rounded-xl hover:bg-purple-50 transition-colors duration-300">
                            <svg class="w-5 h-5 text-purple-600 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                            </svg>
                            <span class="text-gray-700 font-medium break-all">{{ empresa.Email or 'info@empresa.com' }}</span>
                        </div>
                    </div>
                </div>

                <!-- Redes Sociales -->
                {% if empresa.Facebook or empresa.TikTok %}
                <div class="sidebar-card bg-gradient-to-br from-purple-50 to-blue-50 rounded-2xl shadow-xl p-6 border-2 border-purple-100">
                    <div class="flex items-center space-x-3 mb-5">
                        <div class="w-10 h-10 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg flex items-center justify-center">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900">Síguenos</h3>
                    </div>
                    <div class="space-y-3">
                        {% if empresa.Facebook %}
                        <a href="{{ empresa.Facebook }}" target="_blank" rel="noopener noreferrer" 
                           class="flex items-center p-3 bg-white rounded-xl hover:bg-blue-50 transition-all duration-300 group border-2 border-transparent hover:border-blue-200 shadow-sm hover:shadow-md">
                            <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center mr-3 group-hover:scale-110 transition-transform">
                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                </svg>
                            </div>
                            <span class="text-gray-700 font-semibold group-hover:text-blue-600 flex-1">Facebook</span>
                            <svg class="w-4 h-4 text-gray-400 group-hover:text-blue-600 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                            </svg>
                        </a>
                        {% endif %}
                        {% if empresa.TikTok %}
                        <a href="{{ empresa.TikTok }}" target="_blank" rel="noopener noreferrer" 
                           class="flex items-center p-3 bg-white rounded-xl hover:bg-gray-50 transition-all duration-300 group border-2 border-transparent hover:border-gray-300 shadow-sm hover:shadow-md">
                            <div class="w-10 h-10 bg-black rounded-lg flex items-center justify-center mr-3 group-hover:scale-110 transition-transform">
                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
                                </svg>
                            </div>
                            <span class="text-gray-700 font-semibold group-hover:text-gray-900 flex-1">TikTok</span>
                            <svg class="w-4 h-4 text-gray-400 group-hover:text-gray-700 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                            </svg>
                        </a>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <!-- Acciones -->
                <div class="sidebar-card bg-white rounded-2xl shadow-xl p-6 border-2 border-gray-100">
                    <h3 class="text-xl font-bold text-gray-900 mb-5">Acciones Rápidas</h3>
                    <div class="space-y-3">
                        <button class="btn-modern w-full bg-gradient-to-r from-purple-600 to-blue-500 text-white py-3 px-4 rounded-xl font-bold hover:from-purple-700 hover:to-blue-600 transition-all duration-300 shadow-lg hover:shadow-xl flex items-center justify-center space-x-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                            </svg>
                            <span>Contactar Empresa</span>
                        </button>
                        <button class="btn-modern w-full border-2 border-purple-200 text-purple-700 py-3 px-4 rounded-xl font-bold hover:bg-purple-50 hover:border-purple-400 transition-all duration-300 flex items-center justify-center space-x-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
                            </svg>
                            <span>Ver Catálogo Completo</span>
                        </button>
                        <button class="btn-modern w-full border-2 border-gray-300 text-gray-700 py-3 px-4 rounded-xl font-bold hover:bg-gray-50 hover:border-gray-400 transition-all duration-300 flex items-center justify-center space-x-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                            <span>Solicitar Cotización</span>
                        </button>
                    </div>
                </div>

                <!-- Estadísticas -->
                <div class="sidebar-card bg-gradient-to-br from-purple-50 to-blue-50 rounded-2xl shadow-xl p-6 border-2 border-purple-100">
                    <div class="flex items-center space-x-3 mb-5">
                        <div class="w-10 h-10 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg flex items-center justify-center">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900">Estadísticas</h3>
                    </div>
                    <div class="space-y-4">
                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                            <span class="text-gray-600 font-medium">Años de experiencia</span>
                            <span class="font-bold text-purple-600 text-lg">{% if empresa.AñosExperiencia %}{{ empresa.AñosExperiencia }}+{% else %}5+{% endif %}</span>
                        </div>
                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                            <span class="text-gray-600 font-medium">Productos vendidos</span>
                            <span class="font-bold text-purple-600 text-lg">{{ empresa.productos_vendidos or '500+' }}</span>
                        </div>
                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                            <span class="text-gray-600 font-medium">Clientes satisfechos</span>
                            <span class="font-bold text-purple-600 text-lg">{{ empresa.clientes or '200+' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Datos de la empresa
    const empresaData = {{ empresa|tojson }};
    
    
    
    // Agregar al carrito
    async function addToCart(productoId) {
        try {
            const response = await fetch('/cart/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `product_id=${productoId}&quantity=1`
            });
            
            if (response.ok) {
                showNotification('Producto agregado al carrito', 'success');
                updateCartCount();
            } else {
                showNotification('Error al agregar al carrito', 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showNotification('Error al agregar al carrito', 'error');
        }
    }
    
    // Agregar a favoritos
    async function addToFavorites(productoId) {
        try {
            const response = await fetch('/api/favoritos/agregar', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    item_id: productoId,
                    type: 'producto'
                })
            });
            
            if (response.ok) {
                showNotification('Producto agregado a favoritos', 'success');
            } else {
                showNotification('Error al agregar a favoritos', 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showNotification('Error al agregar a favoritos', 'error');
        }
    }
    
    // Toggle favorito producto
    function toggleFavoritoProducto(index) {
        {% if session.user_id %}
        TallArt.UI.showAlert('Producto agregado a favoritos', 'success', 1500);
        {% else %}
        TallArt.UI.showAlert('Debes iniciar sesión para agregar favoritos', 'warning');
        {% endif %}
    }
    
    // Cargar más productos
    function cargarMasProductos() {
        TallArt.UI.showAlert('Función en desarrollo', 'info', 1500);
    }
    


           function updateCartCount() {
               fetch('/cart/count')
               .then(response => response.json())
               .then(data => {
                   const cartCount = document.getElementById('cartCount');
                   if (cartCount) {
                       cartCount.textContent = data.count;
                   }
               })
               .catch(error => console.error('Error updating cart count:', error));
           }

           function showNotification(message, type) {
               const notification = document.createElement('div');
               notification.className = `fixed top-4 right-4 z-50 px-4 py-2 rounded-lg text-white ${
                   type === 'success' ? 'bg-green-500' : 'bg-red-500'
               }`;
               notification.textContent = message;
               document.body.appendChild(notification);
               
               setTimeout(() => {
                   notification.remove();
               }, 3000);
           }

           // Modal de detalles del producto
           function mostrarDetallesProducto(nombre, descripcion, precio, imagen, categoria, stock, productoId) {
               document.getElementById('modalTitulo').textContent = nombre;
               document.getElementById('modalDescripcion').textContent = descripcion;
               document.getElementById('modalPrecio').textContent = precio;
               document.getElementById('modalImagen').src = imagen;
               document.getElementById('modalImagen').alt = nombre;
               document.getElementById('modalCategoria').textContent = categoria;
               document.getElementById('modalStock').textContent = `Stock: ${stock}`;
               
               // Guardar producto ID en los botones del modal
               document.getElementById('modalAddToCart').setAttribute('data-producto-id', productoId);
               document.getElementById('modalAddToFavorites').setAttribute('data-producto-id', productoId);
               
               document.getElementById('productoModal').classList.remove('hidden');
               document.body.style.overflow = 'hidden';
           }

           function cerrarModal() {
               document.getElementById('productoModal').classList.add('hidden');
               document.body.style.overflow = 'auto';
           }

           // Event delegation para los botones "Ver detalles"
           document.addEventListener('click', function(e) {
               const btnDetalles = e.target.closest('.ver-detalles-btn');
               if (btnDetalles) {
                   e.preventDefault();
                   e.stopPropagation();
                   const nombre = btnDetalles.getAttribute('data-nombre');
                   const descripcion = btnDetalles.getAttribute('data-descripcion');
                   const precio = btnDetalles.getAttribute('data-precio');
                   const imagen = btnDetalles.getAttribute('data-imagen');
                   const categoria = btnDetalles.getAttribute('data-categoria');
                   const stock = btnDetalles.getAttribute('data-stock');
                   const productoId = btnDetalles.getAttribute('data-producto-id');
                   mostrarDetallesProducto(nombre, descripcion, precio, imagen, categoria, stock, productoId);
                   return;
               }

               const imgDetalle = e.target.closest('.producto-detalle');
               if (imgDetalle) {
                   const nombre = imgDetalle.getAttribute('data-nombre');
                   const descripcion = imgDetalle.getAttribute('data-descripcion');
                   const precio = imgDetalle.getAttribute('data-precio');
                   const imagen = imgDetalle.getAttribute('data-imagen');
                   const categoria = imgDetalle.getAttribute('data-categoria');
                   const stock = imgDetalle.getAttribute('data-stock');
                   const productoId = imgDetalle.getAttribute('data-producto-id');
                   mostrarDetallesProducto(nombre, descripcion, precio, imagen, categoria, stock, productoId);
                   return;
               }
           });

           // Cerrar modal al hacer clic fuera de él
           document.addEventListener('DOMContentLoaded', function() {
               const modal = document.getElementById('productoModal');
               if (modal) {
                   modal.addEventListener('click', function(e) {
                       if (e.target === this) {
                           cerrarModal();
                       }
                   });
               }
           });

           // Cerrar modal con tecla Escape
           document.addEventListener('keydown', function(e) {
               if (e.key === 'Escape') {
                   cerrarModal();
               }
           });

           // Botones del modal
           document.addEventListener('DOMContentLoaded', function() {
               const modalAddToCart = document.getElementById('modalAddToCart');
               if (modalAddToCart) {
                   modalAddToCart.addEventListener('click', function() {
                       const productoId = this.getAttribute('data-producto-id');
                       if (productoId) {
                           addToCart(parseInt(productoId));
                           cerrarModal();
                       }
                   });
               }

               const modalAddToFavorites = document.getElementById('modalAddToFavorites');
               if (modalAddToFavorites) {
                   modalAddToFavorites.addEventListener('click', function() {
                       const productoId = this.getAttribute('data-producto-id');
                       if (productoId) {
                           addToFavorites(parseInt(productoId));
                           cerrarModal();
                       }
                   });
               }
           });
       </script>

       <!-- Modal de Detalles del Producto -->
       <div id="productoModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50 flex items-center justify-center p-4">
           <div class="bg-white rounded-xl max-w-2xl w-full max-h-[85vh] overflow-y-auto shadow-xl animate-fade-in-scale">
               <div class="p-6">
                   <div class="flex justify-between items-center mb-4">
                       <h3 id="modalTitulo" class="text-2xl font-bold text-gray-900"></h3>
                       <button onclick="cerrarModal()" class="text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full p-2 transition-all duration-200">
                           <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                           </svg>
                       </button>
                   </div>
                   
                   <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                       <div>
                           <img id="modalImagen" src="" alt="" class="w-full h-64 object-cover rounded-lg shadow-md">
                       </div>
                       <div>
                           <div class="mb-3 flex items-center justify-between">
                               <span id="modalCategoria" class="inline-block bg-purple-100 text-purple-800 text-sm font-medium px-3 py-1 rounded-full"></span>
                               <span id="modalStock" class="text-sm font-semibold text-gray-600"></span>
                           </div>
                           <p id="modalDescripcion" class="text-gray-600 mb-4 text-sm leading-relaxed"></p>
                           <div class="flex items-center mb-6">
                               <span id="modalPrecio" class="text-3xl font-bold bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent"></span>
                           </div>
                           <div class="flex items-center mb-6">
                               <div class="flex text-yellow-400">
                                   <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24">
                                       <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                   </svg>
                                   <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24">
                                       <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                   </svg>
                                   <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24">
                                       <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                   </svg>
                                   <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24">
                                       <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                   </svg>
                                   <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24">
                                       <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                   </svg>
                               </div>
                               <span class="ml-2 text-sm text-gray-500">(5.0 - 127 reseñas)</span>
                           </div>
                           <!-- Botones de acción que aparecen solo en el modal -->
                           <div class="space-y-3">
                               <button id="modalAddToCart" class="w-full bg-gradient-to-r from-purple-600 to-blue-500 text-white py-3 px-4 rounded-lg text-sm font-bold hover:from-purple-700 hover:to-blue-600 transition-all duration-200 flex items-center justify-center space-x-2">
                                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                                   </svg>
                                   <span>Agregar al Carrito</span>
                               </button>
                               <button id="modalAddToFavorites" class="w-full border-2 border-purple-200 text-purple-600 py-3 px-4 rounded-lg text-sm font-bold hover:bg-purple-50 hover:border-purple-400 transition-all duration-200 flex items-center justify-center space-x-2">
                                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                                   </svg>
                                   <span>Agregar a Favoritos</span>
                               </button>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
       {% endblock %}