import Link from "next/link";

const tools = [
  { id: "open-webui", label: "Open WebUI" },
  { id: "netron", label: "Netron" },
  { id: "chunkviz", label: "ChunkViz" },
  { id: "embedding-atlas", label: "Embedding Atlas" },
  { id: "unsloth", label: "Unsloth Studio" },
  { id: "promptfoo", label: "Promptfoo" },
  { id: "wetty", label: "Lab 3 Terminal" },
] as const;

export default function AppsIndexPage() {
  return (
    <main className="mx-auto w-full max-w-5xl px-6 py-10">
      <section className="rounded-xl border border-[#f6d5a5] bg-white p-8 shadow-sm">
        <h1 className="mb-3 text-3xl font-bold text-[#004E78]">Lab Tools</h1>
        <p className="max-w-3xl text-slate-700">
          Launch the courseware services full-screen under the same URL.
        </p>
      </section>

      <section className="mt-8 grid gap-4 md:grid-cols-2">
        {tools.map((tool) => (
          <Link
            key={tool.id}
            href={tool.id === "wetty" ? "/apps/wetty" : `/apps/${tool.id}`}
            className="block rounded-lg border border-slate-200 bg-white p-5 transition hover:border-[#F89C27] hover:shadow-sm"
          >
            <h2 className="text-lg font-semibold text-[#004E78]">
              {tool.label}
            </h2>
            <p className="mt-2 text-sm text-slate-600">
              Open full-screen
            </p>
          </Link>
        ))}
      </section>
    </main>
  );
}

