{% extends "base.html" %}

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

{% block content %}
<div class="section mt-5 pt-4">
    <div class="container">
        <div class="row">
            <div class="col-12 mb-4 text-center">
                <h1 class="display-4">Blog</h1>
                <p class="text-muted lead">Noticias y consejos sobre el sector energético</p>
                <hr class="my-4">
            </div>
        </div>

        <div class="row">
            <!-- Artículo destacado -->
            <div class="col-12 mb-5">
                <div class="card blog-card shadow-sm">
                    <div class="row g-0">
                        <div class="col-md-6">
                            <img src="https://via.placeholder.com/600x400" class="img-fluid rounded-start" alt="Imagen destacada">
                        </div>
                        <div class="col-md-6">
                            <div class="card-body h-100 d-flex flex-column">
                                <span class="badge bg-primary mb-2">Destacado</span>
                                <h2 class="card-title">Nuevas tarifas eléctricas 2025</h2>
                                <p class="card-text">Todo lo que debes saber sobre las nuevas tarifas para este año y cómo te afectarán. Analizamos los cambios en profundidad.</p>
                                <p class="card-text"><small class="text-muted">Publicado el 15 de enero, 2025</small></p>
                                <div class="mt-auto">
                                    <a href="{{ url_for('blog.article_detail', slug='nuevas-tarifas-electricas-2025') }}" class="btn btn-outline-primary">Leer más</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Lista de artículos -->
            <div class="col-md-6 mb-4">
                <div class="card blog-card shadow-sm h-100">
                    <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="Imagen del artículo">
                    <div class="card-body d-flex flex-column">
                        <h3 class="card-title">Cómo ahorrar en tu factura de luz</h3>
                        <p class="card-text">Consejos prácticos para reducir el consumo eléctrico en casa y ahorrar dinero mes a mes.</p>
                        <p class="card-text"><small class="text-muted">Publicado el 22 de febrero, 2025</small></p>
                        <div class="mt-auto">
                            <a href="{{ url_for('blog.article_detail', slug='como-ahorrar-factura-luz') }}" class="btn btn-outline-primary">Leer más</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6 mb-4">
                <div class="card blog-card shadow-sm h-100">
                    <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="Imagen del artículo">
                    <div class="card-body d-flex flex-column">
                        <h3 class="card-title">Energías renovables para empresas</h3>
                        <p class="card-text">Alternativas sostenibles para reducir costes energéticos y mejorar la huella ecológica de tu negocio.</p>
                        <p class="card-text"><small class="text-muted">Publicado el 10 de marzo, 2025</small></p>
                        <div class="mt-auto">
                            <a href="{{ url_for('blog.article_detail', slug='energias-renovables-empresas') }}" class="btn btn-outline-primary">Leer más</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Paginación -->
        <div class="row mt-4">
            <div class="col-12">
                <nav aria-label="Navegación de páginas">
                    <ul class="pagination justify-content-center">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Anterior</a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">Siguiente</a>
                        </li>
                    </ul>
                </nav>
            </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>
    .blog-card {
        transition: all 0.4s ease;
        border: none;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        overflow: hidden;
    }
    
    .blog-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 25px rgba(0,0,0,0.15) !important;
    }
    
    .blog-card:hover .card-img-top {
        transform: scale(1.05);
    }
    
    .blog-card .card-title {
        font-weight: 600;
        color: #333;
        position: relative;
        padding-bottom: 10px;
    }
    
    .blog-card .card-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 2px;
        background: linear-gradient(90deg, #007bff, #00c3ff);
        transition: width 0.3s ease;
    }
    
    .blog-card:hover .card-title::after {
        width: 80px;
    }
    
    .blog-card .card-img-top {
        height: 200px;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    
    .blog-card .btn-outline-primary:hover {
        background: linear-gradient(90deg, #007bff, #00c3ff);
        border-color: transparent;
    }
</style>
{% endblock %}