import type { Metadata } from "next";
import { AnimatedSection } from "@/components/ui/AnimatedSection";
import { SectionHeader } from "@/components/ui/SectionHeader";
import { PortfolioGrid } from "@/components/sections/PortfolioGrid";
import { CTASection } from "@/components/sections/CTASection";
import { projects } from "@/data/content";

export const metadata: Metadata = {
  title: "Projects",
  description:
    "View Aureva Studio portfolio projects across luxury homes, villas, apartments, offices, retail spaces, hospitality interiors, renovations, and architecture planning.",
};

export default function ProjectsPage() {
  return (
    <>
      <section className="bg-ivory pt-36 md:pt-44">
        <div className="luxury-container pb-16">
          <AnimatedSection>
            <SectionHeader
              eyebrow="Projects / Portfolio"
              title="Premium spaces designed for lifestyle, business, and lasting impression."
              copy="Filter through homes, villas, apartments, offices, retail spaces, hospitality, renovations, and architecture concepts."
            />
          </AnimatedSection>
        </div>
      </section>

      <section className="section-y marble-surface pt-0">
        <div className="luxury-container">
          <PortfolioGrid projects={projects} />
        </div>
      </section>

      <CTASection title="Want a similar design mood for your own space?" />
    </>
  );
}