import type { Metadata } from "next";
import { getPayload } from "payload";
import config from "@payload-config";
import { GridOverlay } from "@/components/site";
import { ProjectsGrid } from "@/components/site/ProjectsGrid";

export const metadata: Metadata = {
  title: "Projects",
  description:
    "A curated selection of industrial infrastructure, research platforms, and independent consultancy projects engineered for high-performance environments.",
};
export const dynamic = "force-dynamic";

export default async function ProjectsIndexPage() {
  const payload = await getPayload({ config });

  const { docs: projects } = await payload.find({
    collection: "projects",
    sort: "sortOrder,-year",
    limit: 100,
    depth: 1,
  });

  return (
    <main>
      {/* Hero */}
      <header className="relative overflow-hidden pb-20 pt-16">
        <GridOverlay opacity={0.1} />
        <div className="relative z-10 mx-auto max-w-7xl px-6">
          <div className="max-w-2xl">
            <div className="mb-6 inline-flex items-center gap-2">
              <span className="h-px w-12 bg-primary" />
              <span className="label-sm uppercase tracking-[0.2em] text-primary">
                02 // PROJECTS
              </span>
            </div>
            <h1 className="display-lg mb-8 leading-[0.9] tracking-tighter text-on-surface">
              TECHNICAL
              <br />
              <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                ARCHITECTURES.
              </span>
            </h1>
            <p className="body-lg max-w-lg leading-relaxed text-on-surface-variant">
              A curated selection of industrial infrastructure, research
              platforms, and independent consultancy projects engineered for
              high-performance environments.
            </p>
          </div>
        </div>
      </header>

      {/* Grid with client-side filter */}
      <section className="mx-auto max-w-7xl px-6 pb-32">
        <ProjectsGrid projects={projects} />
      </section>
    </main>
  );
}
