Untitled

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

export default function SolutionBody({ slug }) {
  const router = useRouter();
  const decodedSlug = decodeURIComponent(slug || "");

  // Initialize selectedTab based on slug
  const getInitialTab = () => {
    const matchingTab = tabs.find((tab) => tab.slug === decodedSlug);
    return matchingTab ? matchingTab.title : "MVNx"; // Default to MVNx if no match
  };

  // State management
  const [selectedTab, setSelectedTab] = useState(getInitialTab);
  const [showContentData2, setShowContentData2] = useState(false);
  const [activeButton, setActiveButton] = useState(1);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(true);
  const [cardsToShow, setCardsToShow] = useState(3);

  // Get current content based on selected tab and content type
  const currentBanner =
    bannerData[tabs.findIndex((tab) => tab.title === selectedTab)];
  const currentTab = tabs.find((tab) => tab.title === selectedTab);
  const content = showContentData2
    ? contentData2[selectedTab]
    : contentData[selectedTab];

  // Update selectedTab when slug changes
  useEffect(() => {
    const matchingTab = tabs.find((tab) => tab.slug === decodedSlug);
    if (matchingTab && matchingTab.title !== selectedTab) {
      setSelectedTab(matchingTab.title);
      setCurrentIndex(0);
      setShowContentData2(false);
      setActiveButton(1);
    }
  }, [decodedSlug, selectedTab]);

  // Handle responsive card display
  useEffect(() => {
    const updateCardsToShow = () => {
      if (window.innerWidth < 768) {
        setCardsToShow(1);
      } else if (window.innerWidth < 1024) {
        setCardsToShow(2);
      } else {
        setCardsToShow(3);
      }
    };

    updateCardsToShow();
    window.addEventListener("resize", updateCardsToShow);
    return () => window.removeEventListener("resize", updateCardsToShow);
  }, []);

  // Function to get visible cards and features
  const getVisibleContent = () => {
    if (!content?.images || !content?.features) {
      return { visibleCards: [], visibleFeatures: [] };
    }

    const visibleCards = content.images.slice(
      currentIndex,
      currentIndex + cardsToShow
    );
    const visibleFeatures = content.features.slice(
      currentIndex,
      currentIndex + cardsToShow
    );

    return { visibleCards, visibleFeatures };
  };

  // Get current visible content
  const { visibleCards, visibleFeatures } = getVisibleContent();

  // Update scroll button states
  useEffect(() => {
    const totalItems = content?.images?.length || 0;
    setCanScrollLeft(currentIndex > 0);
    setCanScrollRight(currentIndex + cardsToShow < totalItems);
  }, [currentIndex, cardsToShow, content?.images?.length]);

  // Handle tab selection
  const handleTabClick = (tab) => {
    if (selectedTab !== tab.title) {
      setSelectedTab(tab.title);
      router.push(`/solution/${encodeURIComponent(tab.slug)}`);
      setCurrentIndex(0);
      setShowContentData2(false);
      setActiveButton(1);
    }
  };

  // Handle scrolling with feature sync
  const scroll = (direction) => {
    const totalItems = content?.images?.length || 0;

    if (direction === "left" && currentIndex > 0) {
      setCurrentIndex((prev) => Math.max(0, prev - cardsToShow));
    } else if (
      direction === "right" &&
      currentIndex + cardsToShow < totalItems
    ) {
      setCurrentIndex((prev) =>
        Math.min(totalItems - cardsToShow, prev + cardsToShow)
      );
    }
  };

  // Handle toggle button clicks
  const handleButtonClick = (buttonIndex) => {
    setActiveButton(buttonIndex);
    setShowContentData2(buttonIndex === 2);
    setCurrentIndex(0);
  };

  useEffect(() => {
    const updateCardsToShow = () => {
      if (window.innerWidth < 768) {
        setCardsToShow(1);
      } else if (window.innerWidth < 1280) {
        // Covers 768-1279px
        setCardsToShow(2);
      } else {
        setCardsToShow(3);
      }
    };

    updateCardsToShow();
    window.addEventListener("resize", updateCardsToShow);
    return () => window.removeEventListener("resize", updateCardsToShow);
  }, []);

  return (
    <>
      {/* Banner Section */}
      <div className="w-full max-w-full mx-auto relative">
        <div className="relative w-full h-[500px] md:h-[700px] 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"
                onClick={() => router.push("/scheduleDemo")}
              >
                <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>

      {/* Main Content Section */}
      <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%",
          }}
        >
          {/* Tabs Section */}
          <div className="px-4 sm:px-6 lg:px-[92px] lg:pr-[50px]">
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-7 gap-1 sm:gap-6 lg:gap-8 mb-4 sm:mb-6 lg:mb-7">
              {tabs.map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => handleTabClick(tab)}
                  className={`flex items-center space-x-2 sm:space-x-3 p-2 rounded-lg transition-all duration-200 hover:bg-gray-50  ${
                    selectedTab === tab.title
                      ? "border-b-4 border-gray-500"
                      : "border-b-4 border-transparent"
                  }`}
                >
                  <img
                    src={tab.icon}
                    alt={tab.title}
                    className="w-2 h-2 sm:w-5 sm:h-5 object-contain"
                  />
                  <span className="text-[10px] sm:text-[12px] text-gray-600 ">
                    {tab.title}
                  </span>
                </button>
              ))}
            </div>
          </div>

          <hr className="border-t border-gray-300" />

          {/* Toggle Buttons */}
          {/* <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> */}

          {/* Toggle Buttons */}
          <div className="flex flex-wrap justify-center items-center gap-3 md:gap-5 mt-8 md:mt-12">
            {currentTab?.button1 && (
              <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}
              </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>

          {/* Content Header */}
          <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>

            {/* Navigation Buttons */}
            <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-12 h-12 rounded-full border border-[#219EBC] flex items-center justify-center transition-all duration-300 ${
                  canScrollLeft
                    ? "hover:bg-[#219EBC] hover:text-white cursor-pointer"
                    : "opacity-50 cursor-not-allowed"
                }`}
              >
                <Image
                  src="/solution/arrow-left.png"
                  alt="Captcha"
                  width={20}
                  height={20}
                  className="rounded shadow"
                />
              </button>
              <button
                onClick={() => scroll("right")}
                disabled={!canScrollRight}
                className={`w-12 h-12 rounded-full border border-[#219EBC] flex items-center justify-center transition-all duration-300 ${
                  canScrollRight
                    ? "hover:bg-[#219EBC] hover:text-white cursor-pointer"
                    : "opacity-50 cursor-not-allowed"
                }`}
              >
                <Image
                  src="/solution/arrow-right.png"
                  alt="Captcha"
                  width={20}
                  height={20}
                  className="rounded shadow"
                />
              </button>
            </div>
          </div>

          {/* Cards Section */}
          {/* <div className="flex justify-center md:justify-start gap-10 mt-7 transition-all duration-500 ease-in-out border-t border-b border-gray-300">
            {visibleCards.map((src, index) => (
              <div key={`${currentIndex}-${index}`} className="flex mt-5">
                <div>
                  <div className="group relative bg-gray-800 rounded-[22px] overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
                    <Image
                      src={src}
                      alt={visibleFeatures[index]?.title || `Feature ${currentIndex + index + 1}`}
                      width={343}
                      height={283}
                      className="rounded-lg w-[280px] md:w-[343px] h-[230px] md:h-[283px] object-cover"
                    />
                  </div>
                  {visibleFeatures[index] && (
                    <div className="mt-4 w-[280px] md:w-[343px] px-2 md:px-0">
                      <h5 className="text-base md:text-lg lg:text-xl font-semibold mb-2 md:mb-4">
                        {visibleFeatures[index].title}
                      </h5>
                      <p className="text-gray-600 text-xs lg:pb-4 md:text-sm lg:text-base leading-relaxed">
                        {visibleFeatures[index].description}
                      </p>
                    </div>
                  )}
                </div>
                {index < cardsToShow - 1 && visibleCards.length > 1 && (
                  <div className="h-auto border-l border-gray-300 mx-8 mt-[-20px]" />
                )}
              </div>
            ))}
          </div> */}

          <div className="mt-7 transition-all duration-500 ease-in-out border-t border-b border-gray-300">
            <div
              className="grid gap-10"
              style={{
                gridTemplateColumns: `repeat(${cardsToShow}, minmax(280px, 1fr))`,
                overflowX: "auto",
                paddingBottom: "1rem",
              }}
            >
              {visibleCards.map((src, index) => (
                <div key={`${currentIndex}-${index}`} className="relative">
                  <div className="mt-5">
                    <div className="group relative bg-gray-800 rounded-[22px] overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
                      <Image
                        src={src}
                        alt={
                          visibleFeatures[index]?.title ||
                          `Feature ${currentIndex + index + 1}`
                        }
                        width={343}
                        height={283}
                        className="rounded-lg w-full h-[230px] md:h-[283px] object-cover"
                      />
                    </div>
                    {visibleFeatures[index] && (
                      <div className="mt-4 w-full px-2 md:px-0">
                        <h5 className="text-base md:text-lg lg:text-xl font-semibold mb-2 md:mb-4">
                          {visibleFeatures[index].title}
                        </h5>
                        <p className="text-gray-600 text-xs md:text-sm lg:text-base leading-relaxed">
                          {visibleFeatures[index].description}
                        </p>
                      </div>
                    )}
                  </div>
                  {index < cardsToShow - 1 && visibleCards.length > 1 && (
                    <div className="absolute right-[-20px] top-0 h-full border-r border-gray-300" />
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Additional Components */}
      <BusinessBenefits content={content} />
      <SolutionCard />
      <SolutionBackground content={content} />
    </>
  );
}