import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import Image from "next/image";

const images = [
  {
    url: "https://images.unsplash.com/photo-1607860108855-64acf2078ed9?q=80&w=800&auto=format&fit=crop",
    alt: "Car interior detailing"
  },
  {
    url: "https://images.unsplash.com/photo-1552930294-6b595f4c2974?q=80&w=800&auto=format&fit=crop",
    alt: "Shiny car exterior"
  },
  {
    url: "https://images.unsplash.com/photo-1601362840469-51e4d8d59085?q=80&w=800&auto=format&fit=crop",
    alt: "Wheel cleaning"
  },
  {
    url: "https://images.unsplash.com/photo-1599256621730-535171e28e50?q=80&w=800&auto=format&fit=crop",
    alt: "Foam wash"
  },
  {
    url: "https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?q=80&w=800&auto=format&fit=crop",
    alt: "Ceramic coating application"
  },
  {
    url: "https://images.unsplash.com/photo-1580273916550-e323be2ae537?q=80&w=800&auto=format&fit=crop",
    alt: "Polished luxury car"
  }
];

export function Gallery() {
  return (
    <section id="gallery" className="py-24">
      <Container>
        <div className="text-center max-w-3xl mx-auto mb-16">
          <Heading>Our Work</Heading>
          <Subheading className="mt-4">
            Take a look at some of the vehicles we've transformed. Quality and attention to detail in every job.
          </Subheading>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {images.map((image, index) => (
            <div key={index} className="relative aspect-square overflow-hidden rounded-xl group">
              <Image
                src={image.url}
                alt={image.alt}
                fill
                className="object-cover transition-transform duration-500 group-hover:scale-110"
              />
              <div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors" />
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}