Untitled

import Image from "next/image";
import { useState, useEffect, useRef } from "react";
import { tabs, contentData, bannerData, contentData2 } from "./data";
import SolutionCard from "./SolutionCard";
import SolutionBackground from "./SolutionBackground";
import BusinessBenefits from "./BusinessBenefits";

export default function SolutionBody() {
  const [selectedTab, setSelectedTab] = useState("MVNx");
  const [showContentData2, setShowContentData2] = useState(false);
  const [activeButton, setActiveButton] = useState(1);
  const scrollContainerRef = useRef(null);
  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(false);
  const currentBanner =
    bannerData[tabs.findIndex((tab) => tab.title === selectedTab)];
  const [windowWidth, setWindowWidth] = useState(0);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };
    window.addEventListener("resize", handleResize);
    handleResize();
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  useEffect(() => {
    const container = scrollContainerRef.current;
    const checkScroll = () => {
      if (container) {
        setCanScrollLeft(container.scrollLeft > 0);
        setCanScrollRight(
          container.scrollLeft < container.scrollWidth - container.clientWidth
        );
      }
    };

    if (container) {
      container.addEventListener("scroll", checkScroll);
      checkScroll();
      return () => container.removeEventListener("scroll", checkScroll);
    }
  }, []);

  const scroll = (direction) => {
    const container = scrollContainerRef.current;
    if (container) {
      const cardWidth = windowWidth < 768 ? 280 : 343;
      const gap = windowWidth < 768 ? 40 : 80;
      const visibleCards = Math.floor(
        container.clientWidth / (cardWidth + gap)
      );
      const scrollAmount =
        (cardWidth + gap) * Math.max(1, Math.floor(visibleCards / 2));
      const targetScroll =
        direction === "left"
          ? Math.max(0, container.scrollLeft - scrollAmount)
          : Math.min(
              container.scrollWidth - container.clientWidth,
              container.scrollLeft + scrollAmount
            );

      container.scrollTo({ left: targetScroll, behavior: "smooth" });
    }
  };

  const handleButtonClick = (buttonIndex) => {
    setActiveButton(buttonIndex);
    if (buttonIndex === 1) {
      setShowContentData2(false);
    } else {
      setShowContentData2(true);
    }
  };

  const content = showContentData2 ? contentData2[selectedTab] : contentData[selectedTab];
  const currentTab = tabs.find((tab) => tab.title === selectedTab);

  return (
    <>
      {/* Banner Section */}
      <div className="w-full max-w-full mx-auto relative">
        <div className="relative w-full h-[400px] md:h-[600px] lg:h-[720px]">
          <Image
            unoptimized
            width={1920}
            height={812}
            alt="bg_image"
            src={currentBanner.backgroundImage}
            className="object-cover w-full h-full"
            priority
          />
          <div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4">
            <h1 className="w-full md:w-[80%] lg:w-[905px] text-center text-white text-3xl md:text-4xl lg:text-5xl font-semibold mb-4 md:mb-6">
              {currentBanner.title}
            </h1>
            <p className="w-full md:w-[80%] lg:w-[905px] text-center text-white text-base md:text-lg lg:text-xl font-medium mb-6 md:mb-8">
              {currentBanner.description}
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <div className="w-[151px] md:w-[180px] lg:w-[220px] h-[45px] md:h-[55px] lg:h-[65px] px-4 py-3 bg-[#cbcbcb]/10 rounded-[37px] border border-[#219ebc] backdrop-blur-sm justify-center items-center gap-2.5 inline-flex">
                <div className="w-[7px] h-[7px] bg-[#0b76a0] rounded-full" />
                <div className="text-white text-sm md:text-base lg:text-lg font-normal">
                  Book a Demo
                </div>
              </div>
              <div className="w-[151px] md:w-[180px] lg:w-[220px] h-[45px] md:h-[55px] lg:h-[65px] px-4 py-3 bg-[#219ebc] rounded-[37px] border border-[#219ebc] backdrop-blur-sm justify-center items-center gap-2.5 inline-flex">
                <div className="w-[7px] h-[7px] bg-white rounded-full" />
                <div className="text-white text-sm md:text-base lg:text-lg font-normal">
                  Contact us
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="w-full max-w-full bg-white relative">
        <div
          className="w-full max-w-full mx-auto px-4 md:px-8 lg:px-[100px] pt-8 md:pt-12"
          style={{
            backgroundImage: "url('/solution/newZig.png')",
            backgroundColor: "transparent",
            backgroundRepeat: "no-repeat",
            backgroundSize: "45% 35%",
            backgroundPosition: "right 2% top 12%",
          }}
        >
          <div className="flex flex-wrap justify-center items-center gap-6 md:gap-12 lg:gap-24 pb-6 md:pb-10">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setSelectedTab(tab.title)}
                className="flex items-center space-x-2 pb-2 relative"
              >
                <img
                  src={tab.icon}
                  alt={tab.title}
                  className="w-4 md:w-5 h-4 md:h-5"
                />
                <span className="text-[10px] md:text-[12px] text-gray-600">
                  {tab.title}
                </span>
                {selectedTab === tab.title && (
                  <div className="absolute bottom-0 left-0 w-full h-1 bg-gray-500"></div>
                )}
              </button>
            ))}
          </div>

          <hr />

          <div className="flex flex-wrap justify-center items-center gap-3 md:gap-5 mt-8 md:mt-12">
            <button
              className={`bg-[#219EBC] text-white py-2 px-4 rounded-[20px] text-sm md:text-base ${
                activeButton === 1 ? "bg-[#219EBC]" : "bg-gray-300"
              }`}
              onClick={() => handleButtonClick(1)}
            >
              {currentTab?.button1 || "Dynamic Solutions"}
            </button>
            {currentTab?.button2 && (
              <button
                className={`bg-[#219EBC] text-white py-2 px-4 rounded-[20px] text-sm md:text-base ${
                  activeButton === 2 ? "bg-[#219EBC]" : "bg-gray-300"
                }`}
                onClick={() => handleButtonClick(2)}
              >
                {currentTab?.button2}
              </button>
            )}
          </div>

          <div className="flex flex-col md:flex-row">
            <div className="w-full md:w-[70%] lg:w-[995px]">
              <h2 className="text-xl md:text-2xl font-bold mt-6">
                {content?.title}
              </h2>
              <p className="mt-2 text-gray-600 text-sm md:text-base">
                {content?.description}
              </p>
            </div>

            <div className="flex justify-center md:justify-end gap-4 items-center lg:ml-[12%] lg:mb-[3%] mt-6 md:mt-[250px]">
              <button
                onClick={() => scroll("left")}
                disabled={!canScrollLeft}
                className="w-10 h-10 md:w-12 md:h-12 rounded-full border border-[#219EBC] text-black flex items-center justify-center transition-all duration-300"
              >
                ←
              </button>
              <button
                onClick={() => scroll("right")}
                disabled={!canScrollRight}
                className="w-10 h-10 md:w-12 md:h-12 rounded-full border border-[#219EBC] text-black flex items-center justify-center transition-all duration-300"
              >
                →
              </button>
            </div>
          </div>

          <div className="border-t border-b border-gray-300 mt-4">
            <div
              ref={scrollContainerRef}
              className="flex gap-4 md:gap-8 overflow-x-hidden scroll-smooth pl-4 md:px-0"
              style={{
                scrollSnapType: "x mandatory",
                WebkitOverflowScrolling: "touch",
              }}
            >
              {content?.images.map((src, index) => (
                <div
                  key={index}
                  className="flex flex-shrink-0 border-r border-gray-300 pt-8 pb-8 first:pl-0 sm:first:pl-2 lg:pr-8 sm:mr-5 sm:ml-8 w-full sm:w-auto"
                  style={{
                    scrollSnapAlign: "start",
                    display: "flex",
                    justifyContent: "center",
                  }}
                >
                  <div className="flex flex-col items-center sm:items-start">
                    <div className="group relative bg-gray-800 rounded-[22px] overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
                      <Image
                        src={src}
                        alt={src}
                        width={windowWidth < 768 ? 280 : 343}
                        height={windowWidth < 768 ? 230 : 283}
                        className="rounded-lg"
                      />
                    </div>
                    {content?.features[index] && (
                      <div className="mt-4 w-[280px] md:w-[343px] px-2 md:px-0 text-center sm:text-left">
                        <h5 className="text-base md:text-lg lg:text-xl font-semibold mb-2 md:mb-4">
                          {content.features[index].title}
                        </h5>
                        <p className="text-gray-600 text-xs md:text-sm lg:text-base leading-relaxed md:leading-relaxed">
                          {content.features[index].description}
                        </p>
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <BusinessBenefits content={content} />
      <SolutionCard />
      <SolutionBackground content={content} />
    </>
  );
}