import { getDictionary, type Locale } from "@/lib/dictionaries";
import ProjectsShowcase from "@/components/sections/ProjectsShowcase";
import CTA from "@/components/sections/CTA";
import { localeAlternates } from "@/lib/seo";
import type { Metadata } from "next";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  const isSR = locale === "sr";
  return {
    title: isSR ? "Projekti" : "Projects",
    description: isSR
      ? "Pogledajte projekte koje sam razvio i deployovao."
      : "Browse the projects I've built and deployed.",
    alternates: localeAlternates(locale, "/projects"),
  };
}

export default async function ProjectsPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const dict = getDictionary(locale);
  const t = dict.projectsPage;

  return (
    <>
      {/* Hero */}
      <section className="relative isolate flex min-h-[45svh] items-center overflow-hidden pt-32">
        <div className="pointer-events-none absolute inset-0 grid-bg [mask-image:radial-gradient(ellipse_at_center,#000_30%,transparent_70%)] opacity-30" />

        <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-3xl text-center">
            <span className="mb-6 inline-flex items-center gap-2 rounded-full border border-purple-400/30 bg-purple-500/10 px-3.5 py-1.5 font-mono text-xs tracking-tight text-purple-300 backdrop-blur-md">
              {t.badge}
            </span>

            <h1 className="font-display text-display-xl font-medium tracking-tight">
              <span className="text-gradient-fade">{t.title}</span>
              <br />
              <span className="text-gradient-purple">{t.titleAccent}</span>
            </h1>

            <p className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-text-secondary sm:text-lg">
              {t.subtitle}
            </p>
          </div>
        </div>
      </section>

      {/* Deployed client projects */}
      <ProjectsShowcase
        locale={locale as Locale}
        dict={dict}
        filter="client"
        sectionTitle={t.deployedTitle}
      />

      {/* Personal / featured projects */}
      <ProjectsShowcase
        locale={locale as Locale}
        dict={dict}
        filter="personal"
        sectionTitle={t.featuredTitle}
      />

      {/* Build with me CTA */}
      <CTA locale={locale as Locale} dict={dict} />
    </>
  );
}