ignum/pages/home/banner/slider.tsx

"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import { ChevronLeft, ChevronRight } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import { useQuery } from "@tanstack/react-query";
import httpClient from "@/request/api";
import { endPoints } from "@/request/links";
import { BannerType } from "@/lib/types";
import { BannerSliderSkeleton } from "./loading";
// The custom CSS selectors for navigation
const navigationPrevEl = ".hero-swiper-prev";
const navigationNextEl = ".hero-swiper-next";

export function BannerSlider() {
  const t = useTranslations();
  const locale = useLocale();
  const { data, isLoading } = useQuery({
    queryKey: ["banner"],
    queryFn: () => httpClient(endPoints.banner),
    select: (data: any): BannerType[] => data?.data?.results,
  });
  const BANNER_DATA = [
    {
      image: "/images/homeBanner3.png",
      title: t("home.banner.title2"),
      description: t("home.banner.description"),
    },
    {
      image: "/images/homeBanner4.png",
      title: t("home.banner.title2"),
      description: t("home.banner.description"),
    },
  ];

  const bannerData = data ?? BANNER_DATA;

  if (isLoading) return <BannerSliderSkeleton />;

  return (
    <div className="max-w-7xl mx-auto relative z-30 h-full mt-20 flex items-center justify-center ">
      {/* Custom buttons */}
      <button
        className={`${navigationPrevEl.replace(
          ".",
          "",
        )} w-10 h-10 absolute z-10 left-0 top-[40vh] rounded-full p-0 bg-primary text-center text-white lg:flex hidden items-center justify-center hover:bg-red-600 hover:cursor-pointer transition`}
      >
        <ChevronLeft size={30} />
      </button>
      <button
        className={`${navigationNextEl.replace(
          ".",
          "",
        )} w-10 h-10 absolute z-10 right-0 top-[40vh] rounded-full bg-primary text-center text-white lg:flex hidden items-center justify-center hover:bg-red-600 hover:cursor-pointer transition `}
      >
        <ChevronRight size={30} />
      </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,
        }}
      >
        {bannerData.map((item, index) => (
          <SwiperSlide key={index}>
            <div className="relative z-20 h-full flex items-center lg:mt-0 sm:mt-[10vh] mt-[5vh]">
              <div className="max-w-400 mx-auto px-4 sm:px-6 lg:px-8 w-full">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center h-full">
                  {/* Right side - Text Content */}
                  <div className="lg:hidden inline-block space-y-6 text-white">
                    {/* Badge */}
                    <div className="flex items-center gap-2 w-fit">
                      <DotAnimatsiya />
                      <span className="text-sm font-semibold tracking-wide font-almarai">
                        {t("home.banner.title1")}
                      </span>
                    </div>

                    {/* Main Heading */}
                    <h1
                      className="bg-linear-to-br from-white via-white to-black
  text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty font-unbounded"
                    >
                      {item.title}
                    </h1>

                    {/* Description */}
                    <p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
                      {item.description}
                    </p>

                    {/* CTA Button */}
                    <button className="shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
                      {t("home.banner.cta")}
                    </button>
                  </div>

                  {/* Left side - Firefighters Image */}
                  <div className="flex items-end justify-center  ">
                    <img
                      src={item.image}
                      alt="Firefighters"
                      loading="lazy"
                      className="lg:w-150 w-100 lg:h-150 max-[300px]:w-[80vw] object-contain object-right rounded-xl drop-shadow-2xl"
                    />
                  </div>

                  {/* Right side - Text Content */}
                  <div className="lg:inline-block hidden space-y-6 mb-20">
                    {/* Badge */}
                    <div className="flex items-center gap-2 w-fit">
                      <DotAnimatsiya />
                      <span className="text-sm font-semibold text-white tracking-wide font-almarai">
                        {t("home.banner.title1")}
                      </span>
                    </div>

                    {/* Main Heading */}
                    <h1
                      className="font-unbounded uppercase text-4xl bg-linear-to-br from-white via-white to-black
  text-transparent bg-clip-text sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
                    >
                      {t("home.banner.title2")}
                    </h1>

                    {/* Description */}
                    <p className="font-almarai text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
                      {t("home.banner.description")}
                    </p>

                    {/* CTA Button */}
                    <Link
                      href={`/${locale}/contact`}
                      className="font-almarai shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit"
                    >
                      {t("home.banner.cta")}
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}