"use client";
import Image from "next/image";
import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";

const featuresInt = [
  {
    title: "14.8 Screen with APPLE Carplay & Android Auto",
    description:
      "Stay connected and informed with a 14.8 display offering clear visuals and advanced functionality for a seamless driving experience.",
    image: "/in-shs2.png",
  },
  {
    title: "Horizontal Side by Side Cup Holder",
    description:
      "Keep your beverages secure and within reach with the stylish Horizontal Side-by-Side Cup Holder.",
    image: "/in-shs3.png",
  },
  {
    title: "EV/ HEV Button",
    description:
      "Effortlessly switch between power modes with the EV/HEV Button, designed for optimal driving efficiency.",
    image: "/in-shs4.png",
  },
  {
    title: "Wireless Charging",
    description:
      "Stay powered up on the go with Wireless Charging, ensuring your devices are always ready when you are.",
    image: "/in-shs5.png",
  },
];

const interior = [
  {
    title: "Dual Door Armrest",
    description:
      "A seamless blend of style and performance with the Avantgrade Fighter-Inspired Transmission Shifter.",
    image: "/in-shs6.png",
  },
  {
    title: "Ventilated Leather Seats",
    description:
      "Stay cool and comfortable with Ventilated Leather Seats, designed for luxury and relaxation.",
    image: "/in-shs7.png",
  },
  {
    title: "Sony 8-Speaker Audio system",
    description:
      "Immerse yourself in rich, high-quality sound with the Sony 8-speaker audio system, delivering an exceptional listening experience on every journey.",
    image: "/in-shs8.png",
  },
  {
    title: "Minimalist Door Latch Design",
    description:
      "Redefine sophistication with the Minimalist Door Latch Design, offering a seamless blend of style and utility.",
    image: "/in-shs9.png",
  },
];
export default function InteriorShs() {
  const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });

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

      <motion.div
        className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]"
        initial={{ opacity: 0, scale: 0.95 }}
        animate={inView ? { opacity: 1, scale: 1 } : {}}
        transition={{ duration: 0.7 }}
      >
        <Image
          src="/in-shs.png"
          alt="Interior Hero"
          fill
          className="object-cover"
          sizes="100vw"
        />
      </motion.div>

      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-4 mt-5">
        {featuresInt.map((item, index) => (
          <motion.div
            key={index}
            className="relative aspect-[4/3] overflow-hidden group"
            initial={{ opacity: 0, y: 20 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.4, delay: index * 0.1 }}
          >
            <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>
        ))}
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-4 mt-5">
        {interior.map((item, index) => (
          <motion.div
            key={index}
            className="relative aspect-[4/3] overflow-hidden group"
            initial={{ opacity: 0, y: 20 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.4, delay: index * 0.1 }}
          >
            <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>
        ))}
      </div>
    </section>
  );
}