@extends('layouts.app')

@section('title', 'Concept X Formation — Métiers créatifs et numériques en Guadeloupe et à distance')
@section('meta_description', 'Centre de formation certifié Qualiopi et CFA en Guadeloupe depuis plus de 10 ans. Désormais accessible partout en France à distance.')

@section('content')

{{-- =====================================================
     HERO
     $formationsHero : Collection<Formation> (3 items)
===================================================== --}}
<section class="hero">
  <div class="container">
    <div class="hero-inner">
      <div>
        <div class="hero-tag">Nouveau · Distanciel France entière</div>
        <h1 class="hero-title">
          L'école des <em>métiers</em><br>
          <span class="accent">créatifs</span> et numériques.
        </h1>
        <p class="hero-sub">
          Centre de formation certifié Qualiopi et CFA en Guadeloupe depuis plus de 10 ans.
          Désormais accessible partout en France à distance, avec la même exigence pédagogique.
        </p>
        <div class="hero-ctas">
          <a href="{{ route('catalogue') }}" class="btn-primary">Découvrir les formations →</a>
          <a href="{{ route('entreprises') }}" class="btn-secondary">Je suis une entreprise</a>
        </div>
      </div>

      <div class="hero-visual" aria-hidden="true">
        @php
          $h1 = $formationsHero->get(0);
          $h2 = $formationsHero->get(1);
          $h3 = $formationsHero->get(2);
        @endphp

        <div class="hero-card hero-card-1">
          <div class="hero-card-label">
            {{ $h1?->univers?->libelle ?? 'Bureautique' }} ·
            {{ $h1?->fiche_cpf ? 'CPF' : 'Certifié' }}
          </div>
          <h4>{{ $h1?->titre_court ?? 'Excel — RS6563' }}</h4>
          <div class="hero-card-meta">
            <span>⏱ {{ $h1?->duree_libelle ?? '30h' }}</span>
            <span>💻 {{ ucfirst($h1?->format ?? 'distanciel') }}</span>
          </div>
        </div>

        <div class="hero-card hero-card-3">
          <div class="hero-card-label">B2B · Sur-mesure</div>
          <h4>{{ $h2?->titre_court ?? 'IA générative pour entreprises' }}</h4>
          <div class="hero-card-meta">
            <span>⏱ {{ $h2?->duree_libelle ?? '1 jour' }}</span>
            <span>👥 Intra</span>
          </div>
        </div>

        <div class="hero-card hero-card-2">
          <div class="hero-card-label">Titre Pro · RNCP</div>
          <h4>{{ $h3?->titre_court ?? 'Community Manager' }}</h4>
          <div class="hero-card-meta">
            <span>⏱ {{ $h3?->duree_libelle ?? '6 mois' }}</span>
            <span>🎓 Alternance</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


{{-- =====================================================
     BANDE STATS
     $stats : array ['annees', 'satisfaction', 'stagiaires']
===================================================== --}}
<section class="trust-bar" aria-label="Chiffres clés">
  <div class="container">
    <div class="trust-inner">
      <div class="trust-item">
        <div class="trust-number">{{ $stats['annees'] }}+</div>
        <div class="trust-label">Années d'expertise</div>
      </div>
      <div class="trust-item">
        <div class="trust-number">{{ $stats['satisfaction'] }}%</div>
        <div class="trust-label">Taux de satisfaction</div>
      </div>
      <div class="trust-item">
        <div class="trust-number">{{ number_format($stats['stagiaires'], 0, ',', ' ') }}+</div>
        <div class="trust-label">Stagiaires formés</div>
      </div>
      <div class="trust-item">
        <div class="trust-number">100%</div>
        <div class="trust-label">Formations finançables</div>
      </div>
    </div>
  </div>
</section>


{{-- =====================================================
     UNIVERS MÉTIER
     $univers : Collection<Univers> avec relation formations
===================================================== --}}
<section class="block" aria-labelledby="univers-titre">
  <div class="container">
    <div class="block-eyebrow">Nos univers</div>
    <h2 class="block-title" id="univers-titre">Trois mondes,<br>une même exigence.</h2>
    <p class="block-intro">
      Explorez nos formations regroupées par univers métier.
      Chaque parcours est certifiant, finançable, et conçu par des professionnels du terrain.
    </p>

    <div class="universe-grid">
      @foreach($univers as $u)
      <div class="universe-card {{ $u->couleur }}">
        <div class="universe-num">
          {{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }} / {{ $u->libelle }}
        </div>
        <h3>{{ $u->libelle }}</h3>
        <p>{{ $u->description ?? '' }}</p>
        <ul class="universe-list" aria-label="Formations de cet univers">
          @foreach($u->topFormations as $f)
          <li>{{ $f->titre }}</li>
          @endforeach
        </ul>
        <a href="{{ route('catalogue', ['univers' => $u->slug]) }}" class="universe-link">
          Explorer cet univers →
        </a>
      </div>
      @endforeach
    </div>
  </div>
</section>


{{-- =====================================================
     SECTION DISTANCIEL — contenu éditorial fixe
===================================================== --}}
<section class="distanciel-section" aria-labelledby="distanciel-titre">
  <div class="container">
    <div class="distanciel-inner">
      <div>
        <div class="block-eyebrow">Nouveau · {{ date('Y') }}</div>
        <h2 class="block-title" id="distanciel-titre">
          Notre savoir-faire,<br>désormais à distance.
        </h2>
        <p style="font-size:17px;opacity:.85;line-height:1.6;">
          La même qualité pédagogique que nos formations en présentiel en Guadeloupe,
          désormais accessible partout en France. Cohortes encadrées, suivi individuel,
          certifications reconnues.
        </p>
        <a href="{{ route('distanciel') }}" class="btn-or" style="margin-top:32px;">
          Découvrir le distanciel →
        </a>
      </div>
      <div class="distanciel-features">
        <div class="feature-item">
          <div class="feature-icon" aria-hidden="true">🎯</div>
          <h4>Cohortes encadrées</h4>
          <p>Petits groupes avec un formateur dédié et un mentorat individualisé.</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon" aria-hidden="true">📺</div>
          <h4>Live + asynchrone</h4>
          <p>Sessions en visio + plateforme accessible 24/7 pour avancer à votre rythme.</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon" aria-hidden="true">🏆</div>
          <h4>Certifications RS / RNCP</h4>
          <p>Toutes nos formations distancielles débouchent sur une certification reconnue.</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon" aria-hidden="true">💰</div>
          <h4>100% finançable</h4>
          <p>CPF, OPCO, Pôle Emploi, alternance — nous montons votre dossier.</p>
        </div>
      </div>
    </div>
  </div>
</section>


{{-- =====================================================
     FORMATIONS PHARES
     $formationsPhares : Collection<Formation> (4 items)
     Triées par mis_en_avant puis nb_stagiaires_formes
===================================================== --}}
<section class="block alt" aria-labelledby="formations-titre">
  <div class="container">
    <div class="block-eyebrow">Nos formations phares</div>
    <h2 class="block-title" id="formations-titre">
      Les parcours plébiscités<br>par nos stagiaires.
    </h2>

    <div class="formations-grid">
      @foreach($formationsPhares as $f)
      @php
        $imgClass = match($f->univers?->slug ?? '') {
            'creatif'     => 'creative',
            'numerique'   => 'creative',
            'bureautique' => 'bureautique',
            default       => 'ia',
        };
        $mots = explode(' ', $f->titre);
        $mono = mb_strtoupper(
            mb_substr($mots[0], 0, 1) . mb_substr($mots[1] ?? '', 0, 1)
        );
        $badge = $f->fiche_cpf   ? 'CPF · Distanciel'
               : ($f->code_rncp ? 'Titre Pro · RNCP' : 'Certifié');
        $prix = $f->prix_ttc_de > 0
              ? number_format($f->prix_ttc_de, 0, ',', ' ') . ' €'
              : 'Nous contacter';
      @endphp

      <a href="{{ route('formation.show', $f->slug) }}" class="formation-card">
        <div class="formation-image {{ $imgClass }}" aria-hidden="true">
          <span class="formation-badge">{{ $badge }}</span>
          <span class="formation-image-icon">{{ $mono }}</span>
        </div>
        <div class="formation-content-card">
          <div class="formation-cat">{{ $f->univers?->libelle ?? '' }}</div>
          <h3>{{ $f->titre }}</h3>
          <p>{{ Str::limit($f->accroche ?? $f->description ?? '', 90) }}</p>
          <div class="formation-meta">
            <span>⏱ {{ $f->duree_libelle ?? $f->duree_heures . 'h' }}</span>
            <span>📍 {{ ucfirst($f->format) }}</span>
            @if($f->code_rncp || $f->code_rs)
            <span>🎓 Certifié</span>
            @endif
          </div>
          <div class="formation-price">
            <span class="formation-price-amount">{{ $prix }}</span>
            @if($f->fiche_cpf)
              <span class="formation-price-finance">✓ Éligible CPF</span>
            @elseif($f->prix_ttc_sal)
              <span class="formation-price-finance">✓ Pris en charge OPCO</span>
            @endif
          </div>
        </div>
      </a>
      @endforeach
    </div>

    <div style="text-align:center;margin-top:48px;">
      <a href="{{ route('catalogue') }}" class="btn-primary">Voir toutes les formations →</a>
    </div>
  </div>
</section>


{{-- =====================================================
     TÉMOIGNAGES
     $temoignages : Collection<Temoignage> (3 items)
     mis_en_avant=true en premier
===================================================== --}}
<section class="block alt" aria-labelledby="temoignages-titre">
  <div class="container">
    <div class="block-eyebrow">Témoignages</div>
    <h2 class="block-title" id="temoignages-titre">Ils nous ont fait<br>confiance.</h2>

    <div class="testimonial-grid">
      @foreach($temoignages as $t)
      <div class="testimonial {{ $loop->first ? 'featured' : '' }}">
        <div class="testimonial-quote" aria-hidden="true">"</div>
        <p>{{ $t->contenu }}</p>
        <div class="testimonial-author">
          <div class="testimonial-avatar" aria-hidden="true">
            {{-- Initiales --}}
            @php
              $parts = explode(' ', $t->nom_prenom);
              echo mb_strtoupper(mb_substr($parts[0], 0, 1) . mb_substr($parts[1] ?? '', 0, 1));
            @endphp
          </div>
          <div>
            <div class="testimonial-name">{{ $t->nom_prenom }}</div>
            <div class="testimonial-role">{{ $t->titre }}</div>
          </div>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>


{{-- =====================================================
     PARTENAIRES
     $partenaires : Collection<Partenaire>
===================================================== --}}
<section class="block" aria-label="Partenaires et certifications">
  <div class="container">
    <div class="partners-title">Ils nous font confiance & nous certifient</div>
    <div class="partners-grid">
      @foreach($partenaires as $p)
      <div class="partner-logo">
        @if($p->logo)
          <img src="{{ asset('storage/' . $p->logo) }}" alt="{{ $p->nom }}" width="120" height="48" loading="lazy">
        @else
          {{ $p->nom }}
        @endif
      </div>
      @endforeach
    </div>
  </div>
</section>

@endsection

@push('scripts')
<script>
document.querySelectorAll('.reveal').forEach(el => {
  new IntersectionObserver((entries, obs) => {
    entries.forEach(e => { if (e.isIntersecting) { el.classList.add('visible'); obs.unobserve(el); } });
  }, { threshold: 0.1 }).observe(el);
});
</script>
@endpush