---
/**
 * /blog/:slug — article individuel.
 *
 * SSR : fetch le post + articles liés depuis l'API à chaque requête.
 * 404 si non trouvé. Cache HTTP 5 min + 24h SWR.
 *
 * Le contentHtml vient déjà rendu de l'API (marked + sanitize côté
 * blog_renderer). On l'injecte avec set:html.
 */
import Layout from "../../layouts/Layout.astro";
import { PostCard } from "../../components/blog/PostCard";
import { getPost } from "../../lib/api";

const { slug } = Astro.params;

const data = slug ? await getPost(slug) : null;
if (!data) {
  return new Response(null, { status: 404, statusText: "Not Found" });
}

const { post, related } = data;
const url = `https://rubis.pro/blog/${post.slug}`;
const ogImage = post.ogImageUrl ?? post.heroImageUrl ?? undefined;

const dateFmt = new Intl.DateTimeFormat("fr-FR", {
  year: "numeric",
  month: "long",
  day: "numeric",
});
const dateLabel = post.publishedAt ? dateFmt.format(new Date(post.publishedAt)) : null;
const dateIso = post.publishedAt ?? undefined;

const jsonLd = [
  {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: post.title,
    description: post.excerpt,
    author: { "@type": "Person", name: post.authorName },
    publisher: {
      "@type": "Organization",
      name: "Rubis sur l'ongle",
      url: "https://rubis.pro",
      logo: {
        "@type": "ImageObject",
        url: "https://rubis.pro/web-app-manifest-512x512.png",
      },
    },
    datePublished: dateIso,
    dateModified: post.updatedAt ?? dateIso,
    image: ogImage ? [ogImage] : undefined,
    inLanguage: "fr-FR",
    wordCount: post.wordCount,
    mainEntityOfPage: { "@type": "WebPage", "@id": url },
    keywords: post.tags.length > 0 ? post.tags.join(", ") : undefined,
  },
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Accueil", item: "https://rubis.pro" },
      { "@type": "ListItem", position: 2, name: "Blog", item: "https://rubis.pro/blog" },
      { "@type": "ListItem", position: 3, name: post.title, item: url },
    ],
  },
];

Astro.response.headers.set(
  "Cache-Control",
  "public, max-age=300, stale-while-revalidate=86400",
);
---

<Layout
  title={post.title}
  description={post.excerpt}
  ogImage={ogImage}
  ogType="article"
  noindex={post.noindex}
  pathname={`/blog/${post.slug}`}
  solidHeader
  jsonLd={jsonLd}
>
  <article>
    <header class="bg-cream-2 border-b border-line">
      <div class="max-w-[760px] mx-auto px-5 sm:px-8 py-16 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>
          Article
        </p>
        <h1
          class="mt-5 font-display font-extrabold text-ink leading-[1.08] tracking-[-0.022em] text-[34px] sm:text-[48px]"
        >
          {post.title}
        </h1>
        <div class="mt-6 flex items-center justify-center gap-3 text-[14px] text-ink-3">
          {dateLabel && <time datetime={dateIso}>{dateLabel}</time>}
          {dateLabel && <span aria-hidden class="size-[3px] rounded-full bg-ink-3"></span>}
          <span>{post.readingTimeMinutes} min de lecture</span>
          {post.authorName && <span aria-hidden class="size-[3px] rounded-full bg-ink-3"></span>}
          {post.authorName && <span>par {post.authorName}</span>}
        </div>
      </div>
    </header>

    {
      post.heroImageUrl && (
        <figure class="max-w-[920px] mx-auto px-5 sm:px-8 mt-10">
          <img
            src={post.heroImageUrl}
            alt={post.heroImageAlt ?? post.title}
            class="w-full aspect-[16/9] object-cover rounded-card"
          />
        </figure>
      )
    }

    <div class="max-w-[720px] mx-auto px-5 sm:px-8 py-12 lg:py-16">
      <div class="article-body" set:html={post.contentHtml} />

      <aside
        class="mt-16 bg-gradient-to-br from-rubis to-rubis-deep text-cream rounded-card p-8 sm:p-10 text-center shadow-card"
      >
        <h3
          class="font-display font-bold text-[24px] sm:text-[28px] tracking-[-0.02em] leading-[1.2]"
        >
          Vos factures relancées toutes seules pendant que vous travaillez.
        </h3>
        <p class="mt-3 text-cream/85 text-[16px] max-w-[520px] mx-auto">
          Rubis automatise vos relances avec la bonne tonalité, au bon moment. 30 jours
          d'essai, sans carte bancaire.
        </p>
        <a
          href="https://app.rubis.pro"
          class="mt-6 inline-flex items-center justify-center bg-cream text-rubis font-display font-bold text-[15px] px-6 py-3 rounded-default hover:bg-white transition-colors"
        >
          Tester Rubis gratuitement
        </a>
      </aside>
    </div>
  </article>

  {
    related.length > 0 && (
      <section class="bg-cream-2 border-t border-line">
        <div class="max-w-[1180px] mx-auto px-5 sm:px-8 py-16">
          <h2
            class="font-display font-bold text-[24px] tracking-[-0.02em] text-ink text-center mb-10"
          >
            À lire aussi
          </h2>
          <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
            {related.map((rp) => <PostCard post={rp} />)}
          </div>
        </div>
      </section>
    )
  }

  <style is:global>
    .article-body > * + * {
      margin-top: 1.4em;
    }
    .article-body h2 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 28px;
      line-height: 1.2;
      letter-spacing: -0.02em;
      margin-top: 2.4em;
      color: var(--color-ink);
    }
    .article-body h3 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 21px;
      line-height: 1.3;
      letter-spacing: -0.015em;
      margin-top: 2em;
      color: var(--color-ink);
    }
    .article-body p,
    .article-body li {
      font-size: 17.5px;
      line-height: 1.75;
      color: var(--color-ink);
    }
    .article-body ul,
    .article-body ol {
      padding-left: 1.4em;
    }
    .article-body ul {
      list-style: disc;
    }
    .article-body ol {
      list-style: decimal;
    }
    .article-body li + li {
      margin-top: 0.4em;
    }
    .article-body strong {
      font-weight: 700;
      color: var(--color-ink);
    }
    .article-body em {
      font-style: italic;
    }
    .article-body a {
      color: var(--color-rubis);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .article-body a:hover {
      color: var(--color-rubis-deep);
    }
    .article-body blockquote {
      border-left: 3px solid var(--color-rubis);
      padding: 4px 0 4px 24px;
      font-style: italic;
      color: var(--color-ink-2);
    }
    .article-body code {
      background: var(--color-cream-2);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.92em;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }
    .article-body pre {
      background: var(--color-ink);
      color: var(--color-cream);
      padding: 20px 24px;
      border-radius: 10px;
      overflow-x: auto;
    }
    .article-body pre code {
      background: transparent;
      padding: 0;
      color: inherit;
    }
    .article-body hr {
      border: none;
      border-top: 1px solid var(--color-line);
      margin: 3em 0;
    }
    .article-body table {
      width: 100%;
      border-collapse: collapse;
      font-size: 15px;
    }
    .article-body th,
    .article-body td {
      padding: 10px 14px;
      text-align: left;
      border-bottom: 1px solid var(--color-line);
    }
    .article-body th {
      font-weight: 600;
      color: var(--color-ink);
      background: var(--color-cream-2);
    }
    .article-body img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
    }
  </style>
</Layout>
