@extends('layouts.app')

@section('content')
<header class="sticky top-0 z-50 bg-white/80 backdrop-blur border-b border-slate-200">
  <div class="container-xl flex h-16 items-center justify-between">
    <div class="flex items-center gap-3">
      <img src="/logo_badgeuse.png" class="h-8 w-auto" alt="La Badgeuse">
    </div>

    <nav class="hidden md:flex items-center gap-8">
      <a href="#solution" class="nav-link">Solution</a>
      <a href="#fonctionnalites" class="nav-link">Fonctionnalités</a>
      <a href="#tarifs" class="nav-link">Tarifs</a>
    </nav>

    <a href="#cta" class="btn-outline text-sm">Essai gratuit</a>
  </div>
</header>

{{-- HERO --}}
<section id="solution" class="relative overflow-hidden">
  <div class="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(130,36,227,0.18),transparent_60%)]"></div>

  <div class="container-xl pt-24 pb-16 text-center relative">
    <div class="flex justify-center gap-3 mb-6">
      <span class="chip">TPE / PME</span>
      <span class="chip">Multi-sites</span>
    </div>

    <h1 class="h1">
      La <span class="text-[color:var(--badgeuse)]">Badgeuse</span>
    </h1>

    <p class="lead">
      Pointeuse horaire NFC moderne pour suivre les présences, gérer les variables
      de paie et piloter vos équipes en toute simplicité.
    </p>

    <div class="mt-10 flex flex-wrap justify-center gap-4">
      <a href="#cta" class="btn-accent">Demander une démo</a>
      <a href="#tarifs" class="btn-outline">Voir les tarifs</a>
    </div>

    <div class="mt-10 flex flex-wrap justify-center gap-3">
      <span class="chip">Installation 15 min</span>
      <span class="chip">Export paie</span>
      <span class="chip">Support pro</span>
      <span class="chip">Conformité & traçabilité</span>
    </div>
  </div>
</section>

{{-- SECTION 2 : 3 CARTES (style PayPal) --}}
<section id="fonctionnalites" class="py-20">
  <div class="container-xl">
    <div class="max-w-3xl">
      <h2 class="text-4xl sm:text-5xl font-black tracking-tight">
        Le pointage devient simple, lisible, exploitable.
      </h2>
      <p class="mt-4 text-slate-600 text-lg">
        Une expérience fluide côté salarié, et des données propres côté RH/paie.
      </p>
    </div>

    <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="card p-8">
        <div class="chip w-fit">Pointage NFC</div>
        <h3 class="mt-4 text-xl font-black">Badge en 1 seconde</h3>
        <p class="mt-2 text-slate-600">
          Terminal mural Android + badges/cartes NFC. Rapide, fiable, prêt à l’emploi.
        </p>
      </div>

      <div class="card p-8">
        <div class="chip w-fit">RH</div>
        <h3 class="mt-4 text-xl font-black">Présences & absences</h3>
        <p class="mt-2 text-slate-600">
          Retards, heures supp, pauses, absences : tout est structuré et traçable.
        </p>
      </div>

      <div class="card p-8">
        <div class="chip w-fit">Paie</div>
        <h3 class="mt-4 text-xl font-black">Variables prêtes à exporter</h3>
        <p class="mt-2 text-slate-600">
          Exports CSV/Excel/PDF, et intégrations possibles selon votre organisation.
        </p>
      </div>
    </div>
  </div>
</section>

{{-- SECTION 3 : “COLLAGE” IMAGE + LISTE (PayPal vibe) --}}
<section class="py-20 bg-slate-50">
  <div class="container-xl grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
    <div>
      <h2 class="text-4xl sm:text-5xl font-black tracking-tight">
        Un terminal mural qui fait “pro”.
      </h2>
      <p class="mt-4 text-slate-600 text-lg">
        Fixez un smartphone Android ou un petit terminal dédié. Badge, c’est tout.
      </p>

      <ul class="mt-8 space-y-4 text-slate-800 font-semibold">
        <li>✅ NFC frontal • 4G/Wi-Fi</li>
        <li>✅ Historique & traçabilité</li>
        <li>✅ Multi-sites (réseaux)</li>
        <li>✅ Exports paie (variables)</li>
      </ul>

      <div class="mt-8 flex gap-4">
        <a href="#cta" class="btn-primary">Voir une démo</a>
        <a href="#tarifs" class="btn-outline">Tarifs</a>
      </div>
    </div>

    <div class="relative">
      <div class="card overflow-hidden">
        <img src="/images/badgeuse-terminal.jpg" alt="Terminal La Badgeuse" class="w-full h-[520px] object-cover">
      </div>
      <div class="absolute -bottom-6 -left-6 card px-6 py-4 w-[280px]">
        <div class="text-sm font-black">Badges du jour</div>
        <div class="mt-3 flex items-center justify-between text-sm text-slate-600">
          <span>Marine</span><span>08:01</span>
        </div>
        <div class="mt-2 flex items-center justify-between text-sm text-slate-600">
          <span>Yannis</span><span>08:07</span>
        </div>
        <div class="mt-2 flex items-center justify-between text-sm text-slate-600">
          <span>Chloé</span><span>08:12</span>
        </div>
      </div>
    </div>
  </div>
</section>

{{-- SECTION 4 : FAQ (accordéon simple sans JS) --}}
<section class="py-20">
  <div class="container-xl">
    <h2 class="text-4xl sm:text-5xl font-black tracking-tight">Questions fréquentes</h2>

    <div class="mt-10 grid grid-cols-1 lg:grid-cols-2 gap-6">
      <details class="card p-7">
        <summary class="cursor-pointer font-black text-lg">Est-ce conforme ?</summary>
        <p class="mt-3 text-slate-600">
          Oui : historique, traçabilité, exports et règles paramétrables selon vos besoins.
        </p>
      </details>

      <details class="card p-7">
        <summary class="cursor-pointer font-black text-lg">Ça marche en multi-sites ?</summary>
        <p class="mt-3 text-slate-600">
          Oui : plusieurs établissements, droits par site, reporting consolidé.
        </p>
      </details>

      <details class="card p-7">
        <summary class="cursor-pointer font-black text-lg">Quel matériel faut-il ?</summary>
        <p class="mt-3 text-slate-600">
          Un smartphone/terminal Android + badges/cartes NFC. On te conseille selon ton contexte.
        </p>
      </details>

      <details class="card p-7">
        <summary class="cursor-pointer font-black text-lg">Exports paie / Sage ?</summary>
        <p class="mt-3 text-slate-600">
          Exports CSV/Excel/PDF. Intégration possible selon la version et le process paie.
        </p>
      </details>
    </div>
  </div>
</section>

{{-- SECTION 5 : TARIFS --}}
<section id="tarifs" class="py-20 bg-slate-50">
  <div class="container-xl">
    <div class="max-w-3xl">
      <h2 class="text-4xl sm:text-5xl font-black tracking-tight">Tarifs simples</h2>
      <p class="mt-4 text-slate-600 text-lg">
        Ajustez selon le nombre de sites et de collaborateurs. (On peut affiner ensemble.)
      </p>
    </div>

    <div class="mt-10 grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="card p-8">
        <div class="chip w-fit">Essentiel</div>
        <div class="mt-5 text-4xl font-black">49€<span class="text-base font-semibold text-slate-500">/mois</span></div>
        <ul class="mt-6 space-y-3 text-slate-700 font-semibold">
          <li>• Pointage NFC</li>
          <li>• Présences & retards</li>
          <li>• Exports CSV</li>
        </ul>
        <a href="#cta" class="mt-8 btn-outline w-full">Choisir</a>
      </div>

      <div class="card p-8 border-[color:var(--badgeuse)]">
        <div class="chip w-fit">Pro</div>
        <div class="mt-5 text-4xl font-black">89€<span class="text-base font-semibold text-slate-500">/mois</span></div>
        <ul class="mt-6 space-y-3 text-slate-700 font-semibold">
          <li>• Multi-sites</li>
          <li>• Variables de paie</li>
          <li>• Exports CSV/Excel</li>
        </ul>
        <a href="#cta" class="mt-8 btn-accent w-full">Le plus choisi</a>
      </div>

      <div class="card p-8">
        <div class="chip w-fit">Réseaux</div>
        <div class="mt-5 text-4xl font-black">Sur devis</div>
        <ul class="mt-6 space-y-3 text-slate-700 font-semibold">
          <li>• Plusieurs établissements</li>
          <li>• Reporting consolidé</li>
          <li>• Intégrations paie</li>
        </ul>
        <a href="#cta" class="mt-8 btn-outline w-full">Parler à un conseiller</a>
      </div>
    </div>
  </div>
</section>

{{-- SECTION 6 : CTA FINAL --}}
<section id="cta" class="py-20">
  <div class="container-xl">
    <div class="card p-10 text-center">
      <h2 class="text-4xl sm:text-5xl font-black tracking-tight">
        On vous fait une démo en 15 minutes.
      </h2>
      <p class="mt-4 text-slate-600 text-lg">
        On configure un test, on vous montre les exports paie, et on valide la faisabilité matériel.
      </p>
      <div class="mt-8 flex flex-wrap justify-center gap-4">
        <a href="#" class="btn-accent">Demander une démo</a>
        <a href="#" class="btn-outline">Être rappelé</a>
      </div>
    </div>
  </div>
</section>

<footer class="py-10 border-t border-slate-200">
  <div class="container-xl flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-slate-600">
    <div class="flex items-center gap-3">
      <img src="/logo_badgeuse.png" class="h-7 w-auto" alt="">
      <span>© {{ date('Y') }} La Badgeuse</span>
    </div>
    <div class="flex items-center gap-6">
      <a href="#" class="hover:text-slate-900">Confidentialité</a>
      <a href="#" class="hover:text-slate-900">CGU</a>
      <a href="#" class="hover:text-slate-900">Contact</a>
    </div>
  </div>
</footer>
@endsection