import { Reveal } from "@/components/Reveal";
import resortMasterplan from "@/assets/gallery-resort-masterplan.jpeg.asset.json";
import golfCourse from "@/assets/gallery-golf-course-with-ocean-views.jpeg.asset.json";
import domeVillageSummer from "@/assets/gallery-geodesic-dome-village-summer.png.asset.json";
import fullAerialWaterpark from "@/assets/gallery-full-aerial-render-waterpark-marina.png.asset.json";
import fullSiteAerial from "@/assets/gallery-full-site-aerial.jpeg.asset.json";
import tennisCourts from "@/assets/gallery-tennis-courts-overlooking-bay.jpeg.asset.json";
import indoorIceRink from "@/assets/gallery-indoor-ice-rink-activity-center.png.asset.json";
import winterDomes from "@/assets/gallery-winter-geodesic-domes-lodges.png.asset.json";
import winterWaterpark from "@/assets/gallery-winter-waterpark-adventure-zone.png.asset.json";

const galleryImages = [
  { src: resortMasterplan.url, alt: "Summer resort masterplan", season: "Summer" },
  { src: golfCourse.url, alt: "Golf course with ocean views", season: "Summer" },
  { src: domeVillageSummer.url, alt: "Summer geodesic dome village", season: "Summer" },
  { src: fullAerialWaterpark.url, alt: "Full aerial render with waterpark and marina", season: "Summer" },
  { src: fullSiteAerial.url, alt: "Full site aerial with all amenities", season: "Summer" },
  { src: tennisCourts.url, alt: "Tennis courts overlooking the bay", season: "Summer" },
  { src: indoorIceRink.url, alt: "Indoor ice rink and activity center", season: "Winter" },
  { src: winterDomes.url, alt: "Winter geodesic domes and lodges", season: "Winter" },
  { src: winterWaterpark.url, alt: "Winter waterpark adventure zone", season: "Winter" },
];

export function Gallery() {
  return (
    <section id="gallery" className="bg-ink text-paper py-32 md:py-44">
      <div className="mx-auto max-w-[1440px] px-6 md:px-12">
        <Reveal>
          <div className="mb-20 flex items-center gap-6 md:mb-28">
            <span className="label text-gold">03</span>
            <span className="rule flex-1 text-paper" />
            <span className="label text-paper/60">Gallery</span>
          </div>
        </Reveal>

        <Reveal>
          <h2 className="display text-[42px] text-paper sm:text-[60px] md:text-[80px]">
            Vision Beyond Boundaries
          </h2>
        </Reveal>

        <div className="mt-20 grid grid-cols-1 gap-5 md:mt-24 md:grid-cols-2 lg:grid-cols-3">
          {galleryImages.map((image, i) => (
            <Reveal key={image.alt} delay={(i % 3) * 0.08}>
              <figure className="group overflow-hidden rounded-sm border border-white/8 bg-paper/5">
                <div className="aspect-[16/10] overflow-hidden">
                  <img
                    src={image.src}
                    alt={image.alt}
                    loading="lazy"
                    className="h-full w-full object-cover transition duration-700 group-hover:scale-[1.03]"
                  />
                </div>
              </figure>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
