import Link from "next/link";
import { modules } from "@/lib/modules";

export default function Home() {
  const beschikbareModules = modules.filter((m) => m.beschikbaar);

  return (
    <div className="p-8 max-w-4xl mx-auto">
      <div className="mb-10">
        <h1 className="text-3xl font-bold text-slate-900 mb-2">Welkom bij Notary.AI</h1>
        <p className="text-slate-500 text-lg">
          Selecteer een module om aan de slag te gaan.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {modules.map((module) => (
          <div
            key={module.id}
            className={`rounded-xl border bg-white p-6 shadow-sm transition-shadow ${
              module.beschikbaar
                ? "hover:shadow-md cursor-pointer"
                : "opacity-50 cursor-not-allowed"
            }`}
          >
            {module.beschikbaar ? (
              <Link href={module.href} className="block">
                <ModuleCard module={module} />
              </Link>
            ) : (
              <ModuleCard module={module} />
            )}
          </div>
        ))}
      </div>

      <div className="mt-12 p-4 bg-amber-50 border border-amber-200 rounded-lg">
        <p className="text-sm text-amber-800">
          <strong>Opgelet:</strong> De tarieven en regels in deze applicatie zijn ter indicatie.
          Controleer steeds de actuele wetgeving en de relevante gewestelijke codex voordat u een dossier afsluit.
        </p>
      </div>
    </div>
  );
}

function ModuleCard({ module }: { module: (typeof modules)[0] }) {
  return (
    <>
      <div className="text-3xl mb-3">{module.icoon}</div>
      <h2 className="text-xl font-semibold text-slate-900 mb-1">{module.titel}</h2>
      <p className="text-slate-500 text-sm">{module.beschrijving}</p>
      {!module.beschikbaar && (
        <span className="mt-3 inline-block text-xs bg-slate-100 text-slate-500 px-2 py-1 rounded-full">
          Binnenkort beschikbaar
        </span>
      )}
    </>
  );
}