{% extends "base.html" %}

{% block title %}Inicio - Secretaría de Movilidad{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero-section">
    <div class="hero-background"></div>
    <div class="container">
        <div class="row align-items-center min-vh-100">
            <div class="col-lg-6">
                <div class="hero-content">
                    <div class="hero-logo mb-4 text-center">
                        <img src="{{ url_for('static', filename='images/semovi_logo_grande.png.png') }}" alt="SEMOVI Logo Grande" class="hero-logo-img" style="max-width: 520px; width: 100%; height: auto; display: block; margin: 0 auto; box-shadow:none;">
                    </div>
                    <h1 class="hero-title text-center" style="font-size:2.3rem;font-weight:800;line-height:1.2;margin-bottom:0.7rem;">
                        <span class="text-primary">Secretaría de Movilidad</span>
                    </h1>
                    <div class="hero-subtitle-main text-center mb-4" style="font-size:1.5rem;font-weight:600;color:var(--primary-color);letter-spacing:1px;background:#fff;padding:0.7rem 1.5rem;border:2px solid var(--primary-color);border-radius:1.5rem;max-width:520px;margin:0 auto 1.5rem auto;box-shadow:0 2px 12px rgba(162,40,77,0.07);">
                        Sistema Oficial de Licencias
                    </div>
                    <p class="hero-subtitle">
                        Gestiona tus licencias vehiculares de forma rápida, segura y eficiente. 
                        Accede a todos los servicios oficiales desde cualquier lugar.
                    </p>
                    <div class="hero-buttons">
                        {% if user %}
                            <a href="{{ url_for('dashboard') }}" class="btn btn-primary btn-lg me-3">
                                <i class="fas fa-tachometer-alt me-2"></i>Ir al Dashboard
                            </a>
                        {% else %}
                            <a href="{{ url_for('login') }}" class="btn btn-primary btn-lg me-3">
                                <i class="fab fa-discord me-2"></i>Iniciar Sesión
                            </a>
                        {% endif %}
                        <a href="{{ url_for('invite') }}" class="btn btn-outline-primary btn-lg">
                            <i class="fas fa-sign-in-alt me-2"></i>Unirse al Servidor
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-image">
                    <div class="floating-card p-4" style="min-width:320px;max-width:420px;box-shadow:0 4px 24px rgba(162,40,77,0.10);border-radius:20px;background:rgba(255,255,255,0.95);border:1px solid #f3d6df;animation:none;">
                        <h4 class="mb-4" style="color:var(--primary-color);font-weight:800;font-size:1.6rem;letter-spacing:0.5px;">Servicios y Trámites</h4>
                        <div class="row g-2">
                            <div class="col-12 mb-2">
                                <div class="d-flex align-items-center p-2 rounded" style="background:#faf6f8;">
                                    <i class="fas fa-id-card fa-lg me-3" style="color:var(--primary-color);"></i>
                                    <div class="flex-grow-1">
                                        <div class="fw-bold" style="color:var(--primary-color);">Gestión de Licencias</div>
                                        <div class="small text-muted">Consulta, renueva y administra tus licencias digitales.</div>
                                    </div>
                                    <span class="badge bg-success ms-2">Disponible</span>
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <div class="d-flex align-items-center p-2 rounded" style="background:#f6f7fa;">
                                    <i class="fas fa-car fa-lg me-3" style="color:#a2284d;"></i>
                                    <div class="flex-grow-1">
                                        <div class="fw-bold" style="color:#a2284d;">Registro de Vehículos</div>
                                        <div class="small text-muted">Registra y gestiona tus vehículos oficiales.</div>
                                    </div>
                                    <span class="badge bg-secondary ms-2">Próximamente</span>
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <div class="d-flex align-items-center p-2 rounded" style="background:#f6f7fa;">
                                    <i class="fas fa-file-alt fa-lg me-3" style="color:#a2284d;"></i>
                                    <div class="flex-grow-1">
                                        <div class="fw-bold" style="color:#a2284d;">Trámites en Línea</div>
                                        <div class="small text-muted">Realiza trámites oficiales desde casa.</div>
                                    </div>
                                    <span class="badge bg-secondary ms-2">Próximamente</span>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="d-flex align-items-center p-2 rounded" style="background:#f6f7fa;">
                                    <i class="fas fa-chart-line fa-lg me-3" style="color:#a2284d;"></i>
                                    <div class="flex-grow-1">
                                        <div class="fw-bold" style="color:#a2284d;">Reportes y Estadísticas</div>
                                        <div class="small text-muted">Consulta reportes y estadísticas de tus movimientos.</div>
                                    </div>
                                    <span class="badge bg-secondary ms-2">Próximamente</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="features-section py-5">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-12">
                <h2 class="section-title">¿Qué ofrece SEMOVI?</h2>
                <p class="section-subtitle">Conoce los servicios y beneficios que tienes a tu alcance</p>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-id-card"></i>
                    </div>
                    <h4>Gestión de Licencias</h4>
                    <p>Solicita, renueva y administra tus licencias digitales de manera fácil y segura.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-car"></i>
                    </div>
                    <h4>Registro de Vehículos</h4>
                    <p>Registra y consulta tus vehículos oficiales y su historial en un solo lugar.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <h4>Trámites en Línea</h4>
                    <p>Realiza trámites oficiales desde casa, sin filas ni esperas.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h4>Reportes y Estadísticas</h4>
                    <p>Consulta reportes detallados y estadísticas de tus movimientos y trámites.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h4>Seguridad Garantizada</h4>
                    <p>Tus datos están protegidos con los más altos estándares de seguridad y privacidad.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h4>Soporte 24/7</h4>
                    <p>Equipo de soporte disponible para resolver cualquier duda o problema.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Stats Section -->
<section class="stats-section py-5">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-3 col-6 mb-4">
                <div class="stat-card">
                    <div class="stat-number" id="licencias-count" data-target="0">0</div>
                    <div class="stat-label">Licencias Emitidas</div>
                </div>
            </div>
            <div class="col-md-3 col-6 mb-4">
                <div class="stat-card">
                    <div class="stat-number" data-target="900">0</div>
                    <div class="stat-label">Miembros Activos</div>
                </div>
            </div>
            <div class="col-md-3 col-6 mb-4">
                <div class="stat-card">
                    <div class="stat-number" data-target="99">0</div>
                    <div class="stat-label">% Uptime</div>
                </div>
            </div>
            <div class="col-md-3 col-6 mb-4">
                <div class="stat-card">
                    <div class="stat-number">24/7</div>
                    <div class="stat-label">Soporte</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Nuestra Flota Section -->
<section class="flota-section py-5">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-12">
                <h2 class="section-title">Nuestra Flota</h2>
                <p class="section-subtitle">Vehículos oficiales de la Secretaría de Movilidad</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-4 col-md-6">
                <div class="flota-card">
                    <div class="flota-image">
                        <img src="{{ url_for('static', filename='images/bucket_truck.png') }}" alt="Bucket Truck SEMOVI" class="img-fluid">
                    </div>
                    <div class="flota-content">
                        <h4>Bucket Truck</h4>
                        <p>Vehículo especializado para arreglar luces y mantenimiento de infraestructura vial.</p>
                        <div class="flota-specs">
                            <span class="spec-item"><i class="fas fa-tools"></i> Mantenimiento</span>
                            <span class="spec-item"><i class="fas fa-lightbulb"></i> Iluminación</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="flota-card">
                    <div class="flota-image">
                        <img src="{{ url_for('static', filename='images/chevlon_platoro.png') }}" alt="Chevlon Platoro SEMOVI" class="img-fluid">
                    </div>
                    <div class="flota-content">
                        <h4>Chevlon Platoro</h4>
                        <p>Vehículo de transporte de personal.</p>
                        <div class="flota-specs">
                            <span class="spec-item"><i class="fas fa-users"></i> Personal</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="flota-card">
                    <div class="flota-image">
                        <img src="{{ url_for('static', filename='images/grua_plana.png') }}" alt="Grúa Plana SEMOVI" class="img-fluid">
                    </div>
                    <div class="flota-content">
                        <h4>Grúa Plana</h4>
                        <p>Grúa especializada para remolcar autos en condiciones difíciles y accidentes complejos.</p>
                        <div class="flota-specs">
                            <span class="spec-item"><i class="fas fa-truck"></i> Remolque</span>
                            <span class="spec-item"><i class="fas fa-exclamation-triangle"></i> Difícil</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="flota-card">
                    <div class="flota-image">
                        <img src="{{ url_for('static', filename='images/grua_gancho.png') }}" alt="Grúa de Gancho SEMOVI" class="img-fluid">
                    </div>
                    <div class="flota-content">
                        <h4>Grúa de Gancho</h4>
                        <p>Grúa con sistema de gancho para remolcar autos de manera eficiente y segura.</p>
                        <div class="flota-specs">
                            <span class="spec-item"><i class="fas fa-hook"></i> Gancho</span>
                            <span class="spec-item"><i class="fas fa-car"></i> Remolque</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="flota-card">
                    <div class="flota-image">
                        <img src="{{ url_for('static', filename='images/vellfire.png') }}" alt="Vellfire Evvert SEMOVI" class="img-fluid">
                    </div>
                    <div class="flota-content">
                        <h4>Vellfire Evvert</h4>
                        <p>Vehículo de transporte de personal básico.</p>
                        <div class="flota-specs">
                            <span class="spec-item"><i class="fas fa-user-tie"></i> Personal</span>
                            <span class="spec-item"><i class="fas fa-star"></i> Básico</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Precios y Licencias Section -->
<section class="precios-section py-5">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-12">
                <h2 class="section-title">Precios y Licencias</h2>
                <p class="section-subtitle">Elige la licencia que mejor se adapte a tus necesidades</p>
            </div>
        </div>
        
        <div class="row g-4">
            <!-- Licencias Básicas -->
            <div class="col-lg-6">
                <div class="licencia-categoria">
                    <h3 class="categoria-titulo">
                        <i class="fas fa-file-alt me-2"></i>
                        Licencias Básicas
                    </h3>
                    
                    <div class="licencia-item">
                        <div class="licencia-icon">🚗</div>
                        <div class="licencia-info">
                            <h4>Licencia Tipo A1</h4>
                            <p>Vehículos Tipo Sedan o Coupé con velocidad básica de 130MPH</p>
                            <span class="precio">11,250 MXRP$</span>
                        </div>
                    </div>
                    
                    <div class="licencia-item">
                        <div class="licencia-icon">🚌</div>
                        <div class="licencia-info">
                            <h4>Licencia Tipo B1</h4>
                            <p>Vehículos Públicos, como lo son Taxis, Buses, Limusinas, etc.</p>
                            <span class="precio">11,250 MXRP$</span>
                        </div>
                    </div>
                    
                    <div class="licencia-item">
                        <div class="licencia-icon">🚘</div>
                        <div class="licencia-info">
                            <h4>Licencia Tipo C2</h4>
                            <p>Vehículos Clásicos</p>
                            <span class="precio">13,500 MXRP$</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Licencias Avanzadas -->
            <div class="col-lg-6">
                <div class="licencia-categoria">
                    <h3 class="categoria-titulo">
                        <i class="fas fa-star me-2"></i>
                        Licencias Avanzadas
                    </h3>
                    
                    <div class="licencia-item">
                        <div class="licencia-icon">🏎️</div>
                        <div class="licencia-info">
                            <h4>Licencia Tipo A2</h4>
                            <p>Vehículos deportivos</p>
                            <span class="precio">19,000 MXRP$</span>
                        </div>
                    </div>
                    
                    <div class="licencia-item">
                        <div class="licencia-icon">🚛</div>
                        <div class="licencia-info">
                            <h4>Licencia Tipo C1</h4>
                            <p>Vehículos de trabajo pesado (Grúas, camiones de transporte, etc.)</p>
                            <span class="precio">12,500 MXRP$</span>
                        </div>
                    </div>
                    
                    <div class="licencia-item">
                        <div class="licencia-icon">🚑</div>
                        <div class="licencia-info">
                            <h4>Licencia Tipo E1</h4>
                            <p>Vehículos de Emergencia</p>
                            <span class="precio">12,500 MXRP$</span>
                        </div>
                    </div>
                    
                    <div class="licencia-item">
                        <div class="licencia-icon">🚙</div>
                        <div class="licencia-info">
                            <h4>Licencia Tipo 4x4</h4>
                            <p>Vehículos SUV y Pickups</p>
                            <span class="precio">16,000 MXRP$</span>
                        </div>
                    </div>
                    
                    <div class="licencia-item">
                        <div class="licencia-icon">🚗</div>
                        <div class="licencia-info">
                            <h4>Licencia Tipo A0</h4>
                            <p>Vehículos Eléctricos</p>
                            <span class="precio">15,000 MXRP$</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section class="services-section py-5">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-12">
                <h2 class="section-title">Nuestros Servicios</h2>
                <p class="section-subtitle">Todo lo que necesitas para gestionar tus licencias</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-4 col-md-6">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-id-card"></i>
                    </div>
                    <h4>Gestión de Licencias</h4>
                    <p>Registra, renueva y gestiona todas tus licencias vehiculares desde un solo lugar.</p>
                    <ul class="service-features">
                        <li><i class="fas fa-check"></i> Registro de nuevas licencias</li>
                        <li><i class="fas fa-check"></i> Renovación automática</li>
                        <li><i class="fas fa-check"></i> Historial completo</li>
                    </ul>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-certificate"></i>
                    </div>
                    <h4>Certificaciones</h4>
                    <p>Proceso de certificación simplificado con exámenes teóricos y seguimiento en tiempo real.</p>
                    <ul class="service-features">
                        <li><i class="fas fa-check"></i> Exámenes teóricos</li>
                        <li><i class="fas fa-check"></i> Calificaciones automáticas</li>
                        <li><i class="fas fa-check"></i> Certificados digitales</li>
                    </ul>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h4>Estadísticas y Reportes</h4>
                    <p>Accede a estadísticas detalladas y reportes personalizados de tus actividades.</p>
                    <ul class="service-features">
                        <li><i class="fas fa-check"></i> Dashboard personalizado</li>
                        <li><i class="fas fa-check"></i> Reportes detallados</li>
                        <li><i class="fas fa-check"></i> Análisis de rendimiento</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="cta-section py-5">
    <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-lg-8">
                <h2 class="cta-title">¿Listo para empezar?</h2>
                <p class="cta-subtitle">
                    Únete a miles de usuarios que ya confían en nuestro sistema para gestionar sus licencias vehiculares.
                </p>
                <div class="cta-buttons">
                    {% if not user %}
                        <a href="{{ url_for('login') }}" class="btn btn-primary btn-lg me-3">
                            <i class="fab fa-discord me-2"></i>Comenzar Ahora
                        </a>
                    {% endif %}
                    <a href="{{ url_for('invite') }}" class="btn btn-outline-primary btn-lg">
                        <i class="fas fa-users me-2"></i>Unirse a la Comunidad
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
// Animación de números
function animateNumbers() {
    const numbers = document.querySelectorAll('.stat-number');
    
    numbers.forEach(number => {
        const target = parseInt(number.getAttribute('data-target'));
        const duration = 2000; // 2 segundos
        const increment = target / (duration / 16); // 60 FPS
        let current = 0;
        
        const timer = setInterval(() => {
            current += increment;
            if (current >= target) {
                current = target;
                clearInterval(timer);
            }
            number.textContent = Math.floor(current);
        }, 16);
    });
}

// Cargar número real de licencias
async function loadLicensesCount() {
    try {
        const response = await fetch('/api/licenses');
        if (response.ok) {
            const data = await response.json();
            const licenciasCount = document.getElementById('licencias-count');
            if (licenciasCount) {
                licenciasCount.setAttribute('data-target', data.licenses.length);
            }
        }
    } catch (error) {
        console.log('No se pudo cargar el conteo de licencias');
    }
}

// Ejecutar animación cuando la sección sea visible
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadLicensesCount().then(() => {
                animateNumbers();
            });
            observer.unobserve(entry.target);
        }
    });
});

const statsSection = document.querySelector('.stats-section');
if (statsSection) {
    observer.observe(statsSection);
}
</script>
{% endblock %}