import React, { useEffect, useRef, useState } from "react";
import Image from "next/image";
import {
  Accordion,
  AccordionSummary,
  Button,
  FormHelperText,
  Grid,
  InputLabel,
  Link,
  List,
  ListItemText,
  Select,
  styled,
  TextField,
} from "@mui/material";
import {
  BannerContainer,
  ContentContainer,
  ContainerBox,
  GlobalTradeSection,
  LandingPageHeadings,
  GridStack,
  GridImageBox,
  LandingPageSubHeadings,
  LandingPageText,
  PageContentInfo,
  CommonEachSection,
  PageButton,
  ButtonContainer,
  ColumnGap,
  ColumnStack,
  CheckSection,
  SectionColoredBox,
  SectionWhiteBox,
  ColumnImage,
  LiveChatInfo,
  SendMessages,
  SendMessagesInnerBox,
  SendMessagesBox,
  MessageHeading,
  MessageFormBox,
  MessageFormButton,
  MessageText,
  MessageSubText,
  LiveChatinnData,
  LiveChatinnBox,
  TotalCountBox,
  TotalCountCol,
  CRMColumnStack,
  ExploreBusiness,
  MultipleBoxSec,
  SingleCol,
  SmallColrBox1,
  ListItemBox,
  Listitembutton,
  ListitemIconBox,
  ListIcon,
  SignUpBtnBox,
  SignUpBtn,
  SliderBackground,
  LandingpageSliderBox,
  SliderContentGap,
  TestimonialSlider,
  TestimonialDataBox,
  TestimonialDataMainBox,
  GridInfoBox,
  OurTopProducts,
  ButtonSize,
  EasySourcingBox,
  SingleColInn,
  TestimonialDataOuter,
  QuotationTxt,
  BannerFormData,
  FormCrossbtn,
  BannerFormInner,
  StyledButton,
  FieldLabel,
  QuickSignupButton,
  FormBox,
  FixedForm,
  BodyContentInfo,
  SectorLearnMore,
  CheckRow,
  ChatColumnImage,
  LandingNewsSection,
  LandingNewsItem,
  CenterDes,
  MainFeedAear,
  BlogReadMore,
  TestimonialBox,
  TestiminialButton,
  GetStarted,
  SectorsInformation,
  TradeshowSection,
  TradeShowFullImage,
  TradeShowSmallImage,
  OverlaySmall,
  OverlayCenter,
  OnlyImageOverlay,
  BlogImgBox,
  FlagImageStyle,
  Totalproducts,
  TotalProductCount,
  CategoryNameBox,
  GetQuotationBox,
  AddAttachmntArea,
  StyledButtonBox,
  AttachmentOuter,
  AttachmentBox,
  AttachmentName,
  SmartSellerOuter,
  InnerGrid,
  JoinAsSupllier,
  NewBannerContainer,
} from "./styles";
import { useRouter } from "next/router";
import { Form, useFormik } from "formik";
import * as Yup from "yup";
import { Formik } from "formik";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Slider from "react-slick";
import AOS from "aos";
import "aos/dist/aos.css";
// import dynamic from "next/dynamic";
import { useDispatch, useSelector } from "react-redux";
import CheckCircleRoundedIcon from "@mui/icons-material/CheckCircleRounded";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import { SelectChangeEvent } from "@mui/material/Select";
import EastRoundedIcon from "@mui/icons-material/EastRounded";
import { keyframes } from "@mui/system";
import { apiClient } from "@/components/common/common";
import ProductItem from "@/components/ProductsListing/ProductItem";
import { AddProductDetail } from "@/hooks/productDetailsReducer";
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import KeyboardArrowDownOutlinedIcon from "@mui/icons-material/KeyboardArrowDownOutlined";
import MenuIcon from "@mui/icons-material/Menu";
import BigPostdummy from "@/components/ProductsListing/BigPostdummy";
import { landingPage, retargettingGlobalmarket } from "@/utils/constantImages";
import { toast } from "react-toastify";
import { ErrorMessage } from "formik";
import ChatWindow from "@/components/Chat";
import ScrollableSections from "./testscroll";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import { getTokenFromCookies } from "@/utils/cookieUtils";
import { LightTooltip } from "@/components/common/Tooltip/tooltip";
import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
import MobileInputCommon from "@/components/common/PhoneInput";
import { Img } from "@/components/common/registerationpopup";
import { API_CDN_URL } from "@/utils/staticValues";
import AuthDialog from "@/components/common/AuthQuickSignup";

const CounterBox = styled(Box)(() => ({
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  alignItems: "center",
  textAlign: "center",
  margin: "20px 30px",
}));

const CounterIcon = styled(Box)(() => ({}));

const CounterNumber = styled(Typography)(() => ({
  fontSize: "22px",
  color: "#D7282F",
  fontWeight: "700",
  padding: "10px 0",
  "@media screen and (max-width:1024px)": {
    fontSize: "18px",
  },
}));

const CounterLabel = styled(Typography)(() => ({
  fontSize: "16px",
  color: "#000",
}));

const VisuallyHiddenInput = styled("input")({
  clip: "rect(0 0 0 0)",
  clipPath: "inset(50%)",
  height: 1,
  overflow: "hidden",
  position: "absolute",
  bottom: 0,
  left: 0,
  whiteSpace: "nowrap",
  width: 1,
});

const StyledAccordion = styled(Accordion)(({ theme }) => ({
  boxShadow: "none",
  "&:before": {
    display: "none",
  },
  "&.Mui-expanded": {
    margin: "0",
  },
}));

const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
  padding: "0",
  "& .MuiAccordionSummary-content": {
    alignItems: "center",
  },
}));

const StyledTypography = styled(Typography)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  fontWeight: 700,
  fontSize: "20px",
  "@media screen and (max-width:767px)": {
    fontSize: "14px",
    padding: 0,
  },

  "& span": {
    color: "#d32f2f",
    marginRight: theme.spacing(1),
  },
}));

// Define the keyframes for the slide-in and slide-out animation
// Keyframes for fade up and down
const fadeUpDown = keyframes`
  0%, 100% {
    opacity: 0;
    transform: translateY(20px);  /* Start and end at the bottom (faded out) */
  }
  50% {
    opacity: 1;
    transform: translateY(0);  /* At midpoint, fully visible and at original position */
  }
`;

// Define the styles for each box with different durations and delays
const box1Style = {
  // animation: `${fadeUpDown} 3s ease-in-out 0s infinite`, // Slowed down a bit
};

const box2Style = {
  // animation: `${fadeUpDown} 2.5s ease-in-out 0.5s infinite`, // Added a slight delay
};

const box3Style = {
  // animation: `${fadeUpDown} 4.5s ease-in-out 1s infinite`, // Balanced duration and delay
};

const box4Style = {
  // animation: `${fadeUpDown} 3.5s ease-in-out 1.5s infinite`, // Smoother timing
};

const box5Style = {
  // animation: `${fadeUpDown} 4s ease-in-out 2s infinite`, // Slightly slower with a bit more delay
};

const box6Style = {
  // animation: `${fadeUpDown} 5.5s ease-in-out 2.5s infinite`, // Longest duration and delay for a final, smooth effect
};

// Create staggered transition delays for opacity changes
const staggeredDelays = [0, 0.5, 1, 1.5, 2, 2.5]; // Adjust values for smoother effect

const testimonials = [
  {
    image: " /assets/images/landing-page/testimonial-img.webp",
    quote:
      "Power Cozmo has transformed the way we do business. As a seller, the platform’s intuitive interface and vast global reach have connected us with buyers we never imagined. The streamlined process, from listing our products to closing deals, has been seamless. It’s truly a game-changer for our business!",
    name: "Larry Culp",
    title: "CEO, General Electric",
  },
  {
    image: " /assets/images/landing-page/testimonial-img-2.webp",
    quote:
      "Power Cozmo is a powerful tool for businesses looking to tap into global markets. Its platform provides a secure, transparent, and efficient trading environment that has enhanced our supply chain interactions. The seamless integration with trusted suppliers makes it an invaluable asset for scaling international business operations.",
    name: "John Neal",
    title: "CEO, Lloyd's London",
  },
  {
    image: " /assets/images/landing-page/testimonial-img-3.webp",
    quote:
      "Power Cozmo has been instrumental in expanding our global presence. The platform’s reliable network and efficient transaction processes have made it easier to reach new markets and build long-term partnerships. Power Cozmo is redefining B2B trade, offering unmatched opportunities for growth in key industrial sectors.",
    name: "Anil Rai Gupta",
    title: "MD, Havells India Limited",
  },
  {
    image: " /assets/images/landing-page/testimonial-img-2.jpg",
    quote:
      "Power Cozmo is a powerful tool for businesses looking to tap into global markets. Its platform provides a secure, transparent, and efficient trading environment that has enhanced our supply chain interactions. The seamless integration with trusted suppliers makes it an invaluable asset for scaling international business operations.",
    name: "John Neal",
    title: "CEO, Lloyd's London",
  },
  {
    image: " /assets/images/landing-page/testimonial-img-3.jpg",
    quote:
      "Power Cozmo has been instrumental in expanding our global presence. The platform’s reliable network and efficient transaction processes have made it easier to reach new markets and build long-term partnerships. Power Cozmo is redefining B2B trade, offering unmatched opportunities for growth in key industrial sectors.",
    name: "Anil Rai Gupta",
    title: "MD, Havells India Limited",
  },
];

const SampleNextArrow = (props) => {
  const { onClick } = props;
  return (
    <ButtonSize onClick={onClick} sx={{ right: 0 }}>
      <ArrowForwardIosIcon />
    </ButtonSize>
  );
};
const SamplePrevArrow = (props) => {
  const { onClick } = props;
  return (
    <ButtonSize onClick={onClick} sx={{ right: 25 }}>
      <ArrowBackIosIcon />
    </ButtonSize>
  );
};

const TestiNextArrow = (props) => {
  const { onClick } = props;
  return (
    <TestiminialButton onClick={onClick} sx={{ right: "46%" }}>
      <ArrowForwardIosIcon />
    </TestiminialButton>
  );
};
const TestiPrevArrow = (props) => {
  const { onClick } = props;
  return (
    <TestiminialButton onClick={onClick} sx={{ left: "45%" }}>
      <ArrowBackIosIcon />
    </TestiminialButton>
  );
};
const settings = {
  infinite: false,
  slidesToShow: 3,
  slidesToScroll: 3,
  speed: 500,
  rows: 2,
  dots: true,
  responsive: [
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
      },
    },
  ],
};
const settingsTestimonial = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 3000,
  nextArrow: <TestiNextArrow />,
  prevArrow: <TestiPrevArrow />,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
      },
    },
    {
      breakpoint: 800,
      settings: {
        slidesToShow: 2,
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
      },
    },
  ],
};

const settingsCrm = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  autoplay: true,
};

const settingsBigPost = {
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  speed: 900,
  autoplaySpeed: 3000,
  cssEase: "linear",
  arrows: true,
  nextArrow: <SampleNextArrow />,
  prevArrow: <SamplePrevArrow />,
};

const settingsProduct = {
  dots: false,
  infinite: true,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 1,
  nextArrow: <SampleNextArrow />,
  prevArrow: <SamplePrevArrow />,
  responsive: [
    {
      breakpoint: 1600,
      settings: {
        slidesToShow: 3,
      },
    },
    {
      breakpoint: 1300,
      settings: {
        slidesToShow: 2,
      },
    },
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 2,
      },
    },
    {
      breakpoint: 800,
      settings: {
        slidesToShow: 3,
      },
    },
    {
      breakpoint: 700,
      settings: {
        slidesToShow: 2,
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        nextArrow: false,
        prevArrow: false,
      },
    },
  ],
};
const settingsCategoriesSlide = {
  className: "center",
  centerMode: true,
  infinite: true,
  centerPadding: "60px",
  slidesToShow: 3,
  rows: 2,
  slidesPerRow: 2,
  autoplay: true,
  speed: 8000,
  autoplaySpeed: 0,
  cssEase: "linear",
  nextArrow: <SampleNextArrow />,
  prevArrow: <SamplePrevArrow />,
  responsive: [
    {
      breakpoint: 1280,
      settings: {
        slidesPerRow: 2,
      },
    },
    {
      breakpoint: 1024,
      settings: {
        slidesPerRow: 1,
      },
    },
    {
      breakpoint: 600,
      settings: {
        rows: 1,
        slidesToShow: 1,
        nextArrow: false,
        prevArrow: false,
        speed: 8000,
      },
    },
    {
      breakpoint: 480,
      settings: {
        rows: 1,
        slidesToShow: 0.5,
        nextArrow: false,
        prevArrow: false,
        speed: 8000,
      },
    },
    {
      breakpoint: 320,
      settings: {
        rows: 1,
        slidesToShow: 0.3,
        nextArrow: false,
        prevArrow: false,
      },
    },
  ],
};

const CounterItem = ({
  icon,
  target,
  label,
}: {
  icon: React.ReactNode;
  target: number;
  label: string;
}) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const increment = target / 200;
    const updateCounter = () => {
      setCount((prevCount) => {
        if (prevCount < target) {
          return Math.ceil(prevCount + increment);
        }
        return target;
      });
    };

    const timer = setInterval(updateCounter, 10);

    if (count === target) {
      clearInterval(timer);
    }

    return () => clearInterval(timer);
  }, [count, target]);

  return (
    <CounterBox>
      <CounterIcon>{icon}</CounterIcon>
      <CounterNumber>{count}</CounterNumber>
      <CounterLabel>{label}</CounterLabel>
    </CounterBox>
  );
};

export default function Homepage(props: any) {
  const { defaultValues } = props;
  const [showTotal, setShowTotal] = useState(false);
  const router = useRouter();
  const dispatch = useDispatch();
  const [data, setData] = useState([]);
  const [bigPostList, setBigPostList] = useState([]);
  const [age, setAge] = useState("");
  const [expanded, setExpanded] = useState<string | false>("panel1");
  const [isOpen, setIsOpen] = useState(true);
  const [showContent, setShowContent] = useState(false);
  const [tradeShowData, setTradeShowData] = useState([]);
  const [token, setToken] = useState(null);
  const { defaultCode } = useSelector((state: any) => state.geoLocation);
  const mobileRef = useRef(null);
  const [validate, setValidation] = useState<boolean>(false);
  const [showQuickSignup, setQuickSignup] = useState<boolean>(false);
  const [toggleSignUp, setToggleSignup] = useState<boolean>(true);
  const currency =
    typeof localStorage == "undefined"
      ? ""
      : localStorage.getItem("currency") ?? 1;
  const [formDataQuick, setFormDataQuick] = useState({
    name: "",
    email: "",
    phone: "",
    phone_code: "91",
  });
  useEffect(() => {
    const interval = setInterval(() => {
      setShowTotal((prev) => !prev);
    }, 4000);

    return () => clearInterval(interval);
  }, []);
  const [topRankingProducts, setTopRankingProducts] = useState();

  const [blogs, setBlogs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [sendQueryButtonActive, setSendQueryButtonActive] =
    useState<boolean>(false);

  const list = useSelector((state: any) => state.header?.pageList ?? []);
  useEffect(() => {
    const token = getTokenFromCookies();
    setToken(token);
  }, []);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(
          `${API_CDN_URL}/cache/topRanking_${currency}.json`
        );
        const data = await res.json();
        setBigPostList(data.data);
      } catch {
        try {
          const topRatedResponse = await apiClient(
            `products/top-ranking-product?currency=${currency}`,
            "GET"
          );
          if (topRatedResponse.status === 200) {
            setBigPostList(topRatedResponse.data);
          }
        } catch (error) {
          console.error("Error fetching data", error);
        }
      }
    };
    fetchData();

    return () => {};
  }, [currency]);

  const formik = useFormik({
    initialValues: {
      name: "",
      email: "",
      phone: "",
      mobile_code: defaultCode,
      mobile_country_code: defaultValues?.mobile_country_code,
    },
    validationSchema: Yup.object().shape({
      name: Yup.string()
        .required("Full Name is required")
        .min(2, "Minimum 2 characters required"),
      email: Yup.string()
        .email("Invalid email format")
        .required("Email is required"),
      phone: Yup.string().required("Phone number is required"),
    }),
    onSubmit: async (values) => {
      try {
        console.log("Form values:", values);
        const response = await apiClient("auth/quick-signup", "post", {
          body: { email: values.email },
        });

        if (response.email) {
          formik.setFieldError("email", "Email already exists");
          toast.info("Email Already Exists");
        } else {
          const signupResponse = await apiClient("auth/quick-signup", "post", {
            body: values,
          });

          if (signupResponse.status == 200) {
            console.log("Signup successful:", signupResponse);
            localStorage.setItem("Token", signupResponse.accessToken);
            localStorage.setItem(
              "userData",
              JSON.stringify(signupResponse.user)
            );
            setTimeout(() => {
              window.location.reload();
            }, 1000);

            toast.success("Successfully Signed up");
          } else {
            console.log("Signup failed:", signupResponse);
            toast.error("Signup failed");
          }
        }
      } catch (error) {
        console.error("Error during signup:", error);
        toast.error("Error during signup ,Please try again");
      }
    },
  });

  const setMobileNumber = (phone, mobile_code, country_code, isValid) => {
    formik.setFieldValue("mobile_code", mobile_code);
    formik.setFieldValue("mobile_country_code", country_code);
    formik.setFieldValue("phone", phone);
    formik.setFieldError("phone", "");
  };

  const [unitsOptions, setUnitsOptions] = useState([]);
  useEffect(() => {
    const fetchUnits = async () => {
      try {
        const res = await fetch(`${API_CDN_URL}/cache/unitsData.json`);
        const data = await res.json();
        setUnitsOptions(data?.data);
      } catch {
        try {
          const { data } = await apiClient("unit", "get");
          console.log("udata", data);
          setUnitsOptions(data);
        } catch (error) {
          console.error("Error fetching units:", error);
        }
      }
    };

    fetchUnits();
  }, []);

  const [formData, setFormData] = useState({
    product_name: "",
    description: "",
    purchage_quantity: "",
    units: "",
    file: [],
  });

  const [filePreviews, setFilePreviews] = useState([]);
  const initialQuoteValues = {
    product_name: "",
    description: "",
    purchage_quantity: "",
    file: [],
    units: "",
  };
  const quoteValidationSchema = Yup.object().shape({
    product_name: Yup.string().required("Product Name is required"),
    description: Yup.string().required("Description is required"),
    purchage_quantity: Yup.number().required(
      "Purchase Quantity is required and should be number"
    ),
    units: Yup.string().required("Unit/Sets is required"),
  });

  const handleSubmitQuote = async (values, { setSubmitting, resetForm }) => {
    const token = getTokenFromCookies();
    if (!token) {
      setSendQueryButtonActive(true);
      setQuickSignup(true);
      return;
    }
    console.log("valuEs", values);
    let formData = new FormData();
    formData.append("product_name", values.product_name);
    formData.append("purchage_quantity", values.purchage_quantity);
    formData.append("units", values.units);
    formData.append("description", values.description);

    if (values.file) {
      if (Array.isArray(values.file)) {
        values.file.forEach((file) => formData.append("file[]", file));
      } else {
        formData.append("file", values.file);
      }
    }
    if (!token) {
      toast.error("Token not found. Please login to continue.");
      setSubmitting(false);
      return;
    }

    try {
      for (let [key, value] of formData.entries()) {
        console.log(`${key}:`, value);
      }
      const response = await apiClient(
        "front/contactUs",
        "post",
        {
          body: formData,
          Authorization: `Bearer ${token}`,
        },
        true
      );

      console.log("Response:", response);
      toast.success("Form submitted successfully!");
      resetForm();
    } catch (error) {
      console.error("Error posting request:", error);
      toast.error("Error submitting form. Please try again..");
    } finally {
      setSubmitting(false);
    }
  };

  const formatDate = (dateStr) => {
    const date = new Date(dateStr);
    return new Intl.DateTimeFormat("en-US", {
      day: "numeric",
      month: "long",
    }).format(date);
  };

  useEffect(() => {
    const fetchBlogs = async () => {
      try {
        const res = await fetch(`${API_CDN_URL}/cache/blog.json`);
        const data = await res.json();
        setBlogs(data?.data);
      } catch {
        try {
          const response = await apiClient("blogs/getAll", "GET");
          setBlogs(response.data);
          console.log(response.data);
        } catch (error) {
          console.error("Error fetching blogs:", error);
        } finally {
          setLoading(false);
        }
      }
    };
    fetchBlogs();
  }, []);

  const navigateHandler = (path: string) => {
    window.open(`/page/${path}`, "_blank", "noreferrer");
  };
  const handleCloseDialog = () => {
    setIsOpen(!isOpen);
  };

  // useEffect(() => {
  //   const fetchTradeShowData = async () => {
  //     try {
  //       const response = await apiClient("trade_show/admin_list", "GET");
  //       if (response.status === false) {
  //         throw new Error("Data fetch was unsuccessful");
  //       }
  //       setTradeShowData(response.data);
  //       console.log(response.data);
  //     } catch (err) {
  //       console.log("Error fetching data:", err);
  //     }
  //   };
  //   fetchTradeShowData();
  // }, []);
  const handleFormChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };
  const fetchAllProductsList = async () => {
    try {
      const res = await fetch(
        `${API_CDN_URL}/cache/allProductList_${currency}.json`
      );
      const data = await res.json();
      setData(data?.data);
    } catch {
      const userid = JSON.parse(localStorage.getItem("userData"))?.id;
      const currency = localStorage.getItem("currency") ?? 1;
      const body = {
        per_page: "8",
        page: 1,
        seller_id: "",
        user_id: userid || "",
      };
      const response = await apiClient(
        `front/product/list?per_page=20&currency=${currency}`,
        "GET"
      );
      const { data } = response;
      setData(data);
      dispatch(AddProductDetail({ status: false, loader: false, data: {} }));
    }
  };
  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value as string);
  };
  const handleChangeExpand =
    (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
      setExpanded(newExpanded ? panel : false);
    };
  useEffect(() => {
    if (typeof window !== "undefined") {
      AOS.init({ duration: 1200 });
    }
  }, []);
  useEffect(() => {}, []);

  useEffect(() => {
    const timer = setTimeout(() => {
      setShowContent(true);
    }, 500);
    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    document.body.classList.add("cms-body");
    fetchAllProductsList();
    return () => {
      document.body.classList.remove("cms-body");
    };
  }, []);

  if (!showContent) {
    return <Box sx={{ height: "100vh" }} />;
  }

  const handleSubmit = async (event) => {
    console.log("values", formData);
    event.preventDefault();
    const token = localStorage.getItem("Token");
    console.log("token is", token);
    try {
      console.log("formdataaaa", formData);
      const response = await apiClient("front/contactUs", "POST", {
        body: JSON.stringify(formData),
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
      });
      console.log("Response:", response);
    } catch (error) {
      console.error("Error posting request:", error);
    }
  };
  const formatDateRange = (startDate, endDate) => {
    const start = new Date(startDate);
    const end = new Date(endDate);
    const startDay = start.toLocaleString("en-US", { day: "2-digit" });
    const startMonth = start.toLocaleString("en-US", { month: "short" });
    const startYear = start.toLocaleString("en-US", { year: "numeric" });
    const endDay = end.toLocaleString("en-US", { day: "2-digit" });
    const endMonth = end.toLocaleString("en-US", { month: "short" });
    const endYear = end.toLocaleString("en-US", { year: "numeric" });

    return `${startMonth} ${startDay} - ${endMonth} ${endDay} , ${endYear}`;
  };
  const handleClose3 = () => {
    setQuickSignup(false);
  };

  return (
    <Box sx={{ backgroundColor: "#fff" }}>
      {sendQueryButtonActive && (
        <AuthDialog
          open={showQuickSignup}
          handleClose={handleClose3}
          toggleSignUp={toggleSignUp}
          setToggleSignup={setToggleSignup}
          SubmitQuotation={() => console.log("l")}
        />
      )}
      <ChatWindow />
      <NewBannerContainer>
        <Image
          src="https://d1oow2vyp2byq1.cloudfront.net/frontStatic/3kahnyfOireFhUa3Zr7PLf28kBLUVwhpWVePdVJ4.webp"
          alt="Banner"
          fill
          fetchPriority="high"
          style={{ objectFit: "cover" }}
        />
        <ContentContainer>
          <Typography variant="h2" data-aos="fade-up" data-aos-delay="100">
            Buy and Sell Machinery Online
          </Typography>
          <Typography
            variant="h1"
            gutterBottom
            data-aos="fade-up"
            data-aos-delay="200"
          >
            Empowering Global Trade Across Energy,
            <br /> Power, Oil & Gas, and Water Sectors
          </Typography>
          <Typography variant="body1" data-aos="fade-up" data-aos-delay="300">
            We provide a wide range of products, from turbines and oil & gas
            equipment to water management and power systems.
            <br />
            Our platform also connects businesses with EPC services for
            large-scale industrial projects..
          </Typography>
        </ContentContainer>
      </NewBannerContainer>
      <BodyContentInfo>
        <PageContentInfo>
          <SectionWhiteBox>
            <ContainerBox className="mypagecontainer">
              <CommonEachSection>
                <LandingPageHeadings data-aos="fade-up">
                  Connecting Businesses Worldwide Through B2B Solutions
                </LandingPageHeadings>
                <SectorsInformation>
                  <Grid container spacing={2}>
                    <Grid
                      item
                      xs={12}
                      sm={12}
                      md={3}
                      lg={3}
                      data-aos="fade-up"
                      data-aos-delay="100"
                    >
                      <GridStack>
                        <GridImageBox>
                          <Image
                            src="/assets/images/landing-page/energy.svg"
                            alt="Energy"
                            width={30}
                            height={30}
                          />
                        </GridImageBox>
                        <GridInfoBox>
                          <LandingPageSubHeadings variant="h4">
                            Energy
                          </LandingPageSubHeadings>
                          <LandingPageText className="hovertext">
                            Power Cozmo connects businesses with innovative
                            energy solutions, from renewable energy technologies
                            to power storage systems. Our platform facilitates
                            trade to meet the growing demand for sustainable and
                            efficient energy across industries.
                          </LandingPageText>
                        </GridInfoBox>
                        <SectorLearnMore>
                          <Link
                            underline="none"
                            onClick={() =>
                              router.push("/category/sector/energy")
                            }
                          >
                            Learn More <EastRoundedIcon />
                          </Link>
                        </SectorLearnMore>
                      </GridStack>
                    </Grid>
                    <Grid
                      item
                      xs={12}
                      sm={12}
                      md={3}
                      lg={3}
                      data-aos="fade-up"
                      data-aos-delay="200"
                    >
                      <GridStack>
                        <GridImageBox>
                          <Image
                            src="/assets/images/landing-page/power-generation-img.svg"
                            alt="Power Generation"
                            width={30}
                            height={30}
                          />
                        </GridImageBox>
                        <GridInfoBox>
                          <LandingPageSubHeadings variant="h4">
                            Power Generation
                          </LandingPageSubHeadings>
                          <LandingPageText>
                            Power Cozmo offers a diverse range of products for
                            the power generation sector, including turbines and
                            grid infrastructure, helping businesses source
                            reliable solutions to enhance efficiency and meet
                            global power demands.
                          </LandingPageText>
                        </GridInfoBox>
                        <SectorLearnMore>
                          <Link
                            underline="none"
                            onClick={() =>
                              router.push("/category/sector/power-generation")
                            }
                          >
                            Learn More <EastRoundedIcon />
                          </Link>
                        </SectorLearnMore>
                      </GridStack>
                    </Grid>
                    <Grid
                      item
                      xs={12}
                      sm={12}
                      md={3}
                      lg={3}
                      data-aos="fade-up"
                      data-aos-delay="300"
                    >
                      <GridStack>
                        <GridImageBox>
                          <Image
                            src="/assets/images/landing-page/oilgas-img.svg"
                            alt="Oil & Gas"
                            width={30}
                            height={30}
                          />
                        </GridImageBox>
                        <GridInfoBox>
                          <LandingPageSubHeadings variant="h4">
                            Oil & Gas
                          </LandingPageSubHeadings>
                          <LandingPageText>
                            Power Cozmo supports the oil & gas industry with a
                            comprehensive marketplace for equipment, pipelines,
                            and safety systems, enabling businesses to optimize
                            operations and meet industry challenges with trusted
                            partners.
                          </LandingPageText>
                        </GridInfoBox>
                        <SectorLearnMore>
                          <Link
                            underline="none"
                            onClick={() =>
                              router.push("/category/sector/oil-gas")
                            }
                          >
                            Learn More <EastRoundedIcon />
                          </Link>
                        </SectorLearnMore>
                      </GridStack>
                    </Grid>
                    <Grid
                      item
                      xs={12}
                      sm={12}
                      md={3}
                      lg={3}
                      data-aos="fade-up"
                      data-aos-delay="400"
                    >
                      <GridStack className="laststack">
                        <GridImageBox className="hoverbgcolor">
                          <Image
                            src="/assets/images/landing-page/water-management-img.svg"
                            alt="Water Management"
                            width={30}
                            height={30}
                          />
                        </GridImageBox>
                        <GridInfoBox>
                          <LandingPageSubHeadings
                            className="hovertext"
                            variant="h4"
                          >
                            Water Management
                          </LandingPageSubHeadings>
                          <LandingPageText>
                            Power Cozmo connects businesses with advanced water
                            management solutions, from wastewater treatment to
                            desalination technologies, ensuring efficient water
                            distribution and sustainable practices for
                            industrial and municipal applications.
                          </LandingPageText>
                        </GridInfoBox>
                        <SectorLearnMore>
                          <Link
                            underline="none"
                            onClick={() =>
                              router.push("/category/sector/water-management")
                            }
                          >
                            Learn More <EastRoundedIcon />
                          </Link>
                        </SectorLearnMore>
                      </GridStack>
                    </Grid>
                  </Grid>
                  {/* <ScrollableSections /> */}
                </SectorsInformation>
              </CommonEachSection>
            </ContainerBox>
          </SectionWhiteBox>
          <SectionColoredBox>
            <CommonEachSection>
              <ContainerBox className="mypagecontainer">
                <Grid container spacing={2}>
                  <Grid item xs={12} sm={12} md={5}>
                    <ColumnImage>
                      <Slider {...settingsCrm}>
                        <div>
                          <img
                            src={landingPage?.crmimage1}
                            alt="Slide 1"
                            width="100%"
                            height="100%"
                          />
                        </div>
                        <div>
                          <img
                            src={landingPage?.crmimage2}
                            alt="Slide 2"
                            width="100%"
                            height="100%"
                          />
                        </div>
                        <div>
                          <Img
                            src={landingPage?.crmimage3}
                            alt="Slide 3"
                            width="100%"
                            height="100%"
                          />
                        </div>
                      </Slider>
                    </ColumnImage>
                  </Grid>
                  <Grid item xs={12} sm={12} md={7}>
                    <ColumnGap data-aos="fade-up" data-aos-delay="100">
                      <CRMColumnStack>
                        <LandingPageHeadings className="leftHeading">
                          What is Power Cozmo CRM?
                        </LandingPageHeadings>
                        <LandingPageText>
                          Power Cozmo’s CRM is a custom-built solution designed
                          to simplify and enhance business interactions.
                          Tailored for B2B companies in the energy, power
                          generation, oil & gas, and water management sectors,
                          our CRM empowers you to efficiently manage leads,
                          track customer engagement, and build stronger
                          relationships. With intuitive features like real-time
                          analytics, automated workflows, and seamless
                          integration into our platform, businesses can
                          streamline their sales cycles and maximize growth.
                          Power Cozmo CRM ensures that every client interaction
                          is organized, insightful, and actionable, allowing you
                          to stay ahead in today's competitive market.
                        </LandingPageText>
                        <CheckSection>
                          <CheckRow>
                            <CheckCircleRoundedIcon />
                            <Box>
                              <span>Lead Management:</span>
                              <Typography>
                                Easily organize, track, and nurture leads for
                                better conversions and growth.
                              </Typography>
                            </Box>
                          </CheckRow>

                          <CheckRow>
                            <CheckCircleRoundedIcon />
                            <Box>
                              <span>Automated Workflows</span>
                              <Typography>
                                Save time with automatic processes that
                                streamline sales and customer engagement.
                              </Typography>
                            </Box>
                          </CheckRow>

                          <CheckRow>
                            <CheckCircleRoundedIcon />
                            <Box>
                              <span>Real-Time Insights</span>
                              <Typography>
                                Make data-driven decisions with instant access
                                to customer interactions and analytics
                              </Typography>
                            </Box>
                          </CheckRow>
                        </CheckSection>
                      </CRMColumnStack>
                    </ColumnGap>
                  </Grid>
                </Grid>
              </ContainerBox>
            </CommonEachSection>
          </SectionColoredBox>
          <SectionWhiteBox>
            <CommonEachSection>
              <ContainerBox className="mypagecontainer">
                <Grid container spacing={2}>
                  <Grid item xs={12} sm={12} md={5}>
                    <ColumnStack>
                      <LandingPageHeadings className="leftHeading">
                        Live Chat: Resolve up to 80% of cases
                      </LandingPageHeadings>
                      <LandingPageText>
                        Power Cozmo’s Live Chat enables real-time support,
                        allowing businesses to resolve up to 80% of inquiries
                        instantly and efficiently.
                      </LandingPageText>
                      <LiveChatInfo>
                        <LiveChatinnData>
                          <Image
                            src="../assets/images/landing-page/live-chat1.svg"
                            width={20}
                            height={21}
                            alt="live-chat"
                          />
                          <LiveChatinnBox>
                            <Typography variant="h3">
                              Instant Response Time
                            </Typography>
                            <Typography variant="body1">
                              Address customer concerns in real time, reducing
                              wait times and improving overall user satisfaction
                              and retention.
                            </Typography>
                          </LiveChatinnBox>
                        </LiveChatinnData>

                        <LiveChatinnData>
                          <Image
                            src="../assets/images/landing-page/live-chat2.svg"
                            width={20}
                            height={21}
                            alt="live-chat"
                          />
                          <LiveChatinnBox>
                            <Typography variant="h3">
                              Personalized Support
                            </Typography>
                            <Typography variant="body1">
                              Provide tailored solutions by connecting users
                              directly with experts, ensuring each query is
                              handled with care and precision, enhancing
                              customer trust.
                            </Typography>
                          </LiveChatinnBox>
                        </LiveChatinnData>
                        <LiveChatinnData>
                          <Image
                            src="../assets/images/landing-page/live-chat3.svg"
                            width={20}
                            height={24}
                            alt="live-chat"
                          />
                          <LiveChatinnBox>
                            <Typography variant="h3">
                              Seamless Integration
                            </Typography>
                            <Typography variant="body1">
                              Our live chat integrates with Power Cozmo’s CRM,
                              ensuring all interactions are logged and easily
                              accessible for future follow-up.
                            </Typography>
                          </LiveChatinnBox>
                        </LiveChatinnData>
                      </LiveChatInfo>
                    </ColumnStack>
                  </Grid>
                  <Grid item xs={12} sm={12} md={1}></Grid>
                  <Grid item xs={12} sm={12} md={6}>
                    <ChatColumnImage>
                      <img
                        src="/assets/images/landing-page/live-chat-image.webp"
                        width="100%"
                        height="100%"
                        alt="chat"
                      />
                    </ChatColumnImage>
                  </Grid>
                </Grid>
              </ContainerBox>
            </CommonEachSection>
          </SectionWhiteBox>

          <SectionColoredBox>
            <CommonEachSection>
              <ExploreBusiness className="mypagecontainer">
                <LandingPageHeadings>
                  Explore customized offerings designed for your business
                </LandingPageHeadings>
                <TotalCountBox>
                  <Grid container spacing={2}>
                    <Grid item xs={6} sm={6} md={3}>
                      <TotalCountCol>
                        <CounterItem
                          icon={
                            <Image
                              src="../assets/images/landing-page/total-count-1.svg"
                              width={40}
                              height={40}
                              alt="total-count"
                            />
                          }
                          target={2000}
                          label="Products"
                        />
                      </TotalCountCol>
                    </Grid>
                    <Grid item xs={6} sm={6} md={3}>
                      <TotalCountCol>
                        <CounterItem
                          icon={
                            <Image
                              src="../assets/images/landing-page/total-count-2.svg"
                              width={40}
                              height={40}
                              alt="total-count"
                            />
                          }
                          target={1000}
                          label="Suppliers"
                        />
                      </TotalCountCol>
                    </Grid>
                    <Grid item xs={6} sm={6} md={3}>
                      <TotalCountCol>
                        <CounterItem
                          icon={
                            <Image
                              src="../assets/images/landing-page/total-count-1.svg"
                              width={40}
                              height={40}
                              alt="total-count"
                            />
                          }
                          target={12000}
                          label="Product Categories"
                        />
                      </TotalCountCol>
                    </Grid>
                    <Grid item xs={6} sm={6} md={3}>
                      <TotalCountCol>
                        <CounterItem
                          icon={
                            <Image
                              src="../assets/images/landing-page/total-count-1.svg"
                              width={40}
                              height={40}
                              alt="total-count"
                            />
                          }
                          target={4000}
                          label="countries and regions"
                        />
                      </TotalCountCol>
                    </Grid>
                  </Grid>
                </TotalCountBox>
                <MultipleBoxSec>
                  <Box
                    sx={{
                      margin: "4px",
                    }}
                  >
                    <Slider {...settingsCategoriesSlide}>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box1Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox1">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">20+</Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Pump & Vaccum Equipment
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box1Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox2">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">50+</Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Industrial Equipments and components
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box5Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox3">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">600</Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Industrial Equipments and components
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box4Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox4">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">10K</Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Chemical dosing pumps
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box2Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox5">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">
                                150+
                              </Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Chemical dosing pumps
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box4Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox6">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">
                                200+
                              </Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Water Management & Big Power Supply
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box1Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox1">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">20+</Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Pump & Vaccum Equipment
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box6Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox2">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">
                                150+
                              </Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Industrial Equipments and components
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box3Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox3">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">
                                150+
                              </Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Industrial Equipments and components jhgl,
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box1Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox4">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">
                                150+
                              </Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Chemical dosing pumps
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box6Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox5">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">
                                150+
                              </Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Chemical dosing pumps
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box1Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox6">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">
                                150+
                              </Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Water Management & Big Power Supply
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>

                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box1Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox1">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">20+</Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Pump & Vaccum Equipment
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box1Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox2">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">50+</Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Industrial Equipments and components
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box5Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox3">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">600</Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Industrial Equipments and components
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box4Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox4">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">10K</Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Chemical dosing pumps
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box2Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox5">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">
                                150+
                              </Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Chemical dosing pumps
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box4Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox6">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">
                                200+
                              </Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Water Management & Big Power Supply
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box1Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox1">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">20+</Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Pump & Vaccum Equipment
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box6Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox2">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">
                                150+
                              </Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Industrial Equipments and components
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box3Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox3">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">
                                150+
                              </Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Industrial Equipments and components
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box1Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox4">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">
                                150+
                              </Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Chemical dosing pumps
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box6Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox5">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">
                                150+
                              </Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Chemical dosing pumps
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                      <div>
                        <SingleCol>
                          <SingleColInn sx={{ ...box1Style }}>
                            <CategoryNameBox
                              sx={{ opacity: showTotal ? 0 : 1 }}
                            >
                              <SmallColrBox1 className="colorbox6">
                                <Image
                                  src="https://staging.powercozmo.com/public/uploads/category/icon/1716184419_energy.svg"
                                  width={25}
                                  height={23}
                                  alt=""
                                />
                              </SmallColrBox1>
                            </CategoryNameBox>
                            <TotalProductCount
                              sx={{ opacity: showTotal ? 1 : 0 }}
                            >
                              <Totalproducts variant="body2">
                                150+
                              </Totalproducts>
                            </TotalProductCount>
                            <Typography variant="body1">
                              Water Management & Big Power Supply
                            </Typography>
                          </SingleColInn>
                        </SingleCol>
                      </div>
                    </Slider>
                  </Box>
                </MultipleBoxSec>
              </ExploreBusiness>
            </CommonEachSection>
          </SectionColoredBox>

          <SectionWhiteBox className="discover-business">
            <CommonEachSection>
              <Box className="mypagecontainer">
                <LandingPageHeadings sx={{ textAlign: "center" }}>
                  Explore Opportunities to Grow Your Business
                </LandingPageHeadings>
                <OurTopProducts>
                  <Box>
                    <Grid container spacing={2}>
                      <Grid item xs={12} sm={12} md={6} lg={5} xl={4}>
                        <Typography variant="h4">Top ranking</Typography>
                        {bigPostList?.length > 0 && (
                          <Box
                            key={"index"}
                            style={{
                              backgroundColor: "#FFF6F6",
                              borderRadius: "6px",
                            }}
                          >
                            {bigPostList.length > 1 ? (
                              <Slider {...settingsBigPost}>
                                {bigPostList?.map((bigPostElement, i) => {
                                  return (
                                    <Box
                                      sx={{ position: "relative" }}
                                      key={`Bigpost-${i}`}
                                    >
                                      <BigPostdummy data={bigPostElement} />
                                    </Box>
                                  );
                                })}
                              </Slider>
                            ) : (
                              bigPostList?.map((bigPostElement, i) => (
                                <Box
                                  sx={{
                                    position: "relative",
                                    overflow: "hidden",
                                    "&:hover": {
                                      "& .BigPostFooter": {
                                        bottom: "0",
                                        boxShadow: "0 5px 11px #cccccc",
                                      },
                                    },
                                  }}
                                  key={`Bigpost1-${i}`}
                                >
                                  <BigPostdummy data={bigPostElement} key={i} />
                                </Box>
                              ))
                            )}
                          </Box>
                        )}
                      </Grid>
                      <Grid item xs={12} sm={12} md={6} lg={7} xl={8}>
                        <Typography variant="h4" sx={{ margin: "0 5px" }}>
                          New arrivals
                        </Typography>
                        <Slider {...settingsProduct}>
                          {data.slice(0, 8)?.map((product, index) => (
                            <div key={index}>
                              <Box sx={{ margin: "0 5px" }}>
                                <ProductItem data={product} />
                              </Box>
                            </div>
                          ))}
                        </Slider>
                      </Grid>
                    </Grid>
                  </Box>
                </OurTopProducts>
              </Box>
            </CommonEachSection>
          </SectionWhiteBox>
          <SendMessages>
            <CommonEachSection>
              <ContainerBox
                className="mypagecontainer"
                sx={{ position: "relative", zIndex: 10 }}
              >
                <SendMessagesInnerBox>
                  <Grid container spacing={0} alignItems={"center"}>
                    <Grid item xs={12} sm={12} md={5} lg={5}>
                      <SendMessagesBox>
                        <MessageHeading>
                          SEND{" "}
                          <Box component={"span"} className="headingfistspan">
                            US A MESSAGE
                          </Box>
                          <Box
                            component={"span"}
                            sx={{ display: "block" }}
                            className="headingsecondspan"
                          >
                            Want To{" "}
                            <Box
                              component={"span"}
                              className="headingthirdspan"
                            >
                              Get Quotations?
                            </Box>
                          </Box>
                        </MessageHeading>
                        <GetQuotationBox>
                          <Formik
                            initialValues={initialQuoteValues}
                            validationSchema={quoteValidationSchema}
                            onSubmit={handleSubmitQuote}
                          >
                            {({
                              values,
                              setFieldValue,
                              touched,
                              errors,
                              handleChange,
                              handleBlur,
                            }) => {
                              const handleFileChange = (
                                event: React.ChangeEvent<HTMLInputElement>
                              ) => {
                                const selectedFiles = Array.from(
                                  event.target.files as FileList
                                );
                                if (
                                  filePreviews.length + selectedFiles.length >
                                  3
                                ) {
                                  toast.error(
                                    "You can only attach a maximum of 3 files."
                                  );
                                  return;
                                }
                                const updatedFiles = [
                                  ...(values.attachment || []),
                                  ...selectedFiles,
                                ];
                                setFieldValue("attachment", updatedFiles);
                                const names = selectedFiles.map((file) => {
                                  const name = file.name;
                                  return name;
                                });
                                setFilePreviews((prev) => [...prev, ...names]);
                              };
                              const handleRemoveAttachment = (index) => {
                                console.log(
                                  "Removing attachment at index:",
                                  index
                                );

                                // Update filePreviews
                                setFilePreviews((prev) => {
                                  const updatedPreviews = prev.filter(
                                    (_, i) => i !== index
                                  );
                                  return updatedPreviews;
                                });
                              };

                              return (
                                <Form>
                                  <Box>
                                    <Grid container spacing={2.5}>
                                      <Grid item xs={12}>
                                        <TextField
                                          label="Product Name"
                                          size="small"
                                          fullWidth
                                          id="outlined-basic"
                                          variant="outlined"
                                          name="product_name"
                                          placeholder="Enter Product"
                                          onChange={handleChange}
                                          value={values.product_name}
                                          error={
                                            touched.product_name &&
                                            Boolean(errors.product_name)
                                          }
                                        />
                                        <ErrorMessage name="product_name">
                                          {(msg) => (
                                            <FormHelperText error>
                                              {msg}
                                            </FormHelperText>
                                          )}
                                        </ErrorMessage>
                                      </Grid>
                                      <Grid item xs={12} sm={12} md={6} lg={6}>
                                        <Box sx={{}}>
                                          <FormControl
                                            fullWidth
                                            size="small"
                                            error={
                                              touched.purchage_quantity &&
                                              Boolean(errors.purchage_quantity)
                                            }
                                          >
                                            <TextField
                                              label="Purchase Quantity"
                                              size="small"
                                              name="purchage_quantity"
                                              //

                                              id="outlined-basic"
                                              variant="outlined"
                                              placeholder="Purchase Quantity"
                                              onChange={handleChange}
                                              value={values.purchage_quantity}
                                            />
                                            <ErrorMessage name="purchage_quantity">
                                              {(msg) => (
                                                <FormHelperText error>
                                                  {msg}
                                                </FormHelperText>
                                              )}
                                            </ErrorMessage>
                                          </FormControl>
                                        </Box>
                                      </Grid>
                                      <Grid item xs={12} sm={12} md={6} lg={6}>
                                        <Box>
                                          <FormControl
                                            fullWidth
                                            size="small"
                                            error={
                                              touched.units &&
                                              Boolean(errors.units)
                                            }
                                          >
                                            <InputLabel id="units-label">
                                              Unit/Sets
                                            </InputLabel>
                                            <Select
                                              IconComponent={
                                                KeyboardArrowDownOutlinedIcon
                                              }
                                              size="small"
                                              labelId="units-label"
                                              label="Unit/Sets"
                                              name="units"
                                              onChange={handleChange}
                                              value={values.units}
                                              MenuProps={{
                                                PaperProps: {
                                                  sx: {
                                                    maxHeight: 200,
                                                  },
                                                },
                                              }}
                                            >
                                              {unitsOptions.map((unit) => (
                                                <MenuItem value={unit.name}>
                                                  {unit.name}
                                                </MenuItem>
                                              ))}
                                            </Select>
                                            <ErrorMessage name="units">
                                              {(msg) => (
                                                <FormHelperText error>
                                                  {msg}
                                                </FormHelperText>
                                              )}
                                            </ErrorMessage>
                                          </FormControl>
                                        </Box>
                                      </Grid>
                                      <Grid item xs={12}>
                                        <TextField
                                          label="Description"
                                          size="small"
                                          fullWidth
                                          id="outlined-textarea"
                                          placeholder="Please describe your specific sourcing requirements for product attributes, desired quantity, and any additional services you expect from suppliers"
                                          multiline
                                          InputLabelProps={{
                                            shrink: true,
                                          }}
                                          rows={4}
                                          name="description"
                                          onChange={handleChange}
                                          // onBlur={handleBlur}
                                          value={values.description}
                                          error={
                                            touched.description &&
                                            Boolean(errors.description)
                                          }
                                        />
                                        <ErrorMessage name="description">
                                          {(msg) => (
                                            <FormHelperText error>
                                              {msg}
                                            </FormHelperText>
                                          )}
                                        </ErrorMessage>
                                      </Grid>
                                      <Grid item xs={12} sm={12} md={12}>
                                        <AddAttachmntArea>
                                          {filePreviews?.length > 0 && (
                                            <AttachmentOuter>
                                              {filePreviews.map(
                                                (name, index) => (
                                                  <AttachmentBox key={index}>
                                                    <Image
                                                      src="/assets/fileIcon.svg"
                                                      alt=""
                                                      height={18}
                                                      width={18}
                                                    />
                                                    <LightTooltip
                                                      arrow
                                                      disableInteractive
                                                      title={name}
                                                      placement="top"
                                                    >
                                                      <AttachmentName>
                                                        {name}
                                                      </AttachmentName>
                                                    </LightTooltip>
                                                    <LightTooltip
                                                      arrow
                                                      disableInteractive
                                                      title="cancel"
                                                      placement="top"
                                                    >
                                                      <CloseOutlinedIcon
                                                        onClick={() =>
                                                          handleRemoveAttachment(
                                                            index
                                                          )
                                                        }
                                                        sx={{
                                                          fontSize: "16px",
                                                          cursor: "pointer",
                                                        }}
                                                      />
                                                    </LightTooltip>
                                                  </AttachmentBox>
                                                )
                                              )}
                                            </AttachmentOuter>
                                          )}
                                          <Button
                                            component="label"
                                            role={undefined}
                                            tabIndex={-1}
                                            startIcon={
                                              <i className="icon-attachment"></i>
                                            }
                                          >
                                            Add Attachments
                                            <VisuallyHiddenInput
                                              type="file"
                                              onChange={handleFileChange}
                                              multiple
                                            />
                                          </Button>
                                        </AddAttachmntArea>
                                      </Grid>

                                      <Grid item xs={12}>
                                        <Box>
                                          <MessageFormButton type="submit">
                                            Post Your Request
                                          </MessageFormButton>
                                        </Box>
                                      </Grid>
                                    </Grid>
                                  </Box>
                                </Form>
                              );
                            }}
                          </Formik>
                        </GetQuotationBox>
                      </SendMessagesBox>
                    </Grid>
                    <Grid item xs={12} sm={12} md={6} lg={6}>
                      <QuotationTxt>
                        <Box>
                          <MessageText>Hassle-Free Sourcing</MessageText>
                          <MessageSubText>
                            Easily submit your sourcing inquiries and receive
                            competitive quotes.
                          </MessageSubText>
                        </Box>
                        <EasySourcingBox>
                          <List>
                            <ListItemBox>
                              <ListitemIconBox>
                                <ListIcon />
                              </ListitemIconBox>
                              <ListItemText>
                                <span>
                                  One-click request, multiple quotes –{" "}
                                </span>{" "}
                                Instantly get offers from a wide range of
                                suppliers.
                              </ListItemText>
                            </ListItemBox>
                            <ListItemBox>
                              <ListitemIconBox>
                                <ListIcon />
                              </ListitemIconBox>
                              <ListItemText>
                                <span>
                                  Verified suppliers matched to you –{" "}
                                </span>
                                Only connect with verified, trustworthy
                                suppliers.
                              </ListItemText>
                            </ListItemBox>

                            <ListItemBox>
                              <ListitemIconBox>
                                <ListIcon />
                              </ListitemIconBox>
                              <ListItemText>
                                <span>Compare and save – </span>Compare offers
                                and pricing at a glance.
                              </ListItemText>
                            </ListItemBox>
                            <ListItemBox>
                              <ListitemIconBox>
                                <ListIcon />
                              </ListitemIconBox>
                              <ListItemText>
                                <span>Easy sample requests – </span>Request
                                product samples directly from suppliers.
                              </ListItemText>
                            </ListItemBox>

                            <ListItemBox>
                              <ListitemIconBox>
                                <ListIcon />
                              </ListitemIconBox>
                              <ListItemText>
                                Boost efficiency – Simplify your entire sourcing
                                process and cut down decision time.
                              </ListItemText>
                            </ListItemBox>
                          </List>
                        </EasySourcingBox>
                      </QuotationTxt>
                    </Grid>
                  </Grid>
                </SendMessagesInnerBox>
              </ContainerBox>
            </CommonEachSection>
          </SendMessages>

          <SectionWhiteBox>
            <CommonEachSection sx={{ paddingBottom: "0 !important" }}>
              <LandingNewsSection className="mypagecontainer">
                <LandingPageHeadings>
                  Start Selling Smarter with Power Cozmo?
                </LandingPageHeadings>
                <SmartSellerOuter>
                  <Grid
                    container
                    spacing={{ xs: 2, md: 3, lg: 4 }}
                    alignItems={"center"}
                  >
                    <Grid item xs={12} sm={12} md={5} lg={4} xl={3.5}>
                      <Box>
                        <img
                          src="/assets/images/landing-page/smartselling.jpg"
                          alt=""
                          style={{ width: "100%" }}
                        />
                      </Box>
                    </Grid>
                    <Grid item xs={12} sm={12} md={7} lg={8} xl={8.5}>
                      <Box>
                        <Grid container spacing={4}>
                          <Grid item xs={12} sm={12} md={6} lg={6}>
                            <InnerGrid>
                              <Image
                                src="/assets/images/landing-page/verified.svg"
                                alt=""
                                height={50}
                                width={50}
                              />
                              <Typography className="heading">
                                Connect with Verified Buyers
                              </Typography>
                              <Typography className="text">
                                Engage only with authenticated, serious buyers.
                                We filter out the noise so you focus on real
                                opportunities.
                              </Typography>
                            </InnerGrid>
                          </Grid>
                          <Grid item xs={12} sm={12} md={6} lg={6}>
                            <InnerGrid>
                              <Image
                                src="/assets/images/landing-page/personalsupport.svg"
                                alt=""
                                height={50}
                                width={50}
                              />
                              <Typography className="heading">
                                Personal Support
                              </Typography>
                              <Typography className="text">
                                Get a dedicated partner to guide you through the
                                platform. We're here to help you succeed—every
                                step of the way.
                              </Typography>
                            </InnerGrid>
                          </Grid>
                          <Grid item xs={12} sm={12} md={6} lg={6}>
                            <InnerGrid>
                              <Image
                                src="/assets/images/landing-page/freelisting.svg"
                                alt=""
                                height={50}
                                width={50}
                              />
                              <Typography className="heading">
                                Free Listing
                              </Typography>
                              <Typography className="text">
                                Upload your products at no cost. Create and
                                preview your listings—no payment needed.
                              </Typography>
                            </InnerGrid>
                          </Grid>
                          <Grid item xs={12} sm={12} md={6} lg={6}>
                            <InnerGrid>
                              <Image
                                src="/assets/images/landing-page/global.svg"
                                alt=""
                                height={50}
                                width={50}
                              />
                              <Typography className="heading">
                                Reach Buyers Globally
                              </Typography>
                              <Typography className="text">
                                Gain exposure to thousands of industrial buyers
                                worldwide. Your machines get discovered by the
                                right audience, everywhere.
                              </Typography>
                            </InnerGrid>
                          </Grid>
                          <Grid item xs={12} mt={3}>
                            <JoinAsSupllier>
                              <Button
                                onClick={() => router.push(`/sellerHomepage`)}
                              >
                                {" "}
                                Join As Supplier
                              </Button>
                            </JoinAsSupllier>
                          </Grid>
                        </Grid>
                      </Box>
                    </Grid>
                  </Grid>
                </SmartSellerOuter>
              </LandingNewsSection>
            </CommonEachSection>
          </SectionWhiteBox>
          <SectionWhiteBox>
            <CommonEachSection>
              <LandingNewsSection className="mypagecontainer">
                <LandingPageHeadings>Business Blogs</LandingPageHeadings>
                <CenterDes>
                  Get tips, insights and inspiration to help you build a
                  thriving business
                </CenterDes>
                <MainFeedAear>
                  <Grid container spacing={3}>
                    {blogs.slice(0, 4).map((blog) => (
                      <Grid item xs={12} sm={6} md={3} key={blog.id}>
                        {" "}
                        <LandingNewsItem>
                          <BlogImgBox>
                            <img
                              src={
                                blog.gallery && blog.gallery.length > 0
                                  ? blog.gallery[0].source
                                  : "/assets/images/landing-page/blog-image-1.webp"
                              }
                              onClick={() => router.push(`/blog/${blog.slug}`)}
                              alt="Blog"
                              style={{ cursor: "pointer" }}
                            />
                          </BlogImgBox>
                          <Typography
                            className="datePlace"
                            sx={{ color: "#4a4a4a" }}
                          >
                            {formatDate(blog.created_at)}
                          </Typography>{" "}
                          <Typography
                            variant="h4"
                            sx={{
                              "&:hover": {
                                color: "#d7282f",
                                cursor: "pointer",
                              },
                            }}
                            onClick={() => router.push(`/blog/${blog.slug}`)}
                          >
                            {blog.title}
                          </Typography>{" "}
                          <Typography variant="body1">
                            {blog.short_description
                              ? blog.short_description
                              : "coming soon"}
                          </Typography>{" "}
                          <BlogReadMore>
                            <Link underline="hover" href={`/blog/${blog.slug}`}>
                              Read More{" "}
                              <EastRoundedIcon sx={{ margin: "2px 0 0 0" }} />
                            </Link>
                          </BlogReadMore>
                        </LandingNewsItem>
                      </Grid>
                    ))}
                  </Grid>
                </MainFeedAear>
              </LandingNewsSection>
            </CommonEachSection>
          </SectionWhiteBox>
          <SectionColoredBox>
            <TestimonialBox>
              <Box className="mypagecontainer">
                <LandingPageHeadings sx={{ textAlign: "center" }}>
                  Client Testimonials
                </LandingPageHeadings>
                <TestimonialSlider>
                  <Slider {...settingsTestimonial}>
                    {testimonials.map((testimonial, index) => (
                      <TestimonialDataOuter key={index}>
                        <TestimonialDataMainBox>
                          <img
                            src="/assets/images/landing-page/Quotes.png"
                            alt="quote"
                            className="quoteimg"
                          />
                          <img
                            src={testimonial.image}
                            alt={testimonial.name}
                            className="testi-image"
                          />
                          <TestimonialDataBox>
                            <Typography variant="body1">
                              {testimonial.quote}
                            </Typography>
                            <Typography variant="h6">
                              {testimonial.name}
                            </Typography>
                            <Typography variant="subtitle2">
                              {testimonial.title}
                            </Typography>
                          </TestimonialDataBox>
                        </TestimonialDataMainBox>
                      </TestimonialDataOuter>
                    ))}
                  </Slider>
                </TestimonialSlider>
              </Box>
            </TestimonialBox>
            <SectionWhiteBox className="Bgred">
              <Box className="mypagecontainer">
                <Grid container spacing={2} alignItems={"center"}>
                  <Grid item xs={12} sm={12} md={8} lg={8}>
                    <Box>
                      <LandingPageHeadings className="textWhite">
                        Ready to get started?
                      </LandingPageHeadings>
                      <GetStarted>
                        Explore millions of products from trusted suppliers by
                        signing up today!
                      </GetStarted>
                    </Box>
                  </Grid>
                  <Grid item xs={12} sm={12} md={4} lg={4}>
                    <SignUpBtnBox
                      onClick={() => {
                        router.push("/user/signup");
                      }}
                    >
                      <SignUpBtn>Sign Up</SignUpBtn>
                    </SignUpBtnBox>
                  </Grid>
                </Grid>
              </Box>
            </SectionWhiteBox>
          </SectionColoredBox>
          <SectionWhiteBox>
            <GlobalTradeSection className="mypagecontainer">
              <Box className="GlobalBG">
                <Grid container spacing={2} alignItems={"center"}>
                  <Grid item xs={12} sm={12} md={6} lg={6}>
                    <Box>
                      <LandingPageHeadings className="leftHeading">
                        We Streamline Access To Global Markets
                      </LandingPageHeadings>
                      <LandingPageText sx={{ padding: "10px 0 10px" }}>
                        At Power Cozmo, we simplify your entry into global
                        markets by connecting you with key industry players and
                        solutions across energy, power generation, oil & gas,
                        and water management. Our platform offers seamless trade
                        opportunities and efficient logistics, enabling
                        businesses to expand their reach and internationally.
                      </LandingPageText>
                    </Box>
                  </Grid>
                  <Grid item xs={12} sm={12} md={6} lg={6}>
                    <SliderBackground>
                      <div className="slider-container">
                        <Slider {...settings}>
                          <Box>
                            <LandingpageSliderBox>
                              <SliderContentGap>
                                <FlagImageStyle>
                                  <Image
                                    src={retargettingGlobalmarket?.india}
                                    alt=""
                                    width={80}
                                    height={58}
                                    loading="lazy"
                                  />
                                </FlagImageStyle>
                                <Typography>India</Typography>
                              </SliderContentGap>
                            </LandingpageSliderBox>
                          </Box>
                          <Box>
                            <LandingpageSliderBox>
                              <SliderContentGap>
                                <FlagImageStyle>
                                  <Image
                                    src={retargettingGlobalmarket?.china}
                                    alt=""
                                    width={80}
                                    height={58}
                                    loading="lazy"
                                  />
                                </FlagImageStyle>
                                <Typography>China</Typography>
                              </SliderContentGap>
                            </LandingpageSliderBox>
                          </Box>
                          <Box>
                            <LandingpageSliderBox>
                              <SliderContentGap>
                                <FlagImageStyle>
                                  <Image
                                    src={retargettingGlobalmarket?.jordan}
                                    alt=""
                                    width={80}
                                    height={58}
                                    loading="lazy"
                                  />
                                </FlagImageStyle>
                                <Typography>Jordan</Typography>
                              </SliderContentGap>
                            </LandingpageSliderBox>
                          </Box>
                          <Box>
                            <LandingpageSliderBox>
                              <SliderContentGap>
                                <FlagImageStyle>
                                  <Image
                                    src={retargettingGlobalmarket?.saudi}
                                    alt=""
                                    width={80}
                                    height={58}
                                    loading="lazy"
                                  />
                                </FlagImageStyle>
                                <Typography>Saudi Arabia</Typography>
                              </SliderContentGap>
                            </LandingpageSliderBox>
                          </Box>
                          <Box>
                            <LandingpageSliderBox>
                              <SliderContentGap>
                                <FlagImageStyle>
                                  <Image
                                    src={retargettingGlobalmarket?.hongkong}
                                    alt=""
                                    width={80}
                                    height={58}
                                    loading="lazy"
                                  />
                                </FlagImageStyle>
                                <Typography>Hong kong</Typography>
                              </SliderContentGap>
                            </LandingpageSliderBox>
                          </Box>
                          <Box>
                            <LandingpageSliderBox>
                              <SliderContentGap>
                                <FlagImageStyle>
                                  <Image
                                    src={retargettingGlobalmarket?.iraq}
                                    alt=""
                                    width={80}
                                    height={58}
                                    loading="lazy"
                                  />
                                </FlagImageStyle>
                                <Typography>Iraq</Typography>
                              </SliderContentGap>
                            </LandingpageSliderBox>
                          </Box>

                          <Box>
                            <LandingpageSliderBox>
                              <SliderContentGap>
                                <FlagImageStyle>
                                  <Image
                                    src={retargettingGlobalmarket?.indonesia}
                                    alt=""
                                    width={80}
                                    height={58}
                                    loading="lazy"
                                  />
                                </FlagImageStyle>
                                <Typography>Indonesia</Typography>
                              </SliderContentGap>
                            </LandingpageSliderBox>
                          </Box>

                          <Box>
                            <LandingpageSliderBox>
                              <SliderContentGap>
                                <FlagImageStyle>
                                  <Image
                                    src={retargettingGlobalmarket?.japan}
                                    alt=""
                                    width={80}
                                    height={58}
                                    loading="lazy"
                                  />
                                </FlagImageStyle>
                                <Typography>Japan</Typography>
                              </SliderContentGap>
                            </LandingpageSliderBox>
                          </Box>

                          <Box>
                            <LandingpageSliderBox>
                              <SliderContentGap>
                                <FlagImageStyle>
                                  <Image
                                    src={retargettingGlobalmarket?.malaysia}
                                    alt=""
                                    width={80}
                                    height={58}
                                    loading="lazy"
                                  />
                                </FlagImageStyle>
                                <Typography>Malaysia</Typography>
                              </SliderContentGap>
                            </LandingpageSliderBox>
                          </Box>

                          <Box>
                            <LandingpageSliderBox>
                              <SliderContentGap>
                                <FlagImageStyle>
                                  <Image
                                    src={retargettingGlobalmarket?.southafrica}
                                    alt=""
                                    width={80}
                                    height={58}
                                    loading="lazy"
                                  />
                                </FlagImageStyle>
                                <Typography>South Africa</Typography>
                              </SliderContentGap>
                            </LandingpageSliderBox>
                          </Box>

                          <Box>
                            <LandingpageSliderBox>
                              <SliderContentGap>
                                <FlagImageStyle>
                                  <Image
                                    src={retargettingGlobalmarket?.germany}
                                    alt=""
                                    width={80}
                                    height={58}
                                    loading="lazy"
                                  />
                                </FlagImageStyle>
                                <Typography>Germany</Typography>
                              </SliderContentGap>
                            </LandingpageSliderBox>
                          </Box>

                          <Box>
                            <LandingpageSliderBox>
                              <SliderContentGap>
                                <FlagImageStyle>
                                  <Image
                                    src={retargettingGlobalmarket?.itly}
                                    alt=""
                                    width={80}
                                    height={58}
                                    loading="lazy"
                                  />
                                </FlagImageStyle>
                                <Typography>Italy</Typography>
                              </SliderContentGap>
                            </LandingpageSliderBox>
                          </Box>
                        </Slider>
                      </div>
                    </SliderBackground>
                  </Grid>
                </Grid>
              </Box>
            </GlobalTradeSection>
          </SectionWhiteBox>

          <FixedForm
            sx={{
              transform: `${isOpen ? "translateX(100%)" : "translateX(0)"}`,
            }}
          >
            <BannerFormData>
              <FormCrossbtn>
                <QuickSignupButton
                  onClick={handleCloseDialog}
                  sx={{
                    height: isOpen ? "150px" : "50px",
                    overflow: "hidden",
                    transition: "height 0.3s ease",
                    "@media screen and (max-width:899px)": {
                      height: isOpen ? "130px" : "40px",
                      padding: "6px 1px",
                    },
                  }}
                >
                  <MenuIcon />
                  {isOpen && (
                    <Typography
                      sx={{
                        writingMode: "vertical-rl",
                        whiteSpace: "nowrap",
                        width: "max-content",
                      }}
                    >
                      Quick Signup
                    </Typography>
                  )}
                </QuickSignupButton>
              </FormCrossbtn>
              {/*  */}
              <BannerFormInner>
                <Typography variant="h4">Quick Signup</Typography>
                <Typography variant="body2">
                  The quick signup from includes fields for
                </Typography>
                <Box component="form" onSubmit={formik.handleSubmit}>
                  <Grid container spacing={{ xs: 1, sm: 1, md: 2 }}>
                    <Grid item xs={12}>
                      <FormControl size="small" fullWidth>
                        <FieldLabel>Full Name</FieldLabel>
                        <TextField
                          size="small"
                          fullWidth
                          variant="outlined"
                          placeholder="Please enter full name"
                          name="name"
                          value={formik.values.name}
                          onChange={formik.handleChange}
                          error={Boolean(
                            formik.errors.name && formik.touched.name
                          )}
                          helperText={formik.touched.name && formik.errors.name}
                        />
                      </FormControl>
                    </Grid>
                    <Grid item xs={12}>
                      <FormControl size="small" fullWidth>
                        <FieldLabel>Please enter Email Address</FieldLabel>
                        <TextField
                          size="small"
                          fullWidth
                          // required
                          placeholder="Email Address"
                          variant="outlined"
                          type="email"
                          name="email"
                          value={formik.values.email}
                          onChange={formik.handleChange}
                          error={Boolean(
                            formik.errors.email && formik.touched.email
                          )}
                          helperText={
                            formik.touched.email && formik.errors.email
                          }
                        />
                      </FormControl>
                    </Grid>
                    <Grid item xs={12}>
                      <FormControl size="small" fullWidth>
                        <FieldLabel>Please enter Mobile No</FieldLabel>
                        <MobileInputCommon
                          inputRef={mobileRef}
                          mobileNumber={formik?.values?.phone}
                          mobileCode={formik?.values?.mobile_code}
                          mobileCountryCode={
                            formik?.values?.mobile_country_code
                          }
                          handleChange={setMobileNumber}
                          helperText={
                            formik.touched.phone && formik.errors.phone
                          }
                        />
                      </FormControl>
                    </Grid>
                  </Grid>
                  <StyledButtonBox>
                    <StyledButton
                      fullWidth
                      type="submit"
                      variant="contained"
                      sx={{ padding: "10px" }}
                    >
                      Submit
                    </StyledButton>
                  </StyledButtonBox>
                </Box>
              </BannerFormInner>
            </BannerFormData>
          </FixedForm>
        </PageContentInfo>
      </BodyContentInfo>
      {/* <FooterPage /> */}
    </Box>
  );
}