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

{% block title %}Contact - Antiquités en France{% endblock %}

{% block body %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-lg border-0">
                <div class="card-header bg-primary text-white text-center py-4">
                    <h1 class="h3 mb-0">
                        <i class="fas fa-envelope me-2"></i>
                        Nous contacter
                    </h1>
                    <p class="mb-0 opacity-75">Envoyez-nous un message, nous vous répondrons rapidement</p>
                </div>
                
                <div class="card-body p-5">
                    {% for message in app.flashes('success') %}
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    {% endfor %}

                    {% for message in app.flashes('error') %}
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    {% endfor %}

                    {{ form_start(contactForm, {'attr': {'class': 'contact-form'}}) }}
                        <div class="mb-3">
                            {{ form_row(contactForm.name, {
                                'label': 'Nom complet *',
                                'attr': {'class': 'form-control form-control-lg', 'placeholder': 'Votre nom complet'}
                            }) }}
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                {{ form_row(contactForm.email, {
                                    'label': 'Email *',
                                    'attr': {'class': 'form-control form-control-lg', 'placeholder': 'votre@email.com'}
                                }) }}
                            </div>
                            <div class="col-md-6 mb-3">
                                {{ form_row(contactForm.phone, {
                                    'label': 'Téléphone',
                                    'attr': {'class': 'form-control form-control-lg', 'placeholder': '06 12 34 56 78'}
                                }) }}
                            </div>
                        </div>

                        <div class="mb-3">
                            {{ form_row(contactForm.subject, {
                                'label': 'Sujet *',
                                'attr': {'class': 'form-control form-control-lg'}
                            }) }}
                        </div>

                        <div class="mb-4">
                            {{ form_row(contactForm.message, {
                                'label': 'Message *',
                                'attr': {'class': 'form-control', 'rows': 6, 'placeholder': 'Votre message...'}
                            }) }}
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-paper-plane me-2"></i>
                                Envoyer le message
                            </button>
                        </div>
                    {{ form_end(contactForm) }}
                </div>
            </div>

            <div class="row mt-5">
                <div class="col-md-4 text-center mb-4">
                    <div class="contact-info-card">
                        <i class="fas fa-envelope fa-2x text-primary mb-3"></i>
                        <h5>Email</h5>
                        <p class="text-muted">contact@antiquites-en-france.com</p>
                    </div>
                </div>
                <div class="col-md-4 text-center mb-4">
                    <div class="contact-info-card">
                        <i class="fas fa-phone fa-2x text-primary mb-3"></i>
                        <h5>Téléphone</h5>
                        <p class="text-muted">01 23 45 67 89</p>
                    </div>
                </div>
                <div class="col-md-4 text-center mb-4">
                    <div class="contact-info-card">
                        <i class="fas fa-clock fa-2x text-primary mb-3"></i>
                        <h5>Horaires</h5>
                        <p class="text-muted">Lun-Ven: 9h-18h</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.contact-info-card {
    padding: 2rem;
    border-radius: 10px;
    background: #f8f9fa;
    height: 100%;
    transition: transform 0.3s ease;
}

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

.contact-form .form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
</style>
{% endblock %}