{% extends "base.html" %}

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

{% block content %}
<!-- 1. Hero Section -->
<section class="hero">
    <div class="container">
        <h1 class="gradient-title">Bienvenido a LIBEROS</h1>
        <p>Tu socio en soluciones a medida.</p>
        <div class="hero-divider"></div>
        <p>Cuéntanos tu necesidad y te ayudamos.</p>
        <a href="{{ url_for('contact_bp.contact') }}" class="btn-gradient">Contactar</a>
    </div>
</section>

<!-- 2. Beneficios clave (3 columnas) -->
<section class="benefits" id="beneficios">
    <div class="container">
        <div class="section-header text-center mb-5">
            <h2>Nuestros beneficios</h2>
            <p>Descubre por qué confiar en nosotros</p>
        </div>
        <div class="row">
            <!-- Beneficio 1 -->
            <div class="col-md-4">
                <div class="benefit-item">
                    <div class="benefit-icon">
                        <i class="fas fa-piggy-bank"></i>
                    </div>
                    <h3>Resultados medibles</h3>
                    <p>Optimizamos procesos para reducir costes y mejorar el rendimiento de forma significativa.</p>
                </div>
            </div>
            <!-- Beneficio 2 -->
            <div class="col-md-4">
                <div class="benefit-item">
                    <div class="benefit-icon">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <h3>Expertos multidisciplinares</h3>
                    <p>Nuestro equipo cuenta con experiencia en múltiples sectores para ofrecerte la mejor solución.</p>
                </div>
            </div>
            <!-- Beneficio 3 -->
            <div class="col-md-4">
                <div class="benefit-item">
                    <div class="benefit-icon">
                        <i class="fas fa-user-friends"></i>
                    </div>
                    <h3>Atención Personalizada</h3>
                    <p>Ofrecemos soluciones a medida y un trato cercano para cada uno de nuestros clientes.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 3. Cómo trabajamos -->
<section class="how-we-work" id="servicios">
    <div class="container">
        <div class="section-header text-center mb-5">
            <h2>Cómo trabajamos</h2>
            <p>Un proceso simple y eficiente para ayudarte a ahorrar</p>
        </div>
        <div class="process-steps">
            <!-- Paso 1 -->
            <div class="process-step">
                <div class="step-number">1</div>
                <h3>Envíanos tu solicitud</h3>
                <p>Cuéntanos tu caso a través de nuestro formulario seguro.</p>
            </div>
            <!-- Paso 2 -->
            <div class="process-step">
                <div class="step-number">2</div>
                <h3>Analizamos</h3>
                <p>Nuestro equipo analiza y compara para encontrar la mejor opción para ti.</p>
            </div>
            <!-- Paso 3 -->
            <div class="process-step">
                <div class="step-number">3</div>
                <h3>Propuesta personalizada</h3>
                <p>Recibe nuestra propuesta personalizada con los próximos pasos.</p>
            </div>
        </div>
    </div>
</section>

<!-- 4. Ahorro en factura (NUEVO) -->
<section class="savings-example">
    <div class="container">
        <div class="section-header text-center mb-5">
            <h2>Resultados con clientes</h2>
            <p>Casos reales de proyectos realizados</p>
        </div>
        <div class="row">
            <div class="col-md-6 mb-4 mb-md-0">
                <div class="real-example text-center py-4 bg-white rounded shadow">
                    <h3>Caso real: Familia Pérez</h3>
                    <div class="saving-data my-4">
                        <span class="saving-percentage text-gradient display-4 fw-bold">-27%</span>
                        <span class="saving-amount d-block fs-4 mt-2">231 €/año</span>
                    </div>
                    <p>Ahorro conseguido tras optimizar su contrato eléctrico y eliminar servicios innecesarios.</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="mini-simulator p-4 bg-white rounded shadow">
                    <h3>Calcula tu mejora estimada</h3>
                    <div class="simulator-form mt-4">
                        <div class="form-group mb-3">
                            <label for="kwh-year" class="form-label">Consumo anual (kWh/año)</label>
                            <input type="number" id="kwh-year" class="form-control" placeholder="Ej: 3500">
                        </div>
                        <button id="calculate-savings" class="btn-gradient mt-3">Calcular ahorro</button>
                        <div id="savings-result" class="mt-4 p-3 border rounded" style="display: none;">
                            <p class="mb-1">Resultado estimado:</p>
                            <div class="row">
                                <div class="col-6 text-center">
                                    <span class="text-gradient fs-4 fw-bold">24%</span>
                                    <span class="d-block">mejora</span>
                                </div>
                                <div class="col-6 text-center">
                                    <span class="text-gradient fs-4 fw-bold">198€</span>
                                    <span class="d-block">anual</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="text-muted mt-3 small">Cálculo ilustrativo basado en datos públicos</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 5. Carrusel de comercializadoras -->
<section class="partners-carousel" id="partners">
    <div class="container">
        <div class="section-header text-center mb-4">
            <h2>Trabajamos con las principales comercializadoras</h2>
        </div>
        <div class="carousel-container">
            <!-- Estas imágenes son placeholders, deberían reemplazarse por logos reales de comercializadoras -->
            <div class="row justify-content-center">
                <div class="col-4 col-md-2 mb-4">
                    <img src="https://placehold.co/150x80?text=Logo+1" alt="Comercializadora 1" class="partner-logo img-fluid">
                </div>
                <div class="col-4 col-md-2 mb-4">
                    <img src="https://placehold.co/150x80?text=Logo+2" alt="Comercializadora 2" class="partner-logo img-fluid">
                </div>
                <div class="col-4 col-md-2 mb-4">
                    <img src="https://placehold.co/150x80?text=Logo+3" alt="Comercializadora 3" class="partner-logo img-fluid">
                </div>
                <div class="col-4 col-md-2 mb-4">
                    <img src="https://placehold.co/150x80?text=Logo+4" alt="Comercializadora 4" class="partner-logo img-fluid">
                </div>
                <div class="col-4 col-md-2 mb-4">
                    <img src="https://placehold.co/150x80?text=Logo+5" alt="Comercializadora 5" class="partner-logo img-fluid">
                </div>
                <div class="col-4 col-md-2 mb-4">
                    <img src="https://placehold.co/150x80?text=Logo+6" alt="Comercializadora 6" class="partner-logo img-fluid">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 6. CTA intermedio -->
<section class="cta-section">
    <div class="container">
        <h2 class="mb-4">Comienza hoy mismo</h2>
        <a href="{{ url_for('contact_bp.contact') }}" class="btn-gradient">Contacto</a>
    </div>
</section>

<!-- 7. Blog / Noticias -->
<section class="blog-section">
    <div class="container">
        <div class="section-header text-center mb-5">
            <h2>Blog y Noticias</h2>
            <p>Las últimas actualizaciones del sector energético</p>
        </div>
        <div class="row">
            <!-- Artículo 1 -->
            <div class="col-md-4 mb-4 mb-md-0">
                <div class="blog-post">
                    <img src="https://placehold.co/400x200?text=Blog+Post+1" alt="Artículo 1" class="blog-image img-fluid">
                    <div class="blog-content">
                        <h3>Cómo ahorrar energía en casa</h3>
                        <p class="text-muted">12 Mayo 2025</p>
                        <p>Consejos prácticos para reducir el consumo energético en tu hogar sin renunciar al confort.</p>
                        <a href="#" class="text-gradient">Leer más</a>
                    </div>
                </div>
            </div>
            <!-- Artículo 2 -->
            <div class="col-md-4 mb-4 mb-md-0">
                <div class="blog-post">
                    <img src="https://placehold.co/400x200?text=Blog+Post+2" alt="Artículo 2" class="blog-image img-fluid">
                    <div class="blog-content">
                        <h3>Novedades en tarifas eléctricas</h3>
                        <p class="text-muted">5 Mayo 2025</p>
                        <p>Todo lo que necesitas saber sobre los últimos cambios en la regulación de tarifas eléctricas.</p>
                        <a href="#" class="text-gradient">Leer más</a>
                    </div>
                </div>
            </div>
            <!-- Artículo 3 -->
            <div class="col-md-4">
                <div class="blog-post">
                    <img src="https://placehold.co/400x200?text=Blog+Post+3" alt="Artículo 3" class="blog-image img-fluid">
                    <div class="blog-content">
                        <h3>Energía renovable y autoconsumo</h3>
                        <p class="text-muted">28 Abril 2025</p>
                        <p>Descubre cómo la energía renovable y el autoconsumo pueden reducir tu factura energética.</p>
                        <a href="#" class="text-gradient">Leer más</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 8. FAQ o "Por qué Olé" -->
<section class="faq-section">
    <div class="container">
        <div class="section-header text-center mb-5">
            <h2>Preguntas frecuentes</h2>
            <p>Todo lo que necesitas saber sobre nuestros servicios</p>
        </div>
        <div class="accordion" id="faqAccordion">
            <!-- Pregunta 1 -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        ¿Cómo funciona el servicio de LIBEROS?
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        Nuestro servicio es simple: analizamos tu factura actual, identificamos oportunidades de ahorro y te recomendamos las mejores opciones disponibles en el mercado, sin coste alguno para ti.
                    </div>
                </div>
            </div>
            <!-- Pregunta 2 -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        ¿Cuánto puedo ahorrar en mi factura?
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        Los resultados varían según tu situación. Con nuestro análisis personalizado, verás exactamente cómo podemos ayudarte.
                    </div>
                </div>
            </div>
            <!-- Pregunta 3 -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        ¿Tengo que cambiar de compañía eléctrica?
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        No necesariamente. A veces podemos optimizar tu contrato actual. Si recomendamos un cambio, nos encargamos de todo el proceso administrativo. Tú decides si quieres proceder o no.
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 9. CTA final -->
<section class="final-cta-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h2>¿Listo para empezar?</h2>
                <p>Únete a nuestros clientes satisfechos que ya han mejorado sus resultados.</p>
            </div>
            <div class="col-md-4 text-md-end">
                <a href="{{ url_for('contact_bp.contact') }}" class="btn-gradient">Contactar</a>
            </div>
        </div>
    </div>
</section>

<!-- 10. Footer con información legal -->
<footer class="legal-footer">
    <div class="container">
        <div class="footer-content">
            <div class="row">
                <div class="col-md-4">
                    <h4>LIBEROS</h4>
                    <p>Tu aliado de confianza</p>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="col-md-4">
                    <h4>Enlaces rápidos</h4>
                    <ul class="footer-links">
                        <li><a href="{{ url_for('public.home') }}">Inicio</a></li>
                        <li><a href="{{ url_for('public.home') }}#servicios">Servicios</a></li>
                        <li><a href="{{ url_for('contact_bp.contact') }}">Contacto</a></li>
                        <li><a href="{{ url_for('public.home') }}#partners">Partners</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h4>Contacto</h4>
                    <ul class="footer-contact">
                        <li><i class="fas fa-map-marker-alt"></i> Calle Principal 123, Madrid</li>
                        <li><i class="fas fa-phone"></i> +34 912 345 678</li>
                        <li><i class="fas fa-envelope"></i> info@obainc.es</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="row">
                <div class="col-md-6">
                    <p>&copy; 2025 LIBEROS. Todos los derechos reservados.</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <ul class="legal-links">
                        <li><a href="{{ url_for('public.privacy_policy') }}">Política de privacidad</a></li>
                        <li><a href="{{ url_for('public.terms_conditions') }}">Aviso legal</a></li>
                        <li><a href="{{ url_for('public.cookies_policy') }}">Política de cookies</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>

{% endblock %}