import type { Metadata } from "next";
import messages from "../../../messages/en/index";
import { getTranslation } from "../../../lib/i18n/getTranslation";
import { routeMetadata } from "../../../lib/siteMetadata";
import ContentThumbnailTemplate from "../../components/content/ContentThumbnailTemplate";
import ContentLockup from "../../components/type/ContentLockup";
import AskOrganizer from "../../components/sections/AskOrganizer";
import { getAllBlogPosts } from "../../../lib/content";

export const metadata: Metadata = routeMetadata("/learn", {
  title: messages.metadata.learn.title,
});

export default function LearnPage() {
  const allPosts = getAllBlogPosts();

  const t = (key: string) => getTranslation(messages, key);

  const contentLockupData = {
    title: t("pages.learn.contentLockup.title"),
    subtitle: t("pages.learn.contentLockup.subtitle"),
    variant: "learn" as const,
    alignment: "left" as const,
  };

  const askOrganizerData = {
    title: t("pages.learn.askOrganizer.title"),
    subtitle: t("pages.learn.askOrganizer.subtitle"),
    description: t("pages.learn.askOrganizer.description"),
    buttonText: t("pages.learn.askOrganizer.buttonText"),
    variant: "centered" as const,
  };

  return (
    <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
      <ContentLockup {...contentLockupData} />

      {/*
       * Single responsive render: ContentThumbnailTemplate variant="responsive"
       * uses <picture> to swap horizontal/vertical art at smd (530px). Wrap and
       * center leftover cards so a short last row is not left-aligned.
       */}
      <div
        data-testid="learn-article-grid"
        className="flex flex-col space-y-[var(--spacing-scale-002)] sm:space-y-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-024)] sm:pb-[var(--spacing-scale-024)] smd:flex-row smd:flex-wrap smd:justify-center smd:gap-[var(--spacing-scale-008)] smd:space-y-0 smd:px-[var(--spacing-scale-020)] smd:pt-[var(--spacing-scale-024)] smd:pb-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-016)] md:px-[var(--spacing-scale-032)] xmd:gap-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-064)] lg:pt-[var(--spacing-scale-032)] lg:pb-[var(--spacing-scale-064)] lg2:gap-x-[var(--spacing-scale-016)] lg2:gap-y-[var(--spacing-scale-024)] xl:gap-x-[var(--spacing-scale-016)] xl:gap-y-[var(--spacing-scale-016)] [&>*]:min-w-0 [&>*]:w-full smd:[&>*]:w-[calc((100%-var(--spacing-scale-008))/2)] md:[&>*]:w-[calc((100%-var(--spacing-scale-016))/2)] xmd:[&>*]:w-[calc((100%-2*var(--spacing-scale-012))/3)] lg:[&>*]:w-[calc((100%-2*var(--spacing-scale-016))/3)] lg2:[&>*]:w-[calc((100%-3*var(--spacing-scale-016))/4)] xl:[&>*]:w-[calc((100%-4*var(--spacing-scale-016))/5)]"
      >
        {allPosts.map((post) => (
          <ContentThumbnailTemplate
            key={post.slug}
            post={post}
            variant="responsive"
          />
        ))}
      </div>

      <AskOrganizer {...askOrganizerData} />
    </div>
  );
}