{% extends "base.html" %}

{% block title %}{{ title }} - Olé Consulting{% endblock %}

{% block content %}
<div class="section article-section mt-5 pt-4">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <!-- Cabecera del artículo -->
                <div class="article-header mb-4 text-center">
                    <h1 class="display-4">{{ title }}</h1>
                    <div class="article-meta mb-4">
                        <span><i class="fas fa-calendar-alt me-2"></i>Publicado el 15 de enero, 2025</span>
                        <span class="mx-3">|</span>
                        <span><i class="fas fa-user me-2"></i>Por Equipo Olé Consulting</span>
                    </div>
                    <hr>
                </div>

                <!-- Imagen destacada -->
                <div class="article-featured-image mb-4">
                    <img src="https://via.placeholder.com/1200x600" class="img-fluid rounded shadow-sm" alt="Imagen del artículo">
                </div>

                <!-- Contenido del artículo -->
                <div class="article-content">
                    <p class="lead">Este es un artículo de ejemplo que muestra el diseño y la estructura de los contenidos del blog. Los artículos reales se cargarán desde la base de datos.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nisl eu nisl. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nisl eu nisl.</p>

                    <h2>Subtítulo del artículo</h2>
                    <p>Proin maximus, nisl ut aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nisl eu nisl. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nisl eu nisl. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nisl eu nisl.</p>

                    <blockquote class="blockquote">
                        <p>El ahorro energético no solo beneficia a tu bolsillo, sino también al medio ambiente.</p>
                        <footer class="blockquote-footer">Expertos en energía de <cite>Olé Consulting</cite></footer>
                    </blockquote>

                    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

                    <h2>Otro subtítulo importante</h2>
                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

                    <ul>
                        <li>Punto importante sobre tarifas eléctricas</li>
                        <li>Cómo interpretar tu factura correctamente</li>
                        <li>Consejos para optimizar el consumo</li>
                        <li>Recomendaciones personalizadas</li>
                    </ul>

                    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

                    <h3>Conclusión</h3>
                    <p>En resumen, es importante estar informado sobre las últimas novedades en el sector energético para poder tomar decisiones más inteligentes sobre tu consumo. En Olé Consulting estamos para ayudarte a optimizar tus tarifas y reducir tus facturas.</p>
                </div>

                <!-- Enlaces relacionados -->
                <div class="article-related mt-5">
                    <h4 class="border-bottom pb-3">Artículos relacionados</h4>
                    <div class="row mt-4">
                        <div class="col-md-4 mb-3">
                            <div class="card shadow-sm h-100">
                                <div class="card-body">
                                    <h5>Cómo ahorrar en tu factura de luz</h5>
                                    <a href="{{ url_for('blog.article_detail', slug='como-ahorrar-factura-luz') }}" class="stretched-link"></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card shadow-sm h-100">
                                <div class="card-body">
                                    <h5>Energías renovables para empresas</h5>
                                    <a href="{{ url_for('blog.article_detail', slug='energias-renovables-empresas') }}" class="stretched-link"></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card shadow-sm h-100">
                                <div class="card-body">
                                    <h5>Comparativa de comercializadoras 2025</h5>
                                    <a href="#" class="stretched-link"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<footer class="legal-footer mt-5">
    <div class="container">
        <div class="footer-content">
            <div class="row">
                <div class="col-md-4">
                    <h4>Olé Consulting</h4>
                    <p>Tu consultoría energética 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('invoice.estudio_gratuito') }}">Comparador Gratis</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@oleconsulting.es</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="row">
                <div class="col-md-6">
                    <p>&copy; 2025 Olé Consulting. Todos los derechos reservados.</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <ul class="legal-links">
                        <li><a href="#">Política de privacidad</a></li>
                        <li><a href="#">Términos y condiciones</a></li>
                        <li><a href="#">Aviso legal</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>
{% endblock %}

{% block extra_styles %}
<style>
    .article-section {
        color: #333;
    }
    
    .article-meta {
        color: #6c757d;
        font-size: 0.9rem;
    }
    
    .article-content {
        line-height: 1.8;
        font-size: 1.1rem;
    }
    
    .article-content h2 {
        margin-top: 2rem;
        margin-bottom: 1rem;
        font-weight: 600;
    }
    
    .article-content h3 {
        margin-top: 1.5rem;
        font-weight: 600;
    }
    
    blockquote {
        background-color: #f8f9fa;
        border-left: 4px solid #007bff;
        padding: 1rem;
        margin: 1.5rem 0;
    }
    
    .article-related .card {
        transition: all 0.3s ease;
    }
    
    .article-related .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }
</style>
{% endblock %}