import Link from "next/link";

import { getLabSummaries } from "~/lib/labs";

export default function HomePage() {
  const labs = getLabSummaries();

  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]">
          Open Security Labs
        </h1>
        <p className="max-w-3xl text-slate-700">
          Markdown-first lab workspace for Open Security notebook conversions.
        </p>
        <div className="mt-6 flex flex-wrap gap-3">
          <Link
            href="/labs"
            className="inline-flex items-center rounded-md bg-[#004E78] px-4 py-2 text-sm font-semibold text-white hover:bg-[#003a5a]"
          >
            Browse all labs
          </Link>
          <Link
            href="https://discord.gg/Ma9UZNBxvh"
            className="inline-flex items-center rounded-md border border-[#F89C27] px-4 py-2 text-sm font-semibold text-[#004E78] hover:bg-[#F89C27] hover:text-white"
          >
            Open Security Discord
          </Link>
        </div>
      </section>

      <section className="mt-8">
        <h2 className="mb-4 text-xl font-semibold text-[#004E78]">All Labs</h2>
        <div className="grid gap-4 md:grid-cols-2">
          {labs.map((lab) => (
            <Link
              key={lab.slug}
              href={`/labs/${lab.slug}`}
              className="block rounded-lg border border-slate-200 bg-white p-5 transition hover:border-[#F89C27] hover:shadow-sm"
            >
              <h3 className="text-lg font-semibold text-[#004E78]">
                {lab.title}
              </h3>
              {lab.description ? (
                <p className="mt-2 text-sm text-slate-600">{lab.description}</p>
              ) : null}
            </Link>
          ))}
        </div>
      </section>
    </main>
  );
}