"use client";

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

const featuresshs = [
  {
    title: "Rear view mirrors",
    description:
      "The mirrors on the pillars are a discreet but aesthetic design detail of the Jaecoo J7 SHS. Their contrasting inserts harmoniously resonate with other accent touches of the exterior.",
    image: "/ex-shs3.png",
  },
  {
    title: "Wheels 19”",
    description:
      "Built with a lightweight aluminum chassis, offering enhanced strength, durability, and improved performance for a superior driving experience.",
    image: "/ex-shs4.png",
  },
  {
    title: "Retractable handles",
    description:
      "The designers used a spectacular solution - door handles that automatically extend using an electric drive. Minimal force is required to open the door.",
    image: "/ex-shs5.png",
  },
  {
    title: "Rear Bumper Design",
    description:
      "Featuring refined lines and bold contours, the rear bumper enhances the vehicle's sporty and stylish character.",
    image: "/ex-shs6.png",
  },
];

export default function ExteriorShs() {
  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 7 SHS</span>{" "}
        Teknologi dan Exterior
      </motion.h2>

      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={show ? { opacity: 1, scale: 1 } : {}}
        transition={{ duration: 0.8 }}
        className="relative w-full h-[300px] sm:h-[400px] md:h-[600px] my-5"
      >
        <Image
          src="/ex-shs.png"
          alt="Aluminium Chassis"
          fill
          className="object-cover"
          sizes="100vw"
        />
        <div className="absolute bottom-6 left-3 sm:left-3 md:left-6 max-w-5xl">
          <h2 className="text-xl sm:text-xl font-semibold text-white">
            5th generation 1.5t + 1dht
          </h2>
          <p className="text-xs sm:text-xs mt-2 text-gray-200">
            Drive with peace of mind, protected by 7 strategically placed
            airbags designed for maximum safety in every journey.
          </p>
        </div>
      </motion.div>
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={show ? { opacity: 1, scale: 1 } : {}}
        transition={{ duration: 0.8 }}
        className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]"
      >
        <Image
          src="/ex-shs2.png"
          alt="Aluminium Chassis"
          fill
          className="object-cover"
          sizes="100vw"
        />
        <div className="absolute bottom-6 left-3 sm:left-3 md:left-6 max-w-5xl">
          <h2 className="text-xl sm:text-xl font-semibold text-white">
            IP68 protection hybrid battery
          </h2>
          <p className="text-xs sm:text-xs mt-2 text-gray-200">
            Advanced Hybrid Battery Pack Designed for Durability and Performance
            with IP68 Protection. Engineered for toughness, this hybrid battery
            pack features IP68 protection and triple-layer safety against
            damage.
          </p>
        </div>
      </motion.div>
      <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"
      >
        {featuresshs.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>
  );
}