{% extends "base.html" %}

{% block title %}TallArt - Inicio{% endblock %}

{% block extra_css %}
  <!-- Swiper y FontAwesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
  
  <style>
    /* Animaciones de entrada progresiva */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    @keyframes slideInFromLeft {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes slideInFromRight {
        from {
            opacity: 0;
            transform: translateX(50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    /* Animación flotante para decoraciones */
    @keyframes float {
        0%, 100% {
            transform: translateY(0px) rotate(0deg);
        }
        50% {
            transform: translateY(-20px) rotate(5deg);
        }
    }
    
    /* Efecto de brillo en cards */
    @keyframes shimmer {
        0% {
            background-position: -1000px 0;
        }
        100% {
            background-position: 1000px 0;
        }
    }
    
    .animate-fade-in-up {
        animation: fadeInUp 0.8s ease-out forwards;
    }
    
    .animate-fade-in-scale {
        animation: fadeInScale 0.6s ease-out forwards;
    }
    
    .animate-slide-left {
        animation: slideInFromLeft 0.8s ease-out forwards;
    }
    
    .animate-slide-right {
        animation: slideInFromRight 0.8s ease-out forwards;
    }
    
    /* Cards mejoradas con efectos 3D */
    .card-premium {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }
    
    .card-premium::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
            45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 70%
        );
        transform: rotate(45deg);
        animation: shimmer 3s infinite;
    }
    
    .card-premium:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2),
                    0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    /* Efecto parallax para el hero */
    .hero-parallax {
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        position: relative;
    }
    
    /* Texto con efecto gradient */
    .text-gradient {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    /* Efecto hover para imágenes de productos */
    .product-image-wrapper {
        position: relative;
        overflow: hidden;
    }
    
    .product-image-wrapper img {
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .product-image-wrapper:hover img {
        transform: scale(1.15);
    }
    
    /* Animación de entrada para tarjetas */
    .reveal-left {
        opacity: 0;
        animation: slideInFromLeft 0.8s ease-out forwards;
    }
    
    /* Agregar delay progresivo */
    .reveal-left:nth-child(1) { animation-delay: 0.1s; }
    .reveal-left:nth-child(2) { animation-delay: 0.2s; }
    .reveal-left:nth-child(3) { animation-delay: 0.3s; }
    .reveal-left:nth-child(4) { animation-delay: 0.4s; }
    .reveal-left:nth-child(5) { animation-delay: 0.5s; }
    .reveal-left:nth-child(6) { animation-delay: 0.6s; }
    .reveal-left:nth-child(7) { animation-delay: 0.7s; }
    .reveal-left:nth-child(8) { animation-delay: 0.8s; }
    
    /* Botones con efectos modernos */
    .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.5s, height 0.5s;
    }
    
    .btn-modern:hover::before {
        width: 300px;
        height: 300px;
    }
    
    /* Efecto de partículas flotantes */
    .floating-decoration {
        animation: float 6s ease-in-out infinite;
    }
    
    /* Hero mejorado con gradiente animado */
    .hero-gradient {
        background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #4facfe);
        background-size: 400% 400%;
        animation: gradientShift 15s ease infinite;
    }
    
    @keyframes gradientShift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
  </style>
{% endblock %}

{% block content %}
<!-- Hero Section mejorado con animaciones -->
<div class="hero-gradient text-white py-12 relative overflow-hidden">
    <!-- Partículas flotantes decorativas -->
    <div class="absolute top-10 left-10 w-20 h-20 bg-white/10 rounded-full floating-decoration" style="animation-delay: 0s;"></div>
    <div class="absolute top-40 right-20 w-16 h-16 bg-white/10 rounded-full floating-decoration" style="animation-delay: 1s;"></div>
    <div class="absolute bottom-20 left-1/4 w-24 h-24 bg-white/10 rounded-full floating-decoration" style="animation-delay: 2s;"></div>
    <div class="absolute bottom-10 right-1/3 w-14 h-14 bg-white/10 rounded-full floating-decoration" style="animation-delay: 1.5s;"></div>
    
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <div class="animate-fade-in-scale">
            <h1 class="text-4xl md:text-6xl font-bold mb-4 leading-tight drop-shadow-2xl">
                Descubre la esencia del <span class="text-yellow-300">arte peruano</span>
            </h1>
            <p class="text-lg md:text-xl text-white/90 max-w-2xl mx-auto mb-8 drop-shadow-lg">
                En <strong class="text-yellow-300">TallArt</strong> conectamos artesanos locales con el mundo, 
                preservando la tradición y creatividad del Perú
            </p>
            <div class="flex flex-wrap justify-center gap-4 animate-fade-in-up" style="animation-delay: 0.3s;">
                <a href="{{ url_for('main.empresas') }}" 
                   class="btn-modern px-8 py-4 bg-white text-purple-600 rounded-full font-bold text-lg shadow-2xl hover:shadow-3xl hover:scale-105 transition-all duration-300">
                    Explorar Artesanos
                </a>
                <a href="{{ url_for('main.nosotros') }}" 
                   class="btn-modern px-8 py-4 bg-purple-600/30 backdrop-blur-md text-white border-2 border-white rounded-full font-bold text-lg shadow-2xl hover:bg-white/20 hover:scale-105 transition-all duration-300">
                    Conocer más
                </a>
            </div>
        </div>
    </div>
    
    <!-- Onda decorativa inferior -->
    <div class="absolute bottom-0 left-0 right-0">
        <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full">
            <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z" fill="white"/>
        </svg>
    </div>
</div>

<!-- Título Principal mejorado -->
<div class="py-12 bg-white text-center">
    <div class="max-w-4xl mx-auto px-4">
        <h2 class="text-4xl md:text-5xl font-bold text-gradient mb-4 animate-fade-in-up">
            Nuestros Productos
        </h2>
        <p class="text-gray-600 text-lg mb-6 animate-fade-in-up" style="animation-delay: 0.2s;">
            Cada pieza cuenta una historia única de tradición y creatividad
        </p>
        <div class="w-24 h-1 bg-gradient-to-r from-purple-600 to-blue-500 mx-auto rounded-full animate-fade-in-scale" style="animation-delay: 0.3s;"></div>
    </div>
</div>

<!-- Productos Section mejorada con animaciones -->
<div class="py-16 relative bg-gradient-to-b from-white via-gray-50 to-white">
    <!-- Patrón de fondo decorativo -->
    <div class="absolute inset-0 opacity-5">
        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 1px 1px, #667eea 1px, transparent 0); background-size: 40px 40px;"></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 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- Productos desde la base de datos -->
            {% for producto in productos %}
            <div class="card-premium rounded-2xl overflow-hidden reveal-left group flex flex-col shadow-xl">    <div class="product-image-wrapper relative h-64 overflow-hidden bg-gray-100">
                    {% if producto.ImagenPrincipal %}
                        {% if producto.ImagenPrincipal.startswith('http') %}
                            <img 
                                src="{{ producto.ImagenPrincipal }}" 
                                alt="{{ producto.Nombre }}" 
                                class="w-full h-full object-cover"
                                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"
                                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 de categoría -->
                    <div class="absolute top-3 left-3 bg-purple-600 text-white px-3 py-1 rounded-full text-xs font-semibold shadow-lg">
                        {{ producto.CategoriaNombre }}
                    </div>
                </div>
                
                <div class="p-5 bg-white flex flex-col flex-grow">
                    <h3 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors line-clamp-2">
                        {{ producto.Nombre }}
                    </h3>
                    <p class="text-gray-600 text-sm mb-3 line-clamp-2 flex-grow">
                        {{ producto.Descripcion }}
                    </p>
                    
                    <!-- Precio y rating -->
                    <div class="flex items-center justify-between mb-3">
                        <span class="text-2xl font-bold bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent">
                            S/ {{ "%.2f"|format(producto.Precio) }}
                        </span>
                        <div class="flex items-center space-x-1">
                            <div class="flex text-yellow-400">
                                {% for i in range(5) %}
                                <svg class="w-4 h-4 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>
                        </div>
                    </div>
                    
                    <!-- Empresa -->
                    <div class="text-xs text-gray-500 mb-4 flex items-center">
                        <svg class="w-4 h-4 mr-1" 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>
                        <span class="font-medium">{{ producto.EmpresaNombre }}</span>
                    </div>
                    
                    <!-- Botones mejorados -->
                    <div class="flex gap-2 mt-auto">
                        <button 
                            class="btn-modern btn-add-to-cart flex-1 bg-gradient-to-r from-purple-600 to-blue-500 text-white px-4 py-3 rounded-xl text-sm font-bold hover:from-purple-700 hover:to-blue-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 flex items-center justify-center space-x-2"
                            data-id="{{ producto.ProductoID }}"
                            onclick="event.stopPropagation();">
                            <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 
                            class="btn-modern btn-add-to-favorites bg-gradient-to-r from-pink-500 to-red-500 text-white px-4 py-3 rounded-xl text-sm font-bold hover:from-pink-600 hover:to-red-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105"
                            data-id="{{ producto.ProductoID }}"
                            onclick="event.stopPropagation();">
                            <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>
                        <button 
                            class="btn-modern bg-gradient-to-r from-orange-500 to-yellow-500 text-white px-4 py-3 rounded-xl text-sm font-bold hover:from-orange-600 hover:to-yellow-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105"
                            onclick="window.location.href='/producto/{{ producto.ProductoID }}';"
                            title="Ver detalles">
                            <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>
                        </button>
                    </div>
                </div>
            </div>
            {% else %}
            <!-- Estado vacío mejorado -->
            <div class="col-span-1 md:col-span-2 lg:col-span-4">
                <div class="bg-gradient-to-br from-white to-gray-50 border-2 border-dashed border-gray-300 rounded-2xl p-12 text-center shadow-xl">
                    <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" />
                        </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">Nuestros artesanos están preparando piezas únicas para ti</p>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <!-- Call to Action mejorado -->
        <div class="text-center mt-16 animate-fade-in-up">
            <div class="bg-gradient-to-r from-purple-600 via-blue-600 to-purple-600 rounded-3xl p-10 text-white relative overflow-hidden max-w-3xl mx-auto shadow-2xl">
                <!-- Efecto de brillo animado -->
                <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
                
                <div class="relative z-10">
                    <h3 class="text-3xl md:text-4xl font-bold mb-3">
                        ¿Buscas algo específico?
                    </h3>
                    <p class="text-lg text-purple-100 mb-6 max-w-2xl mx-auto">
                        Explora nuestras empresas artesanales y descubre productos únicos
                    </p>
                    <div class="flex flex-wrap justify-center gap-4">
                        <a href="{{ url_for('main.empresas') }}" 
                           class="btn-modern px-8 py-4 bg-white text-purple-600 rounded-full font-bold text-lg shadow-2xl hover:shadow-3xl hover:scale-105 transition-all duration-300">
                            Explorar Empresas
                        </a>
                    </div>
                </div>
                
                <!-- Decoración flotante -->
                <div class="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full floating-decoration"></div>
                <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-white/10 rounded-full floating-decoration" style="animation-delay: 1s;"></div>
            </div>
        </div>
    </div>
</div>


{% endblock %}

{% block scripts %}
  <!-- Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

  <!-- Estilos 3D personalizados -->
  <style>
    .shadow-3xl {
      box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.35), 
                  0 0 0 1px rgba(255, 255, 255, 0.1),
                  inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    
    .card-3d-ceramica {
      background: linear-gradient(145deg, #ffffff, #f8f9fa);
      border: 1px solid rgba(255, 255, 255, 0.2);
      position: relative;
    }
    
    .card-3d-ceramica::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 100%);
      border-radius: 12px;
      pointer-events: none;
    }
    
    .card-3d-ceramica:hover {
      background: linear-gradient(145deg, #ffffff, #f1f3f4);
      transform: translateY(-16px) rotateX(5deg) rotateY(2deg);
      box-shadow: 0 40px 80px -12px rgba(0, 0, 0, 0.4), 
                  0 0 0 1px rgba(255, 255, 255, 0.15),
                  inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    
    .img-3d {
      transform-style: preserve-3d;
      transition: transform 0.5s ease;
    }
    
    .card-3d-ceramica:hover .img-3d {
      transform: scale(1.05) rotateX(-2deg);
    }
    
    .vasija-container {
      transform-style: preserve-3d;
      perspective: 1000px;
    }
  </style>

  <!-- Footer con información de contacto y enlaces legales -->
  <footer class="bg-gray-800 text-white py-6 mt-8">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        
        <!-- Información de Contacto del Desarrollador -->
        <div class="text-center md:text-left">
          <h3 class="text-sm font-bold mb-2 text-blue-400">Contacto del Desarrollador</h3>
          <div class="space-y-2">
            <div class="flex items-center justify-center md:justify-start">
              <svg class="w-4 h-4 mr-2 text-green-400" 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 0020.885 3.488"/>
              </svg>
              <a href="https://wa.me/51928517144" target="_blank" class="text-green-400 hover:text-green-300 transition-colors text-xs">
                +51 928 517 144
              </a>
            </div>
            <div class="flex items-center justify-center md:justify-start">
              <svg class="w-4 h-4 mr-2 text-blue-400" 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"/>
              </svg>
              <span class="text-gray-300 text-xs">desarrollador@tallart.com</span>
            </div>
            <div class="flex items-center justify-center md:justify-start">
              <svg class="w-4 h-4 mr-2 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9"/>
              </svg>
              <span class="text-gray-300 text-xs">Huaraz-Perú</span>
            </div>
          </div>
        </div>

        <!-- Enlaces Legales -->
        <div class="text-center md:text-left">
          <h3 class="text-sm font-bold mb-2 text-blue-400">Información Legal</h3>
          <div class="space-y-1">
            <a href="#" class="block text-gray-300 hover:text-white transition-colors text-xs">
              Términos y Condiciones
            </a>
            <a href="#" class="block text-gray-300 hover:text-white transition-colors text-xs">
              Política de Privacidad
            </a>
            <a href="#" class="block text-gray-300 hover:text-white transition-colors text-xs">
              Política de Cookies
            </a>
            <a href="#" class="block text-gray-300 hover:text-white transition-colors text-xs">
              Aviso Legal
            </a>
          </div>
        </div>

        <!-- Información de la Empresa -->
        <div class="text-center md:text-left">
          <h3 class="text-sm font-bold mb-2 text-blue-400">TallArt</h3>
          <p class="text-gray-300 mb-2 text-xs">
            Plataforma dedicada a promover y comercializar artesanías peruanas auténticas, conectando artesanos locales con el mundo.
          </p>
          <div class="flex justify-center md:justify-start space-x-2">
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
              </svg>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
              </svg>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001.012.001z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Enlaces de Navegación -->
      <div class="border-t border-gray-700 mt-4 pt-4">
        <div class="flex flex-wrap justify-center space-x-4 text-xs mb-2">
          <a href="{{ url_for('main.index') }}" class="text-gray-300 hover:text-white transition-colors">Inicio</a>
          <a href="{{ url_for('main.empresas') }}" class="text-gray-300 hover:text-white transition-colors">Empresas</a>
          <a href="{{ url_for('main.categorias') }}" class="text-gray-300 hover:text-white transition-colors">Productos</a>
          <a href="{{ url_for('main.artesanos') }}" class="text-gray-300 hover:text-white transition-colors">Calendario</a>
          <a href="{{ url_for('main.nosotros') }}" class="text-gray-300 hover:text-white transition-colors">Nosotros</a>
        </div>
        <div class="text-center">
          <p class="text-gray-400 text-xs">
            © 2025 TallArt. Todos los derechos reservados. | Desarrollado con ❤️ en Perú
          </p>
        </div>
      </div>
    </div>
  </footer>

  <script>
    function addToCart(productId) {
        fetch('/cart/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `product_id=${productId}&quantity=1`
        })
        .then(response => {
            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');
        });
    }

    function addToFavorites(productId) {
        fetch('/api/favoritos/agregar', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                item_id: productId,
                type: 'producto'
            })
        })
        .then(response => {
            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');
        });
    }

    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);
    }

    // Función para ocultar la frase de presentación al hacer scroll hacia abajo
    function hidePresentationTextOnScroll() {
        const presentationText = document.getElementById('presentation-text');
        if (!presentationText) return;

        let scrollTimeout;
        let lastScrollY = window.scrollY;
        let isScrolling = false;
        
        function handleScroll() {
            const currentScrollY = window.scrollY;
            const scrollDirection = currentScrollY > lastScrollY ? 'down' : 'up';
            
            // Solo ocultar cuando se hace scroll hacia abajo
            if (scrollDirection === 'down' && currentScrollY > 50) {
                if (!isScrolling) {
                    // Mostrar el texto brevemente cuando empieza el scroll hacia abajo
                    presentationText.style.opacity = '1';
                    presentationText.style.transform = 'translateY(0)';
                    presentationText.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
                    isScrolling = true;
                }
                
                // Ocultar el texto después de un breve delay
                clearTimeout(scrollTimeout);
                scrollTimeout = setTimeout(() => {
                    presentationText.style.opacity = '0';
                    presentationText.style.transform = 'translateY(-30px)';
                    presentationText.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                    isScrolling = false;
                }, 150);
            } else if (scrollDirection === 'up' && currentScrollY < 100) {
                // Mostrar el texto cuando se hace scroll hacia arriba cerca del top
                clearTimeout(scrollTimeout);
                presentationText.style.opacity = '1';
                presentationText.style.transform = 'translateY(0)';
                presentationText.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
                isScrolling = false;
            }
            
            lastScrollY = currentScrollY;
        }

        // Escuchar eventos de scroll (mouse wheel)
        window.addEventListener('wheel', (e) => {
            if (e.deltaY > 0) { // Scroll hacia abajo
                handleScroll();
            }
        }, { passive: true });
        
        // Escuchar eventos táctiles
        let touchStartY = 0;
        window.addEventListener('touchstart', (e) => {
            touchStartY = e.touches[0].clientY;
        }, { passive: true });
        
        window.addEventListener('touchmove', (e) => {
            const touchY = e.touches[0].clientY;
            const touchDirection = touchY < touchStartY ? 'down' : 'up';
            
            if (touchDirection === 'down') {
                handleScroll();
            }
        }, { passive: true });
        
        // Escuchar scroll general
        window.addEventListener('scroll', handleScroll, { passive: true });
    }

    // Inicializar la funcionalidad cuando se carga la página
    document.addEventListener('DOMContentLoaded', function() {
        hidePresentationTextOnScroll();
    });

    // Delegación de eventos para clicks (carrito y favoritos)
    document.addEventListener('DOMContentLoaded', function() {

      // Event delegation para tarjetas de productos
      document.body.addEventListener('click', function(e) {
        const btnCart = e.target.closest('.btn-add-to-cart');
        if (btnCart) {
          e.stopPropagation();
          const id = btnCart.getAttribute('data-id');
          if (id) { addToCart(parseInt(id)); }
          return;
        }

        const btnFav = e.target.closest('.btn-add-to-favorites');
        if (btnFav) {
          e.stopPropagation();
          const id = btnFav.getAttribute('data-id');
          if (id) { addToFavorites(parseInt(id)); }
          return;
        }
      });
    });

    // Todas las imágenes ahora usan la misma animación de "manta de alpaca"
    // La animación está definida en CSS con la clase .manta-alpaca-animation
  </script>
{% endblock %}