{% extends "_base.html" %}
{#
    Template: contact.html
    Description: Page de contact avec informations et formulaire optionnel
    Variables:
        - title: Titre de la page
        - introduction: Texte d'introduction
        - email: Email de contact principal
        - address: Adresse physique
        - phone: Numero de telephone
        - social: Liens reseaux sociaux [{platform, url, icon}]
        - map_embed: Code embed Google Maps ou autre
        - page_content_html: Contenu markdown converti en HTML
#}

{% block title %}{{ title | default('Contact') }} - {{ site.title | default('Niamoto') }}{% endblock %}

{% block content %}
<div class="contact-page py-12">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <header class="mb-12 text-center">
            <h1 class="text-3xl sm:text-4xl font-bold text-gray-800 mb-4">
                {{ title | default('Contact') }}
            </h1>
            <div class="w-20 h-1 bg-green-600 mx-auto mb-6"></div>
            {% if introduction %}
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">{{ introduction }}</p>
            {% endif %}
            {% if page_content_html %}
            <div class="mt-6 prose max-w-2xl mx-auto text-gray-600">
                {{ page_content_html | safe }}
            </div>
            {% endif %}
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Contact Info -->
            <div class="contact-info space-y-6">
                <!-- Email -->
                {% if email %}
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex items-start gap-4">
                    <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-envelope text-green-600 text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-800 mb-1">Email</h3>
                        <a href="mailto:{{ email }}" class="text-green-600 hover:text-green-800">
                            {{ email }}
                        </a>
                    </div>
                </div>
                {% endif %}

                <!-- Address -->
                {% if address %}
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex items-start gap-4">
                    <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-map-marker-alt text-blue-600 text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-800 mb-1">Adresse</h3>
                        <p class="text-gray-600 whitespace-pre-line">{{ address }}</p>
                    </div>
                </div>
                {% endif %}

                <!-- Phone -->
                {% if phone %}
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex items-start gap-4">
                    <div class="w-12 h-12 rounded-lg bg-amber-100 flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-phone text-amber-600 text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-800 mb-1">Telephone</h3>
                        <a href="tel:{{ phone }}" class="text-gray-600 hover:text-green-600">
                            {{ phone }}
                        </a>
                    </div>
                </div>
                {% endif %}

                <!-- Social Links -->
                {% if social %}
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <h3 class="font-semibold text-gray-800 mb-4">Reseaux sociaux</h3>
                    <div class="flex flex-wrap gap-3">
                        {% for link in social %}
                        <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer"
                           class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gray-100 text-gray-700 hover:bg-green-100 hover:text-green-700 transition-colors">
                            <i class="{{ link.icon | default('fas fa-link') }}"></i>
                            {{ link.platform }}
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <!-- GitHub Link -->
                {% if site.github_url %}
                <div class="bg-gray-900 rounded-xl shadow-sm p-6 flex items-center gap-4">
                    <div class="w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center flex-shrink-0">
                        <i class="fab fa-github text-white text-2xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-semibold text-white mb-1">Code source</h3>
                        <p class="text-gray-400 text-sm">Contribuez sur GitHub</p>
                    </div>
                    <a href="{{ site.github_url }}" target="_blank" rel="noopener noreferrer"
                       class="px-4 py-2 bg-white text-gray-900 rounded-lg font-medium hover:bg-gray-100 transition-colors">
                        Voir le projet
                    </a>
                </div>
                {% endif %}
            </div>

            <!-- Map or Additional Content -->
            <div class="contact-map">
                {% if map_embed %}
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden h-full min-h-[400px]">
                    {{ map_embed | safe }}
                </div>
                {% else %}
                <!-- Default illustration -->
                <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl border border-green-200 p-8 h-full min-h-[400px] flex flex-col items-center justify-center text-center">
                    <div class="text-6xl mb-6">🌿</div>
                    <h3 class="text-xl font-semibold text-green-800 mb-2">
                        Restons en contact
                    </h3>
                    <p class="text-green-700 max-w-sm">
                        N'hesitez pas a nous contacter pour toute question concernant les donnees ou le projet.
                    </p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Additional Notes -->
        <div class="mt-12 bg-gray-50 rounded-xl p-6 border border-gray-200">
            <div class="flex items-start gap-4">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-clock text-gray-600"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-800 mb-1">Delai de reponse</h3>
                    <p class="text-sm text-gray-600">
                        Nous nous efforcons de repondre a toutes les demandes dans un delai de 48 heures ouvrables.
                        Pour les questions techniques, merci de fournir autant de details que possible.
                    </p>
                </div>
            </div>
        </div>

        <!-- Back -->
        <div class="mt-8">
            <a href="{{ 'index.html' | relative_url(nav_depth|default(depth|default(0))) }}"
               class="inline-flex items-center text-green-600 hover:text-green-800">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour a l'accueil
            </a>
        </div>
    </div>
</div>

<style>
    .contact-map iframe {
        width: 100%;
        height: 100%;
        min-height: 400px;
        border: none;
    }
    .prose h2 { font-size: 1.25rem; font-weight: 700; color: #1f2937; margin-top: 1.5rem; margin-bottom: 1rem; }
    .prose h3 { font-size: 1.125rem; font-weight: 600; color: #374151; margin-top: 1rem; margin-bottom: 0.5rem; }
    .prose p { color: #4b5563; line-height: 1.625; margin-bottom: 1rem; }
    .prose a { color: #059669; text-decoration: underline; }
    .prose a:hover { color: #065f46; }
</style>
{% endblock %}