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

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

const socialLinks = computed(() => [
  { icon: "github", label: "GitHub", href: portfolioData?.social.github },
  { icon: "linkedin", label: "LinkedIn", href: portfolioData?.social.linkedin },
  {
    icon: "envelope",
    label: portfolioData?.social.email,
    href: `mailto:${portfolioData?.social.email}`,
  },
]);
</script>

<template>
  <section id="contact" class="port-section" style="scroll-margin-top: 68px">
    <LaurelDivider style="margin-bottom: 3.5rem" />
    <div style="gap: 64px">
      <h2 class="port-title" style="margin-bottom: 0">Get in Touch</h2>
      <div class="port-contact-aside">
        <p class="port-contact-blurb">Find me on the platforms below or send a dispatch by post.</p>
        <div class="port-contact-links">
          <a
            v-for="link in socialLinks"
            :key="link.icon"
            :href="link.href"
            class="port-contact-link"
          >
            <i :class="`pi pi-${link.icon}`" class="port-contact-link-icon" />
            <span>{{ link.label }}</span>
          </a>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.port-contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.port-contact-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.port-contact-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.port-contact-blurb {
  font-family: var(--font-sans);
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0;
  text-wrap: pretty;
}

.port-contact-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.port-contact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-body);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.93rem;
  padding: 12px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease;
}

.port-contact-link:hover {
  border-color: var(--primary);
}

.port-contact-link-icon {
  color: var(--primary);
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
</style>
