import type { Metadata } from "next";
import { MasonryGrid } from "@/components/MasonryGrid";
import { projects } from "@/data/projects";

export const metadata: Metadata = {
  title: "Portfolio - Biohazard VFX",
  description: "Explore our portfolio of visual effects work including film, television, commercials, and digital media projects.",
  alternates: {
    canonical: "/portfolio",
  },
};

export default function PortfolioPage() {
  return (
    <>
      {/* Hero Section */}
      <section className="container py-24 text-center">
        <div className="space-y-4 max-w-4xl mx-auto">
          <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl">
            Our Portfolio
          </h1>
          <p className="text-lg text-muted-foreground sm:text-xl">
            A showcase of our visual effects work across film, television, commercials, and digital media.
          </p>
        </div>
      </section>

      {/* Portfolio Grid */}
      <section className="container pb-24">
        <MasonryGrid projects={projects} />
      </section>
    </>
  );
}