{% extends 'domain/frontend/layouts/base.html.twig' %}

{% block title %}Contact{% endblock %}
{% block main_title %}Contact{% endblock %}
{% block sub_title %}Contact{% endblock %}

{% block head %}
    {{ parent() }}
    <!-- reCAPTCHA v2 -->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
{% endblock %}

{% block body %}
    <!-- Page Title Section -->
    <section class="page-hero">
        <h1>Contactez-Nous</h1>
        <p>Nous sommes à votre écoute pour répondre à toutes vos questions</p>
    </section>

    <!-- Contact Section -->
    <section class="contact-section">
        {% for label, messages in app.flashes %}
            <div class="alert alert-{{ label == 'success' ? 'success' : 'danger' }}">
                {% for message in messages %}
                    <p class="text-center">{{ message }}</p>
                {% endfor %}
            </div>
        {% endfor %}

        <div class="contact-container">
            <div class="contact-info">
                <h2 class="section-title">Nos Coordonnées</h2>

                <div class="contact-details">
                    <div class="detail-item">
                        <div class="detail-icon">📍</div>
                        <div>
                            <h3>Adresse</h3>
                            <p>Abidjan, Côte d'Ivoire</p>
                            <p>Plateau - Centre d'Affaires</p>
                        </div>
                    </div>

                    <div class="detail-item">
                        <div class="detail-icon">📞</div>
                        <div>
                            <h3>Téléphone</h3>
                            <p>+225 07 68 10 10 10</p>
                            <p>Disponible du lundi au vendredi</p>
                        </div>
                    </div>

                    <div class="detail-item">
                        <div class="detail-icon">✉️</div>
                        <div>
                            <h3>Email</h3>
                            <p>infos@sifogroup.com</p>
                            <p>Réponse sous 24h</p>
                        </div>
                    </div>

                    <div class="detail-item">
                        <div class="detail-icon">🕒</div>
                        <div>
                            <h3>Horaires</h3>
                            <p>Lundi - Vendredi: 8h00 - 18h00</p>
                            <p>Samedi: 8h00 - 14h00</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="contact-form-wrapper">
                <h2 class="section-title">Envoyez-Nous un Message</h2>

                {{ form_start(form, {'attr': {'id': 'contact-form'}}) }}

                <div class="form-group">
                    <label>Nom Complet *</label>
                    {{ form_row(form.nom) }}
                </div>

                <div class="form-group">
                    <label>Email *</label>
                    {{ form_row(form.email) }}
                </div>

                <div class="form-group">
                    <label>Téléphone</label>
                    <input type="tel" id="phone" name="phone" placeholder="Votre téléphone">
                </div>

                <div class="form-group">
                    <label>Sujet *</label>
                    {{ form_row(form.objet) }}
                </div>

                <div class="form-group">
                    <label>Message *</label>
                    {{ form_row(form.message) }}
                </div>

                <!-- reCAPTCHA v2 VISIBLE -->
                <div class="form-group">
                    <div class="g-recaptcha" data-sitekey="6Ld_O0gsAAAAABX8oPb6X8bCyICRiRh-S8aB-7Kl"></div>
                </div>

                <button type="submit" class="submit-btn">
                    Envoyer le Message
                </button>

                {{ form_end(form) }}
            </div>
        </div>
    </section>
{% endblock %}

{% block javascript %}
{{ parent() }}
{% endblock %}