"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";
import { useEffect, useState } from "react";

const featuresJ8 = [
  {
    title: "ARDIS",
    description:
      "ARDIS (All-Road Drive Intelligent System) automatically adjusts power to each wheel, giving you better grip, stability, and control on any road.",
    image: "/ex-j8.png",
  },
  {
    title: "CDC Magnetic Suspension",
    description:
      "Equipped with real-time road condition detection, the J8 instantly adjusts shock absorbers to keep the vehicle stable, ensuring a smooth and controlled ride.",
    image: "/ex-j8-2.png",
  },
  {
    title: "2.0L Turbocharged Engine",
    description:
      "Equipped with a 2.0L turbo engine that delivers 183 kW and 385 Nm, the J8 offers strong performance and smooth control for any road.",
    image: "/ex-j8-3.png",
  },
  {
    title: "Waterfall Grille Design",
    description:
      "Features a bold, flowing design that captures attention at first glance. The cascading pattern blends elegance with energy, reflecting modern confidence while optimizing airflow for improved vehicle performance.",
    image: "/ex-j8-4.png",
  },
  {
    title: "LED Tech Headlamp",
    description: "",
    image: "/ex-j8-5.png",
  },
  {
    title: "20-inch Alloy Wheels",
    description:
      "Striking 20-inch alloy wheels deliver a blend of style and durability. ",
    image: "/ex-j8-6.png",
  },
  {
    title: "Hidden door handles",
    description:
      "Seamlessly integrated into the vehicle body to reduce wind noise and drag.",
    image: "/ex-j8-7.png",
  },
  {
    title: "Strong Through Waistline",
    description:
      "The J8’s exterior embodies bold simplicity with crisp, powerful lines and a golden-ratio silhouette.",
    image: "/ex-j8-8.png",
  },
];

export default function ExteriorJ8Awd() {
  const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.2 });
  const [show, setShow] = useState(false);

  useEffect(() => {
    if (inView) {
      setShow(true);
    }
  }, [inView]);

  return (
    <section
      ref={ref}
      className="py-10 px-4 sm:px-6 md:px-20 bg-white overflow-hidden"
    >
      <motion.h2
        initial={{ opacity: 0, y: 20 }}
        animate={show ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.6 }}
        className="text-2xl mt-5 mb-8"
      >
        <span className="text-[#1F6779] font-semibold">Jaecoo 8 AWD</span>{" "}
        Teknologi dan Exterior
      </motion.h2>

      <motion.div
        initial={{ opacity: 0, y: 50 }}
        animate={show ? { opacity: 1, y: 0 } : {}}
        transition={{ delay: 0.2, duration: 0.8 }}
        className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-4 mt-5"
      >
        {featuresJ8.map((item, index) => (
          <motion.div
            key={index}
            className="relative aspect-[4/3] overflow-hidden group"
            whileHover={{ scale: 1.02 }}
            transition={{ duration: 0.3 }}
          >
            <Image
              src={item.image}
              alt={item.title}
              fill
              className="object-cover group-hover:scale-105 transition-transform duration-300"
              sizes="(max-width: 768px) 100vw, 25vw"
            />
            <div className="absolute bottom-0 bg-gradient-to-t from-black/80 to-transparent p-4">
              <h3 className="text-sm sm:text-base font-bold text-white">
                {item.title}
              </h3>
              <p className="text-xs sm:text-sm text-gray-300 mt-1">
                {item.description}
              </p>
            </div>
          </motion.div>
        ))}
      </motion.div>
    </section>
  );
}