"use client";

import Image from "next/image";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import Link from "next/link";

const heroImages = ["/Hero.png", "/hero2.png", "/hero3.png"];

export default function Header() {
  return (
    <section className="relative w-full overflow-hidden bg-white">
      <Carousel className="w-full relative">
        <CarouselContent>
          {heroImages.map((img, index) => (
            <CarouselItem key={index}>
              <div className="relative w-full h-[810px]">
                <Image
                  src={img}
                  alt={`JAECOO Image ${index + 1}`}
                  width={1400}
                  height={810}
                  className="object-cover w-full h-full"
                />

                {index === 0 && (
                  <div className="absolute inset-0 flex flex-col justify-center items-start px-6 md:px-28 z-10">
                    <motion.h1
                      initial={{ opacity: 0, y: 40 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.8, ease: "easeOut" }}
                      className="text-3xl sm:text-4xl md:text-5xl font-bold text-black mb-4"
                    >
                      JAECOO J7 AWD
                    </motion.h1>

                    <motion.p
                      initial={{ opacity: 0, y: 40 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{
                        duration: 0.9,
                        ease: "easeOut",
                        delay: 0.2,
                      }}
                      className="text-lg text-black mb-6"
                    >
                      DELICATE OFF-ROAD SUV
                    </motion.p>

                    <motion.div
                      className="flex items-center gap-4"
                      initial={{ opacity: 0, y: 40 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 1, ease: "easeOut", delay: 0.4 }}
                    >
                      <Link href={"/about"}>
                        <Button className="rounded-full bg-[#155B6E] px-6 py-2 text-white hover:cursor-pointer">
                          TEST DRIVE
                        </Button>
                      </Link>
                      <Link href={"/product"}>
                        <Button
                          variant="outline"
                          className="rounded-full border-black text-black px-6 py-2 hover:cursor-pointer hover:bg-amber-50"
                        >
                          JELAJAHI
                        </Button>
                      </Link>
                    </motion.div>
                  </div>
                )}

                <CarouselPrevious className="absolute left-6 top-1/2 -translate-y-1/2 z-20 border border-[#155B6E] text-[#155B6E] bg-white" />
                <CarouselNext className="absolute right-6 top-1/2 -translate-y-1/2 z-20 border border-[#155B6E] text-[#155B6E] bg-white" />
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>
    </section>
  );
}