<script setup lang="ts">
import ImageSlot from "@/components/design/ImageSlot.vue";
import type { ComponentProps } from "@/data/portfolio";

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

<template>
  <section id="about" class="port-section" style="scroll-margin-top: 68px">
    <div class="port-2col reveal">
      <div class="port-about-text">
        <h2 class="port-title">About</h2>
        <p class="port-about-bio">{{ portfolioData?.about }}</p>
        <div class="port-about-stats">
          <div v-for="stat in portfolioData?.stats" :key="stat.label">
            <div class="port-about-stat-value" :style="{ color: stat.color }">{{ stat.value }}</div>
            <div class="port-about-stat-label">{{ stat.label }}</div>
          </div>
        </div>
      </div>
      <div class="port-about-photo">
        <ImageSlot
          :src="portfolioData?.photo"
          alt="Profile photo"
          shape="rounded"
          style="width: 260px; height: 320px; filter: grayscale(100%) sepia(50%)"
        />
      </div>
    </div>
  </section>
</template>

<style scoped>
.port-about-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.port-about-bio {
  font-family: var(--font-sans);
  line-height: 1.75;
  color: var(--text-body);
  margin: 0;
  text-wrap: pretty;
}

.port-about-stats {
  display: flex;
  gap: 28px;
  padding-top: 6px;
}

.port-about-stat-value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 500;
}

.port-about-stat-label {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-top: 3px;
}

.port-about-photo {
  display: flex;
  justify-content: center;
}
</style>
