<script setup lang="js">
import { onMounted, onUnmounted, ref } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import SplitText from "gsap/SplitText";

gsap.registerPlugin(ScrollTrigger, SplitText);

const section = ref(null);

let ctx;
let split;
let animation;
const date = ref("--:--");
const time = ref("");
let interval;

function createTween() {
  animation?.kill();
  split = SplitText.create(".text", {
    type: "words",
  });

  animation = gsap.from(split.words, {
    y: 30,
    opacity: 0,
    duration: 0.9,
    ease: "power2.out",
    stagger: 0.05,

    scrollTrigger: {
      trigger: section.value,
      start: "top 10%",
      toggleActions: "play none none none",
    },
  });
}

onMounted(() => {
  ctx = gsap.context(() => {
    createTween();

    window.addEventListener("resize", handleResize);
  }, section.value);

  requestAnimationFrame(() => {
    ScrollTrigger.refresh();
  });
  getTimeDate();
  interval = setInterval(() => {
    getTimeDate();
  }, 1000);
  console.log(date.value);
});

function handleResize() {
  split && split.revert();
  split = SplitText.create(".text", {
    type: "words",
  });
  ScrollTrigger.refresh();
}

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  ctx?.revert();
  clearInterval(interval);
});

function getTimeDate() {
  const now = new Date();

  time.value = now.toLocaleTimeString("de-DE", {
    timeZone: "Europe/Berlin",
    hour: "2-digit",
    minute: "2-digit",
  });

  date.value = now.toLocaleDateString("de-DE", {
    timeZone: "Europe/Berlin",
    weekday: "long",
    day: "2-digit",
    month: "long",
    year: "numeric",
  });
}
</script>
<template>
  <div class="poster">
    <div class="b-one"></div>
    <div class="b-two"></div>
    <div class="b-three"></div>
    <div class="b-four"></div>
    <div class="b-five"></div>

    <div class="textblock text">
      <h4 class="textblock__subheader text">Tom Alexander Herpel</h4>

      <h1 class="textblock__header text">
        Welcome to my page. <br />
        This space is currently under construction.
      </h1>

      <h4 class="textblock__subheader text">
        Here you’ll find creative projects and ideas that inspire me at the
        moment.
      </h4>

      <p class="textblock__caption">Oldenburg, Germany <br /></p>
    </div>
  </div>
</template>
<style scoped>
.poster {
  display: grid;
  grid-template-columns: repeat(33, 1fr);
  grid-template-rows: repeat(16, 1fr);

  width: 100%;
  height: 100vh;

  background: var(--bg-clr);
  overflow: hidden;
  position: relative;
  padding: 2rem;
}

/* Schwarze Blöcke */
.b-one,
.b-two,
.b-three,
.b-four,
.b-five {
  background: var(--black-clr);
}

.b-one {
  grid-column: 1 / 4;
  grid-row: 11 / 15;
}

.b-two {
  grid-column: 4 / 12;
  grid-row: 6 / 8;
}

.b-three {
  grid-column: 16 / 18;
  grid-row: 8 / 11;
}

.b-four {
  grid-column: 11 / 30;
  grid-row: 15 / 17;
}

.b-five {
  grid-column: 30 / 34;
  grid-row: 1 / 11;
}

/* Textbereich */
.textblock {
  grid-column: 6 / 28;
  grid-row-end: 14;

  align-self: center;
  color: var(--black-clr);
}

.textblock__subheader {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.textblock__header {
  font-size: 4rem;
  line-height: 1;
  font-weight: 700;
  margin-bottom: 2rem;
  max-width: 900px;
}

.textblock__caption {
  font-size: 0.85rem;
  line-height: 1.7;
  max-width: 600px;
}
.text {
  font-family: Courier New;
  font-size: clamp(1.5rem, 3vw, 5rem);
}
</style>
