ACVE/app/(public)/case-studies/page.tsx

"use client";

import Link from "next/link";
import { useState } from "react";
import { mockCaseStudies } from "@/lib/data/mockCaseStudies";
import type { CourseLevel } from "@/types/course";

const levelBadgeClass = (level: CourseLevel) => {
  if (level === "Beginner") return "bg-emerald-100 text-emerald-900 border border-emerald-200";
  if (level === "Intermediate") return "bg-sky-100 text-sky-900 border border-sky-200";
  return "bg-violet-100 text-violet-900 border border-violet-200";
};

export default function CaseStudiesPage() {
  const [activeSlug, setActiveSlug] = useState(mockCaseStudies[0]?.slug ?? "");
  const activeCase = mockCaseStudies.find((item) => item.slug === activeSlug) ?? mockCaseStudies[0];

  return (
    <div className="acve-page">
      <section className="acve-panel acve-section-base">
        <div className="flex flex-wrap items-center justify-between gap-4">
          <div>
            <p className="acve-pill mb-3 w-fit">Case Studies</p>
            <h1 className="text-3xl font-semibold leading-tight text-[#202936] md:text-4xl">Landmark Cases, distilled for learning</h1>
            <p className="mt-2 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg">
              Review outcomes, legal terms, and practical context in a cleaner, high-density reading layout.
            </p>
          </div>
          <div className="rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-600">
            <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Library</p>
            <p className="mt-1 text-xl font-semibold text-slate-900">{mockCaseStudies.length} cases</p>
          </div>
        </div>
      </section>

      <section className="grid gap-4 lg:grid-cols-[0.9fr_1.7fr]">
        <aside className="acve-panel p-3">
          <p className="mb-3 px-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Browse Cases</p>
          <div className="space-y-2">
          {mockCaseStudies.map((caseStudy) => {
            const isActive = caseStudy.slug === activeCase.slug;
            return (
              <button
                key={caseStudy.slug}
                className={`w-full rounded-xl border p-3 text-left transition ${
                  isActive ? "border-brand bg-white shadow-sm" : "border-slate-200 bg-white hover:border-slate-400"
                }`}
                onClick={() => setActiveSlug(caseStudy.slug)}
                type="button"
              >
                <h2 className="text-lg font-semibold leading-tight text-[#232b39] md:text-xl">{caseStudy.title}</h2>
                <p className="mt-1 text-sm text-slate-500 md:text-base">
                  [{caseStudy.year}] {caseStudy.citation}
                </p>
                <div className="mt-2 flex items-center gap-2 text-xs">
                  <span className="rounded-full bg-slate-100 px-2 py-1 text-slate-700">{caseStudy.topic}</span>
                  <span className={`rounded-full px-2 py-1 font-semibold ${levelBadgeClass(caseStudy.level)}`}>{caseStudy.level}</span>
                </div>
              </button>
            );
          })}
          </div>
        </aside>

        <article className="acve-panel p-5 md:p-6">
          <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
            <div>
              <h2 className="text-3xl font-semibold leading-tight text-[#202936] md:text-4xl">{activeCase.title}</h2>
              <p className="mt-2 text-base text-slate-500 md:text-xl">
                {activeCase.citation} | {activeCase.year}
              </p>
            </div>
            <div className="space-y-2 text-right text-xs">
              <p className={`rounded-full px-3 py-1 font-semibold ${levelBadgeClass(activeCase.level)}`}>{activeCase.level}</p>
              <p className="rounded-full bg-slate-100 px-3 py-1 text-slate-700">{activeCase.topic}</p>
            </div>
          </div>

          <section className="border-t border-slate-200 pt-4">
            <h3 className="text-2xl font-semibold text-[#232b39]">Case Summary</h3>
            <p className="mt-2 text-base leading-relaxed text-slate-700 md:text-lg">{activeCase.summary}</p>
          </section>

          <section className="mt-5">
            <h3 className="mb-3 text-2xl font-semibold text-[#232b39]">Key Legal Terms Explained</h3>
            <div className="grid gap-3 sm:grid-cols-2">
              {activeCase.keyTerms.map((term) => (
                <div key={term} className="rounded-xl border border-slate-200 bg-[#faf8f8] p-4">
                  <p className="text-lg font-semibold text-brand">{term}</p>
                  <p className="mt-1 text-sm text-slate-600">Detailed explanation will expand in phase 2 content.</p>
                </div>
              ))}
            </div>
          </section>

          <Link className="acve-button-secondary mt-6 inline-flex px-4 py-2 text-sm font-semibold hover:bg-brand-soft" href={`/case-studies/${activeCase.slug}`}>
            Open detail page
          </Link>
        </article>
      </section>
    </div>
  );
}