{% extends 'base.html' %}

{% block title %}Estadísticas y Eventos - TallArt{% endblock %}

{% block extra_css %}
<style>
    body {
        background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
    }

    .stats-hero {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 60px 0;
        color: white;
        text-align: center;
        margin-bottom: 60px;
        position: relative;
        overflow: hidden;
    }

    .stats-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        opacity: 0.3;
    }

    .stats-hero h1 {
        font-size: 2.8rem;
        font-weight: 800;
        margin-bottom: 15px;
        position: relative;
        z-index: 1;
    }

    .stats-hero p {
        font-size: 1.1rem;
        opacity: 0.95;
        position: relative;
        z-index: 1;
    }

    .stats-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 30px 80px;
    }

    /* Estadísticas Cards */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
        margin-bottom: 60px;
    }

    .stat-card {
        background: white;
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--color-start), var(--color-end));
    }

    .stat-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    }

    .stat-card.primary {
        --color-start: #667eea;
        --color-end: #764ba2;
    }

    .stat-card.success {
        --color-start: #11998e;
        --color-end: #38ef7d;
    }

    .stat-card.warning {
        --color-start: #f093fb;
        --color-end: #f5576c;
    }

    .stat-card.info {
        --color-start: #4facfe;
        --color-end: #00f2fe;
    }

    .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        background: linear-gradient(135deg, var(--color-start), var(--color-end));
    }

    .stat-icon svg {
        width: 30px;
        height: 30px;
        color: white;
    }

    .stat-number {
        font-size: 2.5rem;
        font-weight: 800;
        color: #2d3748;
        margin-bottom: 5px;
        line-height: 1;
    }

    .stat-label {
        color: #718096;
        font-size: 0.95rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Section Headers */
    .section-header {
        margin-bottom: 35px;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .section-header h2 {
        font-size: 2rem;
        font-weight: 700;
        color: #2d3748;
        margin: 0;
    }

    .section-header::after {
        content: '';
        flex: 1;
        height: 3px;
        background: linear-gradient(90deg, #667eea 0%, transparent 100%);
        border-radius: 2px;
    }

    /* Eventos Grid */
    .eventos-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 30px;
        margin-bottom: 60px;
    }

    .evento-card {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
    }

    .evento-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.2);
    }

    .evento-image {
        width: 100%;
        height: 220px;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .evento-card:hover .evento-image {
        transform: scale(1.1);
    }

    .evento-image-container {
        width: 100%;
        height: 220px;
        overflow: hidden;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .evento-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        background: rgba(255,255,255,0.95);
        color: #667eea;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .evento-content {
        padding: 25px;
    }

    .evento-titulo {
        font-size: 1.4rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 12px;
        line-height: 1.3;
    }

    .evento-descripcion {
        color: #718096;
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .evento-info {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .evento-info-item {
        display: flex;
        align-items: center;
        color: #4a5568;
        font-size: 0.9rem;
    }

    .evento-info-item svg {
        width: 18px;
        height: 18px;
        margin-right: 10px;
        color: #667eea;
    }

    /* Empresas Grid */
    .empresas-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 25px;
    }

    .empresa-mini-card {
        background: white;
        border-radius: 16px;
        padding: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 15px;
        text-decoration: none;
        color: inherit;
    }

    .empresa-mini-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
    }

    .empresa-logo {
        width: 70px;
        height: 70px;
        border-radius: 12px;
        object-fit: cover;
        flex-shrink: 0;
    }

    .empresa-logo-placeholder {
        width: 70px;
        height: 70px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.8rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .empresa-info {
        flex: 1;
        min-width: 0;
    }

    .empresa-nombre {
        font-size: 1.1rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .empresa-especialidad {
        color: #718096;
        font-size: 0.85rem;
        margin-bottom: 8px;
    }

    .empresa-rating {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        color: white;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 700;
    }

    .empresa-rating svg {
        width: 14px;
        height: 14px;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        background: white;
        border-radius: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }

    .empty-state svg {
        width: 80px;
        height: 80px;
        color: #cbd5e0;
        margin-bottom: 20px;
    }

    .empty-state h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #4a5568;
        margin-bottom: 10px;
    }

    .empty-state p {
        color: #718096;
        font-size: 1rem;
    }

    @media (max-width: 768px) {
        .stats-hero h1 {
            font-size: 2rem;
        }

        .stats-grid,
        .eventos-grid,
        .empresas-grid {
            grid-template-columns: 1fr;
        }

        .stats-container {
            padding: 0 20px 60px;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="stats-hero">
    <div class="container">
        <h1>Estadísticas y Eventos</h1>
        <p>Conoce los números y próximos eventos de nuestra comunidad artesanal</p>
    </div>
</div>

<div class="stats-container">
    <!-- Estadísticas -->
    {% if estadisticas %}
    <div class="stats-grid">
        <div class="stat-card primary">
            <div class="stat-icon">
                <svg 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>
            </div>
            <div class="stat-number">{{ estadisticas.total_empresas or 0 }}</div>
            <div class="stat-label">Empresas</div>
        </div>

        <div class="stat-card success">
            <div class="stat-icon">
                <svg 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>
            <div class="stat-number">{{ estadisticas.total_productos or 0 }}</div>
            <div class="stat-label">Productos</div>
        </div>

        <div class="stat-card warning">
            <div class="stat-icon">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
            </div>
            <div class="stat-number">{{ estadisticas.total_eventos or 0 }}</div>
            <div class="stat-label">Eventos</div>
        </div>

        <div class="stat-card info">
            <div class="stat-icon">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
                </svg>
            </div>
            <div class="stat-number">{{ "%.1f"|format(estadisticas.calificacion_promedio or 0) }}</div>
            <div class="stat-label">Calificación</div>
        </div>
    </div>
    {% endif %}

    <!-- Eventos Section -->
    <div class="section-header">
        <h2>Próximos Eventos</h2>
    </div>

    {% if eventos and eventos|length > 0 %}
    <div class="eventos-grid">
        {% for evento in eventos %}
        <div class="evento-card">
            <div class="evento-image-container">
                {% if evento.ImagenURL %}
                    <img src="{{ evento.ImagenURL }}" alt="{{ evento.Titulo }}" class="evento-image">
                {% else %}
                    <svg style="width: 80px; height: 80px; color: rgba(255,255,255,0.6);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                {% endif %}
                <div class="evento-badge">Evento</div>
            </div>
            
            <div class="evento-content">
                <h3 class="evento-titulo">{{ evento.Titulo }}</h3>
                <p class="evento-descripcion">{{ evento.Descripcion[:120] }}...</p>
                
                <div class="evento-info">
                    <div class="evento-info-item">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                        {{ evento.FechaInicio.strftime('%d/%m/%Y') if evento.FechaInicio else 'Por confirmar' }}
                    </div>
                    
                    <div class="evento-info-item">
                        <svg 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>
                        {{ evento.Ubicacion or 'Por confirmar' }}
                    </div>
                    
                    {% if evento.Precio %}
                    <div class="evento-info-item">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        S/ {{ "%.2f"|format(evento.Precio) }}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
        </svg>
        <h3>No hay eventos programados</h3>
        <p>Próximamente agregaremos nuevos eventos artesanales</p>
    </div>
    {% endif %}

    <!-- Empresas Destacadas Section -->
    {% if top_empresas and top_empresas|length > 0 %}
    <div class="section-header" style="margin-top: 60px;">
        <h2>Empresas Destacadas</h2>
    </div>

    <div class="empresas-grid">
        {% for empresa in top_empresas[:6] %}
        <a href="{{ url_for('main.empresa', slug=empresa.Slug) }}" class="empresa-mini-card">
            {% if empresa.LogoURL %}
                <img src="{{ url_for('static', filename=empresa.LogoURL) }}" alt="{{ empresa.Nombre }}" class="empresa-logo">
            {% else %}
                <div class="empresa-logo-placeholder">
                    {{ empresa.Nombre[0] }}
                </div>
            {% endif %}
            
            <div class="empresa-info">
                <div class="empresa-nombre">{{ empresa.Nombre }}</div>
                <div class="empresa-especialidad">{{ empresa.Especialidad or 'Artesanía' }}</div>
                <div class="empresa-rating">
                    <svg fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                    </svg>
                    {{ "%.1f"|format(empresa.CalificacionPromedio or 5.0) }}
                </div>
            </div>
        </a>
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endblock %}