Untitled

"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import Image from "next/image";
import { useState, useRef } from "react";
import { useRouter } from "next/navigation";
import banner1 from "@/public/Aboutus/aboutus-banner1.webp";
import banner2 from "@/public/Aboutus/aboutus-banner2.webp";
import banner3 from "@/public/Aboutus/aboutus-banner3.webp";
import banner4 from "@/public/Aboutus/aboutus-banner4.webp";
import banner5 from "@/public/Aboutus/aboutus-banner5.webp";

import { ArrowRight } from "lucide-react";

// Use the 5 new images
const slides = [
  { image: banner1, label: "Collaboration", description: "Fostering teamwork and collective growth." },
  { image: banner2, label: "Workspace", description: "Designing environments that inspire creativity." },
  { image: banner3, label: "Leadership", description: "Guiding wiht vision and empathy." },
  { image: banner4, label: "Environment", description: "Sustainable practices for a better future." },
  { image: banner5, label: "Team", description: "Our greatest asset, driving success together." },
];

export default function HeroSection() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const swiperRef = useRef(null);
  const router = useRouter();

  const handleSlideChange = (swiper) => {
    setCurrentIndex(swiper.realIndex);
  };

  const currentData = slides[currentIndex];

  return (
    <div className="relative h-auto pt-[50px] md:pt-[100px] pb-10 overflow-hidden bg-white">

      {/* Header Text */}
      <section className="relative w-full flex flex-col items-center justify-center text-center mb-10 mt-20 px-4 md:px-12 lg:px-24">
        <header className="max-w-4xl mx-auto">
          <h1 className="text-3xl md:text-5xl lg:text-[52px] font-bold text-[#3C3C3C] mb-8 leading-[1.2]">
            Co-Powering Enterprise Growth Through Intelligence And Empathy
          </h1>

          {/* CTA Buttons */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <div className="pl-6 pr-2 py-2 group bg-[#6666FF] rounded-full flex gap-3 items-center justify-center cursor-pointer hover:bg-[#5555ee] transition-all shadow-lg hover:shadow-xl">
              <p className="font-bold text-white text-sm md:text-base">Discover Our Story</p>
              <div className="rounded-full group-hover:translate-x-1 transition-transform bg-white w-8 h-8 md:w-10 md:h-10 flex items-center justify-center">
                <ArrowRight size={16} color="#6666FF" />
              </div>
            </div>
            <button
              onClick={() => router.push("/contact-us")}
              className="px-8 py-3 border border-[#6666FF] text-[#6666FF] rounded-full font-bold hover:bg-[#6666FF] hover:text-white transition-all cursor-pointer text-sm md:text-base shadow-sm hover:shadow-md"
            >
              Connect With Us →
            </button>
          </div>
        </header>
      </section>

      {/* Swiper with Timeline Effect */}
      <div className="relative w-full md:h-[500px] lg:h-[600px] overflow-hidden bg-white mt-10">

        <div className="absolute inset-0 px-0">
          <Swiper
            modules={[Navigation, Autoplay]}
            spaceBetween={20}
            slidesPerView={1.5}
            centeredSlides={true}
            loop={true}
            speed={800}
            autoplay={{
              delay: 3000,
              disableOnInteraction: false,
            }}
            onSlideChange={handleSlideChange}
            onSwiper={(swiper) => {
              swiperRef.current = swiper;
            }}
            slideToClickedSlide={false}
            className="h-full w-full"
            breakpoints={{
              768: {
                slidesPerView: 1.8,
                spaceBetween: 20,
              },
              1024: {
                slidesPerView: 2.2,
                spaceBetween: 30,
              },
              1280: {
                slidesPerView: 2.5,
                spaceBetween: 40,
              },
            }}
          >
            {slides.map((item, index) => (
              <SwiperSlide key={index} className="h-full">
                {({ isActive }) => (
                  <div
                    className={`h-full transition-all duration-500 relative ${isActive
                        ? "opacity-100 scale-100"
                        : "opacity-50 scale-95"
                      }`}
                  >
                    <Image
                      src={item.image}
                      alt={item.label}
                      fill
                      className={`transition-all duration-500 ${isActive ? 'object-cover' : 'object-cover'}`}
                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                    />
                  </div>
                )}
              </SwiperSlide>
            ))}
          </Swiper>
        </div>

        {/* Top Curved SVG Overlay */}
        <div className="absolute top-[-5%] left-[-10%] w-[120%] pointer-events-none z-30">
          <img
            src="/Gallery/curv.svg"
            alt=""
            className="w-full object-cover h-[120px] lg:h-[150px]"
          />
        </div>

        {/* Bottom Curved SVG Overlay */}
        <div className="absolute bottom-0 left-[-10%] w-[120%] pointer-events-none z-30">
          <img
            src="/Gallery/curv2.svg"
            alt=""
            className="w-full object-cover h-[120px] lg:h-[150px]"
          />
        </div>
      </div>

      <style jsx global>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(10px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .animate-fadeIn {
          animation: fadeIn 0.5s ease-out;
        }
      `}</style>
    </div>
  );
}