import { type Locale, useTranslations } from "next-intl";
import ArrowLink from "@/components/ui/ArrowLink";
import JrPostCard from "@/components/blog/JrPostCard";
import { getPostsByCategory } from "@/lib/blog";
import { cn } from "@/lib/utils";

const THEMES = [
  { key: "craft", category: "process" },
  { key: "brand", category: "guides" },
] as const;

export default function JournalThemes({ locale }: { locale: Locale }) {
  const t = useTranslations("BlogPage");

  return (
    <section className="bg-background px-6 py-[76px] lg:px-16 lg:py-[104px]">
      <div className="mx-auto max-w-[1440px]">
        {THEMES.map((theme, index) => {
          const posts = getPostsByCategory(locale, theme.category).slice(0, 3);
          if (posts.length === 0) {
            return null;
          }
          return (
            <div key={theme.key} className={cn("reveal", index === 0 && "mb-20 lg:mb-24")}>
              <div className="grid grid-cols-1 gap-10 lg:grid-cols-[300px_1fr] lg:gap-16">
                <div className="lg:sticky lg:top-[120px] lg:self-start">
                  <span className="text-[11px] font-semibold uppercase tracking-[0.26em] text-gold-text">
                    {t(`categories.${theme.category}`)}
                  </span>
                  <h2 className="mt-4 font-display text-[31px] font-normal leading-[1.2] text-foreground lg:text-[36px]">
                    {t(`themes.${theme.key}.title`)}
                  </h2>
                  <p className="mt-4 text-base leading-[1.7] text-on-surface-variant">
                    {t(`themes.${theme.key}.body`)}
                  </p>
                  <ArrowLink hash="#topics" className="mt-6">
                    {t("themes.readMore")}
                  </ArrowLink>
                </div>
                <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                  {posts.map((p) => (
                    <JrPostCard key={p.postId} post={p} locale={locale} variant="standard" />
                  ))}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}