---
/**
 * /blog — liste publique des articles publiés.
 *
 * SSR (pas de prerender) : le contenu peut changer à tout moment via
 * l'admin (PR3) ; on fetch à chaque requête, et on cache HTTP côté
 * Traefik / nginx pour absorber les pics. Publication = immédiate.
 */
import Layout from "../../layouts/Layout.astro";
import { PostCard } from "../../components/blog/PostCard";
import { listPosts } from "../../lib/api";

const posts = await listPosts();

const title = "Blog — Le blog des relances qui marchent";
const description =
  "Stratégies, modèles d'email et retours du terrain pour récupérer vos factures impayées sans abîmer la relation client. Sans bullshit, écrit pour les TPE-PME françaises.";

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Blog",
  name: "Blog Rubis sur l'ongle",
  description,
  url: "https://rubis.pro/blog",
  publisher: {
    "@type": "Organization",
    name: "Rubis sur l'ongle",
    url: "https://rubis.pro",
    logo: {
      "@type": "ImageObject",
      url: "https://rubis.pro/web-app-manifest-512x512.png",
    },
  },
  blogPost: posts.map((p) => ({
    "@type": "BlogPosting",
    headline: p.title,
    description: p.excerpt,
    url: `https://rubis.pro/blog/${p.slug}`,
    datePublished: p.publishedAt,
  })),
};

// Cache HTTP : 5 min frais + 24h SWR. L'admin "Publier" invalide via webhook (PR3).
Astro.response.headers.set(
  "Cache-Control",
  "public, max-age=300, stale-while-revalidate=86400",
);
---

<Layout title={title} description={description} solidHeader jsonLd={jsonLd}>
  <section class="bg-cream-2 border-b border-line">
    <div class="max-w-[1180px] mx-auto px-5 sm:px-8 py-20 lg:py-24 text-center">
      <p
        class="inline-flex items-center gap-2 text-[11px] uppercase tracking-[0.16em] font-semibold text-rubis"
      >
        <span aria-hidden class="size-[7px] bg-current rotate-45 inline-block"></span>
        Blog Rubis
      </p>
      <h1
        class="mt-5 font-display font-extrabold text-ink leading-[1.05] tracking-[-0.025em] text-[40px] sm:text-[56px] max-w-[780px] mx-auto"
      >
        Le blog des relances qui marchent
      </h1>
      <p class="mt-5 max-w-[640px] mx-auto text-[18px] text-ink-2 leading-relaxed">
        Stratégies, modèles d'email et retours du terrain pour récupérer vos factures
        impayées sans abîmer la relation client. Sans bullshit, écrit pour les TPE-PME
        françaises.
      </p>
    </div>
  </section>

  <section class="max-w-[1180px] mx-auto px-5 sm:px-8 py-16">
    {
      posts.length === 0 ? (
        <div class="text-center py-16 text-ink-3">
          <p>Aucun article publié pour l'instant. Reviens vite.</p>
        </div>
      ) : (
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
          {posts.map((post) => <PostCard post={post} />)}
        </div>
      )
    }
  </section>
</Layout>
