@extends('client.index')
@section('title', 'Contact')
@section('content')
    <!-- Page Header -->
    <section class="page-header">
        <div class="container">
            <nav aria-label="breadcrumb" data-aos="fade-up">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Accueil</a></li>
                    <li class="breadcrumb-item active">Contact</li>
                </ol>
            </nav>
            <h1 data-aos="fade-up" data-aos-delay="100">Contactez-nous</h1>
        </div>
    </section>

    <!-- Contact Info -->
    <section>
        <div class="container">
            <div class="row g-4 mb-5">
                <div class="col-lg-3 col-md-6" data-aos="fade-up">
                    <div class="contact-info-card">
                        <div class="contact-icon"><i class="bi bi-geo-alt"></i></div>
                        <h4>Adresse</h4>
                        <p>Zone Industrielle Nord<br>69000 Lyon, France</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="contact-info-card">
                        <div class="contact-icon"><i class="bi bi-telephone"></i></div>
                        <h4>Téléphone</h4>
                        <p><a href="tel:+33472000000">+33 (0)4 72 00 00 00</a><br><a href="tel:+33472000001">+33 (0)4 72 00
                                00 01</a></p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
                    <div class="contact-info-card">
                        <div class="contact-icon"><i class="bi bi-envelope"></i></div>
                        <h4>Email</h4>
                        <p><a href="mailto:contact@metalpro.fr">contact@metalpro.fr</a><br><a
                                href="mailto:devis@metalpro.fr">devis@metalpro.fr</a></p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
                    <div class="contact-info-card">
                        <div class="contact-icon"><i class="bi bi-clock"></i></div>
                        <h4>Horaires</h4>
                        <p>Lun - Ven : 8h00 - 18h00<br>Sam : 9h00 - 12h00</p>
                    </div>
                </div>
            </div>

            <!-- Contact Form & Map -->
            <div class="row g-4">
                <div class="col-lg-7" data-aos="fade-right">
                    <div class="contact-form">
                        <p class="section-label">Formulaire de contact</p>
                        <h2 class="section-title">Demandez un devis gratuit</h2>
                        <p class="section-desc mb-4">Remplissez le formulaire ci-dessous et notre équipe vous recontactera
                            sous 24h.</p>

                        <form>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Nom complet *</label>
                                    <input type="text" class="form-control" placeholder="Votre nom" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Entreprise</label>
                                    <input type="text" class="form-control" placeholder="Nom de l'entreprise">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Email *</label>
                                    <input type="email" class="form-control" placeholder="votre@email.com" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Téléphone *</label>
                                    <input type="tel" class="form-control" placeholder="+33 6 00 00 00 00" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Type de projet</label>
                                    <select class="form-select">
                                        <option selected>Sélectionnez...</option>
                                        <option>Charpente métallique</option>
                                        <option>Structure industrielle</option>
                                        <option>Bardage & Couverture</option>
                                        <option>Bureau d'études</option>
                                        <option>Rénovation / Extension</option>
                                        <option>Autre</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Budget estimé</label>
                                    <select class="form-select">
                                        <option selected>Sélectionnez...</option>
                                        <option>Moins de 50 000 €</option>
                                        <option>50 000 € - 150 000 €</option>
                                        <option>150 000 € - 500 000 €</option>
                                        <option>Plus de 500 000 €</option>
                                        <option>À définir</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Description du projet *</label>
                                    <textarea class="form-control" placeholder="Décrivez votre projet en quelques lignes..." required></textarea>
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary-custom w-100">
                                        <i class="bi bi-send me-2"></i>Envoyer ma demande
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-lg-5" data-aos="fade-left">
                    <div class="map-container mb-4">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d1606.9166967696253!2d-17.442792876211417!3d14.719095216548252!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2ssn!4v1765213472758!5m2!1sfr!2ssn"  style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>

                    <!-- Quick Contact -->
                    <div class="contact-form">
                        <h4 class="mb-3">Besoin d'une réponse rapide ?</h4>
                        <p style="color: var(--gray); margin-bottom: 1.5rem;">Appelez-nous directement pour discuter de
                            votre projet avec un expert.</p>
                        <a href="tel:+33472000000" class="btn btn-primary-custom w-100 mb-3">
                            <i class="bi bi-telephone me-2"></i>+33 (0)4 72 00 00 00
                        </a>
                        <p style="color: var(--gray); font-size: 0.9rem; text-align: center;">Disponible du lundi au
                            vendredi, 8h - 18h</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section style="background: var(--dark-light);">
        <div class="container">
            <div class="text-center mb-5">
                <p class="section-label" data-aos="fade-up">FAQ</p>
                <h2 class="section-title" data-aos="fade-up" data-aos-delay="100">Questions Fréquentes</h2>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="faq-item active" data-aos="fade-up">
                        <div class="faq-question">
                            <h5>Quel est le délai moyen pour un devis ?</h5>
                            <i class="bi bi-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            Nous nous engageons à vous fournir un devis détaillé sous 48 à 72 heures après réception de
                            votre demande et des informations nécessaires. Pour les projets complexes, une visite sur site
                            peut être nécessaire.
                        </div>
                    </div>
                    <div class="faq-item" data-aos="fade-up" data-aos-delay="100">
                        <div class="faq-question">
                            <h5>Intervenez-vous sur toute la France ?</h5>
                            <i class="bi bi-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            Oui, nous intervenons sur l'ensemble du territoire français. Notre siège est basé à Lyon, mais
                            nos équipes de montage se déplacent partout en France pour assurer la pose de vos structures.
                        </div>
                    </div>
                    <div class="faq-item" data-aos="fade-up" data-aos-delay="200">
                        <div class="faq-question">
                            <h5>Proposez-vous des garanties sur vos réalisations ?</h5>
                            <i class="bi bi-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            Toutes nos réalisations bénéficient d'une garantie décennale. Nous sommes également assurés en
                            responsabilité civile professionnelle. Nos certifications EN 1090-2 et ISO 9001 garantissent la
                            qualité de nos ouvrages.
                        </div>
                    </div>
                    <div class="faq-item" data-aos="fade-up" data-aos-delay="300">
                        <div class="faq-question">
                            <h5>Quels types de projets réalisez-vous ?</h5>
                            <i class="bi bi-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            Nous réalisons tous types de constructions métalliques : bâtiments industriels, entrepôts
                            logistiques, hangars agricoles, immeubles de bureaux, centres commerciaux, passerelles,
                            mezzanines et structures spéciales sur mesure.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection