---
/**
 * Layout commun à toutes les pages rubis.pro/*.
 *
 * Reçoit en props les meta SEO essentiels. Importe le CSS racine (qui inline
 * les tokens + base @rubis/ui), monte SiteHeader + SiteFooter, et expose un
 * <slot /> pour le contenu de la page.
 *
 * Convention : zéro JS hydraté côté public sauf nécessité explicite — le
 * SiteHeader + SiteFooter sont rendus côté serveur uniquement (pas de
 * client:load) pour rester sur le bundle minimal.
 */
import "../styles/app.css";
import { SiteHeader } from "../components/SiteHeader";
import { SiteFooter } from "../components/SiteFooter";

const SITE_URL = "https://rubis.pro";

interface Props {
  title: string;
  description: string;
  /** Path absolu de la page courante (ex. "/blog/foo"). Default = location actuelle. */
  pathname?: string;
  /** OG image absolue (1200×630 idéal). */
  ogImage?: string;
  /** OG type. Default "website". Mettre "article" sur les pages de blog. */
  ogType?: "website" | "article";
  /** Si true → noindex (legal/test). */
  noindex?: boolean;
  /** Header solide (bordure + fond) plutôt que transparent (par défaut). */
  solidHeader?: boolean;
  /** JSON-LD structured data — passé en string déjà sérialisé OU en object. */
  jsonLd?: object | object[];
}

const {
  title,
  description,
  pathname,
  ogImage,
  ogType = "website",
  noindex = false,
  solidHeader = false,
  jsonLd,
} = Astro.props;

const fullTitle = title.includes("Rubis") ? title : `${title} — Rubis sur l'ongle`;
const url = `${SITE_URL}${pathname ?? Astro.url.pathname}`;
const robots = noindex ? "noindex,nofollow" : "index,follow,max-image-preview:large";
const jsonLdArray = jsonLd ? (Array.isArray(jsonLd) ? jsonLd : [jsonLd]) : [];
---

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{fullTitle}</title>
    <meta name="description" content={description} />
    <meta name="robots" content={robots} />
    <meta name="theme-color" content="#9F1239" />
    <meta name="author" content="Rubis sur l'ongle" />

    <link rel="canonical" href={url} />
    <link rel="alternate" hreflang="fr-FR" href={url} />
    <link rel="alternate" hreflang="x-default" href={url} />

    {/* Open Graph */}
    <meta property="og:site_name" content="Rubis sur l'ongle" />
    <meta property="og:locale" content="fr_FR" />
    <meta property="og:type" content={ogType} />
    <meta property="og:title" content={fullTitle} />
    <meta property="og:description" content={description} />
    <meta property="og:url" content={url} />
    {
      ogImage && (
        <>
          <meta property="og:image" content={ogImage} />
          <meta property="og:image:width" content="1200" />
          <meta property="og:image:height" content="630" />
          <meta property="og:image:alt" content={title} />
        </>
      )
    }

    {/* Twitter Card */}
    <meta name="twitter:card" content={ogImage ? "summary_large_image" : "summary"} />
    <meta name="twitter:title" content={fullTitle} />
    <meta name="twitter:description" content={description} />
    {ogImage && <meta name="twitter:image" content={ogImage} />}

    {/* Favicons */}
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />

    {/* RSS auto-discovery */}
    <link rel="alternate" type="application/rss+xml" title="Blog Rubis" href={`${SITE_URL}/blog/rss.xml`} />

    {/* JSON-LD structured data */}
    {
      jsonLdArray.map((data) => (
        <script is:inline type="application/ld+json" set:html={JSON.stringify(data)} />
      ))
    }
  </head>
  <body>
    <SiteHeader solid={solidHeader} />
    <main>
      <slot />
    </main>
    <SiteFooter />
  </body>
</html>
