@extends('layouts.public-layout')

@section("title", "Départements - Mission Mondiale de la Parole de Vie")
@section('meta_description', 'Découvrez les différents départements de la MMPV qui font vivre notre mission : accueil, multimédia, louange, hommes, femmes, école du dimanche, évangélisation et intercession.')
@section('meta_keywords', 'départements église, ministères MMPV, accueil, louange, évangélisation, école du dimanche, intercession')
@section('og_title', 'Départements - Mission Mondiale de la Parole de Vie')
@section('og_description', 'Les départements de notre église qui font vivre notre mission auprès de tous.')

@push('styles')
<style>
    .department-nav {
        position: relative;
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        padding: 1rem;
        border-radius: 1rem;
        background: linear-gradient(135deg, rgba(201, 169, 97, 0.05) 0%, rgba(201, 169, 97, 0.02) 100%);
    }

    .department-nav::-webkit-scrollbar {
        height: 4px;
    }

    .department-nav::-webkit-scrollbar-track {
        background: rgba(201, 169, 97, 0.1);
        border-radius: 10px;
    }

    .department-nav::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #c9a961 0%, #e6c96e 100%);
        border-radius: 10px;
    }

    .nav-button {
        flex-shrink: 0;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        background: white;
        border: 2px solid transparent;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 600;
        font-size: 0.95rem;
        color: #2d3748;
    }

    .nav-button:hover {
        background: #f4f6f8;
        border-color: #c9a961;
        color: #c9a961;
    }

    .nav-button.active {
        background: linear-gradient(135deg, #c9a961 0%, #e6c96e 100%);
        color: white;
        border-color: #c9a961;
        box-shadow: 0 4px 12px rgba(201, 169, 97, 0.3);
    }

    .department-content {
        display: none;
        animation: fadeInUp 0.5s ease-out;
    }

    .department-content.active {
        display: block;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .icon-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(201, 169, 97, 0.1) 0%, rgba(201, 169, 97, 0.05) 100%);
        margin-bottom: 1.5rem;
        transition: all 0.3s ease;
    }

    .department-content.active .icon-wrapper {
        background: linear-gradient(135deg, #c9a961 0%, #e6c96e 100%);
        box-shadow: 0 8px 24px rgba(201, 169, 97, 0.3);
    }

    .icon-wrapper i {
        font-size: 2rem;
        color: #c9a961;
    }

    .department-content.active .icon-wrapper i {
        color: white;
    }

    .department-description {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #718096;
        margin: 1.5rem 0;
    }

    .mission-list {
        list-style: none;
        padding: 0;
        margin: 2rem 0;
    }

    .mission-list li {
        padding: 0.75rem 0;
        padding-left: 2rem;
        position: relative;
        color: #2d3748;
        line-height: 1.6;
    }

    .mission-list li:before {
        content: "✓";
        position: absolute;
        left: 0;
        color: #c9a961;
        font-weight: bold;
        font-size: 1.2rem;
    }
</style>
@endpush

@section('content')
<div class="bg-neutral-cream">
    <!-- Hero Section -->
    <section class="py-16 sm:py-20 lg:py-28 bg-gradient-to-r from-primary-navy/95 to-primary-navy/90">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <span class="inline-block text-primary-gold text-xs font-semibold uppercase tracking-widest mb-4">Notre Organisation</span>
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white font-serif mb-6">Les Départements</h1>
                <div class="vn-divider mx-auto mb-6"></div>
                <p class="text-lg text-gray-200 max-w-2xl mx-auto">
                    Chaque membre est appelé à servir selon ses dons. Découvrez les départements qui font vivre notre mission au quotidien.
                </p>
            </div>
        </div>
    </section>

    <!-- Departments Navigation & Content -->
    <section class="py-16 sm:py-20 lg:py-28">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Navigation Buttons -->
            <div class="department-nav">
                <button class="nav-button active" onclick="showDepartment('accueil')">
                    <i class="fas fa-handshake mr-2"></i> Accueil
                </button>
                <button class="nav-button" onclick="showDepartment('multimedia')">
                    <i class="fas fa-film mr-2"></i> Multimédia
                </button>
                <button class="nav-button" onclick="showDepartment('louange')">
                    <i class="fas fa-music mr-2"></i> Louange
                </button>
                <button class="nav-button" onclick="showDepartment('hommes')">
                    <i class="fas fa-users mr-2"></i> Hommes
                </button>
                <button class="nav-button" onclick="showDepartment('femmes')">
                    <i class="fas fa-users mr-2"></i> Femmes
                </button>
                <button class="nav-button" onclick="showDepartment('dimanche')">
                    <i class="fas fa-book mr-2"></i> École Dimanche
                </button>
                <button class="nav-button" onclick="showDepartment('evangelisation')">
                    <i class="fas fa-globe mr-2"></i> Évangélisation
                </button>
                <button class="nav-button" onclick="showDepartment('intercession')">
                    <i class="fas fa-hands-praying mr-2"></i> Intercession
                </button>
            </div>

            <!-- Department Contents -->
            <div class="mt-12">

                <!-- Département d'Accueil -->
                <div id="accueil" class="department-content active">
                    <div class="grid md:grid-cols-2 gap-8 items-start">
                        <div>
                            <div class="icon-wrapper">
                                <i class="fas fa-handshake"></i>
                            </div>
                            <h2 class="text-3xl font-bold text-primary-navy font-serif mb-4">Département d'Accueil</h2>
                            <p class="department-description">
                                Le département d'accueil joue un rôle essentiel dans la création d'une atmosphère chaleureuse et accueillante pour les membres de l'église ainsi que pour les visiteurs. Il est responsable de diverses tâches pratiques et humaines qui favorisent une expérience positive pour ceux qui participent aux activités de l'église.
                            </p>
                            <h3 class="text-xl font-bold text-primary-navy mb-4 mt-6 font-serif">Nos missions</h3>
                            <ul class="mission-list">
                                <li>Accueil des visiteurs</li>
                                <li>Orientation des personnes vers leurs places ou autres emplacements spécifiques</li>
                                <li>Assistance aux personnes âgées ou handicapées</li>
                                <li>Sécurité des personnes présentes</li>
                                <li>Collecte des offrandes</li>
                            </ul>
                        </div>
                        <div class="bg-gradient-to-br from-indigo-50 to-indigo-100/50 rounded-2xl p-8 h-full flex items-center justify-center">
                            <i class="fas fa-handshake text-indigo-200 text-8xl opacity-30"></i>
                        </div>
                    </div>
                </div>

                <!-- Département du Multimédia -->
                <div id="multimedia" class="department-content">
                    <div class="grid md:grid-cols-2 gap-8 items-start">
                        <div>
                            <div class="icon-wrapper">
                                <i class="fas fa-film"></i>
                            </div>
                            <h2 class="text-3xl font-bold text-primary-navy font-serif mb-4">Département du Multimédia</h2>
                            <p class="department-description">
                                Le département du multimédia joue un rôle clé dans la diffusion de l'Évangile et la communication des activités de l'église, tout en utilisant des technologies modernes pour toucher un large public. Ce département englobe plusieurs aspects techniques et créatifs, allant de la gestion des équipements audiovisuels à la production de contenu numérique.
                            </p>
                            <h3 class="text-xl font-bold text-primary-navy mb-4 mt-6 font-serif">Nos missions</h3>
                            <ul class="mission-list">
                                <li>Gestion des équipements audiovisuels</li>
                                <li>Production de contenu numérique</li>
                                <li>Diffusion des cultes en direct (streaming) ou en différé</li>
                                <li>Enregistrements audio et vidéo</li>
                                <li>Gestion des réseaux et médias sociaux</li>
                            </ul>
                        </div>
                        <div class="bg-gradient-to-br from-amber-50 to-amber-100/50 rounded-2xl p-8 h-full flex items-center justify-center">
                            <i class="fas fa-film text-amber-200 text-8xl opacity-30"></i>
                        </div>
                    </div>
                </div>

                <!-- Département de Louange et d'Adoration -->
                <div id="louange" class="department-content">
                    <div class="grid md:grid-cols-2 gap-8 items-start">
                        <div>
                            <div class="icon-wrapper">
                                <i class="fas fa-music"></i>
                            </div>
                            <h2 class="text-3xl font-bold text-primary-navy font-serif mb-4">Département de Louange et d'Adoration</h2>
                            <p class="department-description">
                                Le département de louange et d'adoration joue un rôle central dans la vie spirituelle de la communauté. Il est responsable de guider l'assemblée dans un temps de connexion profonde avec Dieu à travers la musique, les chants et l'adoration. Il va au-delà de la simple performance musicale pour servir à la fois à l'édification, à l'encouragement, et à l'engagement profond dans la présence de Dieu.
                            </p>
                            <h3 class="text-xl font-bold text-primary-navy mb-4 mt-6 font-serif">Nos missions</h3>
                            <ul class="mission-list">
                                <li>Conduite de l'assemblée dans la louange et l'adoration</li>
                                <li>Création d'une atmosphère de prière et de révérence</li>
                                <li>Animation des événements spirituels (veillées, concerts, rassemblements)</li>
                            </ul>
                        </div>
                        <div class="bg-gradient-to-br from-rose-50 to-rose-100/50 rounded-2xl p-8 h-full flex items-center justify-center">
                            <i class="fas fa-music text-rose-200 text-8xl opacity-30"></i>
                        </div>
                    </div>
                </div>

                <!-- Département des Hommes -->
                <div id="hommes" class="department-content">
                    <div class="grid md:grid-cols-2 gap-8 items-start">
                        <div>
                            <div class="icon-wrapper">
                                <i class="fas fa-users"></i>
                            </div>
                            <h2 class="text-3xl font-bold text-primary-navy font-serif mb-4">Département des Hommes</h2>
                            <p class="department-description">
                                Le département des hommes vise à aider les hommes à devenir de véritables disciples de Christ, à vivre leur foi de manière authentique, à être des modèles et leaders dans leurs familles, dans la société et l'église.
                            </p>
                            <h3 class="text-xl font-bold text-primary-navy mb-4 mt-6 font-serif">Nos missions</h3>
                            <ul class="mission-list">
                                <li>Enseignement et formation biblique</li>
                                <li>Partage biblique</li>
                                <li>Prière et intercession</li>
                                <li>Croissance spirituelle</li>
                                <li>Événements sociaux (loisirs, sorties, repas)</li>
                                <li>Renforcement des liens fraternels</li>
                            </ul>
                        </div>
                        <div class="bg-gradient-to-br from-blue-50 to-blue-100/50 rounded-2xl p-8 h-full flex items-center justify-center">
                            <i class="fas fa-users text-blue-200 text-8xl opacity-30"></i>
                        </div>
                    </div>
                </div>

                <!-- Département des Femmes -->
                <div id="femmes" class="department-content">
                    <div class="grid md:grid-cols-2 gap-8 items-start">
                        <div>
                            <div class="icon-wrapper">
                                <i class="fas fa-users"></i>
                            </div>
                            <h2 class="text-3xl font-bold text-primary-navy font-serif mb-4">Département des Femmes</h2>
                            <p class="department-description">
                                Le département des femmes est conçu pour répondre aux besoins spirituels et pratiques des femmes, en leur offrant des opportunités de transformation et croissance spirituelle, d'épanouissement sur le plan personnel, familial, professionnel et d'engagement dans la mission de l'église.
                            </p>
                            <h3 class="text-xl font-bold text-primary-navy mb-4 mt-6 font-serif">Nos missions</h3>
                            <ul class="mission-list">
                                <li>Enseignement et formation biblique</li>
                                <li>Partage biblique</li>
                                <li>Prière et intercession</li>
                                <li>Croissance spirituelle</li>
                                <li>Visites aux bien-aimés</li>
                                <li>Sorties et événements sociaux</li>
                                <li>Collecte de fonds pour soutien</li>
                                <li>Renforcement des liens fraternels</li>
                            </ul>
                        </div>
                        <div class="bg-gradient-to-br from-pink-50 to-pink-100/50 rounded-2xl p-8 h-full flex items-center justify-center">
                            <i class="fas fa-users text-pink-200 text-8xl opacity-30"></i>
                        </div>
                    </div>
                </div>

                <!-- Département de l'École du Dimanche -->
                <div id="dimanche" class="department-content">
                    <div class="grid md:grid-cols-2 gap-8 items-start">
                        <div>
                            <div class="icon-wrapper">
                                <i class="fas fa-book"></i>
                            </div>
                            <h2 class="text-3xl font-bold text-primary-navy font-serif mb-4">Département de l'École du Dimanche</h2>
                            <p class="department-description">
                                Le département de l'école du dimanche est fondamental pour l'éducation spirituelle des enfants. Il a pour objectif principal d'enseigner les principes bibliques de manière adaptée à chaque tranche d'âge, en utilisant des méthodes pédagogiques qui favorisent l'apprentissage et la croissance spirituelle des participants.
                            </p>
                            <p class="department-description">
                                En offrant une éducation biblique adaptée à l'âge, en créant un environnement sûr et stimulant, et en formant des enseignants engagés, ce département permet aux enfants non seulement de connaître les histoires bibliques, mais aussi de vivre leur foi de manière authentique et pratique.
                            </p>
                            <h3 class="text-xl font-bold text-primary-navy mb-4 mt-6 font-serif">Nos missions</h3>
                            <ul class="mission-list">
                                <li>Enseignement biblique adapté par âge</li>
                                <li>Création d'un environnement sûr et stimulant</li>
                                <li>Formation des enseignants</li>
                                <li>Transmission de la foi chrétienne</li>
                                <li>Collaboration avec les familles</li>
                            </ul>
                        </div>
                        <div class="bg-gradient-to-br from-green-50 to-green-100/50 rounded-2xl p-8 h-full flex items-center justify-center">
                            <i class="fas fa-book text-green-200 text-8xl opacity-30"></i>
                        </div>
                    </div>
                </div>

                <!-- Département de l'Évangélisation -->
                <div id="evangelisation" class="department-content">
                    <div class="grid md:grid-cols-2 gap-8 items-start">
                        <div>
                            <div class="icon-wrapper">
                                <i class="fas fa-globe"></i>
                            </div>
                            <h2 class="text-3xl font-bold text-primary-navy font-serif mb-4">Département de l'Évangélisation</h2>
                            <p class="department-description">
                                Le département de l'évangélisation a pour mission essentielle de répandre l'Évangile et de partager la bonne nouvelle de Jésus-Christ avec les personnes qui ne le connaissent pas encore. Ce département est crucial pour la croissance spirituelle et la mission de l'église.
                            </p>
                            <h3 class="text-xl font-bold text-primary-navy mb-4 mt-6 font-serif">Nos missions</h3>
                            <ul class="mission-list">
                                <li>Partage de la bonne nouvelle de Jésus-Christ</li>
                                <li>Formation et mobilisation des membres</li>
                                <li>Organisation de sorties et campagnes d'évangélisation</li>
                                <li>Concerts d'évangélisation</li>
                                <li>Intégration et suivi des nouveaux disciples</li>
                                <li>Utilisation des réseaux sociaux</li>
                                <li>Partenariats avec d'autres églises</li>
                            </ul>
                        </div>
                        <div class="bg-gradient-to-br from-emerald-50 to-emerald-100/50 rounded-2xl p-8 h-full flex items-center justify-center">
                            <i class="fas fa-globe text-emerald-200 text-8xl opacity-30"></i>
                        </div>
                    </div>
                </div>

                <!-- Département d'Intercession -->
                <div id="intercession" class="department-content">
                    <div class="grid md:grid-cols-2 gap-8 items-start">
                        <div>
                            <div class="icon-wrapper">
                                <i class="fas fa-hands-praying"></i>
                            </div>
                            <h2 class="text-3xl font-bold text-primary-navy font-serif mb-4">Département d'Intercession</h2>
                            <p class="department-description">
                                Le département d'intercession joue un rôle essentiel en soutenant par la prière constante, toutes les autres activités de l'église ainsi que ses membres, ses responsables, son visionnaire. En effet, l'intercession est l'acte par lequel les disciples de Christ se tiennent devant Dieu pour prier en faveur d'autres personnes, des situations ou des causes, afin d'apporter un changement spirituel ou physique.
                            </p>
                            <h3 class="text-xl font-bold text-primary-navy mb-4 mt-6 font-serif">Nos missions</h3>
                            <ul class="mission-list">
                                <li>Prière constante pour les activités de l'église</li>
                                <li>Intercession pour les membres et responsables</li>
                                <li>Prière pour les causes et situations</li>
                                <li>Transformation des vies par la prière</li>
                                <li>Prière pour le Corps de Christ</li>
                                <li>Intercession pour le monde</li>
                                <li>Avancement du royaume de Dieu</li>
                            </ul>
                        </div>
                        <div class="bg-gradient-to-br from-purple-50 to-purple-100/50 rounded-2xl p-8 h-full flex items-center justify-center">
                            <i class="fas fa-hands-praying text-purple-200 text-8xl opacity-30"></i>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

</div>
@endsection

@push('scripts')
<script>
    function showDepartment(departmentId) {
        var contents = document.querySelectorAll('.department-content');
        contents.forEach(function(c) { c.classList.remove('active'); });

        var buttons = document.querySelectorAll('.nav-button');
        buttons.forEach(function(b) { b.classList.remove('active'); });

        var selected = document.getElementById(departmentId);
        if (selected) selected.classList.add('active');

        // Trouver le bouton correspondant
        buttons.forEach(function(b) {
            if (b.getAttribute('onclick') && b.getAttribute('onclick').indexOf(departmentId) !== -1) {
                b.classList.add('active');
            }
        });

        if (window.innerWidth < 768) {
            var active = document.querySelector('.department-content.active');
            if (active) active.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }

    // Ouvrir le département depuis le hash URL (ex: #accueil)
    document.addEventListener('DOMContentLoaded', function() {
        var hash = window.location.hash.replace('#', '');
        if (hash && document.getElementById(hash)) {
            showDepartment(hash);
            setTimeout(function() {
                document.querySelector('.department-nav').scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 100);
        }
    });
</script>
@endpush