"use client";

import Image from "next/image";
import { useState } from "react";
import { motion } from "framer-motion";

const images = ["/g1.png", "/g2.png", "/g3.png", "/g4.png"];

export default function Galeri() {
  const [consent, setConsent] = useState(false);

  return (
    <section className="px-4 py-12 md:px-20 bg-white">
      <motion.h2
        className="text-3xl font-bold mb-8 text-black"
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
        viewport={{ once: true }}
      >
        Galeri Kami
      </motion.h2>

      <div className="flex flex-col gap-8 mb-16">
        <div className="flex justify-start gap-8 flex-wrap">
          {[images[0], images[1]].map((src, index) => (
            <motion.div
              key={index}
              className="relative w-[400px] h-[250px] overflow-hidden"
              initial={{ opacity: 0, x: -40 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: index * 0.2 }}
              viewport={{ once: true }}
            >
              <Image
                src={src}
                alt={`Galeri ${index + 1}`}
                fill
                className="object-cover object-center"
              />
            </motion.div>
          ))}
        </div>

        <div className="flex justify-end gap-8 flex-wrap">
          {[images[2], images[3]].map((src, index) => (
            <motion.div
              key={index + 2}
              className="relative w-[400px] h-[250px] overflow-hidden"
              initial={{ opacity: 0, x: 40 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: index * 0.2 }}
              viewport={{ once: true }}
            >
              <Image
                src={src}
                alt={`Galeri ${index + 3}`}
                fill
                className="object-cover object-center"
              />
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}