"use client";
import Header from "../../app/components/navbar";
import Image from "next/image";
import style from "../index.module.css";
import interduceImg from "../../public/assets/photos/secondInterDuce.png";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Footer from "../../app/components/footer";
import { useEffect, useState } from "react";
import Head from "next/head";
import Link from "next/link";

const MainClient = ({ data }) => {
  const [backwardStatus, setbackwardStatus] = useState(null);

  const [customerSlider, setCustomerSlider] = useState(null);
  const [companyServices, setCompanyServices] = useState(null);
  // const [pageContent, setPageContent] = useState();
  const settings = {
    dots: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 2000,
    speed: 2000,
    slidesToShow: 2,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          infinite: true,
        },
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          initialSlide: 1,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  };

 


  useEffect(() => {
    setCustomerSlider(JSON.parse(data.customer));
    setCompanyServices(JSON.parse(data.service));
  }, []);


  return (
    <>
      <Head>
        <title>{data?.company_name}</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <link rel="icon" href="/assets/photos/logo.svg" />
      </Head>
      <Header
        backwardStatus={backwardStatus}
        setbackwardStatus={setbackwardStatus}
        data={data}
      />
      <div className={style.parent}>
        <div className="container">
          <div className={style.headContent}>
            <div className={style.content}>
              {/* <div className={style.desc}>
                <div className={`${style.title} right`}>
                  <h1 className="txtPrimary">معرفی</h1>
                  <h1 className="txtSecondPrimary">{data?.company_name}</h1>
                </div>
                <p>
                  {data?.company_introduction}
                </p>
              </div> */}


              <div className={style.introduceSlider}>
                <Slider
                  dots={true}
                  infinite={true}
                  autoplay={true}
                  autoplaySpeed={4000}
                  speed={1000}
                  slidesToShow={1}
                  slidesToScroll={1}
                  arrows={false}
                >
                     {(() => {
  let slides = [];

  try {
    slides = data?.slider ? JSON.parse(data.slider) : [];
  } catch {
    slides = [];
  }

  if (!Array.isArray(slides) || slides.length === 0) return null;

  return slides.map((el, index) => (
    <div key={`intro-slide-${index}`} className={style.slideItem}>
      <div className={style.slideContent}>
        <div className={style.slideImage}>
          <Image
            src={`http://bpms-back.sepehrdata.com/api/getimage?stageID=${el.ValueP1160S1746StageID}&nameOrID=image&token=`}
            width={600}
            height={600}
            style={{ width: "100%", height: "auto", borderRadius: "20px" }}
            alt={el.title ?? ""}
            priority={true}
          />
        </div>
        <div className={style.slideText}>
          <h1 className="txtPrimary">{el.title}</h1>
          <p className="content">{el.description}</p>
          {el.link && (
            <Link href={el.link} target="_blank" className={style.slideLink}></Link>
          )}
        </div>
      </div>
    </div>
  ));
})()}

                </Slider>
              </div>





              <div className={style.image}>
                <Image src={interduceImg} alt="interduce" priority={true} />
              </div>
            </div>
          </div>

          <div className={style.services}>
            <div className={style.title}>
              <h1 className="icon triAngleIcon txtPrimary">خدمات</h1>
              <h1 className="txtSecondPrimary">{data?.company_name}</h1>
            </div>
            <div className={style.cards}>
              {companyServices?.map((el) => {
                return (
                  <div
                    className="card"
                    key={`service-${el.WorkflowID1}-${el.ValueP1161S1750StageID}`}
                  >
                    <div className="head">
                      <div className="cardLogo">
                        <Image
                          src={`http://bpms-back.sepehrdata.com/api/getimage?stageID=${el.ValueP1161S1750StageID}&nameOrID=patent_first_page_image&token=`}
                          width={500}  // یک مقدار عددی
                          height={300} // یک مقدار عددی
                          style={{ width: '100%', height: 'auto' }} // ریسپانسیو
                          alt={el.title}
                          priority={true}
                        />
                      </div>
                      <h1>{el?.title}</h1>
                    </div>
                    <div className="content">
                      <p className="minimize">{el?.description}</p>
                    </div>
                  </div>
                );
              })}

            </div>
          </div>
          <div className={style.mainContent}>
            <div className={style.hyperAutomation}>
              <div className={style.aboutHyper}>
                <div className={`${style.title} right`}>
                  <h1 className="icon triAngleIcon txtPrimary">{data?.title_product_introduction1}</h1>
                  <h1 className="txtSecondPrimary">{data?.title_product_introduction2}</h1>
                </div>
                <div className={style.hyperDesc}>
                  <p className="minimize seventh">
                    {data?.product_introduction}

                  </p>
                </div>
              </div>
              <div className={style.descRobot}>
                <div className={style.imageSection}>
                  <img
                    src={`http://bpms-back.sepehrdata.com/api/getimage?stageID=${data?.ValueP1166S1770StageID}&nameOrID=product_introduction_image&token=`}
                    alt={data?.title_product_introduction1 +' ' +data?.title_product_introduction2}
                    className={style.robotImage}
                  />
                </div>


              </div>
            </div>
            <div className="customer">
              <div className={style.title}>
                <h1 className="icon triAngleIcon txtPrimary">مشتریان</h1>
                <h1 className="txtSecondPrimary">{data?.company_name}</h1>
              </div>
              <Slider {...settings}>
  {customerSlider?.map((el) => {
    return (
      <div key={`customer-${el.WorkflowID}-${el.ValueP1162S1754StageID}`} className={style.customerItem}>
        <Link
          className={style.customerBrand}
          href={el.website}
          target="_blank"
        >
          <Image
            src={`http://bpms-back.sepehrdata.com/api/getimage?stageID=${el.ValueP1162S1754StageID}&nameOrID=image&token=`}
            width={500}
            height={300}
            style={{ width: '100%', height: 'auto' }}
            alt="brand"
            priority={true}
          />
        </Link>
        {/* عنوان */}
        <div className="customerTitle">
          <p>{el?.title}</p>
        </div>
      </div>
    );
  })}
</Slider>
            </div>

            <div className={style.whatIsSepehrdata}>
              <div className={style.title}>
                <h1 className="icon triAngleIcon txtSecondPrimary">
                  {data?.company_name}
                </h1>
                <h1 className="txtPrimary">چیست؟</h1>
              </div>
              <div className={style.sepehrDesc}>
                <p>
                {data?.company_introduction}
                </p>
              </div>
            </div>
            <Footer  data={data} />
          </div>
        </div>
      </div>
      <div className={`backward ${backwardStatus ? "show" : ""}`}></div>
    </>
  );
};

export default MainClient;
