import AboutGradientShape from "@svg/AboutGradientShape";
import Seperator from "../Seperator";
import SeperatorInner from "../SeperatorInner";
import AboutGrayShape from "@svg/AboutGrayShape";
import SeperatorSmallInner from "../SeperatorSmallInner";
import Image from "next/legacy/image";

const HomeAbout = ({ homeAbout }: any) => {
  homeAbout = homeAbout.data;
  const defaultAltText = "Image Description";

  return (
    <>
      <Seperator />
      <section id="about">
        <div className="content-fluid">
          {homeAbout.title && (
            <div className="flex justify-center">
              <h2 className="section-header">
                <span className="z-index-1">{homeAbout.title}</span>
              </h2>
            </div>
          )}

          <SeperatorInner />

          {homeAbout.description && (
            <div
              dangerouslySetInnerHTML={{ __html: homeAbout.description }}
            ></div>
          )}

          <SeperatorInner />
          <SeperatorSmallInner />
          <div className="grid grid-cols-1 xl:grid-cols-3  gap-10">
            <div className="home-about-box-wrapper">
              <AboutGradientShape />
              <AboutGrayShape />
              <div className="home-about-box-content">
                <div className="content-inner-fluid">
                  <div className="flex justify-center items-center home-about-box-header">
                    {homeAbout.visionImage && (
                      <Image
                        priority={false}
                        className="object-contain absolute"
                        src={homeAbout.visionImage}
                        layout="fixed"
                        width={60}
                        height={60}
                        alt={homeAbout.visionImageDescription || defaultAltText}
                      />
                    )}

                    {homeAbout.visionTitle && (
                      <h3 className="title ml-4">{homeAbout.visionTitle}</h3>
                    )}
                  </div>
                  <SeperatorInner />
                  {homeAbout.visionDescription && (
                    <p className="text-center text">
                      {homeAbout.visionDescription}
                    </p>
                  )}
                </div>
              </div>
            </div>
            <div className="home-about-box-wrapper">
              <AboutGradientShape />
              <AboutGrayShape />
              <div className="home-about-box-content">
                <div className="content-inner-fluid">
                  <div className="flex justify-center items-center home-about-box-header">
                    {homeAbout.missionImage && (
                      <Image
                        priority={false}
                        className="object-contain absolute"
                        src={homeAbout.missionImage}
                        layout="fixed"
                        width={60}
                        height={60}
                        alt={
                          homeAbout.missionImageDescription || defaultAltText
                        }
                      />
                    )}
                    {homeAbout.missionTitle && (
                      <h3 className="title ml-4">{homeAbout.missionTitle}</h3>
                    )}
                  </div>
                  <SeperatorInner />
                  {homeAbout.missionDescription && (
                    <p className="text-center text">
                      {homeAbout.missionDescription}
                    </p>
                  )}
                </div>
              </div>
            </div>
            <div className="home-about-box-wrapper">
              <AboutGradientShape />
              <AboutGrayShape />
              <div className="home-about-box-content">
                <div className="content-inner-fluid">
                  <div className="flex justify-center items-center home-about-box-header">
                    {homeAbout.valuesImage && (
                      <Image
                        priority={false}
                        className="object-contain absolute"
                        src={homeAbout.valuesImage}
                        layout="fixed"
                        width={60}
                        height={60}
                        alt={homeAbout.valuesImageDescription || defaultAltText}
                      />
                    )}
                    {homeAbout.valuesTitle && (
                      <h3 className="title ml-4">{homeAbout.valuesTitle}</h3>
                    )}
                  </div>
                  <SeperatorInner />
                  {homeAbout.valuesDescription && (
                    <p className="text-center text">
                      {homeAbout.valuesDescription}
                    </p>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default HomeAbout;