"use client";

import Link from "next/link";
import { useParams } from "next/navigation";
import { getCaseStudyBySlug } from "@/lib/data/mockCaseStudies";

export default function CaseStudyDetailPage() {
  const params = useParams<{ slug: string }>();
  const caseStudy = getCaseStudyBySlug(params.slug);

  if (!caseStudy) {
    return (
      <div className="acve-panel p-6">
        <h1 className="text-2xl font-bold text-slate-900">Case study not found</h1>
        <p className="mt-2 text-slate-600">The requested case study slug does not exist in mock data.</p>
        <Link className="acve-button-primary mt-4 inline-flex px-4 py-2 text-sm font-semibold" href="/case-studies">
          Back to case studies
        </Link>
      </div>
    );
  }

  return (
    <article className="acve-panel space-y-6 p-6">
      <header className="space-y-2">
        <p className="text-lg text-slate-500">
          {caseStudy.citation} ({caseStudy.year})
        </p>
        <h1 className="acve-heading text-3xl md:text-6xl">{caseStudy.title}</h1>
        <p className="text-base text-slate-600 md:text-2xl">
          Topic: {caseStudy.topic} | Level: {caseStudy.level}
        </p>
      </header>

      <section>
        <h2 className="text-2xl text-[#232b39] md:text-4xl">Summary</h2>
        <p className="mt-2 text-lg leading-relaxed text-slate-700 md:text-3xl">{caseStudy.summary}</p>
      </section>

      <section>
        <h2 className="text-2xl text-[#232b39] md:text-4xl">Key legal terms explained</h2>
        <div className="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {caseStudy.keyTerms.map((term, index) => (
            <div key={term} className="rounded-xl border-l-4 border-accent bg-[#faf8f8] p-4">
              <p className="text-xl font-semibold text-brand md:text-3xl">{term}</p>
              <p className="mt-1 text-base text-slate-600 md:text-xl">Legal explanation block {index + 1}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="border-t border-slate-200 pt-5">
        <Link className="acve-button-secondary inline-flex px-4 py-2 text-sm font-semibold hover:bg-brand-soft" href="/case-studies">
          Back to Case Library
        </Link>
      </section>
    </article>
  );
}