<script setup lang="ts">
import { ref, watch, onMounted, onBeforeUnmount } from "vue";

import LaurelSpinner from "@/components/design/LaurelSpinner.vue";
import LaurelDivider from "@/components/design/LaurelDivider.vue";
import NychButton from "@/components/design/NychButton.vue";
import { useTypewriter } from "@/composables/useTypewriter";
import { scrollToSection } from "@/composables/scrollToSection";
import type { ComponentProps } from "@/data/portfolio";

const { portfolioData } = defineProps<ComponentProps>();

let { displayed, done } = { displayed: ref(""), done: ref(false) };
const visible = ref(true);

onMounted(() => window.addEventListener("scroll", onScroll, { passive: true }));
onBeforeUnmount(() => window.removeEventListener("scroll", onScroll));

const onScroll = () => {
  visible.value = window.scrollY < window.innerHeight * 0.6;
};

watch(
  () => portfolioData,
  (data) => {
    if (data) {
      const typeWriter = useTypewriter(data.tagline);
      displayed = typeWriter.displayed;
      done = typeWriter.done;
    }
  },
);
</script>

<template>
  <section class="port-hero">
    <div class="port-hero-watermark" aria-hidden="true">
      <LaurelSpinner :size="580" :spinning="false" />
    </div>
    <div class="port-hero-content">
      <div class="port-hero-status">{{ portfolioData?.status }}</div>
      <h1 class="port-hero-name">{{ portfolioData?.name }}</h1>
      <div class="port-hero-rule" />
      <p class="port-hero-role">{{ portfolioData?.role }}</p>
      <p class="port-hero-tagline">
        {{ displayed
        }}<span class="port-hero-cursor" :class="{ 'port-hero-cursor--done': done }">|</span>
      </p>
      <div class="port-hero-actions">
        <NychButton @click="scrollToSection('work')">View Work</NychButton>
        <NychButton severity="secondary" @click="scrollToSection('contact')"
          >Get in Touch</NychButton
        >
      </div>
      <LaurelDivider />
    </div>
    <div class="port-hero-chevron" :class="{ 'port-hero-chevron--visible': visible }">
      <i class="pi pi-chevron-down" style="font-size: 18px; color: var(--text-dim)" />
    </div>
  </section>
</template>

<style scoped>
.port-hero-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  color: var(--primary);
  opacity: 0.12;
}

.port-hero-content {
  position: relative;
  z-index: 1;
  max-width: 660px;
  width: 100%;
}

.port-hero-status {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--primary);
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.port-hero-name {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--text-high);
  line-height: 1.05;
  margin: 0 0 0.8rem;
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  text-shadow: 0 0 80px rgba(212, 178, 120, 0.2);
}

.port-hero-rule {
  height: 1px;
  background: var(--primary);
  max-width: 180px;
  margin: 0 auto 1.4rem;
}

.port-hero-role {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: 0 0 0.9rem;
}

.port-hero-tagline {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-dim);
  max-width: 460px;
  margin: 0 auto 2.8rem;
  line-height: 1.7;
  text-wrap: pretty;
  min-height: 1.7rem;
}

.port-hero-cursor {
  color: var(--primary);
  animation: blink 0.75s step-end infinite;
}

.port-hero-cursor--done {
  opacity: 0;
  animation: none;
}

.port-hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}

.port-hero-chevron {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  opacity: 0;
  animation: bob 2.5s ease-in-out infinite;
  transition: opacity 0.5s ease-in-out;
}

.port-hero-chevron--visible {
  opacity: 0.4 !important;
}
</style>
