<?php
require_once 'config.php';
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact - First Car</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <?php include 'header.php'; ?>
    <main class="container">
        <a href="index.php" class="back-link">← Retour à l'accueil</a>
        <h1 class="page-title">Nous contacter</h1>

        <div class="contact-wrapper">
            <!-- Left: info -->
            <div class="contact-info">
                <h2>Parlons de votre prochain trajet</h2>
                <p>Notre équipe est à votre disposition pour répondre à toutes vos questions, demandes spéciales ou pour préparer un trajet sur-mesure.</p>

                <div class="contact-detail">
                    <div class="icon">📧</div>
                    <div class="detail-text">
                        <strong>Email</strong>
                        <span>firstcar92@hotmail.com</span>
                    </div>
                </div>
                <div class="contact-detail">
                    <div class="icon">⏰</div>
                    <div class="detail-text">
                        <strong>Disponibilité</strong>
                        <span>7j/7 — Lun-Ven : 8h-20h<br>Sam-Dim : 9h-18h</span>
                    </div>
                </div>
                <div class="contact-detail">
                    <div class="icon">⚡</div>
                    <div class="detail-text">
                        <strong>Temps de réponse</strong>
                        <span>Sous 24 heures ouvrées</span>
                    </div>
                </div>
                <div class="contact-detail">
                    <div class="icon">🎩</div>
                    <div class="detail-text">
                        <strong>Service premium</strong>
                        <span>Demandes sur-mesure, transferts groupes, événements</span>
                    </div>
                </div>
            </div>

            <!-- Right: form -->
            <div class="contact-form-box">
                <h3>Envoyez-nous un message</h3>
                <form id="contactForm" novalidate>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="contact-name">Votre nom *</label>
                            <input type="text" id="contact-name" name="name" placeholder="Jean Dupont" required>
                        </div>
                        <div class="form-group">
                            <label for="contact-email">Votre email *</label>
                            <input type="email" id="contact-email" name="email" placeholder="vous@exemple.com" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="contact-subject">Sujet *</label>
                        <input type="text" id="contact-subject" name="subject" placeholder="Ex: Demande de réservation groupes" required>
                    </div>
                    <div class="form-group">
                        <label for="contact-message">Message *</label>
                        <textarea id="contact-message" name="message" placeholder="Décrivez votre demande, trajet envisagé, nombre de personnes..." required style="resize:vertical;min-height:140px;"></textarea>
                    </div>
                    <div id="form-error" class="alert error" style="display:none;margin-bottom:1rem;"></div>
                    <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;padding:1rem;">
                        Envoyer le message ✉
                    </button>
                    <p style="font-size:0.76rem;color:var(--light2);text-align:center;margin-top:1rem;font-weight:300;">
                        En cliquant, votre messagerie s'ouvrira pour envoyer l'email à <strong style="color:var(--orange);">firstcar92@hotmail.com</strong>
                    </p>
                </form>
            </div>
        </div>
    </main>
    <?php include 'footer.php'; ?>

    <script>
    document.getElementById('contactForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const name    = document.getElementById('contact-name').value.trim();
        const email   = document.getElementById('contact-email').value.trim();
        const subject = document.getElementById('contact-subject').value.trim();
        const message = document.getElementById('contact-message').value.trim();
        const errBox  = document.getElementById('form-error');

        // Validation
        if (!name || !email || !subject || !message) {
            errBox.textContent = 'Veuillez remplir tous les champs obligatoires.';
            errBox.style.display = 'block';
            return;
        }
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            errBox.textContent = 'Adresse email invalide.';
            errBox.style.display = 'block';
            return;
        }
        errBox.style.display = 'none';

        const recipient = 'firstcar92@hotmail.com';
        const mailSubject = encodeURIComponent('[First Car] ' + subject);
        const body = encodeURIComponent(
            'Nom : ' + name + '\n' +
            'Email : ' + email + '\n\n' +
            message
        );

        window.location.href = 'mailto:' + recipient + '?subject=' + mailSubject + '&body=' + body;
    });
    </script>
</body>
</html>
