<template>
 <div id="parent" class="px-5 md:px-0 wrapper flex justify-center py-[20vw] md:py-[10vw]">
    <div
      class=" md:w-[81.04%] flex flex-col md:flex-row justify-between"
    >
      <div class="text-[#383E43] w-full md:w-[58.35%]">
        <h1 class="text-[#A62186] text-[7.277vw] md:text-[2.604vw] font-bold">
          Honors
        </h1>
        <h2 class="text-[5.751vw] md:text-[2.188vw] mt-[5vw] md:mt-[1.5vw]">
          افتخارات شینان
        </h2>
        <p
          class="text-[3.59vw] md:text-[1.186vw] mt-[5vw] md:mt-[0.8vw] w-full md:w-[75%]"
        >
          ما در فروشگاه جوانه سعی بر آن داریم تا سبدی از بهترین محصولات سالم و
          طبیعی و ارگانیک ، رژیمی و بدون گلوتن را فراهم آوریم تا بتوانیم تجربه
          خریدی سالم و اطمینان بخشی را برای شما محیا کنیم.
        </p>

        <div id="textCard"
          class="text-card flex flex-col flex-col-reverse md:flex-row mt-[2.8vw] w-full md:w-[27.396vw]"
        >
          <svg
            class="rotate-90 md:rotate-0 w-[8vw] h-[8vw] md:w-[1.2vw] md:h-[3.188vw] mt-[0.7vw]"
            viewBox="0 0 10 42"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="5" cy="5" r="4.5" fill="#383E43" stroke="#383E43" />
            <circle cx="5" cy="21" r="4.5" stroke="#383E43" />
            <circle cx="5" cy="37" r="4.5" stroke="#383E43" />
          </svg>

          <div>
            <div
              class="bg-red-200 p-[8vw] md:p-[1.5vw] ms-[1vw] rounded-[1.302vw]"
            >
              <p class="text-[4.544vw] md:text-[1.335vw]">آدرس</p>
              <p
                class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] leading-[5vw] md:leading-[1.563vw]"
              >
                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
                استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله
                در ستون و سطرآنچنان که لازم است
              </p>
            </div>
          </div>
        </div>
      </div>

      <div id="cards" class="card h-[97.949vw] md:!h-[35.417vw] w-full md:w-[35.417vw]">
         <img
          class="h-full w-full object-cover rounded-[1.302vw]"
          src="/public/images/honor.jpg"
          alt=""
        /> 
      
      </div>
      
    </div>
  </div> 
  
</template>



<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Scrollbar from "smooth-scrollbar";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);

const main = ref();
let ctx;
const pnl = ref();
onMounted(() => {
  if (window.innerWidth < 768) {
    document.getElementById("parent").classList.remove("wrapper")
    document.getElementById("cards").classList.remove("card")
    document.getElementById("textCard").classList.remove("text-card")
  }
  ctx = gsap.context((self) => {
    const cards = gsap.utils.toArray(".card");
    const texts = gsap.utils.toArray(".text-card");
    gsap.set(cards, { height: 100});
    gsap.set(texts, { xPercent: 0, yPercent: 100, autoAlpha: 1 });
    // gsap.set(cards, { zIndex: (i, target, targets) => targets.length - i });

    const tl = gsap.timeline({
      defaults: {
        duration: 1,
        ease: "power1.inOut",
      },
      scrollTrigger: {
        trigger: ".wrapper",
        start: "top top",
        end: "+=150%",
        pin: ".wrapper",
        scrub: true,

      },
    });
    texts.forEach((text, i) => {
      tl.to(
        text,
        {
          y: -window.innerHeight * 0.001,
          yPercent: 0,
        },
        "<"
      ).to(text, {
        autoAlpha: 0,
        duration: 5,
      });
    });


    const tl2 = gsap.timeline({
      defaults: {
        duration: 1,
        ease: "power1.inOut",
      },
      scrollTrigger: {
        trigger: ".wrapper",
        start: "top top",
        end: "+=150%",
        scrub: true,
      },
    });

    cards.forEach((card, i) => {
      tl2.to(card, {
        height: 0,
        autoAlpha: 0,
        duration: 5,
      });
    });

  });
});
</script>

