<?php
/**
 * Page Contact
 */

$pageTitle = 'Contact';
$pageDescription = 'Contactez-moi pour discuter de votre projet web ou d\'une opportunité professionnelle.';
$currentPage = 'contact';

// Générer le token CSRF
$csrfToken = generateCsrfToken();

include_template('header', compact('pageTitle', 'pageDescription'));
include_template('navbar', compact('currentPage'));
?>

<main>
    <section class="section">
        <div class="container-content">
            <div class="max-w-2xl mx-auto">
                <!-- Header -->
                <div class="text-center mb-12">
                    <h1 class="text-3xl lg:text-display font-bold text-text-primary mb-4">Me Contacter</h1>
                    <p class="text-xl text-text-secondary">
                        Une question, un projet ? Parlons-en !
                    </p>
                </div>

                <!-- Formulaire -->
                <form
                    id="contact-form"
                    method="POST"
                    action="/api/contact.php"
                    class="space-y-6"
                >
                    <!-- Token CSRF -->
                    <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken) ?>">

                    <!-- Nom & Prénom (côte à côte sur desktop) -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <!-- Nom -->
                        <div>
                            <label for="nom" class="block text-sm font-medium text-text-primary mb-2">
                                Nom <span class="text-primary">*</span>
                            </label>
                            <input
                                type="text"
                                id="nom"
                                name="nom"
                                class="w-full px-4 py-3 bg-surface-alt border border-border rounded-lg text-text-muted placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
                                required
                                maxlength="100"
                                autocomplete="family-name"
                                placeholder="Dupont"
                            >
                            <p class="text-error text-sm mt-1 hidden" data-error="nom"></p>
                        </div>

                        <!-- Prénom -->
                        <div>
                            <label for="prenom" class="block text-sm font-medium text-text-primary mb-2">
                                Prénom <span class="text-primary">*</span>
                            </label>
                            <input
                                type="text"
                                id="prenom"
                                name="prenom"
                                class="w-full px-4 py-3 bg-surface-alt border border-border rounded-lg text-text-muted placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
                                required
                                maxlength="100"
                                autocomplete="given-name"
                                placeholder="Marie"
                            >
                            <p class="text-error text-sm mt-1 hidden" data-error="prenom"></p>
                        </div>
                    </div>

                    <!-- Email & Entreprise -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <!-- Email -->
                        <div>
                            <label for="email" class="block text-sm font-medium text-text-primary mb-2">
                                Email <span class="text-primary">*</span>
                            </label>
                            <input
                                type="email"
                                id="email"
                                name="email"
                                class="w-full px-4 py-3 bg-surface-alt border border-border rounded-lg text-text-muted placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
                                required
                                maxlength="255"
                                autocomplete="email"
                                placeholder="marie.dupont@example.com"
                            >
                            <p class="text-error text-sm mt-1 hidden" data-error="email"></p>
                        </div>

                        <!-- Entreprise (optionnel) -->
                        <div>
                            <label for="entreprise" class="block text-sm font-medium text-text-primary mb-2">
                                Entreprise <span class="text-text-muted">(optionnel)</span>
                            </label>
                            <input
                                type="text"
                                id="entreprise"
                                name="entreprise"
                                class="w-full px-4 py-3 bg-surface-alt border border-border rounded-lg text-text-muted placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
                                maxlength="200"
                                autocomplete="organization"
                                placeholder="Nom de votre entreprise"
                            >
                        </div>
                    </div>

                    <!-- Catégorie -->
                    <div>
                        <label for="categorie" class="block text-sm font-medium text-text-primary mb-2">
                            Catégorie <span class="text-primary">*</span>
                        </label>
                        <select
                            id="categorie"
                            name="categorie"
                            class="w-full px-4 py-3 bg-surface-alt border border-border rounded-lg text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
                            required
                        >
                            <option value="" disabled selected>Sélectionnez une catégorie...</option>
                            <option value="projet">Je souhaite parler de mon projet</option>
                            <option value="poste">Je souhaite vous proposer un poste</option>
                            <option value="autre">J'ai une autre idée en tête</option>
                        </select>
                        <p class="text-error text-sm mt-1 hidden" data-error="categorie"></p>
                    </div>

                    <!-- Objet -->
                    <div>
                        <label for="objet" class="block text-sm font-medium text-text-primary mb-2">
                            Objet <span class="text-primary">*</span>
                        </label>
                        <input
                            type="text"
                            id="objet"
                            name="objet"
                            class="w-full px-4 py-3 bg-surface-alt border border-border rounded-lg text-text-muted placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
                            required
                            maxlength="200"
                            placeholder="Résumez votre demande en quelques mots"
                        >
                        <p class="text-error text-sm mt-1 hidden" data-error="objet"></p>
                    </div>

                    <!-- Message -->
                    <div>
                        <label for="message" class="block text-sm font-medium text-text-primary mb-2">
                            Message <span class="text-primary">*</span>
                        </label>
                        <textarea
                            id="message"
                            name="message"
                            class="w-full px-4 py-3 bg-surface-alt border border-border rounded-lg text-text-muted placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors resize-y min-h-[150px]"
                            required
                            maxlength="5000"
                            rows="6"
                            placeholder="Décrivez votre projet ou votre demande..."
                        ></textarea>
                        <p class="text-error text-sm mt-1 hidden" data-error="message"></p>
                        <p class="text-xs text-text-muted mt-1">
                            <span id="message-count">0</span> / 5000 caractères
                        </p>
                    </div>

                    <!-- Boutons -->
                    <div class="flex flex-col sm:flex-row gap-4 pt-4">
                        <button type="submit" id="submit-btn" class="btn-primary flex-1 justify-center">
                            <span id="submit-text">Envoyer le message</span>
                            <span id="submit-loading" class="hidden items-center gap-2">
                                <svg class="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                                </svg>
                                Envoi en cours...
                            </span>
                        </button>
                        <button type="button" id="clear-form-btn" class="btn-secondary">
                            Effacer
                        </button>
                    </div>
                </form>

                <!-- Message de succès (caché par défaut) -->
                <div id="success-message" class="hidden mt-8 p-6 bg-green-500/10 border border-green-500/30 rounded-lg text-center">
                    <svg class="w-12 h-12 text-green-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <h3 class="text-lg font-semibold text-text-primary mb-2">Message envoyé avec succès !</h3>
                    <p class="text-text-secondary mb-4">
                        Merci pour votre message. Je vous répondrai dans les meilleurs délais.
                    </p>
                    <p class="text-sm text-text-muted">
                        Si vous ne recevez pas de réponse sous 48h, pensez à vérifier vos spams.
                    </p>
                </div>

                <!-- Message d'erreur global (caché par défaut) -->
                <div id="error-message" class="hidden mt-8 p-6 bg-red-500/10 border border-red-500/30 rounded-lg">
                    <div class="flex items-start gap-4">
                        <svg class="w-6 h-6 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <div>
                            <h3 class="font-semibold text-red-500 mb-1">Erreur</h3>
                            <p class="text-text-secondary" id="error-text"></p>
                            <p class="text-sm text-text-muted mt-2">
                                Vos données ont été conservées. Vous pouvez réessayer.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Liens secondaires -->
                <div class="mt-16 pt-8 border-t border-border">
                    <h2 class="text-lg font-semibold text-center text-text-primary mb-6">Retrouvez-moi aussi sur</h2>

                    <div class="flex flex-wrap justify-center gap-4">
                        <!-- LinkedIn -->
                        <a
                            href="https://linkedin.com/in/celian-music"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="flex items-center gap-3 px-5 py-3 bg-surface-alt rounded-lg border border-border hover:border-primary/50 transition-colors group"
                            aria-label="Profil LinkedIn"
                        >
                            <svg class="w-5 h-5 text-[#0A66C2]" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                            </svg>
                            <span class="font-medium text-text-primary group-hover:text-primary transition-colors">LinkedIn</span>
                        </a>

                        <!-- GitHub -->
                        <a
                            href="https://github.com/skycel"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="flex items-center gap-3 px-5 py-3 bg-surface-alt rounded-lg border border-border hover:border-primary/50 transition-colors group"
                            aria-label="Profil GitHub"
                        >
                            <svg class="w-5 h-5 text-text-primary" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                            </svg>
                            <span class="font-medium text-text-primary group-hover:text-primary transition-colors">GitHub</span>
                        </a>

                        <!-- Email (protégé contre le scraping) -->
                        <a
                            href="#"
                            id="email-link"
                            class="flex items-center gap-3 px-5 py-3 bg-surface-alt rounded-lg border border-border hover:border-primary/50 transition-colors group"
                            aria-label="Envoyer un email"
                            data-user="music.music"
                            data-domain="music.music"
                        >
                            <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                            <span class="font-medium text-text-primary group-hover:text-primary transition-colors">Email</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<?php include_template('footer'); ?>

<script src="/assets/js/state.js" defer></script>
<script src="/assets/js/contact-form.js" defer></script>
