import { notFound } from "next/navigation";
import Link from "next/link";
import { Shell } from "@/components/Shell";
import { playbook } from "@content/playbook";

export function generateStaticParams() { return playbook.map((p) => ({ slug: p.slug })); }

export default async function ServicePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const s = playbook.find((p) => p.slug === slug);
  if (!s) notFound();
  return (
    <Shell>
      <section className="grain bg-ink text-white">
        <div className="mx-auto max-w-7xl px-5 py-16">
          <p className="eyebrow text-white/60"><Link href="/playbook" className="hover:text-white">Playbook</Link> · {s.discipline}</p>
          <h1 className="display mt-3">{s.name}</h1>
          <p className="serif-i mt-4 text-3xl text-white/85">{s.tagline}</p>
        </div>
      </section>
      <section className="mx-auto max-w-7xl px-5 py-12 grid gap-12 lg:grid-cols-[2fr_1fr]">
        <div>
          <p className="text-xl leading-relaxed max-w-3xl">{s.description}</p>
          <h2 className="eyebrow mt-12 mb-4">How we deliver it</h2>
          <ol className="grid gap-3 md:grid-cols-2">
            {s.phases.map((ph, i) => (
              <li key={ph.name} className="card p-5">
                <p className="eyebrow">Phase {i + 1}</p>
                <p className="text-lg font-medium mt-1">{ph.name}</p>
                <p className="text-sm text-ink/70 mt-2">{ph.description}</p>
                <p className="text-xs text-mist mt-3">Outputs: {ph.outputs.join(" · ")}</p>
              </li>
            ))}
          </ol>
        </div>
        <aside className="space-y-8">
          <div><h3 className="eyebrow mb-3">When to use it</h3><ul className="space-y-1.5 text-sm">{s.whenToUse.map((w) => <li key={w} className="flex gap-2"><span className="text-soul">■</span>{w}</li>)}</ul></div>
          <div><h3 className="eyebrow mb-3">Typical team</h3><div className="flex flex-wrap gap-1.5">{s.team.map((t) => <span key={t} className="chip">{t}</span>)}</div></div>
          <div><h3 className="eyebrow mb-3">Duration</h3><p className="text-sm">{s.typicalDuration}</p></div>
          <div><h3 className="eyebrow mb-3">Tools</h3><div className="flex flex-wrap gap-1.5">{s.tools.map((t) => <span key={t} className="chip">{t}</span>)}</div></div>
          <Link href={`/find?q=${encodeURIComponent(s.name + " " + s.team.join(" "))}`} className="btn btn-soul">Find people for this →</Link>
        </aside>
      </section>
    </Shell>
  );
}