import React, { useEffect, useRef, useState } from "react";
import {
  Button,
  Dialog,
  DialogContent,
  DialogTitle,
  Grid,
  IconButton,
  List,
  ListItem,
  styled,
  TextField,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import {
  SellerBannerContainer,
  SellerCommonContainer,
  TestiminialButton,
  Startsellingbutton,
  TotalCountCol,
  TotalCountBox,
  BannerImageBox,
  PagePerSection,
  SliderScreenSection,
  PageSubHead,
  PageMainHead,
  PageHeadingDes,
  SellerPageBody,
  ColumnImage,
  ColumnGap,
  CRMColumnStack,
  SectionPageHeadings,
  SectionPageText,
  CheckRow,
  CheckSection,
  ColumnStack,
  LiveChatInfo,
  LiveChatinnData,
  LiveChatinnBox,
  ChatColumnImage,
  LeftSection,
  Content,
  GrowBusinessSec,
  ImageSliderScreen,
  SimplyCompleHead,
  SimplyComBoxLeft,
  SimplyCompleRight,
  EngagementAnalyticsBox,
  CommonQuestionBox,
  Shadesbg,
  Skewimage2,
  Realtime,
  Realtimespan,
  Weeasy,
  LearnMoreBox,
  ButtonoverCard,
  ButtonText,
  TypographyBorderline,
  Skewimageinsidepadding,
  FlexBoxforchat,
  Imageborder,
  Onlinechat,
  Livechat,
  Livechatparagraph,
  ClickHereBox,
  TextLayer,
  EmainChatBoxOuter,
  StepCardCon,
  StepCardInn,
  CircleShape,
  CircleShapeRight,
  RealtimeSub,
  Li,
} from "./sellerStyle";
import { useRouter } from "next/router";
import { useFormik } from "formik";
import * as Yup from "yup";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { Collapse } from "@mui/material";
import CheckCircleRoundedIcon from "@mui/icons-material/CheckCircleRounded";
import ArrowCircleRightOutlinedIcon from "@mui/icons-material/ArrowCircleRightOutlined";
import TaskAltOutlinedIcon from "@mui/icons-material/TaskAltOutlined";
import CloseIcon from "@mui/icons-material/Close";

const images = [
  "/assets/images/landing-page/laptop-slide1.jpg",
  "/assets/images/landing-page/laptop-slide1.jpg",
];

const videos = [
  {
    name: "John Neal",
    image: "https://img.youtube.com/vi/VIDEO_ID_1/0.jpg",
    videoLink: "https://www.youtube.com/watch?v=VIDEO_ID_1",
  },
  {
    name: "Larry Culp",
    image: "https://img.youtube.com/vi/VIDEO_ID_2/0.jpg",
    videoLink: "https://www.youtube.com/watch?v=VIDEO_ID_2",
  },
  {
    name: "Anil Rai Gupta",
    image: "https://img.youtube.com/vi/VIDEO_ID_3/0.jpg",
    videoLink: "https://www.youtube.com/watch?v=VIDEO_ID_3",
  },
];

const sections = [
  {
    title: "Your Virtual Store",
    content:
      "Showcase your products online with a professional store front. Get discovered by buyers 24/7 and manage everything from one dashboard.",
  },
  {
    title: "Dynamic Pricing Tool",
    content:
      "Adjust your prices smartly based on user type, region, or behavior. Stay competitive with flexible, rule-based pricing.",
  },
  {
    title: "Auto Quoting Setup",
    content:
      "Set rules to auto-send quotes to interested buyers. Save time, respond faster, and never miss a lead.",
  },
  {
    title: "Pricing Engine",
    content:
      "Build custom price visibility, discount levels, and conditions. Control how and when your prices appear — down to the finest detail.",
  },
  {
    title: "Buyer Database",
    content:
      "Access a growing network of verified buyers. Track engagement, filter by category, and target your best leads.",
  },
];

import AOS from "aos";
import "aos/dist/aos.css";
import dynamic from "next/dynamic";
import { useDispatch, useSelector } from "react-redux";
import { SelectChangeEvent } from "@mui/material/Select";
import { apiClient } from "@/components/common/common";
import { AddProductDetail } from "@/hooks/productDetailsReducer";
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import { toast } from "react-toastify";
import ChatWindow from "@/components/Chat";
import { getTokenFromCookies } from "@/utils/cookieUtils";
import { landingPage } from "@/utils/constantImages";

import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
import MuiAccordion, { AccordionProps } from "@mui/material/Accordion";

import MuiAccordionSummary, {
  AccordionSummaryProps,
} from "@mui/material/AccordionSummary";
import MuiAccordionDetails from "@mui/material/AccordionDetails";
import {
  BannerFormData,
  BannerFormInner,
  FieldLabel,
  FixedForm,
  StyledButton,
  StyledButtonBox,
} from "../styles";
import FormControl from "@mui/material/FormControl";
import MobileInputCommon from "@/components/common/PhoneInput";
const Item = styled(Box, {
  shouldForwardProp: (prop) => prop !== "active",
})<{ active: boolean }>(({ active }) => ({
  padding: "24px 15px",
  borderLeft: active ? "3px solid #d7282f" : "3px solid transparent",
  cursor: "pointer",
  fontWeight: "bold",
  margin: "0 -3px 0",
}));
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 StepsContainer = styled(Box)({
  display: "flex",
  justifyContent: "space-between",
  alignItems: "center",
  width: "80%",
  marginTop: "40px",
});

const Accordion = styled((props: AccordionProps) => (
  <MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
  margin: "10px",
  "&:not(:last-child)": {},
  "&::before": {
    display: "none",
  },
  "& .MuiAccordionSummary-expandIconWrapper": {
    "& svg": {
      fontSize: "15px",
    },
  },
  "& .MuiAccordionSummary-root": {
    borderLeft: `4px solid #d7282f`,
  },
  "& .MuiAccordionDetails-root": {
    padding: "7px",
  },
}));

const AccordionSummary = styled((props: AccordionSummaryProps) => (
  <MuiAccordionSummary
    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: "0.9rem" }} />}
    {...props}
  />
))(({ theme }) => ({
  backgroundColor:
    theme.palette.mode === "dark"
      ? "rgba(255, 255, 255, .05)"
      : "rgba(0, 0, 0, .03)",
  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
    transform: "rotate(90deg)",
  },
  "& .MuiAccordionSummary-content": {
    marginLeft: theme.spacing(1),
  },
  "& .MuiTypography-body1": {
    color: "#231F20",
    fontWeight: 600,
    fontSize: "18px",
  },
}));

const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
  padding: theme.spacing(2),
  borderTop: "1px solid rgba(0, 0, 0, .125)",
}));

const NumberCircle = styled(Typography)(({ theme }) => ({
  fontSize: "60px",
  fontWeight: "bold",
  color: theme.palette.primary.main,
}));

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 HeaderPage = dynamic(
  () => import("components/common/include/headerPart"),
  {
    ssr: false,
  }
);
const FooterPage = dynamic(
  () => import("components/common/include/footerPart"),
  {
    ssr: false,
  }
);

const BootstrapDialog = styled(Dialog)(({ theme }) => ({
  "& .MuiDialogContent-root": {
    padding: theme.spacing(2),
  },
  "& .MuiDialogActions-root": {
    padding: theme.spacing(1),
  },
  "& .MuiPaper-root": {
    maxWidth: "500px",
  },
}));
export default function SellerHome(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(null);
  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 [activeIndex, setActiveIndex] = useState(1);
  const [expanded, setExpanded] = React.useState<string | false>("panel1");
  const [open, setOpen] = React.useState(false);
  const theme = useTheme();
  const isAbove900 = useMediaQuery(`(max-width:900px)`);
  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };
  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 [faqData, setFaqData] = useState<any>([]);
  const list = useSelector((state: any) => state.header?.pageList ?? []);
  const getFaqManageData = async () => {
    try {
      const response = await apiClient("category/faq/manager/list", "GET");
      const filterData = response?.data?.filter(
        (value: any) => value.module_type === "seller_tools"
      );
      setFaqData(filterData);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };
  useEffect(() => {
    const token = getTokenFromCookies();
    getFaqManageData();
    setToken(token);
  }, []);

  useEffect(() => {
    const fetchData = async () => {
      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", "");
    setValidation(isValid);
  };

  const [unitsOptions, setUnitsOptions] = useState([]);
  useEffect(() => {
    const fetchUnits = async () => {
      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 }) => {
    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 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 () => {
    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 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>
    );
  };
  const expandableItems = [
    {
      id: 1,
      title: "Your Virtual Store",
      content:
        "Showcase your products online with a professional store front. Get discovered by buyers 24/7 and manage everything from one dashboard.",
    },
    {
      id: 2,
      title: "Dynamic Pricing Tool",
      content:
        "Adjust your prices smartly based on user type, region, or behavior. Stay competitive with flexible, rule-based pricing.",
    },
    {
      id: 3,
      title: "Auto Quoting Setup",
      content:
        "Set rules to auto-send quotes to interested buyers. Save time, respond faster, and never miss a lead.",
    },
    {
      id: 4,
      title: "Pricing Engine",
      content:
        "Build custom price visibility, discount levels, and conditions. Control how and when your prices appear — down to the finest detail.",
    },
    {
      id: 5,
      title: "Buyer Database",
      content:
        "Access a growing network of verified buyers. Track engagement, filter by category, and target your best leads.",
    },
  ];
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
  };
  const settingsCrm = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    autoplay: true,
  };
  const stepData = [
    {
      number: "1",
      title: "Global market",
      desc: "Share your product details...",
    },
    {
      number: "2",
      title: "Lead & opportunities",
      desc: "Get multiple leads...",
    },
    { number: "3", title: "Close Deals", desc: "With our one-stop portal..." },
    {
      number: "4",
      title: "Manage Order",
      desc: "Multiple buyer leads and orders...",
    },
  ];

  const handleChangeQ =
    (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
      setExpanded(newExpanded ? panel : false);
    };
  return (
    <SellerPageBody>
      <HeaderPage />
      <FixedForm
        sx={{
          transform: `${isOpen ? "translateX(100%)" : "translateX(0)"}`,
        }}
      >
        <BannerFormData>
          <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>
      <ChatWindow />
      {/* <SellerBannerContainer
        sx={{
          position: "relative",
          "::before": {
            content: '""',
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            backgroundImage:
              "url(/assets/images/landing-page/seller-bannerright.png)",
            backgroundSize: "cover",
            backgroundRepeat: "no-repeat",
            backgroundPosition: "center",
            display: "none",
            "@media screen and (max-width:900px)": { display: "block" },
          },
          "::after": {
            content: '""',
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            backgroundColor: "rgba(0, 0, 0, 0.5)",
          },
          "@media (min-width:900px)": {
            "::before": {
              display: "block",
            },
          },
        }}
      >
        <SellerCommonContainer sx={{ zIndex: "2" }}>
          <Grid
            container
            spacing={2}
            alignItems="center"
            justifyContent="center"
          >
            <Grid item xs={12} sm={12} md={6}>
              <Box className="sharat">
                <Typography
                  variant="h2"
                  data-aos="fade-up"
                  data-aos-delay="100"
                >
                  Sell on Power Cozmo
                </Typography>
                <Typography
                  variant="h1"
                  gutterBottom
                  data-aos="fade-up"
                  data-aos-delay="200"
                >
                  Sell online to worldwide customers with <br />
                  enhanced tools and features
                </Typography>
                <Typography
                  variant="body1"
                  data-aos="fade-up"
                  data-aos-delay="300"
                >
                  Post your products at Power Cozmo and grow your business
                  across world
                </Typography>
                <Startsellingbutton onClick={handleClickOpen}>
                  Start Selling
                </Startsellingbutton>
                <BootstrapDialog
                  onClose={handleClose}
                  aria-labelledby="customized-dialog-title"
                  open={open}
                >
                  <DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
                    Quick Signup
                  </DialogTitle>
                  <IconButton
                    aria-label="close"
                    onClick={handleClose}
                    sx={{
                      position: "absolute",
                      right: 8,
                      top: 8,
                      color: (theme) => theme.palette.grey[500],
                    }}
                  >
                    <CloseIcon />
                  </IconButton>
                  <DialogContent dividers>
                    <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
                              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>
                  </DialogContent>
                </BootstrapDialog>
              </Box>
            </Grid>
            <Grid
              item
              xs={12}
              sm={12}
              md={6}
              sx={{
                "@media screen and (max-width:900px)": { display: "none" },
              }}
            >
              <BannerImageBox>
                <img
                  src="/assets/images/landing-page/seller-bannerright.png"
                  alt=""
                  title=""
                />
              </BannerImageBox>
            </Grid>
          </Grid>
        </SellerCommonContainer>
      </SellerBannerContainer> */}
      {/* <Box
        sx={{
          position: "relative",
          height: "650px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundPosition: "center",
          "@media  (max-device-width: 900px) and (orientation: portrait)": {
            height: "50vh",
          },
          "@media screen and (max-width:767px)": {
            margin: "0 0 25px",
            height: "70vh",
            padding: "0 5px",
          },
          "@media screen and (max-width:600px)": {
            margin: "0 0 25px",
            height: "60vh",
            padding: "0 5px",
            alignItems: "start",
          },
          "@media screen and (max-width:480px)": {
            margin: "0 0 25px",
            height: "40vh",
            padding: "0 5px",
            alignItems: "start",
          },
          "::before": {
            content: '""',
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            background:
              'url("/assets/images/landing-page/sellerhomepage2.jpg") #fff',
            backgroundSize: "100%",
            backgroundRepeat: "no-repeat",
            backgroundPosition: "center",
            "@media screen and (max-width:900px)": { backgroundSize: "cover" },
            "@media screen and (max-width:767px)": {
              background:
                'url("/assets/images/landing-page/bg3.svg") #00000047',
              backgroundSize: "auto",
              backgroundRepeat: "no-repeat",
              backgroundPosition: "center",
              "@media screen and (max-width:900px)": { display: "none" },
            },
          },
          "::after": {
            content: '""',
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
          },
          "@media (min-width:900px)": {
            "::before": {
              display: "block",
            },
          },
        }}
      >
        {" "}
        <SellerCommonContainer sx={{ zIndex: "2" }}>
          <Grid
            container
            spacing={2}
            alignItems="center"
            justifyContent="center"
          >
            <Grid item xs={12} sm={12} md={6}>
              <Box
                sx={{
                  position: "relative",
                  "@media (min-width:600px) and (max-width:900px)": {
                    margin: "100px 0 0 0",
                  },
                  "@media screen and (max-width:600px)": {
                    margin: "50px 0 0 0",
                  },
                }}
              >
                <Box>
                  <Typography
                    sx={{
                      fontSize: "22px",
                      color: "#231f20",
                      "@media screen and (max-width:1024px)": {
                        fontSize: "18px",
                      },
                      "@media screen and (max-width:600px)": {
                        // color: "#fff",
                      },
                    }}
                  >
                    SELL ON POWER COZMO
                  </Typography>
                  <Typography
                    sx={{
                      fontSize: "48px",
                      color: "#d7282f",
                      fontWeight: "700",
                      "@media screen and (max-width:1024px)": {
                        fontSize: "32px",
                      },
                      "@media screen and (max-width:900px)": {
                        fontSize: "22px",
                      },
                      "@media screen and (max-width:767px)": {
                        fontSize: "18px",
                      },
                      "@media screen and (max-width:600px)": {
                        fontSize: "16px",
                      },
                    }}
                  >
                    Sell online to <br />
                    worldwide customers
                  </Typography>
                  <Typography
                    sx={{
                      fontSize: "14px",
                      color: "#231f20",
                      fontWeight: "600",
                      "@media screen and (max-width:600px)": {
                        // color: "#fff",
                      },
                    }}
                  >
                    With enchanced tools and features Post your products at
                    Power Cozmo and grow <br /> your business across world
                  </Typography>
                  <Box sx={{ margin: "16px 0 0 0" }}>
                    <Button
                      type="submit"
                      sx={{
                        color: "#fff",
                        background: "#d7282f",
                        fontSize: "14px",
                        padding: "8px 12px",
                        textTransform: "capitalize",
                        "&:hover": { background: "#d7282f" },
                      }}
                    >
                      Start Selling
                    </Button>
                  </Box>
                </Box>
              </Box>
            </Grid>
            <Grid
              item
              xs={12}
              sm={12}
              md={6}
              sx={{
                "@media screen and (max-width:480px)": { display: "none  " },
              }}
            ></Grid>
          </Grid>
        </SellerCommonContainer>
      </Box> */}
      {/* <Box>
        <img
          src="/assets/images/landing-page/sellerhomepage2.jpg"
          alt=""
          style={{ height: "553px", width: "100%", objectFit: "cover" }}
        />
      </Box> */}
      <Box
        sx={{
          height: "553px",
          backgroundImage:
            "url(/assets/images/landing-page/sellerhomepage2.jpg)",
          backgroundSize: "cover",
          backgroundPosition: "center",
          display: "flex",
          alignItems: "center",
          position: "relative",
          "@media screen and (max-width:1200px)": {            
            backgroundPosition:'top right ', 
          },
          "@media screen and (max-width:900px)": {
            width: "100%",
            height: "300px",
            backgroundPosition:'top right ', 
          },
          "@media screen and (max-width:480px)": {
            width: "100%",
            height: "300px",
            backgroundPosition:'right ', 
          },
        }}
      >
        <Box
          sx={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            background: "rgba(0, 0, 0, 0.1)",
          }}
        />
        <Grid container>
          <Grid
            item
            lg={6}
            sm={12}
            xs={12}
            sx={{
              display: "flex",
              alignItems: "center",
              justifyContent: { xs: "center", sm: "center", lg: "flex-start" },
              textAlign: { xs: "center", sm: "center", lg: "left" },
              px: { xs: 2, sm: 4, lg: 16 },
            }}
          >
            <Box>
              <Typography
                sx={{
                  fontSize: "22px",
                  color: "#231f20",
                  "@media screen and (max-width:1024px)": {
                    fontSize: "18px",
                  },
                  "@media screen and (max-width:600px)": {
                    // color: "#fff",
                  },
                }}
              >
                SELL ON POWER COZMO
              </Typography>
              <Typography
                sx={{
                  fontSize: "48px",
                  color: "#d7282f",
                  fontWeight: "700",
                  lineHeight: "normal",
                  "@media screen and (max-width:1024px)": {
                    fontSize: "32px",
                  },
                  "@media screen and (max-width:900px)": {
                    fontSize: "22px",
                  },
                  "@media screen and (max-width:767px)": {
                    fontSize: "18px",
                  },
                  "@media screen and (max-width:600px)": {
                    fontSize: "16px",
                  },
                }}
              >
                Sell online to <br />
                worldwide customers
              </Typography>
              <Typography
                sx={{
                  fontSize: "14px",
                  color: "#231f20",
                  fontWeight: "600",
                  "@media screen and (max-width:600px)": {
                    // color: "#fff",
                  },
                }}
              >
                With enchanced tools and features Post your products at Power
                Cozmo and grow <br /> your business across world
              </Typography>
              <Box sx={{ margin: "16px 0 0 0" }}>
                <Button
                  type="submit"
                  sx={{
                    color: "#fff",
                    background: "#d7282f",
                    fontSize: "14px",
                    padding: "8px 12px",
                    textTransform: "capitalize",
                    "&:hover": { background: "#d7282f" },
                  }}
                >
                  Start Selling
                </Button>
              </Box>
            </Box>
          </Grid>
          <Grid item lg={6} sm={false} xs={false} />
        </Grid>
      </Box>
      <TotalCountBox>
        <Grid container spacing={2}>
          <Grid item xs={6} sm={6} md={3}>
            <TotalCountCol>
              <CounterItem
                icon={
                  <img
                    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={
                  <img
                    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={
                  <img
                    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={
                  <img
                    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>
      <PagePerSection>
        <SliderScreenSection>
          <PageSubHead>Power cozmo | You Can create products</PageSubHead>
          <PageMainHead>
            Add your product details and advertise within minutes !!!
          </PageMainHead>
          <PageHeadingDes>
            Got multiple variants of A product? Don't worry, we got you covered
            with our integrated product addition tool
          </PageHeadingDes>
        </SliderScreenSection>
        <ImageSliderScreen>
          <Box sx={{ overflow: "hidden" }}>
            <img
              src="/assets/images/landing-page/laptop-screen.png"
              alt="Laptop"
              style={{ width: "100%", maxWidth: "900px" }}
            />
          </Box>
          <div
            style={{
              position: "absolute",
              top: "10%",
              left: "50%",
              transform: "translate(-50%, 0)",
              width: "65%",
            }}
          >
            <Slider {...settings}>
              {images.map((src, index) => (
                <img key={index} src={src} alt={`Slide ${index + 1}`} />
              ))}
            </Slider>
          </div>
        </ImageSliderScreen>
      </PagePerSection>
      <PagePerSection className="pinksection">
        <PageSubHead>
          <span>Power cozmo</span> | SELLER PORTAL
        </PageSubHead>
        <PageMainHead>
          Grow your business with the best suite tools
        </PageMainHead>
        <PageHeadingDes>
          Now, giving your product the global market has become very simple.
          Follow below for professional and dynamic tools.
        </PageHeadingDes>
        <GrowBusinessSec>
          <Grid container spacing={4} mt={8} alignItems="center">
            <Grid item xs={12} md={6}>
              <LeftSection>
                {expandableItems.map((item) => (
                  <Box key={item.id}>
                    <Item
                      active={activeIndex === item.id}
                      onClick={() => setActiveIndex(item.id)}
                    >
                      <Typography variant="body1" sx={{ fontWeight: "bold" }}>
                        {item.id < 10 ? `0${item.id}` : item.id} {item.title}
                      </Typography>
                    </Item>
                    <Collapse
                      in={activeIndex === item.id}
                      timeout="auto"
                      unmountOnExit
                    >
                      <Content>{item.content}</Content>
                    </Collapse>
                  </Box>
                ))}
              </LeftSection>
            </Grid>
            <Grid item xs={12} md={6} textAlign="center">
              <img
                src="/assets/images/landing-page/Grow.png"
                alt="Details"
                style={{
                  width: "90%",
                  borderRadius: "5px",
                  // boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
                }}
              />
            </Grid>
          </Grid>
        </GrowBusinessSec>
      </PagePerSection>
      <PagePerSection
        className="whitesection"
        sx={{ width: "90%", margin: "0 auto" }}
      >
        <PageSubHead>
          <span>Power cozmo</span>
        </PageSubHead>
        <PageMainHead>
          How It <span>Works</span>
        </PageMainHead>
        <PageHeadingDes>
          Choosing the best product type ensures that you see the most
          appropriate data fields for your product. Browse the product types
          directly or use searches. <br /> With over 150,000 manufacturers,
          wholesalers, and distributors selling on the platform, you can find or
          create anything you're looking for.{" "}
        </PageHeadingDes>
        <StepCardCon>
          <Box className={isAbove900 ? "" : ""}>
            <Grid container spacing={2}>
              <Grid item xs={12} sm={12} md={3}>
                <div className="Card-1">
                  <StepCardInn data-aos="fade-up" data-aos-delay="100">
                    <p className=" oddNo">1</p>
                    <h4 className="simpleText">
                      <span className="redText">Global</span> market
                    </h4>
                    <p>
                      Share your product details and publish them for global
                      buyers and resellers.
                    </p>
                    <CircleShape></CircleShape>
                  </StepCardInn>
                </div>
              </Grid>
              <Grid item xs={12} sm={12} md={3}>
                <div className="Card-2">
                  <StepCardInn data-aos="fade-down" data-aos-delay="200">
                    <h4 className="simpleText">
                      <span className="redText">Lead &</span> opportunities
                    </h4>
                    <p>
                      Get multiple leads and opportunities from our extensive
                      database floated directly to your dashboard.
                    </p>
                    <p className=" evenNo">2</p>
                  </StepCardInn>
                </div>
              </Grid>
              <Grid item xs={12} sm={12} md={3}>
                <div className="Card-3">
                  <StepCardInn data-aos="fade-up" data-aos-delay="300">
                    <p className=" oddNo">3</p>
                    <h4 className="simpleText">
                      <span className="redText">Close</span> Deals
                    </h4>
                    <p>
                      With our one-stop portal, quote, negotiate, close deals in
                      clicks away.
                    </p>
                  </StepCardInn>
                </div>
              </Grid>
              <Grid item xs={12} sm={12} md={3}>
                <div className="Card-4">
                  <StepCardInn data-aos="fade-down" data-aos-delay="400">
                    <h4 className="simpleText">
                      <span className="redText">Manage</span> Order
                    </h4>
                    <p>
                      Multiple buyer leads and orders are categorized in our CRM
                      portal. Get access to them for a hassle-free virtual
                      experience.
                    </p>
                    <p className=" evenNo">4</p>
                    <CircleShapeRight></CircleShapeRight>
                  </StepCardInn>
                </div>
              </Grid>
            </Grid>
          </Box>
        </StepCardCon>
      </PagePerSection>
      <PagePerSection className="pinksection">
        <Box sx={{ width: "90%", margin: "0 auto" }}>
          <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>
                  <SectionPageHeadings className="leftHeading">
                    What is Power Cozmo CRM?
                  </SectionPageHeadings>
                  <SectionPageText>
                    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.
                  </SectionPageText>
                  <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>
        </Box>
      </PagePerSection>

      <PagePerSection className="whitesection">
        <Box sx={{ width: "90%", margin: "0 auto" }}>
          <Grid container spacing={2}>
            <Grid item xs={12} sm={12} md={5}>
              <ColumnStack>
                <SectionPageHeadings className="leftHeading">
                  Live Chat: Resolve up to 80% of cases
                </SectionPageHeadings>
                <SectionPageText>
                  Power Cozmo’s Live Chat enables real-time support, allowing
                  businesses to resolve up to 80% of inquiries instantly and
                  efficiently.
                </SectionPageText>
                <LiveChatInfo>
                  <LiveChatinnData>
                    <img
                      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>
                    <img
                      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>
                    <img
                      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>
        </Box>
      </PagePerSection>
      <PagePerSection className="pinksection SimplyComBoxSection">
        <Box sx={{ width: "90%", margin: "0 auto" }}>
          <Grid container spacing={2}>
            <Grid item xs={12} sm={12} md={6}>
              <SimplyComBoxLeft>
                <SimplyCompleHead>
                  Simplify Complex Pricing with Our <br />
                  Built-in Product Calculator..
                </SimplyCompleHead>
                <img
                  src="/assets/images/landing-page/complex-price-img.png"
                  alt="Simplify Complex Pricing"
                  className="complex-price-img"
                />
              </SimplyComBoxLeft>
            </Grid>
            <Grid item xs={12} sm={12} md={6}>
              <SimplyCompleRight>
                <LiveChatinnData>
                  <img
                    src="../assets/images/landing-page/simply-img1.svg"
                    alt="Image"
                  />
                  <LiveChatinnBox>
                    <Typography variant="h3">Automated Calculations</Typography>
                    <Typography variant="body1">
                      Handle complex pricing equations with ease.
                    </Typography>
                  </LiveChatinnBox>
                </LiveChatinnData>

                <LiveChatinnData>
                  <img
                    src="../assets/images/landing-page/simply-img2.svg"
                    alt="Image"
                  />
                  <LiveChatinnBox>
                    <Typography variant="h3">Dynamic Inputs</Typography>
                    <Typography variant="body1">
                      Adjust the parameters like material costs, energy rates,
                      or logistics fees to see real-time price updates.
                    </Typography>
                  </LiveChatinnBox>
                </LiveChatinnData>
                <LiveChatinnData>
                  <img
                    src="../assets/images/landing-page/simply-img3.svg"
                    alt="Image"
                  />
                  <LiveChatinnBox>
                    <Typography variant="h3">Time-Saving Efficiency</Typography>
                    <Typography variant="body1">
                      No more manual errors—get accurate results instantly.
                    </Typography>
                  </LiveChatinnBox>
                </LiveChatinnData>

                <LiveChatinnData>
                  <img
                    src="../assets/images/landing-page/simply-img4.svg"
                    alt="Image"
                  />
                  <LiveChatinnBox>
                    <Typography variant="h3">
                      Tailored for Sellers in Energy & Power
                    </Typography>
                    <Typography variant="body1">
                      Designed specifically to meet the needs of sellers in the
                      power and energy sectors.
                    </Typography>
                  </LiveChatinnBox>
                </LiveChatinnData>
              </SimplyCompleRight>
            </Grid>
          </Grid>
        </Box>
      </PagePerSection>
      <PagePerSection className="whitesection">
        <PageMainHead>
          Engagement <span>Analytics</span>
        </PageMainHead>
        <Box sx={{ width: "90%", margin: "0 auto" }}>
          <Grid
            container
            spacing={2}
            alignItems="center"
            justifyContent="center"
          >
            <Grid item xs={12} sm={12} md={7}>
              <EngagementAnalyticsBox>
                <img
                  src="/assets/images/landing-page/Revenue.jpg"
                  alt="Revenue"
                />
              </EngagementAnalyticsBox>
            </Grid>
            <Grid item xs={12} sm={12} md={5}>
              <SectionPageHeadings>
                See how your products perform — and how you stack up against
                others.
              </SectionPageHeadings>
              <SectionPageText sx={{ margin: "12px 0 0 0" }}>
                With Power Cozmo's Engagement Analytics, you get deep insights
                into how buyers are interacting with your listings. Track key
                engagement metrics like product views, inquiries, clicks, and
                response rates — all broken down by category.
              </SectionPageText>
              <SectionPageText>
                What sets us apart? We don’t just show your numbers — we show
                how you compare. Understand where you lead and where there’s
                room to grow by benchmarking your performance against other
                sellers in the same category.
              </SectionPageText>
            </Grid>
          </Grid>
        </Box>
      </PagePerSection>
      <PagePerSection className="whitesection">
        <PageMainHead>
          Common <span>Questions</span>
        </PageMainHead>
        <SellerCommonContainer sx={{ padding: "0" }}>
          <CommonQuestionBox>
            <div>
              {faqData?.map((item: any, index: number) => {
                return (
                  <Accordion
                    expanded={expanded === `panel${index + 1}`}
                    onChange={handleChangeQ(`panel${index + 1}`)}
                  >
                    <AccordionSummary
                      aria-controls={`panel${index + 1}d-content`}
                      id={`panel${index + 1}d-header`}
                    >
                      <Typography>Q: {item?.question}</Typography>
                    </AccordionSummary>
                    <AccordionDetails>
                      <Typography>A: {item?.answer}</Typography>
                    </AccordionDetails>
                  </Accordion>
                );
              })}
            </div>
          </CommonQuestionBox>
        </SellerCommonContainer>
      </PagePerSection>
      <Shadesbg>
        <Box sx={{}}>
          <Grid container spacing={2}>
            <Grid item xs={12} sm={12} md={6}>
              <Box>
                <Box>
                  <Realtime>
                    24/7 <Realtimespan>real-time</Realtimespan> support.
                  </Realtime>
                  <RealtimeSub sx={{ margin: "20px 0 0 0" }}>
                    We're here for you — anytime, every day.
                  </RealtimeSub>
                  <Weeasy>
                    At Power Cozmo, support doesn’t sleep. Whether you need help
                    setting up your store, resolving a buyer query, or
                    understanding analytics — our team is available 24/7 to
                    assist you.
                    <br /> You can reach us via live chat, email, or direct
                    support requests — and get fast, reliable help whenever you
                    need it.
                  </Weeasy>
                </Box>
                <Box>
                  <RealtimeSub sx={{ margin: "20px 0 0 0" }}>
                    Why it matters:
                  </RealtimeSub>
                  <List>
                    <Li>-No downtime — get help whenever you’re working</Li>
                    <Li>-Fast issue resolution</Li>
                    <Li>-Personalized support for sellers of all sizes</Li>
                    <Li>-Dedicated account managers for verified sellers</Li>
                  </List>
                </Box>
              </Box>
            </Grid>
            <Grid item xs={12} sm={12} md={6}>
              <Box sx={{ position: "relative" }}>
                <Box
                  sx={{
                    position: "absolute",
                    right: "0px",
                    top: "30px",
                    display: "none",
                    "@media screen and (max-width: 899px) and (min-width: 480px)":
                      {
                        display: "block",
                      },
                  }}
                >
                  <img src="/assets/buyerchatsvg.svg" alt="" />
                </Box>
                <FlexBoxforchat sx={{}}>
                  <Box
                    sx={{
                      "@media screen and (max-width:900px)": {
                        display: "none",
                      },
                    }}
                  >
                    <Imageborder>
                      <img src="/assets/buyerchatsvg.svg" alt="" />
                    </Imageborder>
                  </Box>
                  <Box>
                    <Onlinechat>Online Chat</Onlinechat>
                    <Livechat>Live Chat Now</Livechat>
                    <RealtimeSub sx={{ margin: "20px 0 0 0" }}>
                      Connect instantly with buyers — no delays, no barriers.
                    </RealtimeSub>
                    <Box sx={{}}>
                      <Weeasy>
                        Power Cozmo’s built-in Live Chat lets you communicate
                        directly with potential buyers in real time. Whether
                        it's answering product questions, negotiating terms, or
                        sharing important files — you’re always just a message
                        away.
                      </Weeasy>
                    </Box>
                    <Box>
                      <RealtimeSub sx={{ margin: "20px 0 0 0" }}>
                        Key features:
                      </RealtimeSub>
                      <List>
                        <Li>- Real-time messaging between buyer and seller</Li>
                        <Li>
                          - Share documents, images, and product files instantly
                        </Li>
                        <Li>
                          - Faster lead conversion and stronger buyer trust
                        </Li>
                        <Li>- Full chat history for follow-up and clarity</Li>
                      </List>
                    </Box>
                  </Box>
                </FlexBoxforchat>
              </Box>
            </Grid>
          </Grid>
        </Box>
      </Shadesbg>
      <FooterPage />
    </SellerPageBody>
  );
}