{% load static %}
<!-- Footer ECOLUX BTP -->
<footer class="footer">
    <div class="container">
        <div class="footer-grid">
            <!-- À propos -->
            <div class="footer-section">
                <div class="footer-logo-section">
                    <img height="250" src="{% static 'assets/img/logo-ecolux.png' %}" alt="ECOLUX BTP" class="footer-logo">
                    <p class="footer-description">
                        ECOLUX BTP, votre partenaire de confiance pour tous vos projets de construction et rénovation au Sénégal. Excellence, innovation et développement durable.
                    </p>
                </div>
                <div class="social-links">
                    <a href="https://www.facebook.com/ecoluxlenecplusultradubtp/" class="social-link" title="Facebook">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                        </svg>
                    </a>
                    {% comment %} <a href="#" class="social-link" title="LinkedIn">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                        </svg>
                    </a> {% endcomment %}
                    <a href="https://instagram.com/ecolux_s.a.s.u?igshid=OGQ5ZDc2ODk2ZA==" class="social-link" title="Instagram">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                        </svg>
                    </a>
                    <a href="https://wa.me/221779962626" class="social-link whatsapp" title="WhatsApp">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
                        </svg>
                    </a>
                </div>
            </div>

            <!-- Services -->
            <div class="footer-section">
                <h4>Nos Services</h4>
                <ul class="footer-links">
                    <li><a href="#">Construction Neuve</a></li>
                    <li><a href="#">Rénovation</a></li>
                    <li><a href="#">Maçonnerie</a></li>
                    <li><a href="#">Électricité</a></li>
                    <li><a href="#">Plomberie</a></li>
                    <li><a href="#">Peinture</a></li>
                    <li><a href="#">Carrelage</a></li>
                    <li><a href="#">Étanchéité</a></li>
                </ul>
            </div>

            <!-- Liens Utiles -->
            <div class="footer-section">
                <h4>Liens Utiles</h4>
                <ul class="footer-links">
                    <li><a href="{% url 'app:home' %}">Accueil</a></li>
                    <li><a href="{% url 'app:blog_list' %}">Blog</a></li>
                    <li><a href="{% url 'app:projects_list' %}">Réalisations</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#">Devis Gratuit</a></li>
                    <li><a href="#">Urgences</a></li>
                    <li><a href="#">Garanties</a></li>
                    <li><a href="#">Témoignages</a></li>
                </ul>
            </div>

            <!-- Contact -->
            <div class="footer-section">
                <h4>Contact</h4>
                <div class="contact-info">
                    <div class="contact-item">
                        <div class="contact-icon">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                            </svg>
                        </div>
                        <div class="contact-details">
                            <strong>Adresse</strong>
                            <span>Ouakam Cité El Hadj Malick SY, Dakar, Sénégal</span>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
                            </svg>
                        </div>
                        <div class="contact-details">
                            <strong>Téléphone</strong>
                            <a href="tel:+221779962626">+221 77 996 26 26</a>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                            </svg>
                        </div>
                        <div class="contact-details">
                            <strong>Email</strong>
                            <a href="mailto:info@ecolux-btp.com">info@ecolux-btp.com</a>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
                                <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                            </svg>
                        </div>
                        <div class="contact-details">
                            <strong>Horaires</strong>
                            <span>Lun-Sam: 8h-18h</span>
                        </div>
                    </div>
                </div>

                
            </div>
        </div>

        <!-- Bottom Footer -->
        <div class="footer-bottom">
            <div class="footer-bottom-content">
                <div class="copyright">
                    <p>&copy; 2025 ECOLUX BTP. Tous droits réservés. <br> by <a href="https://dessdie.com" style="color: var(--secondary); text-decoration: none; font-weight: 500;" target="_blank">DessDie</a></p>
                </div>
                <div class="footer-bottom-links">
                    <a href="#">Mentions Légales</a>
                    <a href="#">Politique de Confidentialité</a>
                    <a href="#">Conditions d'Utilisation</a>
                    <a href="#">Plan du Site</a>
                </div>
            </div>
        </div>
    </div>
</footer>

<style>
.footer {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--primary-foreground);
    padding: 4rem 0 0;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary), var(--accent), var(--secondary));
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-section h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--secondary-light);
    position: relative;
}

.footer-section h4::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 3rem;
    height: 2px;
    background: var(--secondary);
    border-radius: 1px;
}

.footer-logo-section {
    margin-bottom: 2rem;
}

.footer-logo {
    height: 3rem;
    margin-bottom: 1rem;
    filter: brightness(1.2);
}

.footer-description {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    text-decoration: none;
    transition: var(--transition);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.social-link:hover {
    background: var(--secondary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

.social-link.whatsapp:hover {
    background: #25D366;
    color: white;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--transition);
    position: relative;
    padding-left: 1rem;
}

.footer-links a::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--secondary);
    opacity: 0;
    transform: translateX(-10px);
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--secondary-light);
    padding-left: 1.5rem;
}

.footer-links a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(212, 175, 55, 0.2);
    color: var(--secondary-light);
    border-radius: 50%;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-details strong {
    color: var(--secondary-light);
    font-weight: 600;
    font-size: 0.875rem;
}

.contact-details span,
.contact-details a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--transition);
}

.contact-details a:hover {
    color: var(--secondary-light);
}

.newsletter-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.newsletter-section h5 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--secondary-light);
}

.newsletter-section p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.newsletter-form-footer {
    margin-top: 1rem;
}

.newsletter-input-group {
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.3);
    backdrop-filter: blur(10px);
}

.newsletter-input-group input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    color: white;
    font-size: 0.875rem;
}

.newsletter-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.newsletter-input-group input:focus {
    outline: none;
}

.newsletter-btn {
    padding: 0.75rem;
    background: var(--secondary);
    color: var(--primary);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.newsletter-btn:hover {
    background: var(--secondary-light);
}

.footer-bottom {
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    padding: 2rem 0;
    background: rgba(0, 0, 0, 0.1);
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.copyright p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.875rem;
    transition: var(--transition);
}

.footer-bottom-links a:hover {
    color: var(--secondary-light);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .footer {
        padding: 3rem 0 0;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-section {
        text-align: center;
    }
    
    .footer-section h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .social-links {
        justify-content: center;
    }
    
    .contact-item {
        justify-content: center;
        text-align: left;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-bottom-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .footer-bottom-links {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .contact-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* Animation d'entrée */
.footer-section {
    animation: fadeInUp 0.6s ease-out;
}

.footer-section:nth-child(2) {
    animation-delay: 0.1s;
}

.footer-section:nth-child(3) {
    animation-delay: 0.2s;
}

.footer-section:nth-child(4) {
    animation-delay: 0.3s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
