<%- include('../partials/head', { title, bodyClass: 'app-page onboarding-body' }) %>
<%- include('../partials/app-header') %>
<noscript>
  <style>
    [data-onboarding-main] { display: none !important; }
    [data-onboarding-submit][hidden] { display: inline-flex !important; }
  </style>
</noscript>

<main class="app-main onboarding-page" data-onboarding>
  <section class="onboarding-topline">
    <div class="onboarding-brand">
      <img src="/assets/topstats-icon.png" alt="" aria-hidden="true">
      <div>
        <strong>TopStats</strong>
        <span>Briefing intelligent</span>
      </div>
    </div>
    <span class="onboarding-live-pill">IA encadrée</span>
  </section>

  <section class="onboarding-hero">
    <p class="eyebrow">Bienvenue dans TopStats</p>
    <h1>Comprendre le match avant de jouer.</h1>
    <p>Trois repères simples pour lire un conseil, comprendre le risque et décider avec recul.</p>
  </section>

  <section class="onboarding-carousel" aria-label="Présentation de TopStats">
    <div class="onboarding-track" data-onboarding-track>
      <article class="onboarding-slide is-active" data-onboarding-slide>
        <div class="onboarding-analysis-preview">
          <div class="onboarding-match-strip">
            <span>France</span>
            <strong>VS</strong>
            <span>Sénégal</span>
          </div>
          <div class="onboarding-signal-card">
            <small>Lecture TopStats</small>
            <strong>Moins de 3.5 buts</strong>
            <div class="onboarding-signal-meta">
              <span>82% confiance</span>
              <em>Risque modéré</em>
            </div>
            <i></i>
          </div>
          <div class="onboarding-scan-lines" aria-hidden="true">
            <span style="--w: 88%"></span>
            <span style="--w: 72%"></span>
            <span style="--w: 64%"></span>
          </div>
        </div>
        <div class="onboarding-slide-copy">
          <span>01</span>
          <h2>TopStats ne promet jamais un résultat.</h2>
          <p>TopStats classe les matchs avec les données disponibles : forme récente, marché des cotes, contexte d’équipe, probabilité et niveau de risque.</p>
        </div>
      </article>

      <article class="onboarding-slide" data-onboarding-slide>
        <div class="onboarding-plan-preview">
          <div>
            <small>Gratis</small>
            <strong>Jusqu’à 1.45</strong>
            <p>Aperçu des conseils les plus prudents.</p>
          </div>
          <div class="pro">
            <small>PRO</small>
            <strong>Cotes premium</strong>
            <p>Signaux plus hauts, chat et analyses complètes.</p>
          </div>
        </div>
        <div class="onboarding-slide-copy">
          <span>02</span>
          <h2>Le gratuit sert d’aperçu. PRO débloque le reste.</h2>
          <p>Quand une cote dépasse la limite gratuite, TopStats masque le conseil et affiche clairement ce qui est réservé aux membres PRO.</p>
        </div>
      </article>

      <article class="onboarding-slide" data-onboarding-slide>
        <div class="onboarding-tip-card">
          <small>Angleterre vs Ghana</small>
          <strong>Plus de 1.5 buts</strong>
          <div>
            <span>1.42</span>
            <em>78% confiance</em>
          </div>
          <p>Le bon réflexe : match, prono, confiance, risque, puis raison principale.</p>
        </div>
        <div class="onboarding-slide-copy">
          <span>03</span>
          <h2>Lire un conseil prend quelques secondes.</h2>
          <p>Chaque carte doit répondre à trois questions : quel match, quel prono, pourquoi ce choix ressort maintenant.</p>
        </div>
      </article>
    </div>
  </section>

  <div class="onboarding-controls" aria-label="Navigation onboarding">
    <button class="onboarding-arrow" type="button" data-onboarding-prev aria-label="Étape précédente">‹</button>
    <div class="onboarding-dots" aria-hidden="true">
      <button type="button" class="is-active" data-onboarding-dot></button>
      <button type="button" data-onboarding-dot></button>
      <button type="button" data-onboarding-dot></button>
    </div>
    <button class="onboarding-arrow" type="button" data-onboarding-next aria-label="Étape suivante">›</button>
  </div>

  <p class="onboarding-swipe-hint">Glissez la carte ou continuez étape par étape.</p>

  <form method="post" action="/onboarding" class="onboarding-actions">
    <button class="btn btn-primary" type="button" data-onboarding-main>Continuar</button>
    <button class="btn btn-primary" type="submit" data-onboarding-submit hidden>Voir mon briefing du jour</button>
    <a class="btn btn-soft" href="/matchs">Passer</a>
  </form>
</main>

<%- include('../partials/bottom-nav') %>
<%- include('../partials/footer') %>
