info-canicule/src/pages/soutenir.astro

---
import Base from '../layouts/Base.astro';

export const prerender = false;

const goalLabel = "Location d'un nom de domaine dédié";
const goalTarget = 10;
const goalRaised = 0;
const goalCurrency = '€';
const goalPercent = Math.min(100, Math.round((goalRaised / goalTarget) * 100));

const usages = [
  { title: "Hébergement", text: "VPS mutualisé chez OVH : ~30 € / mois pour faire tourner le site, le cache Valkey et le pipeline de données." },
  { title: "Nom de domaine", text: "Renouvellement annuel du domaine dédié (objectif en cours)." },
  { title: "Surprise café", text: "De quoi tenir les soirées de maintenance et les rotations d'API key 🥲." },
];

const otherWays = [
  { title: "Signaler un bug ou une typo", text: "Par mail à florian@nocleus.com. Toute remontée d'erreur dans un conseil ou une donnée incohérente est précieuse." },
  { title: "Partager le site", text: "Surtout autour des personnes fragiles (proches âgés, isolés), pour qui les conseils canicule peuvent faire une vraie différence." },
  { title: "Diffuser un kit", text: "Imprimer un kit phénomène et l'afficher dans un lieu collectif (mairie, médiathèque, hall d'immeuble)." },
];
---

<Base
  title="Soutenir le projet — Info Canicule"
  description="Info Canicule est un service gratuit, sans publicité, à but non lucratif. Si le site vous est utile, vous pouvez soutenir son hébergement via Ko-fi."
>
  <section class="container-tight" style="padding-block: clamp(28px, 5vw, 56px) 32px;">
    <div class="flex flex-col gap-3" style="margin-bottom: 28px; max-width: 720px;">
      <div class="kicker">Soutenir</div>
      <h1>Si le site vous est utile, <span style="color: var(--brand-deep);">un café suffit</span>.</h1>
      <p style="font-size: clamp(1rem, 0.9rem + 0.4vw, 1.18rem); color: var(--ink-2); line-height: 1.55;">
        Info Canicule est gratuit, sans publicité, sans traceur commercial. Si vous le trouvez utile,
        vous pouvez contribuer aux frais d'infrastructure (~30&nbsp;€/mois).
      </p>
    </div>

    {/* Objectif de don */}
    <div class="ic-card" style="padding: 22px; margin-bottom: 24px; border-color: var(--brand); background: var(--brand-tint);">
      <div class="flex items-baseline justify-between gap-3" style="flex-wrap: wrap;">
        <div>
          <div class="kicker" style="color: var(--brand-deep);">Objectif de don en cours</div>
          <p style="margin-top: 6px; font-weight: 600; color: var(--brand-ink); font-size: 1.05rem;">{goalLabel}</p>
        </div>
        <p style="flex-shrink: 0; font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--ink-2);">
          <span style="font-weight: 700; color: var(--brand-ink); font-family: var(--font-display); font-size: 1.15rem;">{goalRaised} {goalCurrency}</span>
          <span style="color: var(--ink-mute);"> / {goalTarget} {goalCurrency}</span>
        </p>
      </div>
      <div
        style="margin-top: 14px; height: 10px; width: 100%; overflow: hidden; border-radius: 999px; background: rgba(180, 90, 58, 0.15);"
        role="progressbar"
        aria-valuenow={goalPercent}
        aria-valuemin="0"
        aria-valuemax="100"
        aria-label={`${goalPercent}% de l'objectif atteint`}
      >
        <div style={`height: 100%; width: ${goalPercent}%; background: var(--brand); transition: width .3s;`}></div>
      </div>
      <p style="margin-top: 10px; font-size: 0.85rem; color: var(--brand-ink);">
        {goalPercent}% atteint — une fois l'objectif rempli, le nom de domaine dédié sera réservé pour un an.
      </p>
    </div>

    {/* CTA principal */}
    <div class="ic-card flex flex-wrap items-center justify-between gap-4" style="padding: 28px; margin-bottom: 32px;">
      <div style="max-width: 540px;">
        <h2 style="margin-bottom: 8px;">Don libre via Ko-fi</h2>
        <p style="color: var(--ink-soft);">
          Sans inscription, par carte bancaire ou PayPal. Anonyme par défaut et entièrement optionnel.
        </p>
      </div>
      <a
        href="https://ko-fi.com/daelwizhit"
        rel="noopener"
        class="ic-btn ic-btn-brand ic-btn-lg"
        style="text-decoration: none;"
      >
        ☕ Soutenir sur Ko-fi
      </a>
    </div>

    {/* Ce que ça finance */}
    <section style="margin-bottom: 48px;">
      <h2 style="margin-bottom: 16px;">Ce que les dons financent</h2>
      <div class="grid gap-3" style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));">
        {usages.map((u) => (
          <div class="ic-card-soft">
            <h3>{u.title}</h3>
            <p style="margin-top: 8px; line-height: 1.5; color: var(--ink-soft);">{u.text}</p>
          </div>
        ))}
      </div>
      <p style="margin-top: 16px; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5;">
        <strong>Ce site n'a aucune vocation commerciale.</strong> Aucun chiffre d'affaires, aucun salaire versé.
        Les dons couvrent les frais techniques ou, en cas d'excédent, financent d'autres petits projets d'utilité publique du même développeur.
      </p>
    </section>

    {/* Autres manières d'aider */}
    <section style="margin-bottom: 32px;">
      <h2 style="margin-bottom: 16px;">Autres manières d'aider</h2>
      <div class="grid gap-3" style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));">
        {otherWays.map((w) => (
          <div class="ic-card flex items-start gap-3" style="padding: 18px;">
            <span style="color: var(--v-vert); flex-shrink: 0; font-weight: 700; font-size: 1.1rem;" aria-hidden="true">✓</span>
            <div>
              <strong>{w.title}</strong>
              <p style="margin-top: 6px; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft);">{w.text}</p>
            </div>
          </div>
        ))}
      </div>
    </section>

    <p style="color: var(--ink-soft); font-size: 0.88rem;">
      Pour les questions juridiques (mention de l'éditeur, statut), voir les
      <a href="/mentions-legales" style="color: var(--brand-deep);">mentions légales</a>.
    </p>
  </section>
</Base>