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

{% block title %}Contactez-Nous : Support & Conseil Site Web | Izibrick{% endblock %}

{% block meta_description %}Besoin d'aide pour votre projet web ? Contactez notre équipe Izibrick. Réponse sous 24h. Support dédié et conseils personnalisés pour votre site.{% endblock %}

{% block meta_keywords %}contact izibrick, support site web, aide création site, conseil web{% endblock %}

{% block stylesheets %}
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
{% endblock %}

{% block body %}
{# Hero Section #}
<section class="position-relative overflow-hidden text-white py-5" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 50vh;">
    <div class="container py-5">
        <div class="row align-items-center justify-content-center text-center">
            <div class="col-lg-8" data-aos="fade-up">
                <div class="mb-3">
                    <span class="badge px-4 py-2 rounded-pill fs-6" style="background: rgba(255,255,255,0.2);">
                        <i class="fas fa-envelope me-2"></i>Contact
                    </span>
                </div>
                <h1 class="display-3 fw-bold mb-4">Contactez-nous</h1>
                <p class="lead mb-4 fs-4" style="opacity: 0.9;">
                    Notre équipe est à votre écoute pour répondre à toutes vos questions
                </p>
                <div class="d-flex justify-content-center gap-4 flex-wrap">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-clock me-2 fs-5"></i>
                        <span>Réponse sous 24h</span>
                    </div>
                    <div class="d-flex align-items-center">
                        <i class="fas fa-headset me-2 fs-5"></i>
                        <span>Support dédié</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {# Smooth Wave Divider #}
    <div class="position-absolute bottom-0 start-0 w-100" style="line-height: 0;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" preserveAspectRatio="none" style="width: 100%; height: 120px;">
            <path d="M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,48C672,43,768,53,864,64C960,75,1056,85,1152,80C1248,75,1344,53,1392,42.7L1440,32L1440,120L1392,120C1344,120,1248,120,1152,120C1056,120,960,120,864,120C768,120,672,120,576,120C480,120,384,120,288,120C192,120,96,120,48,120L0,120Z"
                  fill="#f5f5f5" fill-opacity="1"></path>
        </svg>
    </div>
</section>

{# Contact Form Section #}
<section class="py-5 bg-light">
    <div class="container py-5">
        <div class="row g-5">
            {# Contact Form #}
            <div class="col-lg-7" data-aos="fade-right">
                <div class="card border-0 shadow-lg h-100">
                    <div class="card-body p-5">
                        {% if success %}
                            <div class="alert alert-success d-flex align-items-center shadow-sm mb-4" role="alert">
                                <i class="fas fa-check-circle me-3 fs-3"></i>
                                <div>
                                    <h4 class="alert-heading fw-bold mb-1">Message envoyé !</h4>
                                    <p class="mb-0">Nous vous contacterons dès le traitement de votre demande.</p>
                                </div>
                            </div>
                        {% endif %}

                        <div class="mb-4">
                            <h2 class="h3 fw-bold mb-3">
                                <i class="fas fa-paper-plane me-2" style="color: #667eea;"></i>
                                Envoyez-nous un message
                            </h2>
                            <p class="text-muted">Vous avez un projet, une idée ou besoin d'informations ? Remplissez le formulaire ci-dessous.</p>
                        </div>

                        {{ form_start(form) }}

                        <div class="mb-4">
                            {{ form_label(form.subject, null, {'label_attr':{'class':'form-label fw-semibold'}}) }}
                            <span class="text-danger">*</span>
                            {{ form_widget(form.subject, {'attr':{'class':'form-select form-select-lg'}}) }}
                        </div>

                        <div class="mb-4">
                            {{ form_label(form.name, null, {'label_attr':{'class':'form-label fw-semibold'}}) }}
                            <span class="text-danger">*</span>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text bg-light border-end-0">
                                    <i class="fas fa-user text-muted"></i>
                                </span>
                                {{ form_widget(form.name, {'attr':{'class':'form-control border-start-0', 'placeholder':'Votre nom complet'}}) }}
                            </div>
                        </div>

                        <div class="mb-4">
                            {{ form_label(form.email, null, {'label_attr':{'class':'form-label fw-semibold'}}) }}
                            <span class="text-danger">*</span>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text bg-light border-end-0">
                                    <i class="fas fa-envelope text-muted"></i>
                                </span>
                                {{ form_widget(form.email, {'attr':{'class':'form-control border-start-0', 'placeholder':'votre@email.com'}}) }}
                            </div>
                        </div>

                        <div class="mb-4">
                            {{ form_label(form.message, null, {'label_attr':{'class':'form-label fw-semibold'}}) }}
                            <span class="text-danger">*</span>
                            {{ form_widget(form.message, {'attr':{'class':'form-control', 'rows':'6', 'placeholder':'Décrivez votre projet ou votre demande...'}}) }}
                        </div>

                        <button class="btn btn-lg w-100 text-white fw-semibold py-3 rounded-pill" type="submit" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                            <i class="fas fa-paper-plane me-2"></i>Envoyer le message
                        </button>

                        {{ form_end(form) }}
                    </div>
                </div>
            </div>

            {# Contact Information #}
            <div class="col-lg-5" data-aos="fade-left">
                <div class="mb-4">
                    <h2 class="h3 fw-bold mb-4">
                        <i class="fas fa-info-circle me-2" style="color: #667eea;"></i>
                        Nos coordonnées
                    </h2>
                </div>

                {# Contact Cards #}
                <div class="card border-0 shadow-sm mb-4 hover-lift" style="transition: transform 0.3s; display: none;">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-start">
                            <div class="flex-shrink-0 me-3">
                                <div class="d-flex align-items-center justify-content-center rounded-circle" style="width: 50px; height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                    <i class="fas fa-map-marker-alt text-white fs-5"></i>
                                </div>
                            </div>
                            <div>
                                <h5 class="fw-bold mb-2">Adresse</h5>
                                <p class="text-muted mb-0">
                                    <strong>izibrick - ARA Solutions</strong><br>
                                    55 Rue Louis Lagorgette<br>
                                    33150 Cenon, France
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm mb-4 hover-lift" style="transition: transform 0.3s;">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-start">
                            <div class="flex-shrink-0 me-3">
                                <div class="d-flex align-items-center justify-content-center rounded-circle" style="width: 50px; height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                    <i class="fas fa-envelope text-white fs-5"></i>
                                </div>
                            </div>
                            <div>
                                <h5 class="fw-bold mb-2">Email</h5>
                                <p class="text-muted mb-0">
                                    <a href="mailto:contact@ara-solutions.com" class="text-decoration-none" style="color: #667eea;">contact@ara-solutions.com</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm mb-4 hover-lift" style="transition: transform 0.3s;">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-start">
                            <div class="flex-shrink-0 me-3">
                                <div class="d-flex align-items-center justify-content-center rounded-circle" style="width: 50px; height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                    <i class="fas fa-clock text-white fs-5"></i>
                                </div>
                            </div>
                            <div>
                                <h5 class="fw-bold mb-2">Horaires</h5>
                                <p class="text-muted mb-0">
                                    Lundi - Vendredi: 9h - 18h<br>
                                    Support par email 24/7
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                {# Social Media Links #}
                <div class="card border-0 shadow-sm" style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); display: none;">
                    <div class="card-body p-4 text-center">
                        <h5 class="fw-bold mb-3">Suivez-nous</h5>
                        <div class="d-flex justify-content-center gap-3">
                            <a href="#" class="btn btn-light rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 45px; height: 45px;">
                                <i class="fab fa-facebook-f" style="color: #667eea;"></i>
                            </a>
                            <a href="#" class="btn btn-light rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 45px; height: 45px;">
                                <i class="fab fa-twitter" style="color: #667eea;"></i>
                            </a>
                            <a href="#" class="btn btn-light rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 45px; height: 45px;">
                                <i class="fab fa-linkedin-in" style="color: #667eea;"></i>
                            </a>
                            <a href="#" class="btn btn-light rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 45px; height: 45px;">
                                <i class="fab fa-instagram" style="color: #667eea;"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block javascripts %}
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({
        duration: 800,
        once: true,
        offset: 100
    });

    // Hover effect for contact cards
    document.querySelectorAll('.hover-lift').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
</script>
{% endblock %}