import { getDictionary } from "@/i18n";
import { sanityFetch } from "@/sanity/client";
import { LEADERS_QUERY } from "@/sanity/queries";
import { Target, Eye, Cross } from "lucide-react";
import {
  PageHeader,
  Container,
  Eyebrow,
  SectionHeading,
  JoinCta,
} from "@/components/ui";
import { Reveal } from "@/components/reveal";
import { CountUp } from "@/components/motion";
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.about.eyebrow, description: d.about.lead };
}

export default async function AboutPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const dict = getDictionary(locale);
  const a = dict.about;
  const base = `/${locale}`;
  const leaders = await sanityFetch<any[]>(LEADERS_QUERY, {}, []);

  return (
    <>
      <PageHeader eyebrow={a.eyebrow} title={a.title} lead={a.lead} />

      {/* Overview ------------------------------------------------------------ */}
      <section className="py-20 sm:py-28">
        <Container className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
          <Reveal>
            <div className="relative">
              <div className="overflow-hidden rounded-[2rem] shadow-xl">
                <img
                  src="/about.jpg"
                  alt={dict.brand.sub}
                  className="aspect-[4/5] w-full object-cover"
                />
              </div>
              <div className="absolute -right-3 -top-3 hidden rounded-2xl bg-brand px-5 py-4 text-bg shadow-xl sm:block">
                <p className="font-display text-sm font-bold uppercase tracking-[0.16em]">
                  {dict.brand.sub}
                </p>
              </div>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Eyebrow>{a.overviewEyebrow}</Eyebrow>
            <h2 className="mt-4 text-balance text-3xl tracking-tight sm:text-4xl">
              {a.overviewTitle}
            </h2>
            <p className="mt-5 text-lg text-ink-soft">{a.overviewBody1}</p>
            <p className="mt-4 text-ink-soft">{a.overviewBody2}</p>
          </Reveal>
        </Container>
      </section>

      {/* Stats --------------------------------------------------------------- */}
      <section className="bg-brand-deep py-14 text-bg">
        <Container>
          <div className="grid grid-cols-2 gap-8 lg:grid-cols-4">
            {a.stats.map((s, i) => (
              <Reveal key={i} delay={i * 0.08} className="text-center">
                <p className="font-display text-5xl font-bold tracking-tight text-bg sm:text-6xl">
                  <CountUp value={s.value} />
                </p>
                <p className="mt-2 text-sm uppercase tracking-[0.14em] text-white/65">
                  {s.label}
                </p>
              </Reveal>
            ))}
          </div>
        </Container>
      </section>

      {/* Mission / Vision ---------------------------------------------------- */}
      <section className="py-20 sm:py-24">
        <Container className="grid gap-6 md:grid-cols-2">
          <Reveal>
            <div className="flex h-full flex-col rounded-3xl bg-brand p-9 text-bg shadow-card sm:p-10">
              <span className="grid h-12 w-12 place-items-center rounded-xl bg-white/15">
                <Target className="size-6" />
              </span>
              <h3 className="mt-6 text-2xl text-bg">{a.missionTitle}</h3>
              <p className="mt-3 text-bg/80">{a.missionBody}</p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <div className="flex h-full flex-col rounded-3xl border border-line bg-surface p-9 shadow-card sm:p-10">
              <span className="grid h-12 w-12 place-items-center rounded-xl bg-brand/10 text-brand">
                <Eye className="size-6" />
              </span>
              <h3 className="mt-6 text-2xl">{a.visionTitle}</h3>
              <p className="mt-3 text-ink-soft">{a.visionBody}</p>
            </div>
          </Reveal>
        </Container>
      </section>

      {/* Beliefs ------------------------------------------------------------- */}
      <section className="bg-surface py-20 sm:py-24">
        <Container>
          <SectionHeading
            eyebrow={a.beliefsEyebrow}
            title={a.beliefsTitle}
            lead={a.beliefsLead}
            align="center"
          />
          <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {a.beliefs.map((b, i) => (
              <Reveal key={i} delay={(i % 3) * 0.06}>
                <div className="flex h-full flex-col rounded-2xl border border-line bg-bg p-7 shadow-card lift">
                  <span className="grid h-11 w-11 place-items-center rounded-xl bg-brand/10 text-brand">
                    <Cross className="size-5" />
                  </span>
                  <h3 className="mt-5 text-lg">{b.title}</h3>
                  <p className="mt-2 text-ink-soft">{b.body}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </Container>
      </section>

      {/* Our story ----------------------------------------------------------- */}
      <section className="py-20 sm:py-28">
        <Container className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
          <Reveal className="order-2 lg:order-1">
            <Eyebrow>{a.storyEyebrow}</Eyebrow>
            <h2 className="mt-4 text-balance text-3xl tracking-tight sm:text-4xl">
              {a.storyTitle}
            </h2>
            <p className="mt-5 text-lg text-ink-soft">{a.storyBody1}</p>
            <p className="mt-4 text-ink-soft">{a.storyBody2}</p>
          </Reveal>
          <Reveal delay={0.1} className="order-1 lg:order-2">
            <div className="overflow-hidden rounded-[2rem] shadow-xl">
              <img
                src="/hero.jpg"
                alt={dict.brand.name}
                className="aspect-[5/4] w-full object-cover"
              />
            </div>
          </Reveal>
        </Container>
      </section>

      {/* Core values --------------------------------------------------------- */}
      <section className="bg-surface py-20 sm:py-24">
        <Container>
          <SectionHeading
            eyebrow={a.valuesEyebrow}
            title={a.valuesTitle}
            align="center"
          />
          <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {a.values.map((v, i) => (
              <Reveal key={i} delay={(i % 3) * 0.06}>
                <div className="group flex h-full gap-5 rounded-2xl border border-line bg-bg p-7 shadow-card lift">
                  <span className="font-display text-4xl font-bold leading-none text-brand/25 transition group-hover:text-brand/50">
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <div>
                    <h3 className="text-lg">{v.title}</h3>
                    <p className="mt-2 text-ink-soft">{v.body}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </Container>
      </section>

      {/* Leaders teaser ------------------------------------------------------ */}
      {leaders?.length > 0 && (
        <section className="py-20 sm:py-24">
          <Container>
            <SectionHeading
              eyebrow={a.teamEyebrow}
              title={a.teamTitle}
              lead={a.teamLead}
              action={{ href: `${base}/leadership/`, label: dict.cta.meetLeaders }}
            />
            <div className="mt-10 grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-4">
              {leaders.slice(0, 4).map((l, i) => (
                <Reveal key={l._id} delay={i * 0.06}>
                  <LeaderCard leader={l} locale={locale} dict={dict} />
                </Reveal>
              ))}
            </div>
          </Container>
        </section>
      )}

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