import RichText from "@/app/components/rich-text";
import Image from "next/image";
import AutoPlayVideo from "@/app/components/AutoPlayVideo";

export default function StickySteps({ post }: { post: any }) {
  return (
    <div className="relative">
      {/* ==================== START CODE FOR STEP 1 HERE ================== */}
      <div className="relative">
        <div className="flex w-full flex-col md:flex-row">
          <div
            className="mob-noise relative z-20 flex w-full flex-col md:w-[50%]"
            style={{
              backgroundColor: post.steps.step1.bgColor,
            }}
          >
            <div className="font-macropolo sticky top-12 z-50 flex w-full justify-between bg-gray-100 py-4 text-lg font-medium uppercase">
              <div className="mx-auto flex w-[88%] items-center justify-between">
                <div className="flex">{post.steps.step1.caption1}</div>
                <div>{post.steps.step1.caption2}</div>
              </div>
            </div>
            <div className="relative h-full overflow-hidden">
              <div
                className="relative z-30 flex w-full flex-col"
                style={{
                  color: post.steps.step1.color,
                }}
              >
                <div className="mx-auto flex w-[88%]">
                  <div className="font-bogart flex w-full pt-15 pb-10 text-3xl font-bold md:w-[75%] md:pt-20 md:text-5xl">
                    {post.steps.step1.heading}
                  </div>
                </div>
                <div className="flex w-full border-t-1 border-b-1 py-4">
                  <div className="mx-auto flex w-[88%] text-xl font-medium">
                    {post.steps.step1.suHeading}
                  </div>
                </div>
                <div className="flex w-full md:hidden">
                  <Image
                    src={post.steps.step1.rightImg}
                    width={1200}
                    height={1600}
                    alt=""
                    className="img-responsive"
                  />
                </div>
                <div className="mx-auto flex w-[88%] flex-col gap-2 py-10">
                  <div className="w-full md:w-[80%] [&>div>p]:my-5">
                    <RichText initialHtml={post.steps.step1.content} />
                  </div>
                  <div className="flex w-[60%] pb-10 md:w-[50%]">
                    {post.steps.step1.img1Type == "video" && (
                      <AutoPlayVideo
                        src={post.steps.step1.img1Src}
                        className="video-responsive"
                      />
                    )}
                    {post.steps.step1.img1Type == "image" && (
                      <Image
                        src={post.steps.step1.img1Src}
                        width={1600}
                        height={900}
                        alt=""
                        className="img-responsive"
                      />
                    )}
                  </div>
                </div>
              </div>
              <div className="absolute right-0 -bottom-30 -z-10 h-80 w-40 items-end justify-end md:bottom-15 md:h-60 md:w-60">
                <div>
                  <Image
                    src={post.steps.step1.bgAbstract}
                    width={1600}
                    height={900}
                    alt=""
                    className="img-responsive"
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="hidden w-[50%] md:flex">
            <Image
              src={post.steps.step1.rightImg}
              width={1200}
              height={1600}
              alt=""
              className="img-responsive"
            />
          </div>
        </div>
      </div>
      {/* ==================== End CODE FOR STEP 1 HERE ==================== */}
      {/* ==================== START CODE FOR STEP 2 HERE ================== */}
      <div className="relative">
        <div className="flex w-full flex-col md:flex-row">
          <div
            className="mob-noise relative z-20 flex w-full flex-col md:w-[50%]"
            style={{
              backgroundColor: post.steps.step2.bgColor,
            }}
          >
            <div className="font-macropolo sticky top-12 z-50 flex w-full justify-between bg-gray-100 py-4 text-lg font-medium uppercase">
              <div className="mx-auto flex w-[88%] items-center justify-between">
                <div className="flex">{post.steps.step2.caption1}</div>
                <div>{post.steps.step2.caption2}</div>
              </div>
            </div>
            <div className="relative h-full overflow-hidden">
              <div
                className="relative z-30 flex w-full flex-col"
                style={{
                  color: post.steps.step2.color,
                }}
              >
                <div className="mx-auto flex w-[88%]">
                  <div className="font-bogart flex w-full pt-15 pb-10 text-3xl font-bold md:w-[75%] md:pt-20 md:text-5xl">
                    {post.steps.step2.heading}
                  </div>
                </div>
                <div className="flex w-full border-t-1 border-b-1 py-4">
                  <div className="mx-auto flex w-[88%] text-xl font-medium">
                    {post.steps.step2.suHeading}
                  </div>
                </div>
                <div className="flex w-full md:hidden">
                  <Image
                    src={post.steps.step2.rightImg}
                    width={1200}
                    height={1600}
                    alt=""
                    className="img-responsive"
                  />
                </div>
                <div className="mx-auto flex w-[88%] flex-col gap-2 py-10 pb-25">
                  <div className="w-full md:w-[80%] [&>div>p]:my-5">
                    <RichText initialHtml={post.steps.step2.content} />
                  </div>
                </div>
              </div>
              <div className="absolute right-0 bottom-6 -z-10 h-30 w-30 items-end justify-end md:bottom-15 md:h-60 md:w-60">
                <div>
                  <Image
                    src={post.steps.step2.bgAbstract}
                    width={1600}
                    height={900}
                    alt=""
                    className="img-responsive"
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="hidden w-[50%] md:flex">
            <Image
              src={post.steps.step2.rightImg}
              width={1200}
              height={1600}
              alt=""
              className="img-responsive"
            />
          </div>
        </div>
      </div>
      {/* ==================== End CODE FOR STEP 2 HERE ==================== */}
      {/* ==================== START CODE FOR STEP 3 HERE ================== */}
      <div className="relative">
        <div className="flex w-full flex-col md:flex-row">
          <div
            className="mob-noise relative z-20 flex w-full flex-col md:w-[50%]"
            style={{
              backgroundColor: post.steps.step3.bgColor,
            }}
          >
            <div className="font-macropolo sticky top-12 z-50 flex w-full justify-between bg-gray-100 py-4 text-lg font-medium uppercase">
              <div className="mx-auto flex w-[88%] items-center justify-between">
                <div className="flex">{post.steps.step3.caption1}</div>
                <div>{post.steps.step3.caption2}</div>
              </div>
            </div>
            <div className="relative h-full overflow-hidden">
              <div
                className="relative z-30 flex w-full flex-col"
                style={{
                  color: post.steps.step3.color,
                }}
              >
                <div className="mx-auto flex w-[88%]">
                  <div className="font-bogart flex w-full pt-15 pb-10 text-3xl font-bold md:w-[75%] md:pt-20 md:text-5xl">
                    {post.steps.step3.heading}
                  </div>
                </div>
                <div className="flex w-full border-t-1 border-b-1 py-4">
                  <div className="mx-auto flex w-[88%] text-xl font-medium">
                    {post.steps.step3.suHeading}
                  </div>
                </div>
                <div className="mx-auto flex w-[88%] flex-col gap-5 pt-5 md:hidden md:w-full">
                  <div className="mx-auto w-full md:w-[80%]">
                    <Image
                      src={post.steps.step3.rightImg}
                      width={1200}
                      height={800}
                      alt=""
                      className="img-responsive"
                    />
                  </div>
                  <div className="mx-auto w-full md:w-[80%]">
                    <Image
                      src={post.steps.step3.rightImg2}
                      width={1200}
                      height={800}
                      alt=""
                      className="img-responsive"
                    />
                  </div>
                </div>
                <div className="mx-auto flex w-[88%] flex-col gap-2 py-10 pb-30">
                  <div className="w-full md:w-[80%] [&>div>p]:my-5">
                    <RichText initialHtml={post.steps.step3.content} />
                  </div>
                </div>
              </div>
              <div className="absolute right-0 bottom-15 -z-10 h-30 w-30 items-end justify-end md:bottom-25 md:h-50 md:w-50">
                <div>
                  <Image
                    src={post.steps.step3.bgAbstract}
                    width={1600}
                    height={900}
                    alt=""
                    className="img-responsive"
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="hidden h-200 w-[50%] flex-col items-center justify-center gap-5 md:flex">
            <div className="mx-auto w-full md:w-[80%]">
              <Image
                src={post.steps.step3.rightImg}
                width={1200}
                height={800}
                alt=""
                className="img-responsive"
              />
            </div>
            <div className="mx-auto w-full md:w-[80%]">
              <Image
                src={post.steps.step3.rightImg2}
                width={1200}
                height={800}
                alt=""
                className="img-responsive"
              />
            </div>
          </div>
        </div>
      </div>
      {/* ==================== End CODE FOR STEP 3 HERE ==================== */}
      {/* ==================== START CODE FOR STEP 4 HERE ================== */}
      <div className="relative">
        <div className="flex w-full flex-col md:flex-row">
          <div
            className="mob-noise relative z-20 flex w-full flex-col md:w-[50%]"
            style={{
              backgroundColor: post.steps.step4.bgColor,
            }}
          >
            <div className="font-macropolo sticky top-12 z-50 flex w-full justify-between bg-gray-100 py-4 text-lg font-medium uppercase">
              <div className="mx-auto flex w-[88%] items-center justify-between">
                <div className="flex">{post.steps.step4.caption1}</div>
                <div>{post.steps.step4.caption2}</div>
              </div>
            </div>
            <div className="relative h-full overflow-hidden">
              <div
                className="relative z-30 flex w-full flex-col"
                style={{
                  color: post.steps.step4.color,
                }}
              >
                <div className="mx-auto flex w-[88%]">
                  <div className="font-bogart flex w-full pt-15 pb-10 text-3xl font-bold md:w-[75%] md:pt-20 md:text-5xl">
                    {post.steps.step4.heading}
                  </div>
                </div>
                <div className="flex w-full border-t-1 border-b-1 py-4">
                  <div className="mx-auto flex w-[88%] text-xl font-medium">
                    {post.steps.step4.suHeading}
                  </div>
                </div>
                <div className="flex w-full md:hidden">
                  {post.steps.step4.bannerType == "video" && (
                    <AutoPlayVideo
                      src={post.steps.step4.bannerSrc}
                      className="video-responsive"
                    />
                  )}
                  {post.steps.step4.bannerType == "image" && (
                    <Image
                      src={post.steps.step4.bannerSrc}
                      width={1600}
                      height={900}
                      alt=""
                      className="img-responsive"
                    />
                  )}
                </div>
                <div className="flex w-full flex-col gap-2 py-10 pb-0 pl-[6%] md:flex-row">
                  <div className="flex w-full flex-row items-center justify-between align-middle">
                    <div className="flex w-[75%]">
                      <div>
                        <div className="flex [&>div>p]:mt-5 [&>div>p>span]:font-medium">
                          <RichText initialHtml={post.steps.step4.content} />
                        </div>
                        <div>
                          <div className="mx-auto flex w-full flex-col items-center justify-center pt-5 md:w-[50%] md:pt-20">
                            <div className="mx-auto w-[50%] md:w-[75%]">
                              <Image
                                src={post.steps.step4.img}
                                width={400}
                                height={1200}
                                alt=""
                                className="img-responsive"
                              />
                            </div>
                            <div className="text-center text-xs [&>div>p]:my-4">
                              <RichText
                                initialHtml={post.steps.step4.imgContent}
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="flex w-[25%]">
                      <div>
                        <Image
                          src={post.steps.step4.hrPattern}
                          width={400}
                          height={1200}
                          alt=""
                          className="img-responsive"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <Image
                src={post.steps.step4.bgAbstract}
                width={1600}
                height={900}
                alt=""
                className="img-responsive"
              />
            </div>
          </div>
          <div className="hidden w-[50%] md:flex">
            {post.steps.step4.bannerType == "video" && (
              <video
                src={post.steps.step4.bannerSrc}
                id="step4_video_web"
                autoPlay
                muted
                loop
                playsInline
                className="video-responsive"
              />
            )}
            {post.steps.step4.bannerType == "image" && (
              <Image
                src={post.steps.step4.bannerSrc}
                width={1600}
                height={900}
                alt=""
                className="img-responsive"
              />
            )}
          </div>
        </div>
      </div>
      {/* ==================== End CODE FOR STEP 4 HERE ==================== */}
    </div>
  );
}