import Link from "next/link";
import { mockPracticeModules } from "@/lib/data/mockPractice";

export default function PracticePage() {
  return (
    <div className="acve-page">
      <section className="acve-panel acve-section-base">
        <div className="grid gap-4 md:grid-cols-[1.5fr_0.9fr]">
          <div>
            <p className="acve-pill mb-3 w-fit">Practice and Exercises</p>
            <h1 className="text-3xl font-semibold leading-tight text-[#222a38] md:text-4xl">Build confidence through short practice sessions</h1>
            <p className="mt-3 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg">
              Train legal vocabulary, clause analysis, and case reasoning with quick modules you can complete in minutes.
            </p>
          </div>
          <div className="rounded-2xl border border-slate-200 bg-slate-50 p-4">
            <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Practice Overview</p>
            <p className="mt-2 text-2xl font-semibold text-slate-900">{mockPracticeModules.length} modules</p>
            <p className="mt-2 text-sm text-slate-600">Interactive now: {mockPracticeModules.filter((item) => item.isInteractive).length}</p>
            <p className="text-sm text-slate-600">Coming soon: {mockPracticeModules.filter((item) => !item.isInteractive).length}</p>
          </div>
        </div>
      </section>

      <section className="grid gap-4 md:grid-cols-3">
        {mockPracticeModules.map((module, index) => (
          <Link
            key={module.slug}
            href={`/practice/${module.slug}`}
            className={`rounded-2xl border p-5 shadow-sm transition hover:-translate-y-0.5 ${
              index === 0 ? "border-brand bg-white" : "border-slate-200 bg-white hover:border-slate-300"
            }`}
          >
            <div className="mb-2 flex items-center justify-between">
              <div className="text-2xl text-brand">{index === 0 ? "A/" : index === 1 ? "[]" : "O"}</div>
              <span className="rounded-full border border-slate-200 bg-slate-50 px-2 py-1 text-xs font-semibold text-slate-600">
                {module.questions?.length ? `${module.questions.length} questions` : "Scaffolded"}
              </span>
            </div>
            <h2 className="text-2xl leading-tight text-[#222a38]">{module.title}</h2>
            <p className="mt-2 text-base leading-relaxed text-slate-600">{module.description}</p>
            <p className="mt-4 text-xs font-semibold uppercase tracking-wide text-slate-500">
              {module.isInteractive ? "Interactive now" : "Coming soon"}
            </p>
          </Link>
        ))}
      </section>

      <section className="acve-panel p-4 text-center">
        <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
          Open a module to start the full interactive flow
        </p>
      </section>
    </div>
  );
}