import type { Metadata } from "next";
import { MultiStepForm } from "@/components/MultiStepForm";
import { Card, CardContent } from "@/components/ui/card";
import { Mail, Phone, MapPin } from "lucide-react";

export const metadata: Metadata = {
  title: "Contact Us - Biohazard VFX",
  description: "Get in touch with Biohazard VFX to discuss your project. Fill out our smart contact form to get started quickly.",
  alternates: {
    canonical: "/contact",
  },
};

export default function ContactPage() {
  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">
            Let&apos;s Work Together
          </h1>
          <p className="text-lg text-muted-foreground sm:text-xl">
            Ready to bring your vision to life? Fill out the form below and we&apos;ll get back to you within 24 hours.
          </p>
        </div>
      </section>

      {/* Contact Form Section */}
      <section className="container pb-16">
        <MultiStepForm />
      </section>

      {/* Contact Information */}
      <section className="container pb-24">
        <div className="grid gap-6 sm:grid-cols-3 max-w-4xl mx-auto">
          <Card>
            <CardContent className="flex flex-col items-center gap-2 pt-6 text-center">
              <Mail className="h-8 w-8 text-primary" />
              <h3 className="font-semibold">Email</h3>
              <p className="text-sm text-muted-foreground">
                info@biohazardvfx.com
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="flex flex-col items-center gap-2 pt-6 text-center">
              <Phone className="h-8 w-8 text-primary" />
              <h3 className="font-semibold">Phone</h3>
              <p className="text-sm text-muted-foreground">
                +1 (555) 123-4567
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="flex flex-col items-center gap-2 pt-6 text-center">
              <MapPin className="h-8 w-8 text-primary" />
              <h3 className="font-semibold">Location</h3>
              <p className="text-sm text-muted-foreground">
                Los Angeles, CA
              </p>
            </CardContent>
          </Card>
        </div>
      </section>
    </>
  );
}

