export const dynamic = "force-dynamic";
export const revalidate = 0;

export default function LabPlaceholder() {
  return (
    <main className="min-h-screen bg-white relative">
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -top-40 -left-40 h-[520px] w-[520px] rounded-full bg-black/5 blur-3xl" />
        <div className="absolute -bottom-40 -right-40 h-[520px] w-[520px] rounded-full bg-black/5 blur-3xl" />
      </div>

      <div className="relative mx-auto max-w-6xl px-6 py-10">
        <h1 className="text-4xl md:text-5xl font-semibold tracking-tight text-black/90">
          Lab
        </h1>
        <p className="mt-3 text-black/70 max-w-2xl leading-relaxed">
          Dashboard shell comes next: metrics row + services list + topology, with
          “Hide IP/Ports” default ON.
        </p>

        <div className="mt-8 rounded-3xl glass specular p-6">
          <div className="text-sm font-semibold text-black/85">Status</div>
          <div className="mt-2 text-sm text-black/70 leading-relaxed">
            Coming online after UI + read-only container discovery is wired.
          </div>
        </div>

        <div className="mt-10">
          <a
            className="rounded-3xl border border-black/15 px-5 py-3 text-sm font-medium hover:border-black/30 transition"
            href="/"
          >
            Back
          </a>
        </div>
      </div>
    </main>
  );
}