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

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

{% block content %}

<!-- ============================================ -->
<!-- SECTION 1 : HERO PARTENAIRES                  -->
<!-- ============================================ -->
<div class="page-hero" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('{% static 'images/partenaires-hero-placeholder.jpg' %}') center/cover;">
    <div class="container">
        <h1>{% trans " NOS PARTENAIRES" %} </h1>
        <p>{% trans " Ensemble pour un développement local inclusif et durable" %} </p>
    </div>
</div>

<!-- ============================================ -->
<!-- SECTION 2 : PARTENAIRES PAR TYPE              -->
<!-- ============================================ -->
<div class="partenaires-actuels">
    <div class="container">
        <h2>{% trans " ILS NOUS FONT CONFIANCE" %} </h2>
        
        {% for type_label, partenaires in partenaires_par_type.items %}
        <div class="categorie-partenaires">
            <h3>{{ type_label }}</h3>
            <div class="partenaires-grid">
                {% for partenaire in partenaires %}
                <div class="partenaire-card">
                    <div class="partenaire-logo-wrapper">
                        {% if partenaire.logo %}
                            <img src="{{ partenaire.logo.url }}" alt="{{ partenaire.nom }}" class="partenaire-logo">
                        {% else %}
                            <div class="logo-placeholder">
                                <span>{{ partenaire.nom|first }}</span>
                            </div>
                        {% endif %}
                    </div>
                    <h4>{{ partenaire.nom }}</h4>
                    <p>{{ partenaire.description|truncatewords:15 }}</p>
                    {% if partenaire.site_web %}
                    <a href="{{ partenaire.site_web }}" target="_blank" class="btn-link">{% trans " Visiter le site →" %} </a>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
        {% empty %}
        <p class="text-center">{% trans " Aucun partenaire pour le moment" %} </p>
        {% endfor %}
    </div>
</div>

<!-- ============================================ -->
<!-- SECTION 3 : TÉMOIGNAGES PARTENAIRES           -->
<!-- ============================================ -->
{% if temoignages %}
<div class="temoignages-partenaires">
    <div class="container">
        <h2>{% trans " CE QU'ILS DISENT DE NOUS" %} </h2>
        <div class="temoignages-slider">
            {% for temoignage in temoignages %}
            <div class="temoignage-item">
                <div class="temoignage-content">
                    <p>"{{ temoignage.message }}"</p>
                </div>
                <div class="temoignage-author">
                    {% if temoignage.photo %}
                        <img src="{{ temoignage.photo.url }}" alt="{{ temoignage.nom_personne }}" class="author-photo">
                    {% else %}
                        <div class="author-photo-placeholder">
                            <span>{{ temoignage.nom_personne|first }}</span>
                        </div>
                    {% endif %}
                    <div class="author-info">
                        <h4>{{ temoignage.nom_personne }}</h4>
                        <p>{{ temoignage.fonction }}</p>
                        <small>{{ temoignage.organisation }}</small>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

<!-- ============================================ -->
<!-- SECTION 4 : DEVENIR PARTENAIRE                -->
<!-- ============================================ -->
<div id="devenir-partenaire" class="devenir-partenaire" style="background: linear-gradient(rgba(102, 126, 234, 0.95), rgba(118, 75, 162, 0.95)), url('{% static 'images/devenir-partenaire-placeholder.jpg' %}') center/cover;">
    <div class="container">
        <div class="devenir-partenaire-content">
            <h2>{% trans " DEVENIR PARTENAIRE" %} </h2>
            <p>{% trans " Vous souhaitez rejoindre notre réseau de partenaires et contribuer au développement local ?" %} </p>
            
            <div class="benefices">
                <h3>{% trans " Pourquoi devenir partenaire ?" %} </h3>
                <div class="benefices-grid">
                    <div class="benefice">
                        <span class="benefice-icon">🌍</span>
                        <h4>{% trans " Impact durable" %} </h4>
                        <p>{% trans " Contribuez à des projets concrets de développement" %} </p>
                    </div>
                    <div class="benefice">
                        <span class="benefice-icon">🤝</span>
                        <h4>{% trans " Réseau d'expertise" %} </h4>
                        <p>{% trans " Accédez à notre réseau d'experts et de bénéficiaires" %} </p>
                    </div>
                    <div class="benefice">
                        <span class="benefice-icon">📊</span>
                        <h4>{% trans " Données fiables" %} </h4>
                        <p>{% trans " Bénéficiez de nos études et analyses de terrain" %} </p>
                    </div>
                    <div class="benefice">
                        <span class="benefice-icon">📈</span>
                        <h4>{% trans " Visibilité" %} </h4>
                        <p>{% trans " Valorisez votre engagement sur notre plateforme" %} </p>
                    </div>
                </div>
            </div>
            🤲
            <div class="types-partenariat">
                <h3>{% trans " Types de partenariat" %} </h3>
                <div class="types-grid">
                    <div class="type-item">
                        <h4>🏛️ {% trans " Institutionnel" %} </h4>
                        <p>{% trans " État, collectivités, institutions publiques" %} </p>
                    </div>
                    <div class="type-item">
                        <h4>🤲{% trans " Coopération " %} </h4>
                        <p>{% trans " Agences de coopération, ambassades" %} </p>
                    </div>
                    <div class="type-item">
                        <h4>💼{% trans " Privé" %} </h4>
                        <p>{% trans " Entreprises, fondations, mécénat" %} </p>
                    </div>
                    <div class="type-item">
                        <h4>🎓{% trans " Académique" %} </h4>
                        <p>{% trans " Universités, centres de recherche" %} </p>
                    </div>
                </div>
            </div>
            
            <!-- Formulaire de contact partenaire -->
            <div class="formulaire-partenaire">
                <h3>{% trans " Intéressé ? Contactez-nous" %} </h3>
                <form method="post" action="{% url 'glocal:glocal_partenaires' %}">
                    {% csrf_token %}
                    <div class="form-row">
                        <div class="form-group">
                            <label for="nom">{% trans " Nom de l'organisation" %} </label>
                            <input type="text" id="nom" name="nom" required>
                        </div>
                        <div class="form-group">
                            <label for="type">{% trans " Type d'organisation" %} </label>
                            <select id="type" name="type">
                                <option value="">{% trans " Sélectionnez" %} </option>
                                {% for type_code, type_label in partenaires_par_type.items|slice:":1" %}
                                    {% for code, label in Partenaire.TYPE_CHOICES %}
                                        <option value="{{ code }}">{{ label }}</option>
                                    {% endfor %}
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="email">{% trans " Email professionnel" %} </label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="telephone">{% trans " Téléphone" %} </label>
                            <input type="tel" id="telephone" name="telephone">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="message">{% trans " Message" %} </label>
                        <textarea id="message" name="message" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-light">{% trans " Envoyer la demande" %} </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- ============================================ -->
<!-- SECTION 5 : CONTACT DIRECT                    -->
<!-- ============================================ -->
<div class="contact-direct">
    <div class="container">
        <h3>{% trans " Vous préférez nous contacter directement ?" %} </h3>
        <div class="contact-methods">
            <div class="contact-method">
                <span class="method-icon">📧</span>
                <h4>{% trans " Email" %} </h4>
                <p>partenariat@glocalimpact.com</p>
            </div>
            <div class="contact-method">
                <span class="method-icon">📞</span>
                <h4>{% trans " Téléphone" %} </h4>
                <p>(225) 0789787450</p>
                <p>(225) 2523003745</p>
            </div>
            <div class="contact-method">
                <span class="method-icon">📍</span>
                <h4>{% trans " Adresse" %} </h4>
                <p>Yopougon Nouveau Quartier<br>Cité EECI Villa N° 304</p>
            </div>
            <div class="contact-method">
                <span class="method-icon">📱</span>
                <h4>WhatsApp</h4>
                <p>(225) 0789787450</p>
            </div>
        </div>
    </div>
</div>

<style>
/* Tous vos styles existants */
.page-hero {
    height: 40vh;
    display: flex;
    align-items: center;
    text-align: center;
    color: white;
}

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

.partenaires-actuels {
    padding: 60px 0;
}

.categorie-partenaires {
    margin-bottom: 50px;
}

.categorie-partenaires h3 {
    color: #667eea;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

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

.partenaire-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s;
}

.partenaire-card:hover {
    transform: translateY(-5px);
}

.partenaire-logo-wrapper {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.partenaire-logo {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

.logo-placeholder {
    width: 80px;
    height: 80px;
    background: #667eea;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto;
}

.temoignages-partenaires {
    padding: 60px 0;
    background: #f8f9fa;
}

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

.temoignage-item {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.temoignage-content {
    font-style: italic;
    margin-bottom: 20px;
    color: #555;
}

.temoignage-author {
    display: flex;
    gap: 15px;
    align-items: center;
}

.author-photo, .author-photo-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.author-photo-placeholder {
    background: #667eea;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.devenir-partenaire {
    padding: 80px 0;
    color: white;
}

.benefices-grid, .types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.benefice, .type-item {
    text-align: center;
    padding: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.benefice-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    display: block;
}

.formulaire-partenaire {
    max-width: 600px;
    margin: 50px auto 0;
    background: white;
    padding: 40px;
    border-radius: 10px;
    color: #333;
}

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

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

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

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

.contact-direct {
    padding: 60px 0;
    text-align: center;
}

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

.contact-method {
    padding: 20px;
}

.method-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

.btn-link {
    color: #667eea;
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: underline;
}

.btn-light {
    background: white;
    color: #667eea;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .page-hero h1 {
        font-size: 1.8rem;
    }
}
</style>
{% endblock %}