document.addEventListener('DOMContentLoaded', () => {
    const app = document.getElementById('app');
    let currentPage = 'home';
    let selectedMission = null;
    let searchTerm = '';
    let selectedPassions = ['all'];
    let favorites = [];
    let showApplicationForm = false;
    let formData = { name: '', email: '', message: '' };

    const passions = [
        { id: 'all', label: 'Toutes', emoji: '✨' },
        { id: 'sustainability', label: 'Durabilité', emoji: '🌱' },
        { id: 'innovation', label: 'Innovation', emoji: '🚀' },
        { id: 'creativity', label: 'Créativité', emoji: '🎨' },
        { id: 'education', label: 'Éducation', emoji: '📚' },
        { id: 'technology', label: 'Technologie', emoji: '💻' },
        { id: 'social-impact', label: 'Impact Social', emoji: '🌍' }
    ];

    const missions = [
        {
            id: 1,
            title: 'Co-créer un atlas visuel de la mode durable parisienne',
            client: 'Atelier Vert',
            avatar: 'AV',
            impact: 8.5,
            emoji: '🌱',
            passions: ['sustainability', 'creativity'],
            tags: ['Durabilité', 'Storytelling', 'Photographie'],
            duration: '3-4 semaines',
            level: 'Défi modéré',
            description: 'Réinventons ensemble comment la mode durable peut transformer l\'industrie parisienne. Cette mission vous invite à créer un atlas visuel qui celebrate les artisans et créateurs qui redéfinissent la mode.',
            fullDescription: 'Rejoignez Atelier Vert pour un projet ambitieux et créatif. Nous cherchons un freelancer passionné par la mode durable pour documenter et raconter les histoires inspirantes des créateurs parisiens. Vous allez créer un atlas visuel complet qui servira de référence pour l\'industrie.',
            requirements: ['Expérience en photographie', 'Sens du storytelling', 'Connaissance de la mode durable'],
            budget: '€3,500 - €5,500',
            location: 'Paris'
        },
        // Other missions...
    ];

    function render() {
        if (currentPage === 'mission-detail' && selectedMission) {
            renderMissionDetail();
        } else {
            renderHome();
        }
    }

    function renderHome() {
        const filteredMissions = missions.filter(mission => {
            const matchesSearch = mission.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                                 mission.client.toLowerCase().includes(searchTerm.toLowerCase());
            const matchesPassion = selectedPassions.includes('all') || 
                                  mission.passions.some(p => selectedPassions.includes(p));
            return matchesSearch && matchesPassion;
        });

        app.innerHTML = `
            <!-- Hero Section -->
            <section class="max-w-7xl mx-auto px-4 py-20">
                <div class="grid md:grid-cols-2 gap-12 items-center">
                    <div>
                        <h2 class="text-5xl md:text-6xl font-bold text-slate-900 mb-6 leading-tight">
                            Votre prochaine mission est une <span class="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">aventure</span>
                        </h2>
                        <p class="text-xl text-slate-600 mb-8">
                            Découvrez un travail significatif qui s'aligne avec vos passions et nourrit votre croissance
                        </p>
                        <button class="px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-lg hover:shadow-lg transition transform hover:scale-105">
                            Trouver une Mission
                        </button>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        ${['🎨', '🚀', '🌱', '💡'].map(emoji => `
                            <div class="aspect-square bg-gradient-to-br from-purple-100 to-pink-100 rounded-2xl flex items-center justify-center text-6xl hover:scale-110 transition">
                                ${emoji}
                            </div>
                        `).join('')}
                    </div>
                </div>
            </section>

            <!-- Search and Filters -->
            <section class="max-w-7xl mx-auto px-4 py-12">
                <div class="bg-white rounded-2xl shadow-lg p-8">
                    <div class="mb-8">
                        <div class="relative">
                            <i data-lucide="search" class="absolute left-4 top-4 text-slate-400"></i>
                            <input
                                type="text"
                                placeholder="Rechercher une mission ou un client..."
                                value="${searchTerm}"
                                class="search-input w-full pl-12 pr-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-purple-500 text-lg"
                            />
                        </div>
                    </div>

                    <div>
                        <h3 class="text-sm font-bold text-slate-600 uppercase tracking-wide mb-4 flex items-center gap-2">
                            <i data-lucide="filter"></i>
                            Filtrer par passion
                        </h3>
                        <div class="flex flex-wrap gap-3">
                            ${passions.map(passion => `
                                <button
                                    data-passion="${passion.id}"
                                    class="passion-btn px-4 py-2 rounded-full font-semibold transition ${
                                        selectedPassions.includes(passion.id)
                                            ? 'bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg'
                                            : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
                                    }"
                                >
                                    ${passion.emoji} ${passion.label}
                                </button>
                            `).join('')}
                        </div>
                    </div>
                </div>

                <p class="text-slate-600 mt-6 text-center">
                    ${filteredMissions.length} mission${filteredMissions.length > 1 ? 's' : ''} trouvée${filteredMissions.length > 1 ? 's' : ''}
                </p>
            </section>

            <!-- Missions Grid -->
            <section class="max-w-7xl mx-auto px-4 pb-20">
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    ${filteredMissions.map(mission => `
                        <mission-card 
                            data-id="${mission.id}"
                            data-title="${mission.title}"
                            data-client="${mission.client}"
                            data-avatar="${mission.avatar}"
                            data-impact="${mission.impact}"
                            data-emoji="${mission.emoji}"
                            data-description="${mission.description}"
                            data-duration="${mission.duration}"
                            data-tags="${JSON.stringify(mission.tags)}"
                            ${favorites.includes(mission.id) ? 'favorite' : ''}
                        ></mission-card>
                    `).join('')}
                </div>

                ${filteredMissions.length === 0 ? `
                    <div class="text-center py-20">
                        <div class="text-6xl mb-4">🔍</div>
                        <h3 class="text-2xl font-bold text-slate-900 mb-2">Aucune mission trouvée</h3>
                        <p class="text-slate-600">Essayez d'ajuster vos filtres ou votre recherche</p>
                    </div>
                ` : ''}
            </section>
        `;

        // Initialize Lucide icons
        if (window.lucide) {
            lucide.createIcons();
        }

        // Add event listeners
        document.querySelectorAll('.search-input').forEach(input => {
            input.addEventListener('input', (e) => {
                searchTerm = e.target.value;
                render();
            });
        });

        document.querySelectorAll('.passion-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const passionId = e.currentTarget.dataset.passion;
                togglePassion(passionId);
            });
        });
    }

    function renderMissionDetail() {
        // Mission detail rendering logic...
    }

    function togglePassion(passionId) {
        if (passionId === 'all') {
            selectedPassions = ['all'];
        } else {
            const updated = selectedPassions.filter(p => p !== 'all');
            if (updated.includes(passionId)) {
                selectedPassions = updated.filter(p => p !== passionId);
            } else {
                selectedPassions = [...updated, passionId];
            }
        }
        render();
    }

    // Initial render
    render();
});