---
import BaseLayout from "../layouts/BaseLayout.astro";
import Navbar from "../components/Navbar.astro";
---

<BaseLayout
    title="Contact - Astro Starter Kit"
    description="Contactez-nous via ce formulaire"
>
    <Navbar />

    <main class="max-w-4xl mx-auto px-6 py-16">
        <div class="mb-12">
            <h1 class="text-5xl font-bold tracking-tight mb-4">Contact</h1>
            <p class="text-xl text-gray-600 leading-relaxed">
                Envoyez-nous un message, nous serons ravis de vous répondre.
            </p>
        </div>

        <!-- Formulaire -->
        <form class="max-w-2xl space-y-6">
            <div>
                <label
                    for="name"
                    class="block text-sm font-medium text-gray-900 mb-2"
                >
                    Nom
                </label>
                <input
                    type="text"
                    id="name"
                    name="name"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition-all"
                    placeholder="Votre nom"
                />
            </div>

            <div>
                <label
                    for="email"
                    class="block text-sm font-medium text-gray-900 mb-2"
                >
                    Email
                </label>
                <input
                    type="email"
                    id="email"
                    name="email"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition-all"
                    placeholder="votre@email.com"
                />
            </div>

            <div>
                <label
                    for="message"
                    class="block text-sm font-medium text-gray-900 mb-2"
                >
                    Message
                </label>
                <textarea
                    id="message"
                    name="message"
                    rows="6"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition-all resize-none"
                    placeholder="Votre message..."></textarea>
            </div>

            <button
                type="button"
                onclick="alert('Ceci est un formulaire de démonstration. Aucune donnée n\'est envoyée.')"
                class="w-full px-6 py-3 bg-gray-900 text-white font-medium rounded-lg hover:bg-gray-800 transition-colors"
            >
                Envoyer le message
            </button>

            <p class="text-sm text-gray-500 text-center">
                Note : Ce formulaire est une démonstration et n'envoie aucune
                donnée.
            </p>
        </form>
    </main>
</BaseLayout>