website/components/index/contact.html

<section class="contact" id="contact">
    <div class="section-header reveal">
        <p class="section-tag">Contact</p>
        <h2 class="section-title">Parlons de votre projet</h2>
        <p class="section-desc">Un projet RP en tête ? Contactez-nous !</p>
    </div>
    <div class="contact-wrapper">
        <div class="contact-info reveal">
            <h3>Discutons ensemble</h3>
            <p>Vous avez un serveur à développer, une map à créer ou besoin d'un bot personnalisé ? Notre équipe est prête à donner vie à vos idées.</p>
            <div class="contact-links">
                <a href="mailto:contact@omegakube.com" class="contact-link">
                    <div class="contact-link-icon">
                        <i data-feather="mail"></i>
                    </div>
                    <span>contact@omegakube.com</span>
                </a>
                <a href="#" class="contact-link">
                    <div class="contact-link-icon">
                        <i data-feather="message-circle"></i>
                    </div>
                    <span>Discord : OmégaKube</span>
                </a>
            </div>
        </div>

        <form class="contact-form reveal reveal-delay-1" id="contact-form" novalidate>

            <!-- Honeypot anti-bot (caché, ne pas supprimer) -->
            <div style="display:none;" aria-hidden="true">
                <input type="text" name="website" tabindex="-1" autocomplete="off">
            </div>

            <div class="form-group">
                <label for="name">Nom</label>
                <input type="text" id="name" name="name" placeholder="Votre nom" required minlength="2" maxlength="100" autocomplete="name">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" placeholder="votre@email.com" required maxlength="254" autocomplete="email">
            </div>
            <div class="form-group">
                <label for="subject">Objet</label>
                <input type="text" id="subject" name="subject" placeholder="Ex : Création d'un bot RP" maxlength="150" autocomplete="off">
            </div>
            <div class="form-group">
                <label for="message">Message</label>
                <textarea id="message" name="message" placeholder="Décrivez votre projet..." required minlength="10" maxlength="5000"></textarea>
            </div>

            <!-- Zone de feedback -->
            <div id="form-feedback" role="alert" aria-live="polite" style="display:none;"></div>

            <button type="submit" class="btn btn-primary form-submit" id="form-submit-btn">
                <i data-feather="send"></i>
                <span>Envoyer le message</span>
            </button>
        </form>

        <script>
        (function () {
            const form      = document.getElementById('contact-form');
            const feedback  = document.getElementById('form-feedback');
            const submitBtn = document.getElementById('form-submit-btn');

            function showFeedback(message, type) {
                feedback.style.cssText = [
                    'display:block',
                    'padding:1rem 1.25rem',
                    'border-radius:4px',
                    'font-size:0.95rem',
                    'margin-bottom:1rem',
                    'border:1px solid',
                    type === 'success'
                        ? 'background:rgba(46,204,113,0.12);border-color:rgba(46,204,113,0.4);color:#2ecc71;'
                        : 'background:rgba(231,76,60,0.12);border-color:rgba(231,76,60,0.4);color:#e74c3c;'
                ].join(';');
                feedback.textContent = message;
                feedback.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }

            function setLoading(loading) {
                const span = submitBtn.querySelector('span');
                submitBtn.disabled = loading;
                submitBtn.style.opacity = loading ? '0.7' : '1';
                submitBtn.style.cursor = loading ? 'not-allowed' : '';
                if (span) span.textContent = loading ? 'Envoi en cours\u2026' : 'Envoyer le message';
            }

            form.addEventListener('submit', async function (e) {
                e.preventDefault();
                feedback.style.display = 'none';

                const name    = form.elements['name'].value.trim();
                const email   = form.elements['email'].value.trim();
                const subject = form.elements['subject'].value.trim();
                const message = form.elements['message'].value.trim();

                /* Validation côté client */
                if (name.length < 2) {
                    showFeedback('Le nom doit contenir au moins 2 caractères.', 'error');
                    form.elements['name'].focus();
                    return;
                }
                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                    showFeedback('Veuillez entrer une adresse email valide.', 'error');
                    form.elements['email'].focus();
                    return;
                }
                if (message.length < 10) {
                    showFeedback('Le message doit contenir au moins 10 caractères.', 'error');
                    form.elements['message'].focus();
                    return;
                }

                setLoading(true);

                try {
                    const payload = {
                        name:    name,
                        email:   email,
                        subject: subject || 'Contact depuis le site',
                        message: message,
                        website: form.elements['website'] ? form.elements['website'].value : ''
                    };

                    const res  = await fetch('assets/php/send_mail.php', {
                        method:  'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body:    JSON.stringify(payload)
                    });

                    const data = await res.json();

                    if (data.success) {
                        showFeedback(data.message, 'success');
                        form.reset();
                    } else {
                        showFeedback(data.message || 'Une erreur est survenue.', 'error');
                    }
                } catch (err) {
                    showFeedback('Impossible de contacter le serveur. Vérifiez votre connexion.', 'error');
                    console.error('[Contact form]', err);
                } finally {
                    setLoading(false);
                }
            });
        })();
        </script>

    </div>
</section>