@extends('layouts.front')

@section('content')

<!-- Hero -->
<x-hero
    title="Mad Academy — Centre de formation"
    subtitle="Formez-vous à un métier avec une pédagogie pratique, un encadrement rigoureux et des compétences immédiatement applicables en entreprise."
    :ctaPrimary="['text' => 'Découvrir nos programmes', 'url' => route('programmes')]"
    :ctaSecondary="['text' => 'En savoir plus', 'url' => route('a-propos')]"
    image="hero-accueil.jpg"
    height="70vh">

    <x-slot name="badge">
        <div class="inline-flex items-center gap-2 px-3 py-1.5 bg-sky-50 border border-sky-200 rounded-full mb-4">
            <svg class="w-4 h-4 text-red-600" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
            </svg>
            <span class="text-sky-700 text-sm font-semibold">Formation orientée métiers & employabilité</span>
        </div>
    </x-slot>
</x-hero>

<!-- Chiffres Clés - source : CRUD admin /admin/statistics (modèle Statistic) -->
@if($statistics->where('actif', true)->count() > 0)
<section class="py-8 sm:py-10 bg-white border-y border-slate-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
            @foreach($statistics->take(4) as $stat)
            <div class="text-center">
                <div class="text-3xl md:text-4xl font-bold text-red-600 mb-1 tracking-tight">{{ $stat->valeur }}</div>
                <div class="text-sm text-slate-600">{{ $stat->libelle }}</div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- À propos - compact -->
<section class="py-12 sm:py-16 bg-sky-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-2 gap-10 lg:gap-12 items-stretch">
            <!-- Content -->
            <div>
                <span class="inline-block px-3 py-1 bg-sky-50 text-sky-700 text-xs font-semibold rounded-full mb-4 ring-1 ring-sky-100">
                    À propos de nous
                </span>
                <h2 class="text-2xl sm:text-3xl font-bold text-slate-900 mb-4 font-serif tracking-tight leading-tight">
                    Un centre de formation exigeant, tourné vers la pratique
                </h2>
                <p class="text-slate-600 leading-relaxed mb-4">
                    Mad Academy est un centre de formation professionnelle qui prépare des apprenants aux compétences métiers les plus recherchées, avec une approche concrète et structurée.
                </p>
                <p class="text-slate-600 leading-relaxed mb-6">
                    Nos parcours privilégient la pratique, l’encadrement et l’efficacité : ateliers, mises en situation et suivi, pour accélérer l’insertion et la performance en entreprise.
                </p>

                <!-- Points forts - compact -->
                <div class="space-y-3 mb-6">
                    <div class="flex items-center gap-3">
                        <svg class="w-5 h-5 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        <span class="text-slate-700">Parcours orientés métiers (DQP / CQP / AQP)</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg class="w-5 h-5 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        <span class="text-slate-700">Encadrement rigoureux et suivi personnalisé</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg class="w-5 h-5 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        <span class="text-slate-700">Infrastructures et ateliers adaptés à la pratique</span>
                    </div>
                </div>

                <a href="{{ route('a-propos') }}"
                   class="inline-flex items-center px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white text-sm font-semibold tracking-tight rounded-xl transition shadow-sm ring-1 ring-red-500/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300 focus-visible:ring-offset-2">
                    En savoir plus
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                    </svg>
                </a>
            </div>

            <!-- Image -->
            <div class="relative h-full">
                <div class="rounded-2xl p-1 bg-gradient-to-br from-sky-100 via-white to-red-100 shadow-md h-full">
                    <div class="relative h-full min-h-[260px] rounded-2xl overflow-hidden bg-white ring-1 ring-sky-100">
                        <img src="{{ asset('images/mad-academy-campus.jpg') }}"
                             alt="Mad Academy — centre de formation professionnelle"
                             class="w-full h-full object-cover"
                             onerror="this.parentElement.classList.add('flex','items-center','justify-center'); this.outerHTML='<svg class=\'w-16 h-16 text-slate-300\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\'/></svg>'">
                        <div class="absolute inset-0 bg-gradient-to-t from-white/40 via-transparent to-transparent"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Programmes -->
<section class="py-12 sm:py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="text-center mb-8">
            <span class="inline-block px-3 py-1 bg-sky-50 text-sky-700 text-xs font-semibold rounded-full mb-3 ring-1 ring-sky-100">
                Nos formations
            </span>
            <h2 class="text-2xl sm:text-3xl font-bold text-slate-900 mb-3 font-serif tracking-tight leading-tight">
                Des filières professionnelles pour construire votre carrière
            </h2>
            <p class="text-slate-600 max-w-xl mx-auto">
                Choisissez une filière, développez des compétences concrètes, et préparez votre insertion avec une formation orientée résultats.
            </p>
        </div>

        @if($programmes && $programmes->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                @foreach($programmes->take(6) as $programme)
                    <x-programme-card :programme="$programme" />
                @endforeach
            </div>

            <div class="text-center">
                <a href="{{ route('programmes') }}"
                   class="inline-flex items-center px-6 py-3 bg-white hover:bg-sky-50 text-slate-900 hover:text-red-600 font-semibold tracking-tight rounded-xl transition border border-sky-100 shadow-sm ring-1 ring-sky-100/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300 focus-visible:ring-offset-2">
                    Voir toutes nos formations
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                    </svg>
                </a>
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white border border-sky-100 rounded-2xl p-6 shadow-sm hover:shadow-md transition">
                    <div class="w-12 h-12 bg-red-50 border border-red-100 rounded-xl flex items-center justify-center mb-4">
                        <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L7.5 19.25a2.121 2.121 0 11-3-3L6.75 14m1.5 3L14 11.25m0 0l2.25-2.25a2.121 2.121 0 113 3L16.5 14m-2.5-2.75L9.75 17"/>
                        </svg>
                    </div>
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-lg font-semibold text-slate-900 font-serif tracking-tight leading-tight">Informatique</h3>
                        <span class="text-xs font-semibold text-sky-700 bg-sky-50 border border-sky-200 rounded-full px-2.5 py-1">À venir</span>
                    </div>
                    <p class="text-sm text-slate-600">Développement web, maintenance, réseaux et sécurité : les bases solides du numérique appliqué.</p>
                </div>

                <div class="bg-white border border-sky-100 rounded-2xl p-6 shadow-sm hover:shadow-md transition">
                    <div class="w-12 h-12 bg-sky-50 border border-sky-100 rounded-xl flex items-center justify-center mb-4">
                        <svg class="w-6 h-6 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8V6m0 10v2m8-6a8 8 0 11-16 0 8 8 0 0116 0z"/>
                        </svg>
                    </div>
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-lg font-semibold text-slate-900 font-serif tracking-tight leading-tight">Gestion</h3>
                        <span class="text-xs font-semibold text-sky-700 bg-sky-50 border border-sky-200 rounded-full px-2.5 py-1">À venir</span>
                    </div>
                    <p class="text-sm text-slate-600">Comptabilité informatisée, secrétariat, organisation : des compétences clés pour l’entreprise.</p>
                </div>

                <div class="bg-white border border-sky-100 rounded-2xl p-6 shadow-sm hover:shadow-md transition">
                    <div class="w-12 h-12 bg-red-50 border border-red-100 rounded-xl flex items-center justify-center mb-4">
                        <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3m-1 4a9 9 0 11-16 0 9 9 0 0116 0z"/>
                        </svg>
                    </div>
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-lg font-semibold text-slate-900 font-serif tracking-tight leading-tight">Numérique</h3>
                        <span class="text-xs font-semibold text-sky-700 bg-sky-50 border border-sky-200 rounded-full px-2.5 py-1">À venir</span>
                    </div>
                    <p class="text-sm text-slate-600">Design graphique, marketing digital et montage audiovisuel : créez, communiquez, valorisez.</p>
                </div>
            </div>
            <div class="text-center mt-6">
                <a href="{{ route('contact') }}" class="text-red-600 hover:text-red-700 font-semibold text-sm">
                    Contactez-nous pour être orienté
                </a>
            </div>
        @endif
    </div>
</section>

<!-- Valeurs - Grid 4 colonnes équilibré -->
<section class="py-12 sm:py-16 bg-sky-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="text-center mb-8">
            <span class="inline-block px-3 py-1 bg-sky-50 text-sky-700 text-xs font-semibold rounded-full mb-3 ring-1 ring-sky-100">
                Nos valeurs
            </span>
            <h2 class="text-2xl sm:text-3xl font-bold text-slate-900 mb-3 font-serif tracking-tight leading-tight">
                Ce qui fait notre différence
            </h2>
            <p class="text-slate-600 max-w-xl mx-auto">
                Une culture de rigueur, de pratique et d’accompagnement — pour former, professionnaliser et faire réussir.
            </p>
        </div>

        <!-- Grid 4 colonnes -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-6">
            <!-- Excellence -->
            <div class="bg-white rounded-2xl p-6 text-center border border-sky-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition">
                <div class="w-12 h-12 bg-sky-50 border border-sky-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
                    </svg>
                </div>
                <h3 class="font-bold text-slate-900 mb-1 font-serif tracking-tight leading-tight">Excellence</h3>
                <p class="text-slate-600 text-sm">Qualité, rigueur et standards de travail élevés.</p>
            </div>

            <!-- Intégrité -->
            <div class="bg-white rounded-2xl p-6 text-center border border-sky-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition">
                <div class="w-12 h-12 bg-sky-50 border border-sky-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                </div>
                <h3 class="font-bold text-slate-900 mb-1 font-serif tracking-tight leading-tight">Intégrité</h3>
                <p class="text-slate-600 text-sm">Transparence, discipline et respect des engagements.</p>
            </div>

            <!-- Innovation -->
            <div class="bg-white rounded-2xl p-6 text-center border border-sky-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition">
                <div class="w-12 h-12 bg-sky-50 border border-sky-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                    </svg>
                </div>
                <h3 class="font-bold text-slate-900 mb-1 font-serif tracking-tight leading-tight">Innovation</h3>
                <p class="text-slate-600 text-sm">Approches modernes et outils adaptés aux exigences actuelles.</p>
            </div>

            <!-- Accompagnement -->
            <div class="bg-white rounded-2xl p-6 text-center border border-sky-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition">
                <div class="w-12 h-12 bg-sky-50 border border-sky-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                </div>
                <h3 class="font-bold text-slate-900 mb-1 font-serif tracking-tight leading-tight">Accompagnement</h3>
                <p class="text-slate-600 text-sm">Suivi personnalisé et orientation vers l’insertion.</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Final Premium -->
<section class="relative overflow-hidden py-12 sm:py-16 bg-white border-t border-slate-100">
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute -top-24 -right-24 w-72 h-72 bg-sky-200/60 blur-3xl rounded-full"></div>
        <div class="absolute -bottom-24 -left-24 w-72 h-72 bg-red-200/50 blur-3xl rounded-full"></div>
    </div>
    <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        @if($settings && $settings->inscriptions_ouvertes)
            <span class="inline-block px-3 py-1 bg-sky-50 text-sky-700 text-xs font-semibold rounded-full mb-4 border border-sky-200">
                Inscriptions ouvertes
            </span>
            <h2 class="text-2xl sm:text-3xl font-bold text-slate-900 mb-3 font-serif tracking-tight leading-tight">
                Passez à l’action : <span class="text-sky-700">formez-vous à un métier</span>
            </h2>
            <p class="text-slate-600 mb-6 max-w-xl mx-auto">
                Déposez votre candidature dès maintenant. Notre équipe vous accompagne pour choisir la filière la plus adaptée à votre projet.
            </p>
            <div class="flex flex-col sm:flex-row gap-3 justify-center">
                <a href="{{ route('inscription') }}"
                   class="inline-flex items-center justify-center px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-semibold tracking-tight rounded-xl transition shadow-sm hover:shadow-md ring-1 ring-red-500/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300 focus-visible:ring-offset-2">
                    Déposer ma candidature
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                    </svg>
                </a>
                <a href="{{ route('contact') }}"
                   class="inline-flex items-center justify-center px-6 py-3 border border-sky-300 hover:border-sky-400 text-sky-700 font-semibold tracking-tight rounded-xl transition hover:bg-sky-50">
                    Nous contacter
                </a>
            </div>
        @else
            <h2 class="text-2xl sm:text-3xl font-bold text-slate-900 mb-3 font-serif tracking-tight leading-tight">
                Préparez votre prochaine <span class="text-sky-700">session de formation</span>
            </h2>
            <p class="text-slate-600 mb-6 max-w-xl mx-auto">
                Les inscriptions ouvriront bientôt. Contactez-nous pour être informé et bénéficier d’une orientation gratuite.
            </p>
            <a href="{{ route('contact') }}"
               class="inline-flex items-center justify-center px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-semibold tracking-tight rounded-xl transition shadow-sm hover:shadow-md ring-1 ring-red-500/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300 focus-visible:ring-offset-2">
                Nous contacter
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                </svg>
            </a>
        @endif
    </div>
</section>

@endsection