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

export const metadata: Metadata = {
  title: "Services",
  description:
    "Explore Aureva Studio services including residential interiors, villa interiors, office interiors, retail design, architecture planning, modular kitchens, renovation, turnkey execution, and 3D visualization.",
};

export default function ServicesPage() {
  return (
    <>
      <section className="bg-ivory pt-36 md:pt-44">
        <div className="luxury-container pb-16">
          <AnimatedSection>
            <SectionHeader
              eyebrow="Services"
              title="Premium design services for homes, villas, offices, retail, hospitality, and architecture."
              copy="Select a focused design service or let Aureva Studio manage your full journey from concept to completion."
            />
          </AnimatedSection>
        </div>
      </section>

      <section className="section-y marble-surface pt-0">
        <div className="luxury-container grid gap-6 md:grid-cols-2 xl:grid-cols-3">
          {services.map((service, index) => (
            <ServiceCard key={service.title} service={service} index={index} />
          ))}
        </div>
      </section>

      <CTASection title="Need help choosing the right service for your property?" />
    </>
  );
}