@extends('layouts.public-layout')

@section("title", "Le Visionnaire - Mission Mondiale de la Parole de Vie - Les Rachetés de l'Eternel")

@section('content')
    <!-- Hero Section -->
    <section class="bg-gradient-to-r from-slate-800 via-slate-700 to-slate-800 text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-4">
                    <i class="fas fa-user-tie mr-3 text-amber-400"></i>Le Visionnaire de la Mission
                </h1>
                <p class="text-xl text-slate-200 max-w-2xl mx-auto">
                    Découvrez le fondateur de la Mission Mondiale de la Parole de Vie "Les Rachetés de l'Eternel"
                </p>
            </div>
        </div>
    </section>

    <!-- Visionary Section - Apôtre Timothée MAMBA -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid lg:grid-cols-2 gap-12 items-start">
                <!-- Photo de l'Apôtre -->
                <div>
                    <div class="sticky top-24">
                        <div class="bg-gradient-to-br from-slate-800 to-slate-700 rounded-2xl p-8 shadow-2xl">
                            <div class="w-full rounded-2xl overflow-hidden border-4 border-amber-400 shadow-xl" style="aspect-ratio: 3/4;">
                                <img src="{{ asset('images/visionary/apotre-timothee-mamba.jpg') }}"
                                     alt="Apôtre Timothée MAMBA"
                                     class="w-full h-full object-cover object-top">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contenu de l'Apôtre -->
                <div class="space-y-8">
                    <!-- En-tête -->
                    <div class="text-center lg:text-left">
                        <span class="inline-block bg-amber-100 text-amber-800 px-4 py-2 rounded-full text-sm font-semibold mb-4">
                            <i class="fas fa-star mr-2"></i>Visionnaire & Fondateur
                        </span>
                        <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
                            Apôtre Timothée MAMBA
                        </h2>
                        
                    </div>

                    <!-- Histoire et Vision -->
                    <div class="space-y-5 text-gray-700 leading-relaxed text-lg">
                        <p>
                            C'est le <strong class="text-amber-600">31 décembre 2006</strong> que l'Apôtre Timothée MAMBA a reçu du Seigneur Jésus-Christ la vision de bâtir cette famille et de préparer son église à l'enlèvement au travers du message de la sanctification.
                        </p>
                        <p>
                            Enseignant, formateur, prédicateur, écrivain, chef d'entreprise, il parcourt les nations pour annoncer la bonne nouvelle de l'Évangile de Christ car comme il le dit souvent : <em class="text-amber-600">"Il y a un ciel à gagner et un enfer à éviter."</em>
                        </p>
                        <p>
                            Aumônier dans les hôpitaux et les prisons, il ne se lasse de témoigner de l'amour de Christ à ceux qui n'ont plus d'espoir. Accompagnateur des couples et des personnes en difficultés, il les conseille à la lumière de la Parole de Dieu, pour qu'ils trouvent la paix, la liberté et la joie qui sont en Jésus-Christ.
                        </p>
                        <p>
                            Il est marié à <strong>Adèle MAMBA</strong>, femme dévouée et de foi, qui accompagne son époux dans l'accomplissement de la vision du ministère avec détermination et efficacité au quotidien.
                        </p>
                    </div>

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

    <!-- Spouse Section - L'Épouse de l'Apôtre -->
    <section class="py-16 bg-slate-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid lg:grid-cols-2 gap-12 items-start">
                <!-- Contenu de l'Épouse -->
                <div class="space-y-8 order-2 lg:order-1">
                    <!-- En-tête -->
                    <div class="text-center lg:text-left">
                        
                            
                    </div>

                </div>

                <!-- Photo de l'Épouse -->
                <div class="order-1 lg:order-2">
                    <div class="sticky top-24">
                        <div class="bg-gradient-to-br from-purple-800 to-purple-600 rounded-2xl p-8 shadow-2xl">
                            <div class="w-full rounded-2xl overflow-hidden border-4 border-purple-300 shadow-xl" style="aspect-ratio: 3/4;">
                                <img src="{{ asset('images/visionary/couple-mamba.jpg') }}"
                                     alt="Couple Pastoral - Apôtre Timothée MAMBA et son Épouse"
                                     class="w-full h-full object-cover object-top">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Books CTA Section -->
    <section class="py-16 bg-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="bg-gradient-to-br from-slate-50 to-amber-50 rounded-2xl p-8 md:p-12 border border-slate-200">
                <i class="fas fa-book-open text-amber-600 text-6xl mb-4"></i>
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Ressources Spirituelles</h2>
                <p class="text-xl text-gray-700 mb-8">
                    Découvrez les enseignements et ressources pour approfondir votre foi
                </p>

                <a href="{{ route('public.shop') }}"
                   class="inline-flex items-center justify-center px-10 py-5 bg-gradient-to-r from-amber-600 to-amber-500 hover:from-amber-700 hover:to-amber-600 text-white font-bold text-lg rounded-xl shadow-2xl transition duration-300 transform hover:-translate-y-1">
                    <i class="fas fa-shopping-cart mr-3 text-2xl"></i>
                    Visiter la Boutique
                    <i class="fas fa-arrow-right ml-3"></i>
                </a>

                <p class="mt-6 text-gray-600 text-sm">
                    Livres et ressources pour votre croissance spirituelle
                </p>
            </div>
        </div>
    </section>
@endsection