import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import PageHero from "@/components/site/PageHero";
import ServiceIcon from "@/components/site/ServiceIcon";
import WorkCard from "@/components/site/WorkCard";
import CTABand from "@/components/site/CTABand";
import { Reveal } from "@/components/motion/Reveal";
import { services, getService } from "@/lib/content/services";
import { getCaseStudy } from "@/lib/content/work";

export function generateStaticParams() {
  return services.map((s) => ({ slug: s.slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const service = getService(slug);
  if (!service) return {};
  return {
    title: service.name,
    description: service.summary,
    alternates: { canonical: `/services/${service.slug}` },
  };
}

export default async function ServiceDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const service = getService(slug);
  if (!service) notFound();

  const related = service.relatedWork
    .map(getCaseStudy)
    .filter((c): c is NonNullable<typeof c> => Boolean(c))
    .slice(0, 2);

  return (
    <>
      <PageHero
        eyebrow={`Services · ${service.short}`}
        titleLines={service.name.split(" & ").map((part, i, arr) => (i < arr.length - 1 ? `${part} &` : part))}
        lede={service.heroLede}
      >
        <Reveal delay={0.4} className="mt-9 flex flex-wrap gap-4">
          <Link href="/contact" className="btn btn-primary">
            Scope this with us <span className="arrow" aria-hidden>→</span>
          </Link>
          <Link href="/work" className="btn btn-ghost-dark">
            Related work
          </Link>
        </Reveal>
      </PageHero>

      {/* stats band */}
      <section className="weave-panel border-b border-white/10">
        <div className="mx-auto grid w-full max-w-[1280px] grid-cols-1 sm:grid-cols-3">
          {service.stats.map((s, i) => (
            <div
              key={s.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-3xl font-medium leading-tight text-azure-bright tnum">
                {s.value}
              </div>
              <div className="mt-1.5 text-[0.88rem] text-tlo">{s.label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* narrative sections */}
      <section className="weave-light on-light py-[clamp(4rem,8vw,7rem)]">
        <div className="mx-auto w-full max-w-[1280px] px-5 md:px-10">
          <div className="grid gap-14 lg:grid-cols-[1fr_360px]">
            <div className="max-w-[68ch]">
              {service.sections.map((sec, i) => (
                <Reveal key={sec.heading} delay={i === 0 ? 0 : 0.05} className={i > 0 ? "mt-14" : ""}>
                  <h2 className="text-[clamp(1.5rem,2.4vw,2.1rem)] font-semibold text-lhi">
                    {sec.heading}
                  </h2>
                  <p className="mt-4 text-[1.02rem] leading-[1.75] text-lmid">{sec.body}</p>
                </Reveal>
              ))}
            </div>

            <aside className="lg:pt-2">
              <Reveal className="rounded-xl border border-black/10 bg-white p-7">
                <ServiceIcon name={service.icon} className="h-11 w-11 text-azure-deep" />
                <h3 className="mt-4 text-lg font-semibold text-lhi">What you get</h3>
                <ul className="mt-4 grid gap-2.5">
                  {service.deliverables.map((d) => (
                    <li key={d} className="flex items-baseline gap-2.5 text-[0.92rem] text-lmid">
                      <span className="text-[0.72rem] text-azure" aria-hidden>
                        ▸
                      </span>
                      {d}
                    </li>
                  ))}
                </ul>
                <p className="mt-6 border-t border-dashed border-black/10 pt-4 font-[family-name:var(--font-mono)] text-[0.72rem] uppercase tracking-[0.14em] text-llo">
                  {service.meta}
                </p>
                <Link href="/contact" className="btn btn-primary mt-6 w-full">
                  Request a proposal
                </Link>
              </Reveal>
            </aside>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="weave-panel border-t border-white/10 py-[clamp(4rem,8vw,7rem)]">
        <div className="mx-auto w-full max-w-[1280px] px-5 md:px-10">
          <Reveal>
            <p className="eyebrow">Questions we hear</p>
            <h2 className="mt-4 text-[clamp(1.9rem,3.2vw,2.8rem)] font-semibold text-thi">
              Asked before every {service.short.toLowerCase()} engagement.
            </h2>
          </Reveal>
          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {service.faq.map((f, i) => (
              <Reveal
                key={f.q}
                delay={i * 0.07}
                as="div"
                className="rounded-xl border border-white/10 bg-ink-2 p-7"
              >
                <h3 className="text-[1.05rem] font-semibold text-thi">{f.q}</h3>
                <p className="mt-3 text-[0.93rem] leading-relaxed text-tmid">{f.a}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* related work */}
      {related.length > 0 && (
        <section className="weave-dark py-[clamp(4rem,8vw,7rem)]">
          <div className="mx-auto w-full max-w-[1280px] px-5 md:px-10">
            <Reveal>
              <p className="eyebrow">Proof</p>
              <h2 className="mt-4 text-[clamp(1.9rem,3.2vw,2.8rem)] font-semibold text-thi">
                This practice, in production.
              </h2>
            </Reveal>
            <div className="mt-12 grid gap-7 lg:grid-cols-2">
              {related.map((cs) => (
                <Reveal key={cs.slug} as="div">
                  <WorkCard cs={cs} />
                </Reveal>
              ))}
            </div>
          </div>
        </section>
      )}

      <CTABand />
    </>
  );
}