Gallery 1

"use client";

import { Marquee } from "@/components/ui/marquee";
import { cn } from "@/lib/utils";

const galleryImages = [
  {
    height: "short",
    id: "1",
    location: "New York, USA",
    src: "https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=800&h=600&fit=crop",
    year: "2024",
  },
  {
    height: "tall",
    id: "2",
    location: "Berlin, Germany",
    src: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&h=900&fit=crop",
    year: "2027",
  },
  {
    height: "short",
    id: "3",
    location: "Cape Town, South Africa",
    src: "https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=800&h=600&fit=crop",
    year: "2028",
  },
  {
    height: "short",
    id: "4",
    location: "Rio de Janeiro, Brazil",
    src: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&h=600&fit=crop",
    year: "2025",
  },
  {
    height: "tall",
    id: "5",
    location: "Tokyo, Japan",
    src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&h=900&fit=crop",
    year: "2026",
  },
  {
    height: "short",
    id: "6",
    location: "Sydney, Australia",
    src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&h=600&fit=crop",
    year: "2029",
  },
];

function GalleryCard({ image }: { image: (typeof galleryImages)[0] }) {
  return (
    <div className="flex flex-col">
      <div
        className={cn(
          "relative overflow-hidden rounded-xl",
          image.height === "tall" ? "h-80" : "h-56",
          "w-72",
        )}
      >
        <img
          alt={image.location}
          className="h-full w-full object-cover transition-transform duration-500 hover:scale-105"
          src={image.src}
        />
      </div>
      <div className="mt-4 flex items-center justify-between px-1">
        <span className="font-medium text-neutral-800 text-sm">
          {image.location}
        </span>
        <span className="text-neutral-500 text-sm">{image.year}</span>
      </div>
    </div>
  );
}

export function Gallery1() {
  return (
    <section className="w-full overflow-hidden bg-[#f5f5f5] py-16 md:py-24">
      <div className="mx-auto mb-12 w-full max-w-6xl px-6">
        {/* Header - Two column */}
        <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
          {/* Left */}
          <div>
            <span className="mb-4 block font-medium text-neutral-800 text-sm">
              [Gallery]
            </span>

            <h2 className="font-bold text-4xl text-neutral-900 leading-tight md:text-5xl">
              Moments That Move
              <br />
              the Planet Forward
            </h2>
          </div>

          {/* Right */}
          <div className="flex items-end lg:justify-end">
            <p className="max-w-sm text-base text-neutral-600">
              A visual journey of our commitment to creating a positive impact
              for the planet and future generations.
            </p>
          </div>
        </div>
      </div>

      {/* Gallery Marquee */}
      <Marquee className="[--duration:60s] [--gap:1.5rem]" pauseOnHover>
        {galleryImages.map((image) => (
          <GalleryCard image={image} key={image.id} />
        ))}
      </Marquee>
    </section>
  );
}

export default Gallery1;