import type { Metadata } from "next";
import { PROJECTS } from "@/lib/projects-data";
import { Reveal } from "@/components/ui/reveal";
import { ProjectCard } from "@/components/case-studies/project-card";

export const metadata: Metadata = {
  title: "Case Studies",
  description:
    "Recent web, mobile, and platform projects delivered by Soodogrowth Technologies.",
};

export default function CaseStudiesPage() {
  return (
    <div className="mx-auto max-w-shell px-6 py-16 lg:px-8 lg:py-20">
      <Reveal>
        <div className="max-w-2xl">
          <p className="font-mono text-[13px] text-signal">Case studies</p>
          <h1 className="mt-3 font-display text-3xl font-semibold text-paper lg:text-4xl">
            Built, shipped, and live.
          </h1>
          <p className="mt-4 text-paper-2">
            A selection of recent projects across care services, healthcare,
            transportation, energy, and IT.
          </p>
        </div>
      </Reveal>

      <div className="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {PROJECTS.map((project, i) => (
          <Reveal key={project.name} delay={i * 0.06}>
            <ProjectCard project={project} />
          </Reveal>
        ))}
      </div>
    </div>
  );
}