<template>
  <div class="profile-mockup">
    <!-- Profile Header -->
    <div 
      v-motion
      :initial="{ opacity: 0, y: -20 }"
      :enter="{ opacity: 1, y: 0 }"
      class="profile-header"
    >
      <div class="profile-header__background">
        <div class="profile-header__gradient"></div>
      </div>
      
      <div class="profile-header__content">
        <div class="profile-header__avatar-section">
          <div class="profile-avatar">
            <img 
              v-if="profile.avatar" 
              :src="profile.avatar" 
              :alt="profile.name" 
            />
            <div v-else class="profile-avatar__placeholder">
              {{ initials }}
            </div>
            <button class="profile-avatar__edit">
              <span>📷</span>
            </button>
          </div>
          
          <div class="profile-status">
            <span class="profile-status__indicator"></span>
            <span class="profile-status__text">Online</span>
          </div>
        </div>
        
        <div class="profile-header__info">
          <h1 class="profile-name">{{ profile.name }}</h1>
          <p class="profile-title">{{ profile.title }} at {{ profile.company }}</p>
          <p class="profile-bio">{{ profile.bio }}</p>
          
          <div class="profile-badges">
            <span class="badge badge--verified">✓ Verified Member</span>
            <span class="badge badge--board">Board Member</span>
            <span class="badge badge--year">Member Since {{ profile.memberSince }}</span>
          </div>
        </div>
        
        <div class="profile-header__actions">
          <MonacoButton variant="primary" icon="edit">
            Edit Profile
          </MonacoButton>
          <MonacoButton variant="glass" icon="share">
            Share
          </MonacoButton>
          <MonacoButton variant="ghost" icon="settings">
            Settings
          </MonacoButton>
        </div>
      </div>
    </div>

    <!-- Stats Overview -->
    <div 
      v-motion
      :initial="{ opacity: 0, y: 20 }"
      :enter="{ opacity: 1, y: 0, transition: { delay: 200 } }"
      class="profile-stats"
    >
      <div class="stat-card" v-for="stat in stats" :key="stat.label">
        <span class="stat-card__value">{{ stat.value }}</span>
        <span class="stat-card__label">{{ stat.label }}</span>
      </div>
    </div>

    <!-- Main Content Grid -->
    <div class="profile-grid">
      <!-- Left Column -->
      <div class="profile-grid__sidebar">
        <!-- Contact Information -->
        <GlassCard 
          title="Contact Information" 
          variant="glass"
          :delay="300"
        >
          <div class="contact-list">
            <div class="contact-item">
              <span class="contact-item__icon">✉</span>
              <div class="contact-item__content">
                <span class="contact-item__label">Email</span>
                <span class="contact-item__value">{{ profile.email }}</span>
              </div>
            </div>
            <div class="contact-item">
              <span class="contact-item__icon">📱</span>
              <div class="contact-item__content">
                <span class="contact-item__label">Phone</span>
                <span class="contact-item__value">{{ profile.phone }}</span>
              </div>
            </div>
            <div class="contact-item">
              <span class="contact-item__icon">🔗</span>
              <div class="contact-item__content">
                <span class="contact-item__label">LinkedIn</span>
                <a class="contact-item__value contact-item__value--link">
                  {{ profile.linkedin }}
                </a>
              </div>
            </div>
            <div class="contact-item">
              <span class="contact-item__icon">📍</span>
              <div class="contact-item__content">
                <span class="contact-item__label">Location</span>
                <span class="contact-item__value">{{ profile.location }}</span>
              </div>
            </div>
          </div>
        </GlassCard>

        <!-- Skills & Expertise -->
        <GlassCard 
          title="Skills & Expertise" 
          variant="glass"
          :delay="400"
        >
          <div class="skills-cloud">
            <span 
              v-for="skill in profile.skills" 
              :key="skill"
              class="skill-tag"
              :class="`skill-tag--${getSkillLevel(skill)}`"
            >
              {{ skill }}
            </span>
          </div>
        </GlassCard>

        <!-- Membership Details -->
        <GlassCard 
          title="Membership" 
          variant="gradient"
          :delay="500"
        >
          <div class="membership-details">
            <div class="membership-item">
              <span class="membership-item__label">Status</span>
              <span class="membership-item__value membership-item__value--active">
                Active
              </span>
            </div>
            <div class="membership-item">
              <span class="membership-item__label">Type</span>
              <span class="membership-item__value">Executive</span>
            </div>
            <div class="membership-item">
              <span class="membership-item__label">Dues</span>
              <span class="membership-item__value membership-item__value--paid">
                Paid through 2025
              </span>
            </div>
            <div class="membership-item">
              <span class="membership-item__label">Next Renewal</span>
              <span class="membership-item__value">January 2025</span>
            </div>
          </div>
          <MonacoButton variant="primary" size="sm" block>
            Manage Membership
          </MonacoButton>
        </GlassCard>
      </div>

      <!-- Main Column -->
      <div class="profile-grid__main">
        <!-- Activity Timeline -->
        <GlassCard 
          title="Recent Activity" 
          variant="glass"
          :delay="350"
        >
          <div class="timeline">
            <div 
              v-for="(activity, index) in activities" 
              :key="index"
              v-motion
              :initial="{ opacity: 0, x: -20 }"
              :enter="{ 
                opacity: 1, 
                x: 0,
                transition: { delay: 600 + (index * 50) }
              }"
              class="timeline-item"
            >
              <div class="timeline-item__marker">
                <span :class="`timeline-icon timeline-icon--${activity.type}`">
                  {{ activity.icon }}
                </span>
              </div>
              <div class="timeline-item__content">
                <h4 class="timeline-item__title">{{ activity.title }}</h4>
                <p class="timeline-item__description">{{ activity.description }}</p>
                <span class="timeline-item__time">{{ activity.time }}</span>
              </div>
            </div>
          </div>
        </GlassCard>

        <!-- Achievements -->
        <GlassCard 
          title="Achievements" 
          variant="glass"
          :delay="450"
        >
          <div class="achievements-grid">
            <div 
              v-for="achievement in achievements" 
              :key="achievement.id"
              class="achievement-card"
            >
              <div class="achievement-card__icon">{{ achievement.icon }}</div>
              <h4 class="achievement-card__title">{{ achievement.title }}</h4>
              <p class="achievement-card__description">{{ achievement.description }}</p>
              <span class="achievement-card__date">{{ achievement.date }}</span>
            </div>
          </div>
        </GlassCard>

        <!-- Events Attended -->
        <GlassCard 
          title="Events Attended" 
          variant="glass"
          :delay="550"
        >
          <div class="events-list">
            <div 
              v-for="event in eventsAttended" 
              :key="event.id"
              class="event-mini"
            >
              <div class="event-mini__date">
                <span class="event-mini__day">{{ event.day }}</span>
                <span class="event-mini__month">{{ event.month }}</span>
              </div>
              <div class="event-mini__info">
                <h4 class="event-mini__title">{{ event.title }}</h4>
                <p class="event-mini__role">{{ event.role }}</p>
              </div>
            </div>
          </div>
          <MonacoButton variant="ghost" size="sm" block>
            View All Events
          </MonacoButton>
        </GlassCard>
      </div>

      <!-- Right Column -->
      <div class="profile-grid__aside">
        <!-- Quick Stats -->
        <GlassCard 
          variant="glass"
          :delay="400"
        >
          <h3 class="card-title">Network Stats</h3>
          <div class="quick-stats">
            <div class="quick-stat">
              <span class="quick-stat__icon">👥</span>
              <span class="quick-stat__value">234</span>
              <span class="quick-stat__label">Connections</span>
            </div>
            <div class="quick-stat">
              <span class="quick-stat__icon">📅</span>
              <span class="quick-stat__value">45</span>
              <span class="quick-stat__label">Events</span>
            </div>
            <div class="quick-stat">
              <span class="quick-stat__icon">🏆</span>
              <span class="quick-stat__value">12</span>
              <span class="quick-stat__label">Awards</span>
            </div>
          </div>
        </GlassCard>

        <!-- Connected Members -->
        <GlassCard 
          title="Connections" 
          variant="glass"
          :delay="500"
        >
          <div class="connections-list">
            <div 
              v-for="connection in connections" 
              :key="connection.id"
              class="connection-item"
            >
              <img 
                v-if="connection.avatar" 
                :src="connection.avatar" 
                :alt="connection.name"
                class="connection-item__avatar"
              />
              <div v-else class="connection-item__avatar-placeholder">
                {{ connection.name.split(' ').map(n => n[0]).join('') }}
              </div>
              <div class="connection-item__info">
                <h5 class="connection-item__name">{{ connection.name }}</h5>
                <p class="connection-item__title">{{ connection.title }}</p>
              </div>
            </div>
          </div>
          <MonacoButton variant="primary" size="sm" block>
            View All Connections
          </MonacoButton>
        </GlassCard>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import GlassCard from '~/components/ui/GlassCard.vue'
import MonacoButton from '~/components/ui/MonacoButton.vue'

const profile = ref({
  name: 'Alexandra Martin',
  title: 'CEO & Founder',
  company: 'Monaco Ventures',
  bio: 'Passionate about fostering Monaco-US business relationships and cultural exchange. Leading innovation in international commerce.',
  avatar: '/api/placeholder/200/200',
  email: 'alexandra@monacoventures.com',
  phone: '+1 (555) 123-4567',
  linkedin: 'linkedin.com/in/alexandra-martin',
  location: 'Monaco & New York',
  memberSince: '2021',
  skills: [
    'Leadership', 'Strategy', 'Investment', 'International Business',
    'Networking', 'Public Speaking', 'Venture Capital', 'M&A'
  ]
})

const initials = computed(() => {
  return profile.value.name.split(' ').map(n => n[0]).join('').toUpperCase()
})

const stats = ref([
  { label: 'Years Active', value: '3' },
  { label: 'Events Hosted', value: '24' },
  { label: 'Connections', value: '234' },
  { label: 'Contributions', value: '156' }
])

const activities = ref([
  {
    type: 'event',
    icon: '📅',
    title: 'Attended Monaco Winter Gala',
    description: 'Networked with 50+ members at the annual gala',
    time: '2 days ago'
  },
  {
    type: 'achievement',
    icon: '🏆',
    title: 'Earned Top Contributor Badge',
    description: 'Recognized for outstanding community engagement',
    time: '1 week ago'
  },
  {
    type: 'connection',
    icon: '🤝',
    title: 'Connected with 5 new members',
    description: 'Expanded network in the Tech sector',
    time: '2 weeks ago'
  },
  {
    type: 'post',
    icon: '📝',
    title: 'Published article on Monaco innovation',
    description: 'Shared insights on emerging markets',
    time: '3 weeks ago'
  }
])

const achievements = ref([
  {
    id: 1,
    icon: '🌟',
    title: 'Founding Member',
    description: 'One of the first 100 members',
    date: 'March 2021'
  },
  {
    id: 2,
    icon: '🎯',
    title: 'Event Champion',
    description: 'Hosted 10+ successful events',
    date: 'June 2023'
  },
  {
    id: 3,
    icon: '💎',
    title: 'Diamond Contributor',
    description: 'Top 1% activity level',
    date: 'December 2023'
  }
])

const eventsAttended = ref([
  { id: 1, day: '15', month: 'DEC', title: 'Winter Gala 2024', role: 'Speaker' },
  { id: 2, day: '01', month: 'NOV', title: 'Business Summit', role: 'Attendee' },
  { id: 3, day: '20', month: 'OCT', title: 'Tech Innovation Day', role: 'Panelist' }
])

const connections = ref([
  { id: 1, name: 'John Doe', title: 'CFO at TechCorp', avatar: '/api/placeholder/40/40' },
  { id: 2, name: 'Sarah Smith', title: 'Director at Monaco Bank', avatar: '' },
  { id: 3, name: 'Marc Blanc', title: 'Partner at Law Firm', avatar: '/api/placeholder/40/40' },
  { id: 4, name: 'Lisa Chen', title: 'VP Marketing', avatar: '/api/placeholder/40/40' }
])

const getSkillLevel = (skill: string) => {
  const expertSkills = ['Leadership', 'Strategy', 'Investment']
  const advancedSkills = ['International Business', 'Networking']
  
  if (expertSkills.includes(skill)) return 'expert'
  if (advancedSkills.includes(skill)) return 'advanced'
  return 'intermediate'
}
</script>

<style scoped lang="scss">
.profile-mockup {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0 2rem;
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
  min-height: 100vh;
}

.profile-header {
  position: relative;
  margin-bottom: 2rem;
  
  &__background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 250px;
    overflow: hidden;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  }
  
  &__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0.3) 100%
    );
  }
  
  &__content {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 2rem;
    padding: 2rem 2rem 2rem;
    z-index: 1;
  }
  
  &__avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  &__info {
    flex: 1;
    padding-top: 4rem;
  }
  
  &__actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 4rem;
  }
}

.profile-avatar {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 20px;
  overflow: hidden;
  background: white;
  padding: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
  }
  
  &__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-radius: 16px;
    font-size: 3rem;
    font-weight: 700;
    color: #dc2626;
  }
  
  &__edit {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }
  }
}

.profile-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: white;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  &__indicator {
    width: 0.5rem;
    height: 0.5rem;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s infinite;
  }
  
  &__text {
    font-size: 0.875rem;
    font-weight: 500;
    color: #10b981;
  }
}

.profile-name {
  margin: 0 0 0.5rem;
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-title {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
}

.profile-bio {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  color: #27272a;
  max-width: 600px;
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  
  &--verified {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
  }
  
  &--board {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
  }
  
  &--year {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
  }
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  padding: 0 2rem;
  margin-bottom: 2rem;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  
  &__value {
    font-size: 2rem;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 0.25rem;
  }
  
  &__label {
    font-size: 0.875rem;
    color: #6b7280;
  }
}

.profile-grid {
  display: grid;
  grid-template-columns: 320px 1fr 280px;
  gap: 1.5rem;
  padding: 0 2rem;
  
  &__sidebar,
  &__main,
  &__aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  
  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 8px;
    font-size: 1rem;
  }
  
  &__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  
  &__label {
    font-size: 0.75rem;
    color: #6b7280;
  }
  
  &__value {
    font-size: 0.875rem;
    color: #27272a;
    word-break: break-all;
    
    &--link {
      color: #dc2626;
      cursor: pointer;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.skills-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill-tag {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
  
  &--expert {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
  }
  
  &--advanced {
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
  }
  
  &--intermediate {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
  }
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.membership-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.membership-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  
  &__label {
    font-size: 0.875rem;
    color: #6b7280;
  }
  
  &__value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #27272a;
    
    &--active {
      color: #10b981;
    }
    
    &--paid {
      color: #10b981;
    }
  }
}

.timeline {
  position: relative;
  padding-left: 2rem;
  
  &::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
      to bottom,
      #dc2626 0%,
      rgba(220, 38, 38, 0.1) 100%
    );
  }
}

.timeline-item {
  position: relative;
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  
  &__marker {
    position: absolute;
    left: -2rem;
  }
  
  &__content {
    flex: 1;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    transition: all 0.2s;
    
    &:hover {
      background: rgba(255, 255, 255, 0.7);
      transform: translateX(4px);
    }
  }
  
  &__title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: #27272a;
  }
  
  &__description {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
  }
  
  &__time {
    font-size: 0.75rem;
    color: #a3a3a3;
  }
}

.timeline-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 0.875rem;
  
  &--event {
    background: rgba(168, 85, 247, 0.1);
  }
  
  &--achievement {
    background: rgba(251, 146, 60, 0.1);
  }
  
  &--connection {
    background: rgba(59, 130, 246, 0.1);
  }
  
  &--post {
    background: rgba(16, 185, 129, 0.1);
  }
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.achievement-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, 
    rgba(220, 38, 38, 0.05) 0%, 
    rgba(220, 38, 38, 0.02) 100%);
  border-radius: 12px;
  text-align: center;
  transition: all 0.2s;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  
  &__icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
  
  &__title {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #27272a;
  }
  
  &__description {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: #6b7280;
  }
  
  &__date {
    font-size: 0.75rem;
    color: #dc2626;
    font-weight: 500;
  }
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.event-mini {
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  transition: all 0.2s;
  
  &:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateX(4px);
  }
  
  &__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    border-radius: 8px;
    flex-shrink: 0;
  }
  
  &__day {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
  }
  
  &__month {
    font-size: 0.625rem;
    text-transform: uppercase;
  }
  
  &__info {
    flex: 1;
  }
  
  &__title {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #27272a;
  }
  
  &__role {
    margin: 0;
    font-size: 0.75rem;
    color: #6b7280;
  }
}

.card-title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #dc2626;
}

.quick-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.quick-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.5rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  
  &__icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
  
  &__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 0.25rem;
  }
  
  &__label {
    font-size: 0.625rem;
    color: #6b7280;
    text-align: center;
  }
}

.connections-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.connection-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s;
  cursor: pointer;
  
  &:hover {
    background: rgba(220, 38, 38, 0.05);
  }
  
  &__avatar,
  &__avatar-placeholder {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    flex-shrink: 0;
  }
  
  &__avatar {
    object-fit: cover;
  }
  
  &__avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    font-size: 0.75rem;
    font-weight: 600;
    color: #dc2626;
  }
  
  &__info {
    flex: 1;
    min-width: 0;
  }
  
  &__name {
    margin: 0 0 0.125rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #27272a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  &__title {
    margin: 0;
    font-size: 0.75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// Animations
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

// Responsive
@media (max-width: 1200px) {
  .profile-grid {
    grid-template-columns: 280px 1fr;
    
    &__aside {
      grid-column: 1 / -1;
      order: 3;
    }
  }
}

@media (max-width: 768px) {
  .profile-header__content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .profile-header__actions {
    width: 100%;
    justify-content: center;
  }
  
  .profile-grid {
    grid-template-columns: 1fr;
  }
  
  .achievements-grid {
    grid-template-columns: 1fr;
  }
}
</style>