---
const videos = [
  { id: "16uLwRZ4s_k", title: "Épisode 1" },
  { id: "WZkqj2pQV4Y", title: "Épisode 2 : Le traducteur, ce mouton à 5 pattes" },
  { id: "9FOYT4PKPAk", title: "Épisode 3 : La traduction automatique" },
  { id: "-5VgXb0Mx94", title: "Épisode 4 : Recherche traducteur désespérément" },
  { id: "COPv7xBQWEs", title: "Épisode 5 : L'enfer du copier coller" },
  { id: "KfSJs2rAtac", title: "Épisode 6 : Los nuevos bandidos" },
  { id: "usd30qeAH28", title: "Épisode 7 : Le meilleur expert SEO au monde" },
  { id: "02AIt76ybKM", title: "Épisode 8 : On se fait un brainstorming ?" },
  { id: "G3_QAMxI9XA", title: "Épisode 9 : Les terribles variantes" },
  { id: "wZPnDYECFn4", title: "Épisode 10 : Le juste prix" },
  { id: "8Hl9tABsy2Q", title: "Épisode 11 : Ça peut faire mal" },
  { id: "kADYbTd_S_w", title: "Épisode 12 : L'arme fatale" },
  { id: "d6HlXs4tgCA", title: "Épisode 13 : Le juste prix (2)" },
  { id: "gUTihlkAnQM", title: "Épisode 14 : We have a problem" },
  { id: "GEmvfTYZDZ8", title: "Épisode final : La fête" },
  { id: "UUOzZVTt_Go", title: "Bonus : Les acteurs VOST" },
];


const first = videos[0];
const middle = videos.slice(1, -1);
const last = videos[videos.length - 1];
---

<div class="mt-6 space-y-4">
  <div>
    <iframe
      src={`https://www.youtube-nocookie.com/embed/${first.id}`}
      title={first.title}
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
      loading="lazy"
      class="w-full aspect-video rounded-xl"
    />
    <p class="mt-1 text-xs text-gray-500 dark:text-neutral-500">{first.title}</p>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    {middle.map((video) => (
      <div>
        <iframe
          src={`https://www.youtube-nocookie.com/embed/${video.id}`}
          title={video.title}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
          loading="lazy"
          class="w-full aspect-video rounded-xl"
        />
        <p class="mt-1 text-xs text-gray-500 dark:text-neutral-500">{video.title}</p>
      </div>
    ))}
  </div>

  <div>
    <iframe
      src={`https://www.youtube-nocookie.com/embed/${last.id}`}
      title={last.title}
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
      loading="lazy"
      class="w-full aspect-video rounded-xl"
    />
    <p class="mt-1 text-xs text-gray-500 dark:text-neutral-500">{last.title}</p>
  </div>
</div>