{% extends 'base.html.twig' %}

{% block title %}Contact{% endblock %}

{% block meta_description %}Contactez le programme SYNA-MNV de la République du Congo : questions sur les publications, les données MNV ou les partenariats.{% endblock %}

{% block seo %}
  <link rel="canonical" href="{{ url('app_contact') }}">
{% endblock %}

{% block hero %}
  {% include 'partials/_hero.html.twig' with {
    crumb: 'Contact',
    titre: 'Contactez-nous',
    lead: "Une question sur nos publications, les données MNV ou un partenariat ? L'équipe du programme SYNA-MNV vous répond."
  } %}
{% endblock %}

{% block body %}
  <main class="section">
    <div class="container container-x">
      <div class="row g-5">

        <!-- Colonne coordonnées -->
        <div class="col-12 col-lg-5">
          <div class="section-head">
            <span class="eyebrow">Nous joindre</span>
            <h2>Coordonnées</h2>
            <p>Vous pouvez nous écrire directement ou utiliser le formulaire ci-contre.</p>
          </div>

          <div class="d-flex flex-column gap-3">
            <div class="info-card">
              <span class="info-card__icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0Z"></path><circle cx="12" cy="10" r="3"></circle></svg>
              </span>
              <div>
                <h4>Adresse</h4>
                <p>Ministère de l'Économie Forestière<br>Brazzaville, République du Congo</p>
              </div>
            </div>

            <div class="info-card">
              <span class="info-card__icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-10 6L2 7"></path></svg>
              </span>
              <div>
                <h4>E-mail</h4>
                <p><a href="mailto:contact@syna-mnv.cg">contact@syna-mnv.cg</a></p>
              </div>
            </div>

            <div class="info-card">
              <span class="info-card__icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.4 2.1L8 9.9a16 16 0 0 0 6 6l1.4-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2Z"></path></svg>
              </span>
              <div>
                <h4>Téléphone</h4>
                <p><a href="tel:+242000000000">+242 00 000 00 00</a></p>
              </div>
            </div>

            <div class="info-card">
              <span class="info-card__icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
              </span>
              <div>
                <h4>Horaires</h4>
                <p>Lundi – Vendredi, 8h00 – 16h00 (WAT)</p>
              </div>
            </div>
          </div>

          <div class="map-embed mt-4">
            <iframe
              title="Carte — Brazzaville, République du Congo"
              loading="lazy"
              referrerpolicy="no-referrer-when-downgrade"
              src="https://www.openstreetmap.org/export/embed.html?bbox=15.15%2C-4.35%2C15.35%2C-4.20&layer=mapnik&marker=-4.2634%2C15.2429">
            </iframe>
          </div>
        </div>

        <!-- Colonne formulaire -->
        <div class="col-12 col-lg-7">
          <div class="form-card">
            <div class="section-head mb-4">
              <span class="eyebrow">Formulaire</span>
              <h2>Envoyez-nous un message</h2>
              <p>Les champs marqués d'un <span style="color:var(--tag-amber-fg)">*</span> sont obligatoires.</p>
            </div>

            {% for message in app.flashes('success') %}
              <div class="alert alert-success" role="alert">{{ message }}</div>
            {% endfor %}

            {% for erreur in form.vars.errors %}
              <div class="alert alert-danger" role="alert">{{ erreur.message }}</div>
            {% endfor %}

            {{ form_start(form, {attr: {id: 'contactForm', novalidate: 'novalidate'}}) }}
              <!-- Champ appât anti-spam (ne pas remplir) -->
              <div aria-hidden="true" style="position:absolute;left:-5000px;top:auto;width:1px;height:1px;overflow:hidden;">
                <label>Ne pas remplir{{ form_widget(form.website, {attr: {tabindex: '-1', autocomplete: 'off'}}) }}</label>
              </div>
              <div class="row g-3">
                <div class="col-12 col-md-6">
                  <label class="form-label" for="{{ form.prenom.vars.id }}">Prénom <span class="req">*</span></label>
                  {{ form_widget(form.prenom, {attr: {class: 'form-control' ~ (form.prenom.vars.valid ? '' : ' is-invalid'), autocomplete: 'given-name'}}) }}
                  <div class="field-error{{ form.prenom.vars.valid ? '' : ' show' }}">{{ form_errors(form.prenom) }}</div>
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label" for="{{ form.nom.vars.id }}">Nom <span class="req">*</span></label>
                  {{ form_widget(form.nom, {attr: {class: 'form-control' ~ (form.nom.vars.valid ? '' : ' is-invalid'), autocomplete: 'family-name'}}) }}
                  <div class="field-error{{ form.nom.vars.valid ? '' : ' show' }}">{{ form_errors(form.nom) }}</div>
                </div>

                <div class="col-12 col-md-6">
                  <label class="form-label" for="{{ form.email.vars.id }}">E-mail <span class="req">*</span></label>
                  {{ form_widget(form.email, {attr: {class: 'form-control' ~ (form.email.vars.valid ? '' : ' is-invalid'), autocomplete: 'email'}}) }}
                  <div class="field-error{{ form.email.vars.valid ? '' : ' show' }}">{{ form_errors(form.email) }}</div>
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label" for="{{ form.organisation.vars.id }}">Organisation</label>
                  {{ form_widget(form.organisation, {attr: {class: 'form-control' ~ (form.organisation.vars.valid ? '' : ' is-invalid'), autocomplete: 'organization'}}) }}
                  <div class="field-error{{ form.organisation.vars.valid ? '' : ' show' }}">{{ form_errors(form.organisation) }}</div>
                </div>

                <div class="col-12">
                  <label class="form-label" for="{{ form.sujet.vars.id }}">Sujet <span class="req">*</span></label>
                  {{ form_widget(form.sujet, {attr: {class: 'form-select' ~ (form.sujet.vars.valid ? '' : ' is-invalid')}}) }}
                  <div class="field-error{{ form.sujet.vars.valid ? '' : ' show' }}">{{ form_errors(form.sujet) }}</div>
                </div>

                <div class="col-12">
                  <label class="form-label" for="{{ form.message.vars.id }}">Message <span class="req">*</span></label>
                  {{ form_widget(form.message, {attr: {class: 'form-control' ~ (form.message.vars.valid ? '' : ' is-invalid'), rows: 5}}) }}
                  <p class="form-hint">Décrivez votre demande en quelques lignes.</p>
                  <div class="field-error{{ form.message.vars.valid ? '' : ' show' }}">{{ form_errors(form.message) }}</div>
                </div>

                {% if recaptcha_site_key %}
                  <div class="col-12">
                    <div class="g-recaptcha" data-sitekey="{{ recaptcha_site_key }}"></div>
                  </div>
                {% endif %}

                <div class="col-12 d-flex align-items-center gap-3 flex-wrap">
                  <button type="submit" class="btn-brand" id="submitBtn">Envoyer le message</button>
                  <span class="form-hint m-0">Nous ne partageons jamais vos coordonnées.</span>
                </div>
              </div>
            {{ form_end(form) }}
          </div>
        </div>

      </div>
    </div>
  </main>
{% endblock %}

{% block page_scripts %}
  {% if recaptcha_site_key %}<script src="https://www.google.com/recaptcha/api.js" async defer></script>{% endif %}
{% endblock %}