<template>
  <div
    ref="main"
    id="flipSection"
    class="-z-[1] relative mt-[100vw] lg:mt-[50vw] flex flex-col items-center justify-center"
  >
    <img
      src="/public/images/assal.png"
      alt="product-name"
      class="z-[10] ax w-[18.205vw] lg:w-[17.292vw] h-[20.521vw]"
    />
    <h1
      class="font-bold text-[4.038vw] lg:text-[2.21vw] text-[#383E43] my-[2.083vw]"
    >
      عسل آقای عسل
    </h1>
    <p
      class="text-[3.59vw] lg:text-[1.823vw] text-[#383E43] font-semibold"
      dir="rtl"
    >
      510,000
      <span class="text-[2.836vw] lg:text-[0.833vw] font-[400]">تومان</span>
    </p>



    <div class="absolute">
      <div
        ref="start"
        class="start relative w-[87.69%] lg:w-[91.82%] flex flex-col items-center justify-center"
      >
        <svg
          class="small absolute"
          width="40.125vw"
          height="40.125vw"
          viewBox="0 0 924 924"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            cx="462"
            cy="462"
            r="461"
            stroke="#878787"
            stroke-width="2"
            stroke-dasharray="8 8"
          />
        </svg>
        <svg
          class="big absolute"
          width="75.365vw"
          height="75.365vw"
          viewBox="0 0 1447 1447"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            cx="723.5"
            cy="723.5"
            r="722.5"
            stroke="#878787"
            stroke-width="2"
            stroke-dasharray="8 8"
          />
        </svg>
      </div>
    </div>
  </div>
</template>



<script setup>
// test
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { Flip } from "gsap/Flip";
gsap.registerPlugin(ScrollTrigger, Flip);
import gsap from "gsap";
const main = ref();
const start = ref();
const end = ref();
let ctx;
onMounted(() => {
  const anim = gsap.fromTo(
    ".ax",
    { autoAlpha: 0, y: 50 },
    { duration: 1, autoAlpha: 1, y: 0 }
  );
  ScrollTrigger.create({
    trigger: ".ax",
    animation: anim,
    repeat: -1,
    scrub: true,
    toggleActions: "play none none none",
  }),
    gsap
      .timeline({
        scrollTrigger: {
          trigger: "#flipSection",
          scrub: true,
          pin: true,
          start: "center center",
          end: "+=800vw",
        },
      })
      .from(".start", {
        scale: 0.1,
      }),
    gsap.to(".small", {
      scrollTrigger: {
        trigger: "#flipSection",
        scrub: 1,
        start: "center center",
        end: "+=800",
      },
      rotation: 500,
      duration: 3,
      ease: "none",
    });
  gsap.to(".big", {
    scrollTrigger: {
      trigger: "#flipSection",
      scrub: 1,
      start: "center center",
      end: "+=800",
    },
    rotation: -500,
    duration: 3,
    ease: "none",
  });
});
</script>

<style scoped>
.start.active {
  visibility: hidden;
}

.start {
  visibility: visible;
}
.start.flipping {
  visibility: visible;
}
.end {
  display: none;
}

.end.active {
  display: flex !important;
}
.start,
.start.flipping {
  visibility: visible;
}
</style>