@extends('layouts.vitrine')

@section('titre', "API publique")

@section('contenu')
    <div class="mx-auto max-w-4xl px-5 py-14 lg:px-10">
        <h1 class="text-4xl font-extrabold tracking-tight">API publique Syllabus</h1>
        <p class="mt-4 text-lg font-semibold">Catalogue en lecture seule : labs, banque de quiz officielle, cours. Aucune donnée d'élève.</p>

        <section class="mt-8 rounded-2xl border border-[#e3e5e8] bg-white p-6">
            <h2 class="text-2xl font-extrabold">Authentification</h2>
            <p class="mt-2 font-semibold">Crée un jeton depuis un compte prof : <a href="{{ route('login') }}" class="font-bold underline underline-offset-4">connexion</a> puis « Mon profil → Jetons de l'API ». Envoie-le dans l'en-tête :</p>
            <pre class="mt-3 overflow-x-auto rounded-xl bg-[#13233A] p-4 font-mono text-sm text-white">Authorization: Bearer &lt;ton-jeton&gt;</pre>
            <p class="mt-3 font-semibold">60 requêtes par minute et par jeton (en-têtes <code class="font-mono">X-RateLimit-*</code> sur chaque réponse).</p>
        </section>

        <section class="mt-8 rounded-2xl border border-[#e3e5e8] bg-white p-6">
            <h2 class="text-2xl font-extrabold">Points d'accès</h2>
            <div class="mt-4 grid gap-4">
                <div>
                    <p class="font-mono font-bold">GET /api/v1/labs</p>
                    <p class="font-semibold">Liste des labs du catalogue.</p>
                </div>
                <div>
                    <p class="font-mono font-bold">GET /api/v1/labs/{identifiant}</p>
                    <p class="font-semibold">Détail d'un lab (ex. <code class="font-mono">08-deux-lan-routeur</code>).</p>
                </div>
                <div>
                    <p class="font-mono font-bold">GET /api/v1/quiz</p>
                    <p class="font-semibold">Liste des quiz de la banque officielle (titre, thème, nombre de questions — jamais les questions ni les réponses).</p>
                </div>
                <div>
                    <p class="font-mono font-bold">GET /api/v1/quiz/{id}</p>
                    <p class="font-semibold">Détail d'un quiz (métadonnées).</p>
                </div>
                <div>
                    <p class="font-mono font-bold">GET /api/v1/cours</p>
                    <p class="font-semibold">Liste des cours du catalogue.</p>
                </div>
                <div>
                    <p class="font-mono font-bold">GET /api/v1/cours/{identifiant}</p>
                    <p class="font-semibold">Détail d'un cours, avec son contenu complet.</p>
                </div>
            </div>
        </section>

        <section class="mt-8 rounded-2xl border border-[#e3e5e8] bg-white p-6">
            <h2 class="text-2xl font-extrabold">Exemple</h2>
            <pre class="mt-3 overflow-x-auto rounded-xl bg-[#13233A] p-4 font-mono text-sm text-white">curl -H "Authorization: Bearer &lt;ton-jeton&gt;" \
  https://syllabuslab.fr/api/v1/labs/08-deux-lan-routeur</pre>
            <pre class="mt-3 overflow-x-auto rounded-xl border border-[#e3e5e8] bg-[#f8f9fa] p-4 font-mono text-sm">{
  "data": {
    "identifiant": "08-deux-lan-routeur",
    "titre": "Deux LAN et un routeur",
    "niveau": "decouverte",
    "duree_min": 45,
    "competences": ["adressage-ipv4", "routage-statique"]
  }
}</pre>
        </section>

        <p class="mt-8 font-semibold"><a href="{{ asset('openapi/v1.yaml') }}" class="font-bold underline underline-offset-4">Spécification OpenAPI (v1.yaml) →</a></p>
    </div>
@endsection