<script setup>
defineProps({
  founder: {
    type: Object,
    required: true,
  },
})

function initials(name) {
  return name.split(' ').map(p => p[0]).slice(0, 2).join('').toUpperCase()
}
</script>

<template>
  <article class="founder">
    <div class="founder__avatar" :aria-hidden="!!founder.photo_url">
      <img v-if="founder.photo_url" :src="founder.photo_url" :alt="founder.name" />
      <span v-else>{{ initials(founder.name) }}</span>
    </div>
    <h3 class="founder__name">{{ founder.name }}</h3>
    <p class="founder__role">{{ founder.role }}</p>
    <p class="founder__domain mono">{{ founder.domain }}</p>
    <p class="founder__bio">{{ founder.bio }}</p>
    <a v-if="founder.linkedin_url" :href="founder.linkedin_url" target="_blank" rel="noopener" class="btn--link">
      LinkedIn ↗
    </a>
  </article>
</template>

<style scoped>
.founder {
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition), transform var(--transition);
}
.founder:hover {
  border-color: rgba(0, 229, 255, 0.35);
  transform: translateY(-3px);
}
.founder__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent-soft), rgba(11, 20, 55, 0.6));
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  overflow: hidden;
}
.founder__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.founder__name { margin: 0; font-size: 1.25rem; }
.founder__role { color: var(--color-accent); font-size: 0.9rem; margin: 0; font-weight: 500; }
.founder__domain {
  color: var(--color-text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin: 0;
}
.founder__bio { color: var(--color-text-muted); margin: 0; }
</style>
