@extends('layouts.app')

@section('title', 'FENNEC — Le GPS qui paie vos kilomètres')
@section('description', 'FENNEC vous guide comme un GPS et convertit chaque kilomètre certifié en euros, versés par virement.')

@section('content')
  <main id="top">
    <section class="hero shell">
      <div class="hero-copy reveal">
        <div class="eyebrow"><i></i> Le GPS qui paie vos kilomètres</div>
        <h1>Chaque kilomètre<br><em>vous rapporte.</em></h1>
        <p>FENNEC vous guide comme un GPS classique. À l’arrivée, chaque trajet certifié est converti en euros, versés par virement sur votre compte.</p>
        <div class="hero-actions">
          <a class="button gold" href="#download">Télécharger FENNEC <span>→</span></a>
          <a class="text-link" href="#experience">Voir comment ça marche <span>↓</span></a>
        </div>
        <ul class="facts">
          <li><strong>Voiture, utilitaire, camion</strong>Tous véhicules</li>
          <li><strong>Trajets certifiés</strong>Contrôle GPS continu</li>
          <li><strong>Virement en euros</strong>Pas de points</li>
        </ul>
      </div>

      <div class="hero-visual reveal">
        <div class="logo-card">
          <img src="{{ asset('images/fennec-logo.png') }}" alt="Logo de l’application FENNEC">
        </div>
      </div>
    </section>

    <section class="statement shell" id="experience">
      <p class="section-index">Comment ça marche</p>
      <h2>Vous conduisez.<br><span>Nous payons.</span></h2>
      <p class="statement-copy">Lancez un itinéraire comme avec n’importe quel GPS. FENNEC contrôle votre signal tout au long du trajet : seuls les kilomètres réellement parcourus sont certifiés, puis convertis en euros.</p>
    </section>

    <section class="features shell" id="features">
      <article class="feature reveal">
        <div class="shot" aria-hidden="true">
          <div class="shot-screen">
            <svg class="map" viewBox="0 0 214 340" preserveAspectRatio="xMidYMid slice">
              <path class="road" d="M-10 120 C50 140 90 70 230 100"/>
              <path class="road" d="M40 -10 C55 100 15 200 70 300 S150 340 150 360"/>
              <path class="road" d="M-10 230 C70 210 140 260 230 210"/>
              <path class="road" d="M180 -10 C170 110 205 200 170 300"/>
              <path class="route" d="M50 290 C58 235 112 235 112 190 S56 150 92 112 S160 105 164 72"/>
              <circle cx="50" cy="290" r="5" fill="#fff2d2"/><circle cx="164" cy="72" r="6" fill="#f6a51b"/>
            </svg>
            <div class="u-bar"><small>Navigation</small>Centre-ville · 37 min</div>
          </div>
        </div>
        <div><span>VOUS ROULEZ</span><h3>Guidé, comme d’habitude.</h3><p>Destination, itinéraire, alertes : FENNEC s’utilise comme n’importe quel GPS.</p></div>
      </article>

      <article class="feature reveal">
        <div class="shot" aria-hidden="true">
          <div class="shot-screen">
            <div class="u-label">Distance validée</div>
            <div class="u-big">18,4<small>km</small></div>
            <span class="u-badge">Signal GPS certifié</span>
            <div class="u-bar-fill"><i></i></div>
            <div class="u-row" style="margin-top:22px"><span>Départ</span><b>07:42</b></div>
            <div class="u-row"><span>Arrivée</span><b>08:19</b></div>
            <div class="u-example">Exemple</div>
          </div>
        </div>
        <div><span>CERTIFICATION</span><h3>Chaque kilomètre est vérifié.</h3><p>Le signal GPS est contrôlé en continu. Position simulée ou trajet inventé : écartés.</p></div>
      </article>

      <article class="feature reveal">
        <div class="shot" aria-hidden="true">
          <div class="shot-screen">
            <div class="u-label">Solde</div>
            <div class="u-big">X,XX<small>€</small></div>
            <div class="u-row"><span>Trajet · 18,4 km</span><b>+ X,XX €</b></div>
            <div class="u-row"><span>Trajet · 42,0 km</span><b>+ X,XX €</b></div>
            <span class="u-btn">Virer sur mon compte</span>
            <div class="u-example">Exemple</div>
          </div>
        </div>
        <div><span>VIREMENT</span><h3>Vos kilomètres, en euros.</h3><p>Chaque trajet validé s’ajoute à votre solde. Vous le virez sur votre compte quand vous le décidez.</p></div>
      </article>
    </section>

    <section class="download" id="download">
      <div class="shell download-inner reveal">
        <div>
          <p class="section-index">Télécharger</p>
          <h2>Prenez la route.<br><span>Nous payons.</span></h2>
          <p>Téléchargez FENNEC, lancez votre premier trajet et suivez vos gains en euros.</p>
          <div class="stores">
            <a href="#" aria-label="Télécharger dans l’App Store"><b><svg aria-hidden="true"><use href="#i-apple"/></svg></b><span><small>Télécharger dans</small>l’App Store</span></a>
            <a href="#" aria-label="Disponible sur Google Play"><b><svg aria-hidden="true"><use href="#i-google-play"/></svg></b><span><small>DISPONIBLE SUR</small>Google Play</span></a>
          </div>
        </div>
        <div class="phone" aria-label="Aperçu de l’application FENNEC : solde et virement">
          <div class="phone-screen">
            <div class="phone-head"><span class="u-label" style="margin:0">Mon solde</span><img src="{{ asset('images/fennec-logo.png') }}" alt=""></div>
            <div class="u-big">X,XX<small>€</small></div>
            <div class="u-row"><span>Dernier trajet · 18,4 km</span><b>+ X,XX €</b></div>
            <div class="u-row"><span>Trajet · 42,0 km</span><b>+ X,XX €</b></div>
            <div class="u-row"><span>Trajet · 12,7 km</span><b>+ X,XX €</b></div>
            <span class="u-btn">Virer sur mon compte</span>
            <div class="u-example" style="left:24px;bottom:20px">Exemple</div>
          </div>
        </div>
      </div>
    </section>
  </main>
@endsection