{% extends 'layouts/front_layout.html.twig' %}

{% block title %}Contact | Luxim{% endblock %}

{% block body %}
<div class="min-h-screen bg-white">
    {# Header Section with Background Pattern #}
    <section class="relative overflow-hidden bg-accent py-20 text-accent-foreground">
        <div class="absolute inset-0 opacity-10">
            <img
                src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1200"
                class="h-full w-full object-cover"
                alt="Background"
            />
        </div>
        <div class="container relative mx-auto px-4">
            <div data-aos="fade-up" data-aos-duration="600">
                <span class="inline-block mb-4 rounded-full bg-primary/20 px-4 py-1 font-heading text-xs font-bold uppercase tracking-[0.2em] text-primary">
                    Contact
                </span>
                <h1 class="mt-2 font-heading text-4xl font-black md:text-5xl">
                    Parlons de votre <span class="text-primary">projet</span>
                </h1>
                <p class="mt-4 max-w-2xl text-lg text-accent-foreground/70">
                    Remplissez le formulaire ci-dessous ou contactez-nous directement
                    pour concrétiser vos rêves immobiliers.
                </p>
            </div>
        </div>
    </section>

    <section class="py-20">
        <div class="container mx-auto grid gap-12 px-4 lg:grid-cols-2">
            {# Form - Motion Div Left #}
            <div data-aos="fade-right" data-aos-duration="600">
                <h2 class="mb-6 font-heading text-2xl font-bold text-slate-900">
                    Envoyez-nous un message
                </h2>
                
                <form method="POST" class="space-y-5">
                    <div>
                        <label for="name" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Nom complet</label>
                        <input 
                            type="text" 
                            id="name" 
                            name="name"
                            placeholder="Votre nom" 
                            required
                            class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 mt-2"
                        >
                    </div>

                    <div class="grid gap-5 md:grid-cols-2">
                        <div>
                            <label for="email" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Email</label>
                            <input 
                                type="email" 
                                id="email" 
                                name="email"
                                placeholder="votre@email.com" 
                                required
                                class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 mt-2"
                            >
                        </div>
                        <div>
                            <label for="phone" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Téléphone</label>
                            <input 
                                type="tel" 
                                id="phone" 
                                name="phone"
                                placeholder="+225 07 00 00 00 00" 
                                class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 mt-2"
                            >
                        </div>
                    </div>

                    <div>
                        <label for="message" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Message</label>
                        <textarea 
                            id="message" 
                            name="message"
                            rows="5" 
                            placeholder="Décrivez votre projet immobiliers (achat, construction, conseil)..." 
                            required
                            class="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 mt-2"
                        ></textarea>
                    </div>

                    <button 
                        type="submit" 
                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-11 px-8 w-full bg-primary font-heading font-semibold text-primary-foreground hover:bg-primary/90 md:w-auto"
                    >
                        Envoyer le message
                    </button>
                </form>
            </div>

            {# Info & Map - Motion Div Right #}
            <div data-aos="fade-left" data-aos-duration="600">
                <h2 class="mb-6 font-heading text-2xl font-bold text-slate-900">
                    Nos coordonnées
                </h2>
                
                <div class="mb-8 space-y-6">
                    {# Adresse #}
                    <div class="flex items-start gap-4">
                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                        </div>
                        <div>
                            <h3 class="font-heading font-bold">Adresse</h3>
                            <p class="text-sm text-muted-foreground">Cocody Riviera Faya, Abidjan, Côte d'Ivoire</p>
                        </div>
                    </div>

                    {# Téléphone #}
                    <div class="flex items-start gap-4">
                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                        </div>
                        <div>
                            <h3 class="font-heading font-bold">Téléphone</h3>
                            <p class="text-sm text-muted-foreground">+225 07 00 00 00 00</p>
                        </div>
                    </div>

                    {# Email #}
                    <div class="flex items-start gap-4">
                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                        </div>
                        <div>
                            <h3 class="font-heading font-bold">Email</h3>
                            <p class="text-sm text-muted-foreground">contact@luxim.ci</p>
                        </div>
                    </div>

                    {# Horaires #}
                    <div class="flex items-start gap-4">
                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        </div>
                        <div>
                            <h3 class="font-heading font-bold">Horaires</h3>
                            <p class="text-sm text-muted-foreground">Lun - Ven : 8h - 18h | Sam : 9h - 13h</p>
                        </div>
                    </div>
                </div>

                {# Google Maps Integration #}
                <div class="relative h-72 w-full overflow-hidden rounded-xl shadow-inner grayscale hover:grayscale-0 transition-all duration-500 border border-slate-100">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15888.2721832049!2d-3.951!3d5.385!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfc193498967969b%3A0x600c00000000000!2sRiviera%20Faya%2C%20Abidjan!5e0!3m2!1sfr!2sci!4v1715000000000!5m2!1sfr!2sci"
                        width="100%"
                        height="100%"
                        style="border: 0"
                        allowfullscreen=""
                        loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"
                    ></iframe>
                </div>
            </div>
        </div>
    </section>
</div>
{% endblock %}