@extends('layouts.app')

@section('title', 'CFA Concept X — Alternance métiers numériques')
@section('meta_description', 'CFA agréé en Guadeloupe. Titres professionnels en alternance : développement web, community management, graphisme, numérique et bureautique.')

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

<section class="cfa-hero">
    <div class="container">
        <div class="cfa-hero-inner">
            <div>
                <div class="page-hero-eyebrow">CFA agréé</div>
                <h1>L'alternance <em>made in Guadeloupe</em>.</h1>
                <p class="lead">Des parcours certifiants pour apprendre un métier, intégrer une entreprise et construire une expérience professionnelle solide.</p>
                <div class="entreprise-cta-row">
                    <a href="{{ route('contact') }}" class="btn-primary">Candidater &rarr;</a>
                    <a href="{{ route('entreprises') }}" class="btn-secondary">Recruter un alternant</a>
                </div>
            </div>
            <div class="cfa-stats-card">
                <div class="cfa-stat-big">100%</div>
                <div class="cfa-stat-desc">Formation prise en charge pour l'apprenti dans le cadre de l'alternance.</div>
                <ul class="cfa-stats-list">
                    <li><span>Statut</span><span>Salarié en formation</span></li>
                    <li><span>Rythme</span><span>Centre + entreprise</span></li>
                    <li><span>Objectif</span><span>Titre certifiant</span></li>
                </ul>
            </div>
        </div>
    </div>
</section>

<section class="block">
    <div class="container">
        <div class="block-eyebrow">Parcours en alternance</div>
        <h2 class="block-title">Des formations pour entrer<br>dans les métiers numériques.</h2>
        <div class="catalog-grid section-grid-top">
            @forelse($formations as $f)
                <a href="{{ route('formation.show', $f) }}" class="cat-card">
                    <div class="cat-card-img"><span class="cat-card-badge">Alternance</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->niveau ?? $f->univers?->libelle }}</div>
                        <h3>{{ $f->titre }}</h3>
                        <p class="cat-card-desc">{{ $f->accroche }}</p>
                        <div class="cat-card-meta"><span>{{ $f->duree_libelle }}</span><span>{{ ucfirst($f->format) }}</span></div>
                    </div>
                </a>
            @empty
                <p>Aucun parcours alternance publié pour le moment.</p>
            @endforelse
        </div>
    </div>
</section>

<section class="block alt">
    <div class="container">
        <div class="block-eyebrow">Côté apprenti</div>
        <h2 class="block-title">Un parcours clair<br>en 4 étapes.</h2>
        <div class="process-grid process-spaced">
            <div class="step-card"><div class="step-num">01</div><h4>Candidature</h4><p>Nous vérifions votre projet, votre niveau et les prérequis de la formation visée.</p></div>
            <div class="step-card"><div class="step-num">02</div><h4>Recherche d'entreprise</h4><p>Nous vous accompagnons dans la préparation du CV, des entretiens et des contacts.</p></div>
            <div class="step-card"><div class="step-num">03</div><h4>Contrat</h4><p>L'entreprise signe le contrat d'apprentissage ou de professionnalisation.</p></div>
            <div class="step-card"><div class="step-num">04</div><h4>Formation</h4><p>Vous alternez entre mise en pratique en entreprise et apprentissage au centre.</p></div>
        </div>
    </div>
</section>

<section class="block dark">
    <div class="container">
        <div class="block-eyebrow">Entreprises</div>
        <h2 class="block-title">Recruter un alternant,<br>c'est former votre futur talent.</h2>
        <div class="sectors-grid section-grid-top">
            <div class="dark-panel"><h3>Aide employeur</h3><p>Des aides peuvent accompagner l'embauche d'un apprenti selon les dispositifs en vigueur.</p></div>
            <div class="dark-panel"><h3>Coût formation</h3><p>La formation est prise en charge par l'OPCO selon les règles applicables au contrat.</p></div>
            <div class="dark-panel"><h3>Accompagnement</h3><p>Nous aidons à cadrer le profil, le planning et les démarches administratives.</p></div>
            <div class="dark-panel"><h3>Compétences</h3><p>Web, communication, IA, bureautique : des profils adaptés aux besoins réels.</p></div>
        </div>
    </div>
</section>
@endsection