<template>
  <section class="hidden md:block image-unmask">
    <div
      class="autoHide absolute z-[100] left-[37.5vw] top-[20vw] text-[2.656vw] w-[25vw] text-center"
    >
      We
      <span class="font-bold"> Believe </span>
      in the
      <span class="font-bold"> Destination </span>
    </div>
    <img id="img" src="/public/images/aboutBg.jpg" />
    <svg id="svg">
      <defs>
        <mask id="mask">
          <rect width="100vw" height="100vw" fill="white"></rect>

          <rect
            class="border rounded-[10vw]"
            id="circle1"
            x="-10%"
            y="14%"
            width="21vw"
            height="34vw"
            rx="10vw"
          />

          <rect
            class="border rounded-[10vw]"
            id="circle2"
            x="15%"
            y="14%"
            width="21vw"
            height="34vw"
            rx="10vw"
          />
          <rect
            class="border rounded-[10vw]"
            id="circle3"
            x="40%"
            y="14%"
            width="21vw"
            height="34vw"
            rx="10vw"
          />

          <rect
            class="border rounded-[10vw]"
            id="circle4"
            x="65%"
            y="14%"
            width="21vw"
            height="34vw"
            rx="10vw"
          />

          <rect
            class="border rounded-[10vw]"
            id="circle5"
            x="90%"
            y="14%"
            width="21vw"
            height="34vw"
            rx="10vw"
          />
        </mask>
      </defs>
      <rect
        id="rect"
        width="100vw"
        height="100%"
        fill="white"
        mask="url(#mask)"
      ></rect>
    </svg>
  </section>

  <section class="content">
    <div class="h-[94.615vw] lg:h-[42.938vw] flex items-center text-[#383E43]">
      <div class="text w-[60%] md:w-[37%] ms-[4vw] md:ms-[23.594vw]">
        <h2
          class="-mt-[2vw] md:mt-[10vw] lg:mt-0 text-[4.544vw] lg:text-[1.481vw] font-bold"
        >
          داستان ما
        </h2>
        <p
          class="text-[3.19vw] lg:text-[0.833vw] leading-[4.5vw] lg:leading-[1.563vw] mt-[2vw]"
        >
          <span>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
            استفاده از طراحان گرافیک است، چاپگرها
          </span>
          <span>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
            استفاده از طراحان گرافیک است، چاپگرها
          </span>
        </p>
        <p
          class="hidden lg:block text-[3.19vw] lg:text-[0.833vw] leading-[1.563vw] mt-[2vw]"
        >
        <span>
          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
          استفاده از طراحان گرافیک است، چاپگرها
        </span>
        <span>
          لورم ایپسوم متن ساختگی با تولید سادگی نامفهو  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
          استفاده از طراحان گرافیک است، چاپگرهام از صنعت چاپ، و با
          استفاده از طراحان گرافیک است، چاپگرها
        </span>
        <span>
          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
          استفاده از طراحان گرافیک است، چاپگرها
        </span>
        <span>
          لورم ایپسوم متن ساختگی با تولید سادگی نامفهو  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
          استفاده از طراحان گرافیک است، چاپگرهام از صنعت چاپ، و با
          استفاده از طراحان گرافیک است، چاپگرها
        </span>
        <span>
          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
          استفاده از طراحان گرافیک است، چاپگرها
        </span>
        <span>
          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
          استفاده از طراحان گرافیک است، چاپگرها
        </span>
        <span>
          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
          استفاده از طراحان گرافیک است، چاپگرها از صنعت چاپ، و با
          استفاده از طراحان گرافیک است، چاپگرها
        </span>
          <span>
            در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را
            می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
          </span>
          <span>
            الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این
            صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و
          </span>
 
        </p>
      </div>
    </div>
    <div class="fade"></div>
  </section>
  <img id="img-fixed" src="/public/images/aboutBg.jpg" />
</template>

  <script setup>
import { onMounted, onUnmounted, ref } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
gsap.registerPlugin(ScrollTrigger);
let ctx;
onMounted(() => {
  ctx = gsap.context((self) => {
    const svg = document.querySelector("#svg");
    const img = document.querySelector("#img");
    const imgFixed = document.querySelector("#img-fixed");

    const circle1 = document.querySelector("#circle1");
    let height1 = circle1.getAttribute("height");
    let width1 = circle1.getAttribute("width");
    let spaceX1 = circle1.getAttribute("x");
    let spaceY1 = circle1.getAttribute("y");
    let rx1 = circle1.getAttribute("rx");
    let rx1Int = parseInt(rx1);
    let heightInt1 = parseInt(height1);
    let widthInt1 = parseInt(width1);
    let spaceIntX1 = parseInt(spaceX1);
    let spaceIntY1 = parseInt(spaceY1);

    const circle2 = document.querySelector("#circle2");
    let height2 = circle2.getAttribute("height");
    let width2 = circle2.getAttribute("width");
    let spaceX2 = circle2.getAttribute("x");
    let spaceY2 = circle2.getAttribute("y");
    let rx2 = circle2.getAttribute("rx");
    let rx2Int = parseInt(rx2);
    let heightInt2 = parseInt(height2);
    let widthInt2 = parseInt(width2);
    let spaceIntX2 = parseInt(spaceX2);
    let spaceIntY2 = parseInt(spaceY2);

    const circle3 = document.querySelector("#circle3");
    let height3 = circle3.getAttribute("height");
    let width3 = circle3.getAttribute("width");
    let spaceX3 = circle3.getAttribute("x");
    let spaceY3 = circle3.getAttribute("y");
    let rx3 = circle3.getAttribute("rx");
    let rx3Int = parseInt(rx3);
    let heightInt3 = parseInt(height3);
    let widthInt3 = parseInt(width3);
    let spaceIntX3 = parseInt(spaceX3);
    let spaceIntY3 = parseInt(spaceY3);

    const circle4 = document.querySelector("#circle4");
    let height4 = circle4.getAttribute("height");
    let width4 = circle4.getAttribute("width");
    let spaceX4 = circle4.getAttribute("x");
    let spaceY4 = circle4.getAttribute("y");
    let rx4 = circle4.getAttribute("rx");
    let rx4Int = parseInt(rx4);
    let heightInt4 = parseInt(height4);
    let widthInt4 = parseInt(width4);
    let spaceIntX4 = parseInt(spaceX4);
    let spaceIntY4 = parseInt(spaceY4);

    const circle5 = document.querySelector("#circle5");
    let height5 = circle5.getAttribute("height");
    let width5 = circle5.getAttribute("width");
    let spaceX5 = circle5.getAttribute("x");
    let spaceY5 = circle5.getAttribute("y");
    let rx5 = circle5.getAttribute("rx");
    let rx5Int = parseInt(rx5);
    let heightInt5 = parseInt(height5);
    let widthInt5 = parseInt(width5);
    let spaceIntX5 = parseInt(spaceX5);
    let spaceIntY5 = parseInt(spaceY5);

    const rect = document.querySelector("#rect");
    const pad = 4;

    let imgWidth, imgHeight;

    gsap.set(img, {
      scale: 1.1,
      xPercent: -50,
      yPercent: -50,
    });

    gsap.set(imgFixed, {
      xPercent: -50,
      yPercent: -50,
    });

    var tl = gsap
      .timeline({
        scrollTrigger: {
          trigger: ".image-unmask",
          pin: true,
          start: "top top",
          end: "+=500",
          //end: "bottom bottom",
          scrub: true,
        },
        defaults: {
          duration: 5,
        },
      })

      .to(
        circle1,
        {
          attr: {
            height: () => heightInt1 * 10 + "vw",
            width: () => widthInt1 * 10 + "vw",
            x: () => spaceIntX1 * 55 + "%",
            y: () => spaceIntY1 - (heightInt1 * 10) / 1 + "%",
            rx: () => rx1Int * 7 + "vw",
          },
        },
        0
      )

      .to(
        circle2,
        {
          attr: {
            height: () => heightInt2 * 10 + "vw",
            width: () => widthInt2 * 10 + "vw",
            x: () => spaceIntX2 * -20 + "%",
            y: () => spaceIntY2 - (heightInt2 * 10) / 1 + "%",
            rx: () => rx2Int * 7 + "vw",
          },
        },
        0
      )
      .to(
        circle3,
        {
          attr: {
            height: () => heightInt3 * 10 + "vw",
            width: () => widthInt3 * 10 + "vw",
            x: () => spaceIntX3 - (widthInt3 * 10) / 2.17 + "%",
            y: () => spaceIntY3 - (heightInt3 * 10) / 1 + "%",
            rx: () => rx3Int * 7 + "vw",
          },
        },
        0
      )
      .to(
        circle4,
        {
          attr: {
            height: () => heightInt4 * 10 + "vw",
            width: () => widthInt4 * 10 + "vw",
            x: () => spaceIntX4 * 3 + "%",
            y: () => spaceIntY4 - (heightInt4 * 10) / 1 + "%",
            rx: () => rx4Int * 7 + "vw",
          },
        },
        0
      )
      .to(
        circle5,
        {
          attr: {
            height: () => heightInt5 * 10 + "vw",
            width: () => widthInt5 * 10 + "vw",
            x: () => spaceIntX5 * 5 + "%",
            y: () => spaceIntY5 - (heightInt5 * 10) / 1 + "%",
            rx: () => rx5Int * 7 + "vw",
          },
        },
        0
      )

      .to(
        img,
        {
          scale: 1,
          opacity: 1,
        },
        0
      )
      .set(img, {
        opacity: 0,
      })
      .set(imgFixed, {
        opacity: 1,
      });

    gsap.to(".text span", {
      backgroundPositionX: "0%",
      stagger: 20,
      scrollTrigger: {
        trigger: ".text",
        scrub: 1,
        start: "top center",
        end: "top center",
      },
    });

    window.addEventListener("load", init);
    window.addEventListener("resize", resize);

    function init() {
      imgWidth = img.naturalWidth;
      imgHeight = img.naturalHeight;

      resize();
    }

    function resize() {
      tl.progress(0);

      const r = svg.getBoundingClientRect();
      const rectWidth = r.width + pad;
      const rectHeight = r.height + pad;

      const rx = rectWidth / imgWidth;
      const ry = rectHeight / imgHeight;

      const ratio = Math.max(rx, ry);

      const width = imgWidth * ratio;
      const height = imgHeight * ratio;

      const dx = rectWidth / 2;
      const dy = rectHeight / 2;
      radius = Math.sqrt(dx * dx + dy * dy);

      gsap.set(img, { width, height });
      gsap.set(imgFixed, { width, height });

      tl.invalidate();

      ScrollTrigger.refresh();
    }
    const timeline = gsap.timeline({
      scrollTrigger: {
        trigger: ".autoHide", // What element triggers the scroll
        scrub: true, // Add a small delay of scrolling and animation. `true` is direct
        start: "center center", // Can be top, center, bottom
        end: "center", // Can be top, center, bottom
        pin: true,
      },
    });
    let stagger = 0.8;
  
    timeline
      .from(".autoHide", { autoAlpha: 1, display: "block", stagger: stagger })
      .to(
        ".autoHide",
        { autoAlpha: 0, display: "none", stagger: stagger },
        stagger
      );
  });

});
</script>






<style scoped>
html,
body {
  font-family: "Signika Negative", sans-serif;
  margin: 0;
  padding: 0;
}
.border {
  outline: 0.3vw solid red;
  outline-offset: 0.8vw;
}
section.spacer {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

section.image-unmask {
  height: 100vh;
  overflow: hidden;
}

.inner {
  margin: 50px;
  padding: 50px;
  min-height: 25vh;
  margin-left: 10vw;
  max-width: 80vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
}

#img {
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0.8;
  z-index: -1;
}

#svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

#img-fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: -1;
}
.text span {
  background: linear-gradient(
    to left,
    rgb(135, 133, 133) 50%,
    rgb(37, 37, 37) 50%
  );
  background-size: 200% 100%;
  background-position-x: -100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
</style>