import { getDictionary } from "@/i18n";
import { sanityFetch } from "@/sanity/client";
import { MINISTRIES_QUERY } from "@/sanity/queries";
import { PageHeader, Container, JoinCta } from "@/components/ui";
import { Reveal } from "@/components/reveal";
import { MinistryCard } from "@/components/cards";

/* eslint-disable @typescript-eslint/no-explicit-any */

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const d = getDictionary(locale);
  return { title: d.ministries.title, description: d.ministries.lead };
}

export default async function MinistriesPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const dict = getDictionary(locale);
  const ministries = await sanityFetch<any[]>(MINISTRIES_QUERY, {}, []);

  // CMS content if present, else the bilingual defaults from the dictionary.
  const list = ministries?.length ? ministries : dict.ministries.items;

  return (
    <>
      <PageHeader
        eyebrow={dict.nav.ministries}
        title={dict.ministries.title}
        lead={dict.ministries.lead}
      />

      <section className="py-16 sm:py-24">
        <Container>
          <Reveal className="mx-auto max-w-3xl text-center">
            <p className="text-lg text-ink-soft">{dict.ministries.intro}</p>
          </Reveal>

          <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {list.map((m: any, i: number) => (
              <Reveal key={m._id || m.name} delay={(i % 3) * 0.06}>
                <MinistryCard ministry={m} locale={locale} dict={dict} />
              </Reveal>
            ))}
          </div>
        </Container>
      </section>

      <JoinCta locale={locale} dict={dict} />
    </>
  );
}