import { getDictionary } from "@/i18n";
import { sanityFetch } from "@/sanity/client";
import { LEADERS_QUERY, SITE_SETTINGS_QUERY } from "@/sanity/queries";
import { PageHeader, Container, JoinCta } from "@/components/ui";
import { Reveal } from "@/components/reveal";
import { LeaderCard } 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.leadership.title, description: d.leadership.lead };
}

export default async function LeadershipPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const dict = getDictionary(locale);
  const [leaders, settings] = await Promise.all([
    sanityFetch<any[]>(LEADERS_QUERY, {}, []),
    sanityFetch<any>(SITE_SETTINGS_QUERY, {}, null),
  ]);
  const gallery = settings?.galleryUrl || "https://photos.cityoftestimonies.com";

  return (
    <>
      <PageHeader
        eyebrow={dict.nav.leadership}
        title={dict.leadership.title}
        lead={dict.leadership.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.leadership.intro}</p>
          </Reveal>

          {leaders.length ? (
            <div className="mt-12 grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-4">
              {leaders.map((l, i) => (
                <Reveal key={l._id} delay={(i % 4) * 0.06}>
                  <LeaderCard leader={l} locale={locale} dict={dict} />
                </Reveal>
              ))}
            </div>
          ) : (
            <p className="mt-12 text-center text-muted">{dict.empty.leaders}</p>
          )}

          <p className="mt-14 text-center text-sm text-muted">
            {dict.leadership.galleryNote} —{" "}
            <a
              className="font-semibold text-brand-bright hover:underline"
              href={gallery}
              target="_blank"
              rel="noopener noreferrer"
            >
              {dict.cta.openGallery} →
            </a>
          </p>
        </Container>
      </section>

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