---
// src/pages/[...locale]/about.astro - a propos : l'histoire du carnet, les trois regles de travail, les signatures et l'invitation a travailler ensemble.
import AuthorCard from "@components/Cards/AuthorCard.astro";
import Footer from "@components/Sections/Global/Footer.astro";
import Navbar from "@components/Sections/Global/Navbar.astro";
import PageHero from "@components/Sections/Global/PageHero.astro";
import PhoneShot from "@components/Sections/Global/PhoneShot.astro";
import SectionHeader from "@components/Sections/Global/SectionHeader.astro";
import { Icon } from "@components/svg/icons";
import { Button } from "@components/ui/button";
import { getSiteRoutes } from "@config/navData.json.ts";
import siteData from "@config/siteData.json";
import { getLocale, localePaths, localizePath, useTranslations } from "@i18n";
import { entrySlug, getLocalizedCollection } from "@i18n/content";
import { getResolvedPosts } from "@js/posts";
import { breadcrumbList, organization } from "@js/schema";
import BaseLayout from "@layouts/BaseLayout.astro";

export const getStaticPaths = localePaths;

const locale = getLocale(Astro);
const t = useTranslations(locale);
const routes = getSiteRoutes(locale);

const authors = (await getLocalizedCollection("authors", locale)).sort((a, b) =>
  a.data.name.localeCompare(b.data.name),
);
const posts = await getResolvedPosts(locale);
const counts: Record<string, number> = {};
for (const entry of posts) counts[entry.authorSlug] = (counts[entry.authorSlug] ?? 0) + 1;

const title = t.about.metaTitle;
const description = t.about.metaDescription;

const base = Astro.site ?? Astro.url;
const siteUrl = new URL(localizePath("/", locale), base).href;
const schemas = [
  organization({
    name: siteData.name,
    url: siteUrl,
    sameAs: siteData.author.twitter ? [`https://x.com/${siteData.author.twitter}`] : undefined,
  }),
  breadcrumbList([
    { name: t.common.home, url: siteUrl },
    { name: t.about.metaTitle, url: new URL(localizePath("/about/", locale), base).href },
  ]),
];
---

<BaseLayout {title} {description}>
  <Fragment slot="head">
    {
      schemas.map((node) => (
        <script is:inline type="application/ld+json" set:html={JSON.stringify(node)} />
      ))
    }
  </Fragment>

  <Navbar />

  <main id="content">
    <PageHero
      eyebrow={t.about.eyebrow}
      title={t.about.title}
      accentWord={t.about.accent}
      lede={t.about.lede}
      crumbs={[{ label: t.about.metaTitle }]}
    />

    {/* L'histoire est du texte long : elle passe donc par .prose, la colonne de
        lecture du theme, et pas par une grille de cartes. */}
    <section class="container-page py-14 md:py-20" aria-labelledby="story-title">
      <SectionHeader
        as="h2"
        headingId="story-title"
        title={t.about.storyTitle}
        accentWord={t.about.storyAccent}
      />
      <div class="prose prose-dropcap mt-8">
        {t.about.storyParagraphs.map((paragraph) => <p>{paragraph}</p>)}
      </div>
    </section>

    <section class="bg-surface border-border border-y" aria-labelledby="values-title">
      <div class="container-page py-16 md:py-24">
        <SectionHeader
          as="h2"
          headingId="values-title"
          title={t.about.valuesTitle}
          accentWord={t.about.valuesAccent}
          lede={t.about.valuesLede}
        />
        {/* Une liste, pas trois cartes egales en rangee. Trois regles ne sont
            pas trois offres : elles se lisent l'une apres l'autre, chacune sur
            sa ligne, separees par un filet. Le numero descend dans la marge,
            ou il numerote sans se faire passer pour un chiffre cle. */}
        {/* Sur grand ecran la colonne de gauche garde sa mesure de lecture et
            la place restante accueille le telephone : la section ne s'etale
            pas, elle se remplit. En dessous de lg le cadre n'existe pas, donc
            le dessin de telephone n'est pas montre a quelqu'un qui tient deja
            un telephone, et son image n'est jamais telechargee. */}
        <div class="mt-10 lg:grid lg:grid-cols-[minmax(0,1fr)_16rem] lg:items-start lg:gap-16">
          <ol class="divide-border border-border flex flex-col divide-y border-t">
            {
              t.about.values.map((value, index) => (
                <li class="grid gap-x-8 gap-y-2 py-7 md:grid-cols-[4rem_minmax(0,1fr)] md:py-9">
                  {/* Pas d'italique sur ce numero. Space Grotesk n'a pas de coupe
                      italique : le navigateur en fabriquait une oblique, qui
                      penche les chiffres sans les redessiner et se voit tout de
                      suite. La regle vaut pour toute la famille, elle est ecrite
                      en toutes lettres dans prose.css, et ce numero etait le
                      dernier endroit du theme qui l'enfreignait. */}
                  <span
                    class="font-display text-muted-foreground/60 text-sm font-semibold tracking-[0.18em] tabular-nums md:pt-1.5"
                    aria-hidden="true"
                  >
                    {String(index + 1).padStart(2, "0")}
                  </span>
                  <div class="flex flex-col gap-2">
                    <h3 class="font-display text-foreground text-xl font-semibold tracking-tight md:text-2xl">
                      {value.title}
                    </h3>
                    <p class="text-muted-foreground measure-wide text-[0.95rem] leading-relaxed">
                      {value.text}
                    </p>
                  </div>
                </li>
              ))
            }
          </ol>

          <PhoneShot class="hidden lg:block" />
        </div>
      </div>
    </section>

    <section class="container-page py-16 md:py-24" aria-labelledby="writers-title">
      <SectionHeader
        as="h2"
        headingId="writers-title"
        title={t.about.writersTitle}
        accentWord={t.about.writersAccent}
        lede={t.about.writersLede}
      />
      {/* Des portraits de tailles inegales, pas une rangee de vignettes
          identiques. Deux personnes qui n'ecrivent pas la meme chose n'ont
          aucune raison d'occuper deux colonnes jumelles : la premiere prend la
          largeur et le grand portrait, la suivante descend d'un cran et se
          tient plus serree. La regle vaut pour n signatures : une sur deux
          est large, l'autre est etroite et decalee. */}
      <ul class="mt-10 grid grid-cols-1 items-start gap-x-8 gap-y-10 md:grid-cols-12">
        {
          authors.map((author, index) => {
            const slug = entrySlug(author.id);
            const wide = index % 2 === 0;
            return (
              <li
                class:list={[
                  "flex",
                  wide ? "md:col-span-7" : "md:col-span-5 md:mt-12",
                ]}
              >
                <AuthorCard
                  {author}
                  {locale}
                  href={`${routes.authors}${slug}/`}
                  count={counts[slug] ?? 0}
                  as="h3"
                  showLinks
                  avatarSize={wide ? "xl" : "lg"}
                  class="w-full"
                />
              </li>
            );
          })
        }
      </ul>
      <div class="mt-10 flex justify-start">
        <Button href={routes.authors} variant="ghost" size="md">
          {t.about.writersCta}
          <Icon name="arrow-right" size={17} />
        </Button>
      </div>
    </section>

    <section class="bg-surface border-border border-t" aria-labelledby="work-title">
      <div class="container-page flex flex-col items-start gap-5 py-16 md:py-24">
        <h2 id="work-title" class="font-display text-display-sm md:text-display-md text-foreground">
          {t.about.contactTitle}
        </h2>
        <p class="text-muted-foreground measure-wide text-lg leading-relaxed">
          {t.about.contactLede}
        </p>
        <Button href={routes.contact} variant="primary" size="lg" class="mt-2">
          {t.about.contactCta}
          <Icon name="arrow-right" size={18} />
        </Button>
      </div>
    </section>
  </main>

  <Footer />
</BaseLayout>
