{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block title %}{% trans " GLOCAL IMPACT 3A - Contact" %} {% endblock %}

{% block content %}

<!-- ============================================ -->
<!-- SECTION 1 : HERO CONTACT                      -->
<!-- ============================================ -->
<!--
    🖼️ IMAGE RECOMMANDÉE : Bureaux, équipe, ou image de contact
    📁 EMPLACEMENT : /media/images/contact-hero.jpg
-->
<div class="page-hero" style="background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('{% static 'images/contact-hero-placeholder.jpg' %}') center/cover;">
    <div class="container">
        <h1>{% trans " CONTACTEZ-NOUS" %} </h1>
        <p>{% trans " Nous sommes à votre écoute pour tous vos projets" %} </p>
    </div>
</div>

<!-- ============================================ -->
<!-- SECTION 2 : MESSAGES DE SUCCÈS/ERREUR         -->
<!-- ============================================ -->
{% if messages %}
<div class="messages-container">
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }}">
        {{ message }}
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- ============================================ -->
<!-- SECTION 3 : COORDONNÉES                       -->
<!-- ============================================ -->
<div class="coordonnees-section">
    <div class="container">
        <h2>{% trans " NOS COORDONNÉES" %} </h2>
        
        <div class="coordonnees-grid">
            <div class="coordonnee-card">
                <div class="coordonnee-icon">📍</div>
                <h3>{% trans " Adresse" %} </h3>
                <p>Yopougon Nouveau Quartier<br>Cité EECI Villa N° 304<br>Abidjan, Côte d'Ivoire</p>
                <p class="info-secondaire">23 B.P. 4082 Abidjan 23</p>
            </div>
            
            <div class="coordonnee-card">
                <div class="coordonnee-icon">📞</div>
                <h3>{% trans " Téléphone" %} </h3>
                <p><strong>Mobile :</strong> (225) 07 89 78 74 50</p>
                <p><strong>Fixe :</strong> (225) 25 23 00 37 45</p>
                <p><strong>WhatsApp :</strong> (225) 07 89 78 74 50</p>
            </div>
            
            <div class="coordonnee-card">
                <div class="coordonnee-icon">✉️</div>
                <h3>{% trans " Email" %} </h3>
                <p>{% trans " <strong>Général :</strong>" %} glocalimpact3a@gmail.com</p>
                <p>{% trans " <strong>Partenariats :</strong>" %} partenariat@glocalimpact.com</p>
                <p>{% trans " <strong>Formations :</strong>" %} formations@glocalimpact.com</p>
            </div>
            
            <div class="coordonnee-card">
                <div class="coordonnee-icon">🕒</div>
                <h3>{% trans " Horaires" %} </h3>
                <p>{% trans " <strong>Lundi - Jeudi :</strong> 08h00 - 17h00" %} </p>
                <p>{% trans " <strong>Vendredi :</strong> 08h00 - 16h00" %} </p>
                <p>{% trans " <strong>Samedi - Dimanche :</strong> Fermé" %} </p>
            </div>
        </div>
    </div>
</div>

<!-- ============================================ -->
<!-- SECTION 4 : FORMULAIRE DE CONTACT             -->
<!-- ============================================ -->
<div class="formulaire-section">
    <div class="container">
        <div class="formulaire-container">
            <h2>{% trans " ENVOYEZ-NOUS UN MESSAGE" %} </h2>
            <p>{% trans " Remplissez le formulaire ci-dessous et nous vous répondrons dans les plus brefs délais." %} </p>
            
            <form method="post" class="contact-form">
                {% csrf_token %}
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="nom">{% trans " Nom complet *" %} </label>
                        <input type="text" id="nom" name="nom" required placeholder="Votre nom et prénom">
                    </div>
                    
                    <div class="form-group">
                        <label for="email">{% trans " Email *" %} </label>
                        <input type="email" id="email" name="email" required placeholder="votre@email.com">
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="telephone">{% trans " Téléphone" %} </label>
                        <input type="tel" id="telephone" name="telephone" placeholder="(225) 01 23 45 67 89">
                    </div>
                    
                    <div class="form-group">
                        <label for="sujet">{% trans " Sujet *" %} </label>
                        <select id="sujet" name="sujet" required>
                            <option value="">{% trans " Sélectionnez un sujet" %} </option>
                            <option value="information">{% trans " Demande d'information" %} </option>
                            <option value="expertise">{% trans " Notre expertise" %} </option>
                            <option value="formation">{% trans " Inscription formation" %} </option>
                            <option value="partenariat">{% trans " Proposition de partenariat" %} </option>
                            <option value="projet">{% trans " Proposition de projet" %} </option>
                            <option value="autre">{% trans " Autre" %} </option>
                        </select>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="message">{% trans " Message *" %} </label>
                    <textarea id="message" name="message" rows="6" required placeholder="Votre message..."></textarea>
                </div>
                
                <div class="form-group checkbox">
                    <input type="checkbox" id="rgpd" name="rgpd" required>
                    <label for="rgpd">{% trans " J'accepte que mes données soient traitées pour me répondre *" %} </label>
                </div>
                
                <button type="submit" class="btn-submit">{% trans " Envoyer le message" %} </button>
            </form>
        </div>
    </div>
</div>

<!-- ============================================ -->
<!-- SECTION 5 : CARTE / PLAN D'ACCÈS              -->
<!-- ============================================ -->
<!--
    🖼️ IMAGE RECOMMANDÉE : Capture d'écran Google Maps ou plan
    📁 EMPLACEMENT : /media/images/carte.jpg
-->
<div class="carte-section">
    <div class="container">
        <h2>{% trans " NOUS TROUVER" %} </h2>
        
        <div class="carte-container">
            <!-- 🖼️ IMAGE DE LA CARTE -->
            <img src="{% static 'images/carte-placeholder.jpg' %}" alt="Plan d'accès" class="carte-image">
            
            <div class="carte-info">
                <h3>{% trans " Comment venir ?" %} </h3>
                <p>{% trans " <strong>Depuis le Plateau :</strong> Prendre le pont De Gaulle, direction Yopougon. Au carrefour EECI, tourner à droite. La villa est au numéro 304." %} </p>
                <p>{% trans " <strong>Depuis Yopougon centre :</strong> Direction Niangon, prendre l'arrêt EECI. La cité EECI est à 5 minutes à pied." %} </p>
                <p>{% trans " <strong>Transport :</strong> Bus lignes 24, 41, 81 (arrêt EECI). Gbaka direction Niangon." %} </p>
            </div>
        </div>
    </div>
</div>

<!-- ============================================ -->
<!-- SECTION 6 : RÉSEAUX SOCIAUX                   -->
<!-- ============================================ -->
<div class="social-section">
    <div class="container">
        <h2>{% trans " SUIVEZ-NOUS" %} </h2>
        <p>{% trans " Restez informé de nos actualités et événements" %} </p>
        
        <div class="social-links">
            <a href="#" target="_blank" class="social-link">
                <span class="social-icon">📘</span>
                <span>Facebook</span>
            </a>
            <a href="#" target="_blank" class="social-link">
                <span class="social-icon">📸</span>
                <span>Instagram</span>
            </a>
            <a href="#" target="_blank" class="social-link">
                <span class="social-icon">🔗</span>
                <span>LinkedIn</span>
            </a>
            <a href="#" target="_blank" class="social-link">
                <span class="social-icon">🐦</span>
                <span>Twitter/X</span>
            </a>
            <a href="#" target="_blank" class="social-link">
                <span class="social-icon">▶️</span>
                <span>YouTube</span>
            </a>
            <a href="#" target="_blank" class="social-link">
                <span class="social-icon">💬</span>
                <span>WhatsApp</span>
            </a>
        </div>
    </div>
</div>

<style>
.page-hero {
    height: 40vh;
    display: flex;
    align-items: center;
    text-align: center;
    color: white;
    background-size: cover;
    background-position: center;
}

.page-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.messages-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

.alert {
    padding: 15px 20px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.coordonnees-section {
    padding: 60px 0;
    background: #f8f9fa;
}

.coordonnees-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.coordonnee-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
}

.coordonnee-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.coordonnee-card h3 {
    margin-bottom: 15px;
    color: #333;
}

.coordonnee-card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 5px;
}

.info-secondaire {
    font-size: 0.9rem;
    color: #999 !important;
    margin-top: 10px;
}

.formulaire-section {
    padding: 60px 0;
}

.formulaire-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.formulaire-container h2 {
    text-align: center;
    margin-bottom: 10px;
}

.formulaire-container p {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

.contact-form {
    margin-top: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox input {
    width: auto;
}

.checkbox label {
    margin: 0;
    font-weight: normal;
}

.btn-submit {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    width: 100%;
    transition: transform 0.3s;
}

.btn-submit:hover {
    transform: translateY(-2px);
}

.carte-section {
    padding: 60px 0;
    background: #f8f9fa;
}

.carte-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.carte-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 300px;
}

.carte-info {
    padding: 30px;
}

.carte-info h3 {
    margin-bottom: 20px;
    color: #333;
}

.carte-info p {
    margin-bottom: 15px;
    color: #666;
    line-height: 1.6;
}

.social-section {
    padding: 60px 0;
    text-align: center;
}

.social-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
}

.social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.social-icon {
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .carte-container {
        grid-template-columns: 1fr;
    }
    
    .coordonnees-grid {
        grid-template-columns: 1fr;
    }
}
</style>
{% endblock %}