---
import Base from '../../layouts/Base.astro';
import { DEPARTEMENTS } from '../../lib/departements';

export const prerender = false;
const sample = DEPARTEMENTS.find((d) => d.code === '13')!;
const baseUrl = 'https://info-canicule.nocleus.com';
const snippet = `<iframe
  src="${baseUrl}/embed/dept/${sample.code}"
  width="380" height="260"
  style="border:0; max-width:100%"
  loading="lazy"
  title="Vigilance ${sample.name} — Info Canicule"
></iframe>`;
---

<Base
  title="Widget intégrable — Info Canicule"
  description="Intégrez la Vigilance Météo France de n'importe quel département sur votre site en une ligne d'iframe."
>
  <section class="bg-gradient-to-b from-canicule-50 to-white">
    <div class="container-tight py-10">
      <h1 class="text-3xl font-bold sm:text-4xl">Widget intégrable</h1>
      <p class="mt-2 max-w-2xl text-slate-600">
        Intégrez la Vigilance Météo France de n'importe quel département sur votre site en une
        ligne d'iframe. Gratuit, libre de réutilisation (Licence Ouverte 2.0).
      </p>
    </div>
  </section>

  <section class="container-tight py-8 space-y-8">
    <div>
      <h2 class="text-xl font-semibold">Aperçu live ({sample.name})</h2>
      <div class="mt-3 inline-block rounded border border-slate-200 bg-slate-100 p-4">
        <iframe
          src={`/embed/dept/${sample.code}`}
          width="380"
          height="260"
          style="border:0; max-width:100%; background:transparent"
          loading="lazy"
          title={`Vigilance ${sample.name}`}
        ></iframe>
      </div>
    </div>

    <div>
      <h2 class="text-xl font-semibold">Code à copier-coller</h2>
      <pre class="mt-3 overflow-x-auto rounded bg-slate-900 p-4 text-xs text-slate-100"><code>{snippet}</code></pre>
      <p class="mt-2 text-sm text-slate-600">
        Remplace <code class="rounded bg-slate-100 px-1">{sample.code}</code> par le code de ton
        département (01-95, 2A, 2B, 971-976). La liste complète :
        <a href="/conseils">page conseils</a>.
      </p>
    </div>

    <div>
      <h2 class="text-xl font-semibold">Personnalisation</h2>
      <ul class="mt-2 list-inside list-disc space-y-1 text-sm text-slate-700">
        <li>
          <strong>Dimensions</strong> : ajustables via <code>width</code> et <code>height</code>.
          Le widget s'adapte aux petits écrans grâce à <code>max-width:100%</code>.
        </li>
        <li>
          <strong>Fond transparent</strong> : pose-le sur n'importe quelle couleur de page.
        </li>
        <li>
          <strong>Rafraîchissement</strong> : la page se met à jour automatiquement à chaque
          rechargement (cache 15 min côté serveur).
        </li>
      </ul>
    </div>

    <div>
      <h2 class="text-xl font-semibold">API JSON brute (alternative)</h2>
      <p class="mt-2 text-sm text-slate-700">
        Si tu préfères afficher la Vigilance avec ton propre design, l'endpoint
        <code class="rounded bg-slate-100 px-1">/api/vigilance/dept/[code]</code>
        renvoie un JSON CORS *, prêt à parser :
      </p>
      <pre class="mt-2 overflow-x-auto rounded bg-slate-900 p-4 text-xs text-slate-100"><code>fetch('{baseUrl}/api/vigilance/dept/{sample.code}')
  .then(r =&gt; r.json())
  .then(data =&gt; console.log(data.today)); // [&#123; phenomenon, color, ... &#125;]</code></pre>
    </div>

    <div>
      <h2 class="text-xl font-semibold">Conditions de réutilisation</h2>
      <ul class="mt-2 list-inside list-disc space-y-1 text-sm text-slate-700">
        <li>Données sous <a href="https://www.etalab.gouv.fr/licence-ouverte-open-licence/" rel="noopener">Licence Ouverte 2.0</a> (mention obligatoire de la source : Météo France).</li>
        <li>Ce service ne remplace pas la source officielle. En cas d'urgence, suivre <a href="https://vigilance.meteofrance.fr/" rel="noopener">vigilance.meteofrance.fr</a> et appeler le 112.</li>
        <li>Pas de garantie de disponibilité. Pour un usage critique, contractualiser directement avec Météo France.</li>
      </ul>
    </div>
  </section>
</Base>