{% extends "base.html" %}

{% block title %}{{ title }} - LIBEROS{% 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 LIBEROS</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>La optimización del consumo beneficia tanto a tu bolsillo como al medio ambiente.</p>
                        <footer class="blockquote-footer">Equipo de <cite>LIBEROS</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 para poder tomar mejores decisiones. En LIBEROS estamos para ayudarte a optimizar y mejorar tus resultados.</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>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 %}

{% 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 %}