{% extends "base.html" %}
{% load static %}

{% block title %}Contact - ESSIG{% endblock %}

{% block extra_css %}
<!-- Bootstrap 5 + Icons + Fonts (compléments si besoin) -->
 <link rel="shortcut icon" type="image/jpeg" href="{% static 'img/logo-removebg-preview.png' %}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

<style>
    :root {
        --color-primary: #0a2b4e;
        --color-primary-dark: #051b33;
        --color-accent: #e63946;
        --color-accent-hover: #c1121f;
        --color-dark: #1e2a3e;
        --color-gray-bg: #f8fafc;
        --color-card: #ffffff;
        --color-muted: #64748b;
        --font-display: 'Playfair Display', serif;
        --font-body: 'Inter', sans-serif;
        --shadow-sm: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
        --shadow-md: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
        --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Hero Section */
    .contact-hero {
        position: relative;
        background: linear-gradient(135deg, var(--color-primary) 0%, #1e4a76 100%);
        padding: 5rem 0 4.5rem;
        overflow: hidden;
        margin-bottom: 0;
    }

    .contact-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><circle cx="400" cy="400" r="180" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="40"/><circle cx="400" cy="400" r="280" fill="none" stroke="rgba(255,255,255,0.02)" stroke-width="20"/><circle cx="400" cy="400" r="380" fill="none" stroke="rgba(255,255,255,0.015)" stroke-width="15"/><path d="M200,400 L600,400 M400,200 L400,600" stroke="rgba(255,255,255,0.02)" stroke-width="2"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        opacity: 0.2;
        pointer-events: none;
    }

    .hero-deco-ring {
        position: absolute;
        border-radius: 50%;
        border: 40px solid rgba(255,255,255,0.04);
        pointer-events: none;
    }
    .ring1 { width: 320px; height: 320px; top: -100px; right: -60px; border-color: rgba(255,255,255,0.05); }
    .ring2 { width: 200px; height: 200px; bottom: -60px; left: 5%; border-color: rgba(230,57,70,0.12); }

    .hero-badge {
        display: inline-block;
        background: rgba(255,255,255,0.12);
        backdrop-filter: blur(2px);
        color: rgba(255,255,255,0.9);
        font-size: 11px;
        letter-spacing: 3px;
        text-transform: uppercase;
        padding: 5px 16px;
        border-radius: 40px;
        border: 1px solid rgba(255,255,255,0.2);
        margin-bottom: 1.5rem;
        font-weight: 500;
    }

    .hero-title {
        font-family: var(--font-display);
        font-size: clamp(2.3rem, 5vw, 3.5rem);
        font-weight: 800;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    .hero-title em {
        font-style: normal;
        color: #ffb3b8;
        position: relative;
    }

    .hero-accent-bar {
        width: 70px;
        height: 4px;
        background: var(--color-accent);
        border-radius: 4px;
        margin-bottom: 1.25rem;
    }

    .hero-text {
        color: rgba(255,255,255,0.8);
        font-size: 1rem;
        line-height: 1.7;
        max-width: 550px;
    }

    /* Section principale contact */
    .contact-main {
        padding: 4rem 0 5rem;
    }

    .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 2.5rem;
    }

    /* Cartes info */
    .info-card {
        background: var(--color-card);
        border-radius: 28px;
        padding: 2rem 1.8rem;
        box-shadow: var(--shadow-md);
        border: 1px solid rgba(0,0,0,0.03);
        transition: var(--transition);
        height: 100%;
    }

    .info-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
    }

    .info-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 1.8rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid rgba(230,57,70,0.15);
    }

    .info-icon {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, rgba(10,43,78,0.08), rgba(230,57,70,0.08));
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        color: var(--color-accent);
    }

    .info-header h3 {
        font-size: 1.4rem;
        font-weight: 700;
        margin: 0;
        color: var(--color-primary);
    }

    .contact-detail-item {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 1.5rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid #eef2f6;
    }

    .contact-detail-item i {
        font-size: 1.2rem;
        color: var(--color-accent);
        margin-top: 3px;
        min-width: 24px;
    }

    .contact-detail-item strong {
        display: block;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--color-muted);
        margin-bottom: 4px;
    }

    .contact-detail-item p, .contact-detail-item a {
        font-size: 1rem;
        font-weight: 500;
        color: var(--color-dark);
        text-decoration: none;
        transition: color 0.2s;
    }

    .contact-detail-item a:hover {
        color: var(--color-accent);
    }

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

    .social-link {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-primary);
        font-size: 1.3rem;
        transition: var(--transition);
        text-decoration: none;
    }

    .social-link:hover {
        background: var(--color-accent);
        color: white;
        transform: translateY(-3px);
    }

    /* Formulaire */
    .form-card {
        background: var(--color-card);
        border-radius: 28px;
        padding: 2rem 1.8rem;
        box-shadow: var(--shadow-md);
        border: 1px solid rgba(0,0,0,0.03);
    }

    .form-card h3 {
        font-family: var(--font-display);
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--color-primary);
        margin-bottom: 0.5rem;
    }

    .form-sub {
        color: var(--color-muted);
        margin-bottom: 1.8rem;
        font-size: 0.9rem;
        border-left: 3px solid var(--color-accent);
        padding-left: 12px;
    }

    .form-group {
        margin-bottom: 1.25rem;
    }

    .form-group label {
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--color-primary);
        margin-bottom: 8px;
        display: block;
    }

    .form-control, .form-select {
        width: 100%;
        padding: 12px 16px;
        border: 1.5px solid #e2e8f0;
        border-radius: 16px;
        font-size: 0.95rem;
        transition: var(--transition);
        background: #fff;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--color-accent);
        outline: none;
        box-shadow: 0 0 0 4px rgba(230,57,70,0.1);
    }

    textarea.form-control {
        resize: vertical;
    }

    .btn-submit {
        background: var(--color-accent);
        color: white;
        border: none;
        padding: 14px 24px;
        font-weight: 700;
        font-size: 1rem;
        border-radius: 40px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: var(--transition);
        margin-top: 10px;
    }

    .btn-submit:hover {
        background: var(--color-accent-hover);
        transform: translateY(-2px);
        box-shadow: 0 10px 20px -5px rgba(230,57,70,0.4);
    }

    /* Carte Google Maps */
    .map-section {
        margin: 3rem 0 2rem;
    }

    .map-card {
        background: white;
        border-radius: 28px;
        overflow: hidden;
        box-shadow: var(--shadow-md);
        border: 1px solid rgba(0,0,0,0.05);
        transition: var(--transition);
    }

    .map-card:hover {
        box-shadow: var(--shadow-lg);
    }

    .map-container {
        width: 100%;
        height: 380px;
    }

    .map-container iframe {
        width: 100%;
        height: 100%;
        border: 0;
        filter: brightness(0.98) contrast(1.02);
    }

    .map-footer {
        padding: 1rem 1.5rem;
        background: #fff;
        border-top: 1px solid #edf2f7;
        font-size: 0.85rem;
        color: var(--color-muted);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .map-footer i {
        color: var(--color-accent);
        font-size: 1.1rem;
    }

    /* Alertes */
    .alert-custom {
        border-radius: 20px;
        padding: 1rem 1.2rem;
        margin-bottom: 1.5rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 12px;
        border: none;
    }

    .alert-success-custom {
        background: #e6f7e6;
        color: #2e7d32;
        border-left: 4px solid #2e7d32;
    }

    .alert-error-custom {
        background: #ffe6e5;
        color: #c62828;
        border-left: 4px solid #c62828;
    }

    /* Animation fade-in */
    .fade-up {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .fade-up.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Responsive */
    @media (max-width: 991px) {
        .contact-grid {
            grid-template-columns: 1fr;
            gap: 2rem;
        }
        .contact-hero {
            padding: 3.5rem 0 3rem;
        }
        .map-container {
            height: 280px;
        }
    }

    @media (max-width: 576px) {
        .info-card, .form-card {
            padding: 1.5rem;
        }
        .hero-title {
            font-size: 1.9rem;
        }
    }
</style>
{% endblock %}

{% block content %}

<!-- ==================== HERO SECTION ==================== -->
<section class="contact-hero" id="contactHero">
    <div class="hero-deco-ring ring1"></div>
    <div class="hero-deco-ring ring2"></div>
    <div class="container position-relative">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <div class="hero-badge fade-up">📬 Nous contacter</div>
                <h1 class="hero-title fade-up" style="transition-delay: 0.05s;">
                    Échangeons<br><em>ensemble</em>
                </h1>
                <div class="hero-accent-bar mx-auto fade-up" style="transition-delay: 0.1s;"></div>
                <p class="hero-text mx-auto fade-up" style="transition-delay: 0.15s;">
                    Une question sur nos formations, un partenariat ou simplement un retour ? 
                    Notre équipe est à votre écoute. Remplissez le formulaire ou utilisez nos coordonnées.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- ==================== SECTION CONTACT PRINCIPALE ==================== -->
<div class="container contact-main">
    
    <!-- Affichage des messages -->
    {% if messages %}
        {% for message in messages %}
            <div class="alert-custom {% if message.tags == 'success' %}alert-success-custom{% elif message.tags == 'error' %}alert-error-custom{% endif %} mb-4">
                <i class="bi {% if message.tags == 'success' %}bi-check-circle-fill{% else %}bi-exclamation-triangle-fill{% endif %}" style="font-size:1.3rem;"></i>
                <span>{{ message }}</span>
            </div>
        {% endfor %}
    {% endif %}
    
    <div id="alertContainer" style="display: none;" class="mb-4">
        <div id="dynamicAlert" class="alert-custom"></div>
    </div>

    <div class="contact-grid">
        
        <!-- COLONNE GAUCHE : INFOS + HORAIRES + RÉSEAUX -->
        <div class="fade-up">
            <div class="info-card">
                <div class="info-header">
                    <div class="info-icon"><i class="bi bi-geo-alt-fill"></i></div>
                    <h3>Notre campus</h3>
                </div>
                
                <div class="contact-detail-item">
                    <i class="bi bi-building"></i>
                    <div>
                        <strong>École</strong>
                        <p>ESSIG - École Supérieure de Gestion et d'Informatique</p>
                    </div>
                </div>
                
                <div class="contact-detail-item">
                    <i class="bi bi-pin-map-fill"></i>
                    <div>
                        <strong>Localisation</strong>
                        <p>123 Avenue de l'École, Lomé, Togo</p>
                    </div>
                </div>
                
                <div class="contact-detail-item">
                    <i class="bi bi-envelope-fill"></i>
                    <div>
                        <strong>Email officiel</strong>
                        <a href="mailto:contact@es-essig.com">info@es-essig.com</a>
                    </div>
                </div>
                
                <div class="contact-detail-item">
                    <i class="bi bi-telephone-fill"></i>
                    <div>
                        <strong>Téléphone</strong>
                        <p>+228 71 19 05 05 <br> 96 14 86 87</p>
                    </div>
                </div>
                
                <div class="contact-detail-item">
                    <i class="bi bi-clock-history"></i>
                    <div>
                        <strong>Horaires d'ouverture</strong>
                        <p>Lundi — Vendredi : 08h00 - 17h00<br>Samedi : 09h00 - 12h00</p>
                    </div>
                </div>
                
                <div class="social-links">
                    <a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
                    <a href="#" class="social-link"><i class="bi bi-linkedin"></i></a>
                    <a href="#" class="social-link"><i class="bi bi-instagram"></i></a>
                    <a href="#" class="social-link"><i class="bi bi-twitter-x"></i></a>
                </div>
            </div>
        </div>
        
        <!-- COLONNE DROITE : FORMULAIRE DYNAMIQUE -->
        <div class="fade-up" style="transition-delay: 0.1s;">
            <div class="form-card">
                <h3>✉️ Envoyez-nous un message</h3>
                <div class="form-sub">Nous vous répondrons dans les meilleurs délais</div>
                
                <form id="contactForm" method="POST" action="{% url 'contact' %}">
                    {% csrf_token %}
                    
                    <div class="form-group">
                        <label for="id_nom">Nom complet</label>
                        {{ form.nom }}
                    </div>
                    
                    <div class="form-group">
                        <label for="id_email">Adresse email</label>
                        {{ form.email }}
                    </div>
                    
                    <div class="form-group">
                        <label for="id_telephone">Téléphone</label>
                        {{ form.telephone }}
                    </div>
                    
                    <div class="form-group">
                        <label for="id_objet">Objet du message</label>
                        {{ form.objet }}
                    </div>
                    
                    <div class="form-group">
                        <label for="id_message">Message</label>
                        {{ form.message }}
                    </div>
                    
                    <button type="submit" class="btn-submit">
                        <i class="bi bi-send-fill"></i> Envoyer le message
                    </button>
                </form>
            </div>
        </div>
    </div>
    
    <!-- SECTION MAPS GOOGLE MAPS INTÉGRÉE -->
    <div class="map-section fade-up" style="transition-delay: 0.2s;">
        <div class="map-card">
            <div class="map-container">
                <iframe 
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3968.239656399252!2d1.215614314771011!3d6.140420028390985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1023f91c8b9e8f2b%3A0x8b7b9f5c6a5a4b3!2sLom%C3%A9%2C%20Togo!5e0!3m2!1sfr!2sfr!4v1700000000000!5m2!1sfr!2sfr" 
                    allowfullscreen="" 
                    loading="lazy" 
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>
            <div class="map-footer">
                <i class="bi bi-geo-alt-fill"></i>
                <span>123 Avenue de l'École, Lomé, Togo | <strong>ESSIG Campus</strong> — Venez nous rencontrer !</span>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // ==================== ANIMATION FADE-IN ====================
    const fadeElements = document.querySelectorAll('.fade-up');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1, rootMargin: "0px 0px -20px 0px" });
    fadeElements.forEach(el => observer.observe(el));
    
    // Déclencher le hero immédiatement
    setTimeout(() => {
        document.querySelectorAll('#contactHero .fade-up').forEach(el => el.classList.add('visible'));
    }, 100);
</script>

{% endblock %}