@extends('layouts.app')

@section('title', 'Formations à distance — Concept X Formation')
@section('meta_description', 'Toutes nos formations désormais accessibles à distance partout en France. Cohortes encadrées, certifications RS et RNCP, financement CPF et OPCO.')

@section('content')
<div class="breadcrumb">
    <div class="container">
        <a href="{{ route('accueil') }}">Accueil</a><span class="sep">/</span><span class="current">Formations à distance</span>
    </div>
</div>

<section class="formation-hero">
    <div class="container">
        <div class="formation-hero-inner">
            <div>
                <div class="formation-badges">
                    <span class="f-badge">Nouveau</span>
                    <span class="f-badge">France entière</span>
                    <span class="f-badge">Cohortes encadrées</span>
                </div>
                <h1>Notre savoir-faire,<br>désormais <span style="color:var(--or-caraibe);font-style:italic;font-weight:500;">à distance</span>.</h1>
                <p class="f-sub">La rigueur d'un centre de formation établi en Guadeloupe depuis plus de 10 ans, accessible où que vous soyez. Cohortes encadrées, formateurs experts, certifications RS et RNCP.</p>
                <div class="entreprise-cta-row">
                    <a href="{{ route('catalogue', ['format' => 'distanciel']) }}" class="btn-or">Voir les formations distanciel &rarr;</a>
                    <a href="{{ route('contact') }}" class="btn-outline-white">Poser une question</a>
                </div>
            </div>
            <div class="hero-side-card">
                <div class="hero-side-label">Prochaines sessions</div>
                @forelse($formations->take(3) as $formation)
                    <a href="{{ route('formation.show', $formation) }}" class="hero-side-item">
                        <strong>{{ $formation->titre_court }}</strong>
                        <span>{{ $formation->duree_libelle }} · {{ $formation->financements->first()?->libelle ?? 'Financement possible' }}</span>
                    </a>
                @empty
                    <p>Les prochaines sessions seront publiées prochainement.</p>
                @endforelse
            </div>
        </div>
    </div>
</section>

<section class="block">
    <div class="container">
        <div class="block-eyebrow">Comment ça marche</div>
        <h2 class="block-title">Une pédagogie pensée<br>pour la distance.</h2>
        <div class="process-grid process-spaced">
            <div class="step-card"><div class="step-num">01</div><h4>Inscription accompagnée</h4><p>Nous montons votre dossier CPF, OPCO ou France Travail et clarifions votre reste à charge.</p></div>
            <div class="step-card"><div class="step-num">02</div><h4>Plateforme dédiée</h4><p>Accès 24/7 à votre espace : vidéos, exercices, supports et suivi de progression.</p></div>
            <div class="step-card"><div class="step-num">03</div><h4>Live encadré</h4><p>Sessions en visio avec votre formateur, corrections et échanges avec votre cohorte.</p></div>
            <div class="step-card"><div class="step-num">04</div><h4>Certification</h4><p>Préparation et passage de l'examen final, avec certification RS ou RNCP selon le parcours.</p></div>
        </div>
    </div>
</section>

<section class="block alt">
    <div class="container">
        <div class="block-eyebrow">Catalogue distanciel</div>
        <h2 class="block-title">Les formations disponibles<br>à distance.</h2>
        <div class="catalog-grid section-grid-top">
            @foreach($formations as $f)
                @php
                    $imgClass = match($f->univers?->slug) {
                        'creatif' => 'creative',
                        'bureautique' => 'bureau',
                        default => '',
                    };
                @endphp
                <a href="{{ route('formation.show', $f) }}" class="cat-card">
                    <div class="cat-card-img {{ $imgClass }}"><span class="cat-card-badge">{{ $f->financements->first()?->libelle ?? 'Certifié' }}</span><span class="cat-card-icon">{{ mb_strtoupper(mb_substr($f->titre_court, 0, 2)) }}</span></div>
                    <div class="cat-card-body">
                        <div class="cat-card-cat">{{ $f->univers?->libelle }}</div>
                        <h3>{{ $f->titre }}</h3>
                        <p class="cat-card-desc">{{ $f->accroche }}</p>
                        <div class="cat-card-price"><span class="cat-card-amount">{{ number_format($f->prix_ttc_de, 0, ',', ' ') }} €</span><span class="cat-card-fin">✓ Finançable</span></div>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>

<section class="block dark">
    <div class="container">
        <div class="block-eyebrow">FAQ Distanciel</div>
        <h2 class="block-title">Les réponses<br>à vos questions.</h2>
        <div class="faq-grid">
            <div class="faq-card"><h4>Comment fonctionne le CPF ?</h4><p>Vous vous inscrivez via Mon Compte Formation. Si votre solde est insuffisant, nous vous aidons à identifier les compléments possibles.</p></div>
            <div class="faq-card"><h4>Quel matériel faut-il ?</h4><p>Un ordinateur PC ou Mac, une connexion internet stable et un casque micro suffisent pour suivre les sessions dans de bonnes conditions.</p></div>
            <div class="faq-card"><h4>Combien d'heures par semaine ?</h4><p>Les formations courtes demandent en général 5 à 10h par semaine. Les parcours longs sont cadrés avec un planning dédié.</p></div>
            <div class="faq-card"><h4>Quel diplôme à la fin ?</h4><p>Selon la formation : certification RS pour les formats courts ou titre professionnel RNCP pour les parcours longs.</p></div>
        </div>
    </div>
</section>
@endsection