"use client";

import Image from "next/image";
import { Button } from "../ui/button";
import { motion } from "framer-motion";
import Link from "next/link";

export default function HeaderProduct() {
  return (
    <>
      <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="flex flex-col items-center gap-6"
        >
          <div className="relative w-full h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
            <Image
              src="/product1.jpg"
              alt="about-header"
              fill
              className="object-cover"
              sizes="(max-width: 768px) 100vw, 640px"
              priority
            />
          </div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3, duration: 0.6 }}
          className="flex flex-col md:flex-row justify-between items-center my-8"
        >
          <p className="text-lg md:text-5xl font-bold">JAECOO 7 AWD</p>
          <div className="flex items-center mt-2 md:mt-0 gap-3">
            <a
              href="https://drive.google.com/file/d/1Nici3bdjUG524sUYQgHfbeO63xW6f1_o/view"
              target="_blank"
              rel="noopener noreferrer"
            >
              <Button className="bg-white text-black border w-[100px] h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:bg-amber-50 hover:cursor-pointer">
                BROSUR
              </Button>
            </a>

            <Link href={"/about"}>
              <Button className="bg-[#1F6779] h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:cursor-pointer">
                TEST DRIVE
              </Button>
            </Link>
          </div>
        </motion.div>
      </section>

      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.5, duration: 0.8 }}
        className="relative w-full h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden"
      >
        <Image
          src="/color.png"
          alt="about-header"
          fill
          className="object-cover"
          sizes="(max-width: 768px) 100vw, 640px"
          priority
        />

        <motion.div
          initial={{ opacity: 0, x: -40 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: 0.8, duration: 0.6 }}
          className="absolute top-1/2 left-5 md:left-56 transform -translate-y-1/2 flex flex-col gap-4 z-10"
        >
          {[
            "linear-gradient(to bottom, #C9CCD3, #FFFFFF)",
            "linear-gradient(to bottom, #788662, #C9CCD3)",
            "linear-gradient(to bottom, #1A1A1A, #3A3A3A)",
            "linear-gradient(to bottom, #E1ECF4, #FFFFFF)",
          ].map((bg, index) => (
            <motion.button
              key={index}
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.95 }}
              className="w-6 h-6 rounded-full border border-white shadow-md hover:cursor-pointer"
              style={{ background: bg }}
            />
          ))}
        </motion.div>
      </motion.div>
    </>
  );
}