import type { Metadata } from "next";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { ServiceCard } from "@/components/ServiceCard";
import { Separator } from "@/components/ui/separator";
import { services } from "@/data/services";

export const metadata: Metadata = {
  title: "Our Services - Biohazard VFX",
  description: "Explore our comprehensive VFX services including visual effects, motion graphics, compositing, 3D animation, simulation, and color grading.",
  alternates: {
    canonical: "/services",
  },
};

export default function ServicesPage() {
  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 Services
          </h1>
          <p className="text-lg text-muted-foreground sm:text-xl">
            Comprehensive visual effects solutions tailored to your creative vision and production needs.
          </p>
        </div>
      </section>

      {/* Services Grid */}
      <section className="container pb-16">
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {services.map((service) => (
            <ServiceCard key={service.id} service={service} />
          ))}
        </div>
      </section>

      <Separator className="container" />

      {/* Process Section */}
      <section className="container py-16">
        <div className="space-y-4 text-center mb-12">
          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl">
            Our Process
          </h2>
          <p className="mx-auto max-w-2xl text-muted-foreground">
            A streamlined workflow designed for efficiency and excellence
          </p>
        </div>
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
          <div className="space-y-2">
            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary text-primary-foreground text-xl font-bold">
              1
            </div>
            <h3 className="text-xl font-bold">Discovery</h3>
            <p className="text-muted-foreground">
              We start by understanding your project goals, creative vision, and technical requirements.
            </p>
          </div>
          <div className="space-y-2">
            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary text-primary-foreground text-xl font-bold">
              2
            </div>
            <h3 className="text-xl font-bold">Planning</h3>
            <p className="text-muted-foreground">
              Detailed planning, concept development, and establishing workflows for your specific needs.
            </p>
          </div>
          <div className="space-y-2">
            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary text-primary-foreground text-xl font-bold">
              3
            </div>
            <h3 className="text-xl font-bold">Production</h3>
            <p className="text-muted-foreground">
              Expert execution of VFX work with regular updates and collaborative feedback loops.
            </p>
          </div>
          <div className="space-y-2">
            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary text-primary-foreground text-xl font-bold">
              4
            </div>
            <h3 className="text-xl font-bold">Delivery</h3>
            <p className="text-muted-foreground">
              Final review, revisions, and delivery in your required formats and specifications.
            </p>
          </div>
        </div>
      </section>

      <Separator className="container" />

      {/* CTA Section */}
      <section className="container py-16">
        <div className="text-center space-y-6 max-w-3xl mx-auto">
          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl">
            Ready to Start Your Project?
          </h2>
          <p className="text-lg text-muted-foreground">
            Let&apos;s discuss how our services can bring your creative vision to life. Contact us today for a consultation.
          </p>
          <div className="flex flex-col gap-4 sm:flex-row justify-center">
            <Button asChild size="lg">
              <Link href="/contact">Get in Touch</Link>
            </Button>
            <Button asChild size="lg" variant="outline">
              <Link href="/portfolio">View Our Work</Link>
            </Button>
          </div>
        </div>
      </section>
    </>
  );
}

