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

{% block title %}Contact - Winassurances{% endblock %}

{% block content %}
    {# Section : Banner #}
    <section class="bg-color-primary w-full pt-16 pb-8">
        <div class="max-w-7xl mx-auto px-6 pt-14 pb-6 flex flex-col md:flex-row items-center">
            {# Contenu bannière #}
            <div class="md:w-1/2 text-center md:text-left">
                <h1 class="text-4xl md:text-5xl font-bold leading-tight text-gray-900 animate-fadeIn">
                    Contactez nos conseillers <br> pour un devis personnalisé
                </h1>
                <p class="mt-4 text-lg text-gray-800 animate-slideUp">
                    Notre équipe d'experts en assurance est à votre écoute pour répondre à toutes vos questions
                    et vous proposer la solution adaptée à votre situation.
                </p>
                <p class="mt-2 text-lg font-semibold animate-pulse">
                    ✔ Réponse rapide garantie sous 24h
                </p>
            </div>

            {# Image bannière #}
            <div class="md:w-1/2 flex justify-center items-center mt-8 md:mt-0">
                <div class="relative animate-zoomIn">
                    <img src="{{ asset('images/contact/banner.png') | imagine_filter('banner_transparent_large') }}" alt="Contact Winassurances" class="w-full max-w-lg">
                </div>
            </div>
        </div>
    </section>

    {# Section : Formulaire de contact et informations #}
    <section class="bg-white w-full py-20">
        <div class="max-w-6xl mx-auto px-6">
            {# Titre principal #}
            <h2 class="title-h2 text-center">
                Comment pouvons-nous vous aider ?
            </h2>
            <p class="mt-4 text-lg text-gray-700 text-center max-w-3xl mx-auto">
                Besoin d'un devis, d'informations ou d'assistance ? Laissez-nous vos coordonnées et nous vous recontacterons dans les plus brefs délais.
            </p>

            <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
                {# Colonne 1: Coordonnées avec le composant #}
                <div class="bg-gray-100 p-8 rounded-lg shadow-md">
                    {{ component('contact_info') }}
                </div>

                {# Colonne 2-3: Formulaire de contact avec le composant live #}
                <div class="md:col-span-2 bg-gray-100 p-8 rounded-lg shadow-md">
                    {{ component('contact_form') }}
                </div>
            </div>
        </div>
    </section>

    {# Section : Carte et localisation #}
    <section class="bg-gray-100 w-full py-16">
        <div class="max-w-6xl mx-auto px-6">
            <h2 class="title-h2 text-center mb-12">
                Où nous trouver
            </h2>

            <div class="h-60 rounded-lg overflow-hidden shadow-lg">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.4857030621178!2d2.3028394!3d48.8720583!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fc4c0ab8755%3A0xe5c8f2b79efcecd0!2s25%20Rue%20de%20Ponthieu%2C%2075008%20Paris!5e0!3m2!1sfr!2sfr!4v1646234362181!5m2!1sfr!2sfr"
                        width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy">
                </iframe>
            </div>
        </div>
    </section>

    {# Section : FAQ avec le composant #}
    <section class="bg-white w-full py-16">
        <div class="max-w-4xl mx-auto px-6">
            {{ component('faq') }}
        </div>
    </section>

    {# Section CTA #}
    <section class="bg-gray-100 py-20">
        <div class="container mx-auto px-6">
            <div class="relative flex flex-col md:flex-row items-center bg-[#b3a0ff] shadow-lg rounded-xl p-8 overflow-hidden">
                <!-- Contenu Texte (3/4) -->
                <div class="md:w-3/4 p-6 relative z-10">
                    <h2 class="title-h2">
                        Besoin d'une réponse urgente ?
                    </h2>
                    <p class="mt-4 text-gray-900">
                        Notre équipe est disponible par téléphone pour vous répondre immédiatement et vous accompagner dans toutes vos démarches.
                    </p>
                    <p class="text-xs mt-2 text-gray-800">
                        ✔ <b>Disponibilité immédiate</b> <br>
                        ✔ <b>Conseils personnalisés</b> <br>
                        ✔ <b>Devis rapide</b>
                    </p>

                    <a href="tel:+33759655615"
                       class="mt-6 inline-flex items-center bg-black text-white px-6 py-3 rounded-lg text-lg font-medium hover:bg-gray-900 transition">
                        Appeler maintenant
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5 ml-2">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                        </svg>
                    </a>
                </div>

                <!-- Image Overlay à droite (1/4 de largeur) -->
                <div class="absolute right-0 top-0 h-full w-1/4 hidden md:block">
                    <img src="{{ asset('images/contact/service-client.png') | imagine_filter('thumbnail_canva') }}" alt="Service client" class="w-full h-full object-cover">
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block meta %}
    <meta name="description" content="Contactez Winassurances pour tous vos besoins en assurance. Notre équipe d'experts est à votre disposition pour vous proposer des solutions adaptées à votre profil.">
    <meta name="keywords" content="contact assurance, devis assurance, assurance auto malussé, assurance habitation, assistance assurance">
    <meta property="og:title" content="Contact - Winassurances">
    <meta property="og:description" content="Besoin d'un devis ou d'informations ? Contactez nos conseillers experts en assurance pour particuliers et professionnels.">
    <meta property="og:image" content="#">
    <meta property="og:type" content="website">
{% endblock %}

{% block jsonLd %}
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "ContactPage",
            "name": "Contact Winassurances",
            "url": "{{ url('app_contact') }}",
            "mainEntity": {
                "@type": "InsuranceAgency",
                "name": "Winassurances",
                "telephone": "+33 7 59 65 56 15",
                "email": "contact@winassurances.fr",
                "address": {
                    "@type": "PostalAddress",
                    "streetAddress": "20 Rue de Paris",
                    "addressLocality": "Paris",
                    "postalCode": "75001",
                    "addressCountry": "FR"
                },
                "openingHoursSpecification": [
                    {
                        "@type": "OpeningHoursSpecification",
                        "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
                        "opens": "09:00",
                        "closes": "18:00"
                    },
                    {
                        "@type": "OpeningHoursSpecification",
                        "dayOfWeek": "Saturday",
                        "opens": "10:00",
                        "closes": "16:00"
                    }
                ]
            }
        }
    </script>
{% endblock %}