import RichText from "@/app/components/rich-text";
import Image from "next/image";
export default function TheVision({ post }: { post: any }) {
  return (
    <div className="relative w-full overflow-hidden">
      <div className="absolute -top-[25%] -left-[25%] z-5 flex h-[150%] w-[150%] items-center justify-center md:top-0 md:left-0 md:h-full md:w-full">
        <div className="flex h-full w-full items-center justify-center">
          <div className="flex items-center justify-center md:h-[70%] md:w-[70%]">
            <div className="spinner-anim w-full opacity-40">
              <Image
                src={post.visionAnim.animAbstract}
                width={1000}
                height={1000}
                alt=""
                className="img-responsive"
              />
            </div>
          </div>
        </div>
      </div>
      <div className="relative z-20 pt-10 pb-100 md:pt-40 md:pb-80">
        <div className="wrapper">
          <div className="relative top-8 -left-[35%] z-2 mx-auto h-25 w-25 items-center justify-center md:top-15 md:-left-[18%] md:h-40 md:w-40">
            <Image
              src={post.visionAnim.visionIcon}
              width={200}
              height={200}
              alt=""
              className="img-responsive"
            />
          </div>
          <div className="relative z-10 mx-auto flex w-full flex-col justify-center gap-5 md:w-[50%] md:items-center md:gap-15">
            <h1 style={{ color: post.theme.textColorDark }}>
              {post.visionAnim.heading}
            </h1>
            <div
              className="flex w-full flex-col items-start justify-start text-left md:items-start md:justify-center md:text-center"
              style={{ color: post.theme.textColorDark }}
            >
              <h3 className="w-full text-left capitalize md:text-center">
                {post.visionAnim.subHeading}
              </h3>
              <div className="text-sm md:text-center md:text-base [&>div>p]:my-4 [&>div>p>span]:font-medium [&>div>p>span]:italic">
                <RichText initialHtml={post.visionAnim.content} />
              </div>
            </div>
          </div>
        </div>
        <div
          className="font-bogart absolute bottom-[35%] right-[2%] w-[80%] text-center text-sm italic md:top-[10%] md:right-[5%] md:w-[30%] md:text-lg"
          style={{ color: post.theme.textColorLight }}
        >
          {post.visionAnim.elements.caption}
        </div>
        <div
          className="font-bogart absolute bottom-[25%] left-0 w-[75%] text-center text-sm italic md:top-[20%] md:left-[5%] md:w-[25%] md:text-lg"
          style={{ color: post.theme.textColorLight }}
        >
          {post.visionAnim.elements.caption2}
        </div>
        <div
          className="font-bogart absolute top-[5%] left-0 w-[100%] text-center text-sm italic md:top-auto md:bottom-[20%] md:left-[10%] md:w-[30%] md:text-lg"
          style={{ color: post.theme.textColorLight }}
        >
          {post.visionAnim.elements.caption3}
        </div>
        <div
          className="absolute right-10 bottom-15 flex w-[80%] flex-row items-center justify-center gap-2 md:w-[30%]"
          style={{ color: post.theme.textColorLight }}
        >
          <div className="font-bogart flex text-center text-sm italic md:w-[60%] md:text-lg">
            {post.visionAnim.elements.abstractText}
          </div>
          <div className="flex w-[50%] md:w-[30%]">
            <Image
              src={post.visionAnim.elements.abstractImg}
              width={100}
              height={300}
              alt=""
              className="img-responsive"
            />
          </div>
        </div>
      </div>
    </div>
  );
}