"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import Text from "../lib_components/text";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import { ArrowLeft, ArrowRight } from "lucide-react";

const slider = [
  {
    id: 1,
    image: "/2.jpg",
    title:
      "Ishonchli SpesTexnika — sizning loyihangiz uchun eng yaxshi tanlov!",
    desc: "Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish uskunalarini qulay narxda taqdim etamiz.",
  },
  {
    id: 2,
    image: "/4.jpg",
    title:
      "Ishonchli SpesTexnika — sizning loyihangiz uchun eng yaxshi tanlov!",
    desc: "Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish uskunalarini qulay narxda taqdim etamiz.",
  },
  {
    id: 3,
    image: "/3.webp",
    title:
      "Ishonchli SpesTexnika — sizning loyihangiz uchun eng yaxshi tanlov!",
    desc: "Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish uskunalarini qulay narxda taqdim etamiz.",
  },
];

// The custom CSS selectors for navigation
const navigationPrevEl = ".hero-swiper-prev";
const navigationNextEl = ".hero-swiper-next";

export default function HeroSection() {
  return (
    <section
      dir="ltr"
      className="relative w-full md:h-[500px] max-md:py-10 max-lg:px-2 overflow-hidden flex items-center justify-between"
    >
      {/* Custom buttons */}
        <button
          className={`${navigationPrevEl.replace(
            ".",
            ""
          )} w-10 h-10 absolute z-10 left-[10%] top-50  p-0 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition`}
        >
          <ArrowLeft />
        </button>
        <button
          className={`${navigationNextEl.replace(
            ".",
            ""
          )} w-10 h-10 absolute z-10 right-[10%] top-50  bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition `}
        >
          <ArrowRight />
        </button>
      <Swiper
        modules={[Navigation, Autoplay]}
        slidesPerView={1}
        spaceBetween={30}
        loop={true}
        navigation={{
          // Pass the class selectors here
          prevEl: navigationPrevEl,
          nextEl: navigationNextEl,
        }}
        autoplay={{
          delay: 5000,
          disableOnInteraction: false,
        }}
      >
        {slider.map((item, index) => (
          <SwiperSlide key={index}>
            <div className="relative z-20 max-w-7xl w-full mx-auto md:px-6 px-3 text-primary flex flex-col md:flex-row items-center gap-5 justify-between">
              {/* Chap tomondagi matn */}
              <motion.div
                className="space-y-3 max-w-xl backdrop-blur-3xl rounded-xl py-6 px-4"
                initial={{ opacity: 0, x: -60 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8, ease: "easeOut" }}
              >
                <div className="text-2xl lg:text-4xl font-extrabold leading-tight text-primary">
                  <Text txt="hero_title" />
                </div>

                <div className="text-xl font-medium text-secondary">
                  <Text txt="hero_desc" />
                </div>
              </motion.div>

              {/* O‘ng tomondagi texnika rasmi */}
              <motion.div
                className="hidden md:block"
                initial={{ opacity: 0, x: 80 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8, delay: 0.3, ease: "easeOut" }}
              >
                <Image
                  src={item.image} // texnika rasmi (public/truck.png)
                  alt="SpetsTexnika yuk mashinasi"
                  width={620}
                  height={300}
                  className="drop-shadow-2xl rounded-xl"
                />
              </motion.div>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </section>
  );
}