import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import CoverArt from "@/components/site/CoverArt";
import CTABand from "@/components/site/CTABand";
import { Reveal, LineReveal } from "@/components/motion/Reveal";
import { caseStudies, getCaseStudy } from "@/lib/content/work";

export function generateStaticParams() {
  return caseStudies.map((c) => ({ slug: c.slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const cs = getCaseStudy(slug);
  if (!cs) return {};
  return {
    title: `${cs.title} — Case Study`,
    description: cs.premise,
    alternates: { canonical: `/work/${cs.slug}` },
  };
}

export default async function CaseStudyPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const cs = getCaseStudy(slug);
  if (!cs) notFound();

  const idx = caseStudies.findIndex((c) => c.slug === cs.slug);
  const next = caseStudies[(idx + 1) % caseStudies.length];

  return (
    <>
      {/* hero */}
      <section className="weave-dark relative overflow-clip pb-0 pt-40 md:pt-48">
        <div className="mx-auto w-full max-w-[1280px] px-5 md:px-10">
          <Reveal>
            <p className="eyebrow">
              {cs.index} · {cs.sector} · {cs.categoryLabel}
            </p>
          </Reveal>
          <h1 className="mt-5 max-w-[16em] text-[clamp(2.4rem,5vw,4.2rem)] font-[650] leading-[1.04] tracking-[-0.02em] text-thi">
            <LineReveal lines={[cs.title]} />
          </h1>
          <Reveal delay={0.25}>
            <p className="mt-6 max-w-[62ch] text-[clamp(1.05rem,1.45vw,1.25rem)] leading-relaxed text-tmid">
              {cs.premise}
            </p>
            <p className="mt-5 font-[family-name:var(--font-mono)] text-[0.82rem] tracking-[0.08em] text-tlo">
              {cs.client} · {cs.duration}
            </p>
          </Reveal>
        </div>
        <Reveal delay={0.35} className="mx-auto mt-12 w-full max-w-[1280px] px-5 md:px-10">
          <div className="overflow-hidden rounded-t-2xl border border-b-0 border-white/10">
            <CoverArt cs={cs} className="aspect-[16/6] w-full" />
          </div>
        </Reveal>
      </section>

      {/* outcomes band */}
      <section className="weave-panel border-y border-white/10">
        <div className="mx-auto grid w-full max-w-[1280px] grid-cols-1 sm:grid-cols-3">
          {cs.outcomes.map((o, i) => (
            <div
              key={o.label}
              className={`px-5 py-8 md:px-10 ${i > 0 ? "border-t border-white/10 sm:border-l sm:border-t-0" : ""}`}
            >
              <div className="font-[family-name:var(--font-mono)] text-[2rem] font-medium leading-tight text-azure-bright tnum">
                {o.value}
              </div>
              <div className="mt-1.5 text-[0.88rem] text-tlo">{o.label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* narrative */}
      <section className="weave-light on-light py-[clamp(4rem,8vw,7rem)]">
        <div className="mx-auto grid w-full max-w-[1280px] gap-14 px-5 md:px-10 lg:grid-cols-[1fr_340px]">
          <div className="max-w-[68ch]">
            <Reveal>
              <h2 className="font-[family-name:var(--font-mono)] text-[0.78rem] font-medium uppercase tracking-[0.16em] text-ice-deep">
                The challenge
              </h2>
              {cs.challenge.map((p) => (
                <p key={p.slice(0, 24)} className="mt-4 text-[1.02rem] leading-[1.75] text-lmid">
                  {p}
                </p>
              ))}
            </Reveal>
            <Reveal className="mt-12">
              <h2 className="font-[family-name:var(--font-mono)] text-[0.78rem] font-medium uppercase tracking-[0.16em] text-azure-deep">
                What we built
              </h2>
              {cs.solution.map((p) => (
                <p key={p.slice(0, 24)} className="mt-4 text-[1.02rem] leading-[1.75] text-lmid">
                  {p}
                </p>
              ))}
            </Reveal>

            {cs.quote && (
              <Reveal className="mt-12">
                <figure className="rounded-xl border-l-[3px] border-ice bg-ice/10 p-7">
                  <blockquote className="font-[family-name:var(--font-display)] text-[1.25rem] font-medium leading-relaxed text-lhi">
                    “{cs.quote.text}”
                  </blockquote>
                  <figcaption className="mt-4 text-[0.88rem] text-lmid">
                    — {cs.quote.role} · name withheld under NDA
                  </figcaption>
                </figure>
              </Reveal>
            )}
          </div>

          <aside>
            <Reveal className="rounded-xl border border-black/10 bg-white p-7 lg:sticky lg:top-28">
              <h3 className="text-lg font-semibold text-lhi">Engagement facts</h3>
              <dl className="mt-4 grid gap-3 text-[0.92rem]">
                <div>
                  <dt className="font-[family-name:var(--font-mono)] text-[0.7rem] uppercase tracking-[0.14em] text-llo">
                    Client
                  </dt>
                  <dd className="mt-0.5 text-lmid">{cs.client}</dd>
                </div>
                <div>
                  <dt className="font-[family-name:var(--font-mono)] text-[0.7rem] uppercase tracking-[0.14em] text-llo">
                    Duration
                  </dt>
                  <dd className="mt-0.5 text-lmid">{cs.duration}</dd>
                </div>
                <div>
                  <dt className="font-[family-name:var(--font-mono)] text-[0.7rem] uppercase tracking-[0.14em] text-llo">
                    Technology
                  </dt>
                  <dd className="mt-2 flex flex-wrap gap-2">
                    {cs.tech.map((t) => (
                      <span
                        key={t}
                        className="rounded border border-black/10 px-2.5 py-1 font-[family-name:var(--font-mono)] text-[0.75rem] text-lmid"
                      >
                        {t}
                      </span>
                    ))}
                  </dd>
                </div>
              </dl>
              <Link href="/contact" className="btn btn-primary mt-7 w-full">
                Build something like this
              </Link>
            </Reveal>
          </aside>
        </div>
      </section>

      {/* next case study */}
      <section className="weave-dark border-t border-white/10">
        <Link
          href={`/work/${next.slug}`}
          className="group mx-auto flex w-full max-w-[1280px] flex-wrap items-center justify-between gap-6 px-5 py-14 md:px-10"
        >
          <div>
            <p className="font-[family-name:var(--font-mono)] text-[0.75rem] uppercase tracking-[0.16em] text-tlo">
              Next case study
            </p>
            <p className="mt-2 text-[clamp(1.5rem,3vw,2.4rem)] font-semibold text-thi transition-colors group-hover:text-ice">
              {next.title}
            </p>
          </div>
          <span
            className="grid h-14 w-14 place-items-center rounded-full border border-white/15 text-xl text-tmid transition-all group-hover:border-ice group-hover:text-ice"
            aria-hidden
          >
            →
          </span>
        </Link>
      </section>

      <CTABand />
    </>
  );
}