<!DOCTYPE html>
<html lang="fr" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imators</title>
    <link href="https://cdn.imators.com/logo.png" rel="icon" type="image/png" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
    <style type="text/css">
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Space Grotesk', sans-serif;
        }
        .bg-image {
            background-image: url('/api/placeholder/1920/400');
            background-size: cover;
            background-position: center;
            filter: brightness(0.6);
        }
        .input-effect {
            position: relative;
            margin-bottom: 30px;
        }
        .input-effect input, .input-effect textarea {
            width: 100%;
            padding: 10px 0;
            border: none;
            border-bottom: 1px solid #333;
            background-color: transparent;
            color: #fff;
            outline: none;
            transition: border-color 0.3s ease;
        }
        .input-effect input:focus, .input-effect textarea:focus {
            border-color: #4299e1;
        }
        .input-effect label {
            position: absolute;
            top: 10px;
            left: 0;
            color: #666;
            transition: all 0.3s ease;
            pointer-events: none;
        }
        .input-effect input:focus ~ label,
        .input-effect input:valid ~ label,
        .input-effect textarea:focus ~ label,
        .input-effect textarea:valid ~ label {
            top: -20px;
            font-size: 0.8em;
            color: #4299e1;
        }
    </style>
</head>
<body class="flex flex-col min-h-screen bg-black text-gray-400">
    <?php include 'src/header.php'; ?>
    <header class="relative h-80">
        <div class="bg-image absolute inset-0"></div>
        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black"></div>
        <div class="container mx-auto px-4 h-full flex items-end pb-12 relative z-10">
            <h1 class="text-5xl font-light text-white tracking-wide">Support Imators</h1>
        </div>
    </header>

    <main class="flex-grow container mx-auto px-4 py-16">
        <div class="max-w-2xl mx-auto space-y-16">
            <p class="text-sm leading-relaxed">
                Notre support est simple et vous permet d&apos;obtenir une r&eacute;ponse &agrave; toute demande &agrave; l'internationale dans les 24 heures. Nous vous recommandons d&apos;utiliser votre compte Imators si vous en avez un.
            </p>

            <form id="contactForm" action="process.php" method="POST" class="space-y-10">
                <div class="space-y-6">
                    <div class="input-effect">
                        <input type="text" name="nom" required>
                        <label>Nom</label>
                    </div>
                    <div class="input-effect">
                        <input type="text" name="prenom" required>
                        <label>Pr&eacute;nom</label>
                    </div>
                    <div class="input-effect">
                        <input type="email" name="email" required>
                        <label>Email</label>
                    </div>
                </div>

                <div id="php-inclusion" class="py-4">
                    <?php include 'additional_info.php'; ?>
                </div>

                <div class="input-effect">
                    <textarea name="demande" id="demande" rows="5" required minlength="50" maxlength="2000"></textarea>
                    <label>Votre demande</label>
                    <div class="text-right text-xs mt-2">
                        <span id="charCount">0</span> / 2000
                    </div>
                </div>

                <button type="submit" class="w-full py-3 rounded-full px-6 bg-white/5 text-white hover:bg-white/10 transition duration-300 ease-in-out">
                    Envoyer ma demande
                </button>
            </form>
        </div>
    </main>

    <footer class="bg-black text-white">
        <div class="max-w-6xl mx-auto px-4 py-10 flex flex-wrap justify-between">
            <div class="w-full md:w-1/3 p-5">
                <h5 class="text-xs uppercase font-medium mb-6">Suivez-nous</h5>
                <div class="flex items-center space-x-4">
                    <a href="https://instagram.com/this.is.imators" class="text-sm font-medium duration-700 hover:text-gray-100 flex items-center">
                        <img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/instagram-white-icon.png" alt="Instagram" class="w-6 h-6 mr-2">
                        <span>Instagram</span>
                    </a>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <h5 class="text-xs uppercase font-medium mb-6">D&eacute;couvrir</h5>
                <a href="/privacy" class="my-3 block hover:text-gray-100 text-sm font-medium duration-700">
                    Politique de confidentialit&eacute;
                </a>
                <a href="/fr/terms-of-use" class="my-3 block hover:text-gray-100 text-sm font-medium duration-700">
                    Conditions d&apos;utilisation
                </a>
                <a href="/" class="my-3 block hover:text-gray-100 text-sm font-medium duration-700">
                    Accueil
                </a>
                <a href="/fr/about-us" class="my-3 block hover:text-gray-100 text-sm font-medium duration-700">
                    &Agrave; propos de nous
                </a>
                <a href="/fr/contact-us" class="my-3 block hover:text-gray-100 text-sm font-medium duration-700">
                    Contactez-nous
                </a>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <h5 class="text-xs uppercase font-medium mb-6">Because it's possible</h5>
                <p class="text-sm">
                    Toutes les images, vid&eacute;os et contenus de ce site sont la propri&eacute;t&eacute; d&apos;Imators.
                </p>
            </div>
        </div>
    
        <div class="text-center py-4 border-t border-gray-800">
            <p class="text-sm mb-2">
                &copy; 2024 Imators. Tous droits r&eacute;serv&eacute;s.
            </p>
            <p class="text-xs">
                Imators est une SARL (Soci&eacute;t&eacute; &agrave; Responsabilit&eacute; Limit&eacute;e) enregistr&eacute;e. Tous nos produits, qu&apos;ils soient technologiquement physiques ou simplement en ligne, sont soumis &agrave; nos r&egrave;gles, auxquelles vous pouvez acc&eacute;der.
            </p>
        </div>
    </footer>

    <div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center hidden z-50">
        <div class="text-2xl font-light text-gray-400">Chargement...</div>
    </div>

    <script>
        const demandeTextarea = document.getElementById('demande');
        const charCount = document.getElementById('charCount');
        const form = document.getElementById('contactForm');
        const loadingOverlay = document.getElementById('loadingOverlay');

        demandeTextarea.addEventListener('input', function() {
            charCount.textContent = this.value.length;
        });

        form.addEventListener('submit', function(e) {
            loadingOverlay.classList.remove('hidden');
        });
    </script>
</body>
</html>