import type { Metadata } from "next";
import Image from "next/image";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { Badge } from "@/components/ui/badge";
import { Users, Target, Lightbulb, Trophy } from "lucide-react";

export const metadata: Metadata = {
  title: "About Us - Biohazard VFX",
  description: "Learn about Biohazard VFX, our origins, team, and capabilities in creating world-class visual effects.",
  alternates: {
    canonical: "/about",
  },
};

export default function AboutPage() {
  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">
            About Biohazard VFX
          </h1>
          <p className="text-lg text-muted-foreground sm:text-xl">
            A studio born from passion, driven by innovation, and committed to excellence in visual storytelling.
          </p>
        </div>
      </section>

      {/* Origin Story Section */}
      <section className="container py-16">
        <div className="grid gap-12 lg:grid-cols-2 lg:gap-16">
          <div className="space-y-4">
            <h2 className="text-3xl font-bold tracking-tighter">Our Story</h2>
            <div className="space-y-4 text-muted-foreground">
              <p>
                Founded in 2015, Biohazard VFX emerged from a simple belief: that visual effects should not just enhance a story, but elevate it to new heights. What started as a small collective of passionate artists has grown into a full-service VFX studio trusted by filmmakers and brands worldwide.
              </p>
              <p>
                Our journey began with a handful of independent film projects, where we learned the importance of collaboration, creativity, and technical excellence. Each project taught us something new, pushing us to explore the boundaries of what&apos;s possible in visual storytelling.
              </p>
              <p>
                Today, we&apos;re proud to work on feature films, television series, commercials, and digital content that reaches millions of viewers. But our core mission remains unchanged: to create extraordinary visual experiences that captivate and inspire.
              </p>
            </div>
          </div>
          <div className="relative aspect-video lg:aspect-square">
            <Image
              src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800&q=80"
              alt="Biohazard VFX team at work"
              fill
              className="rounded-lg object-cover"
              loading="lazy"
            />
          </div>
        </div>
      </section>

      <Separator className="container" />

      {/* Values 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 Values
          </h2>
          <p className="mx-auto max-w-2xl text-muted-foreground">
            The principles that guide everything we do
          </p>
        </div>
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          <Card>
            <CardHeader>
              <Lightbulb className="h-8 w-8 text-primary mb-2" />
              <CardTitle>Innovation</CardTitle>
              <CardDescription>
                Constantly pushing the boundaries of what&apos;s possible with cutting-edge techniques and creative problem-solving.
              </CardDescription>
            </CardHeader>
          </Card>
          <Card>
            <CardHeader>
              <Users className="h-8 w-8 text-primary mb-2" />
              <CardTitle>Collaboration</CardTitle>
              <CardDescription>
                Working closely with our clients as partners to bring their creative visions to life.
              </CardDescription>
            </CardHeader>
          </Card>
          <Card>
            <CardHeader>
              <Trophy className="h-8 w-8 text-primary mb-2" />
              <CardTitle>Excellence</CardTitle>
              <CardDescription>
                Delivering the highest quality work on every project, regardless of size or budget.
              </CardDescription>
            </CardHeader>
          </Card>
          <Card>
            <CardHeader>
              <Target className="h-8 w-8 text-primary mb-2" />
              <CardTitle>Precision</CardTitle>
              <CardDescription>
                Meticulous attention to detail ensures every frame meets our exacting standards.
              </CardDescription>
            </CardHeader>
          </Card>
        </div>
      </section>

      <Separator className="container" />

      {/* Capabilities 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">
            Technical Capabilities
          </h2>
          <p className="mx-auto max-w-2xl text-muted-foreground">
            State-of-the-art tools and expertise to handle any challenge
          </p>
        </div>
        <div className="grid gap-8 lg:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle>Software & Tools</CardTitle>
              <CardDescription>
                Industry-standard and cutting-edge software for every aspect of production
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-2">
                <Badge>Adobe After Effects</Badge>
                <Badge>Nuke</Badge>
                <Badge>Cinema 4D</Badge>
                <Badge>Blender</Badge>
                <Badge>Houdini</Badge>
                <Badge>Maya</Badge>
                <Badge>3ds Max</Badge>
                <Badge>DaVinci Resolve</Badge>
                <Badge>Unreal Engine</Badge>
                <Badge>Unity</Badge>
                <Badge>Substance Painter</Badge>
                <Badge>ZBrush</Badge>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Our Expertise</CardTitle>
              <CardDescription>
                Specialized skills across all aspects of visual effects and animation
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div>
                  <h4 className="font-semibold mb-2">Visual Effects</h4>
                  <p className="text-sm text-muted-foreground">
                    Photorealistic CGI, matte painting, set extensions, and seamless compositing
                  </p>
                </div>
                <div>
                  <h4 className="font-semibold mb-2">Motion Graphics</h4>
                  <p className="text-sm text-muted-foreground">
                    2D/3D animation, title sequences, broadcast graphics, and motion design
                  </p>
                </div>
                <div>
                  <h4 className="font-semibold mb-2">Simulation</h4>
                  <p className="text-sm text-muted-foreground">
                    Destruction, fluids, particles, cloth, hair, and crowd simulation
                  </p>
                </div>
                <div>
                  <h4 className="font-semibold mb-2">Post-Production</h4>
                  <p className="text-sm text-muted-foreground">
                    Color grading, cleanup, tracking, rotoscoping, and finishing
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Client Testimonials Placeholder */}
      <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">
            Trusted by Industry Leaders
          </h2>
          <p className="mx-auto max-w-2xl text-muted-foreground">
            We&apos;ve had the privilege of working with amazing clients on incredible projects
          </p>
        </div>
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          <Card>
            <CardContent className="pt-6">
              <p className="text-muted-foreground italic mb-4">
                &quot;The team at Biohazard VFX delivered beyond our expectations. Their attention to detail and creative problem-solving made our impossible vision a reality.&quot;
              </p>
              <p className="font-semibold">Production Studio A</p>
              <p className="text-sm text-muted-foreground">Feature Film Director</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="pt-6">
              <p className="text-muted-foreground italic mb-4">
                &quot;Professional, efficient, and incredibly talented. They understood our brand and delivered stunning visuals that elevated our campaign.&quot;
              </p>
              <p className="font-semibold">Brand Client B</p>
              <p className="text-sm text-muted-foreground">Creative Director</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="pt-6">
              <p className="text-muted-foreground italic mb-4">
                &quot;Working with Biohazard VFX was a game-changer for our series. Their VFX work seamlessly integrated with our live-action footage.&quot;
              </p>
              <p className="font-semibold">TV Production C</p>
              <p className="text-sm text-muted-foreground">Executive Producer</p>
            </CardContent>
          </Card>
        </div>
      </section>
    </>
  );
}

