import type { Metadata } from "next";
import Filmography from "@/components/Filmography";
import ProjectCard from "@/components/ProjectCard";
import Reveal from "@/components/Reveal";
import SectionLabel from "@/components/SectionLabel";
import { projects } from "@/content/site";

export const metadata: Metadata = {
  title: "Work",
  description: "Selected visual effects work by Two Tales VFX across series, film, commercials and animation.",
};

export default function WorkPage() {
  return (
    <div className="mx-auto max-w-7xl px-5 pt-36 pb-24 md:px-8 md:pt-48 md:pb-36">
      <SectionLabel index="—">Work</SectionLabel>
      <h1 className="font-display text-6xl leading-[0.9] font-thin uppercase md:text-9xl">
        Selected <span className="font-light">work</span>
      </h1>
      <section id="filmography" className="mt-20">
        <SectionLabel index="—">Filmography</SectionLabel>
        <Filmography />
      </section>

      <section id="projects" className="mt-32 border-t border-line pt-20 md:mt-44">
        <SectionLabel index="—">Projects</SectionLabel>
        <div className="grid gap-x-8 gap-y-16 md:grid-cols-2">
          {projects.map((p, i) => (
            <Reveal key={p.slug} delay={(i % 2) * 120}>
              <ProjectCard project={p} />
            </Reveal>
          ))}
        </div>
      </section>
    </div>
  );
}