<template>
  <div class="member-dashboard">
    <!-- Header with Navigation -->
    <header class="dashboard-header">
      <div class="header-content">
        <div class="header-left">
          <button @click="mobileMenuOpen = !mobileMenuOpen" class="mobile-menu-toggle">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                    d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
          <div class="logo">
            <img src="/MONACOUSA-Flags_376x376.png" alt="MonacoUSA" class="logo-img" />
            <span class="logo-text">Member Portal</span>
          </div>
        </div>
        
        <nav class="header-nav" :class="{ 'header-nav--open': mobileMenuOpen }">
          <a v-for="item in memberNavItems" :key="item.name" 
             :href="item.path" 
             :class="['nav-item', { 'nav-item--active': item.active }]">
            {{ item.name }}
          </a>
        </nav>
        
        <div class="header-right">
          <button class="notification-btn">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                    d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
            </svg>
            <span class="notification-badge">5</span>
          </button>
          
          <div class="profile-menu">
            <button @click="profileMenuOpen = !profileMenuOpen" class="profile-button">
              <img src="https://ui-avatars.com/api/?name=John+Doe&background=DC2626&color=fff" alt="Profile" />
              <span class="profile-name">John Doe</span>
              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            
            <div v-if="profileMenuOpen" class="profile-dropdown">
              <a href="/member/profile" class="dropdown-item">My Profile</a>
              <a href="/member/settings" class="dropdown-item">Settings</a>
              <a href="/member/billing" class="dropdown-item">Billing</a>
              <hr class="dropdown-divider" />
              <a href="/logout" class="dropdown-item">Logout</a>
            </div>
          </div>
        </div>
      </div>
    </header>
    
    <!-- Main Content -->
    <main class="main-content">
      <!-- Welcome Section -->
      <section class="welcome-section">
        <div class="welcome-content">
          <h1 class="welcome-title">Welcome back, John!</h1>
          <p class="welcome-subtitle">Here's what's happening with your MonacoUSA membership</p>
        </div>
        <div class="welcome-actions">
          <ProfessionalButton variant="primary" size="lg">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            Book Event
          </ProfessionalButton>
          <ProfessionalButton variant="outline" size="lg">
            Renew Membership
          </ProfessionalButton>
        </div>
      </section>
      
      <!-- Membership Overview -->
      <section class="membership-overview">
        <NeumorphicCard class="membership-card" elevation="lg">
          <div class="membership-header">
            <div class="membership-badge">
              <svg fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
            </div>
            <div class="membership-info">
              <h2 class="membership-type">Platinum Member</h2>
              <p class="membership-since">Member since January 2022</p>
            </div>
            <div class="membership-status">
              <span class="status-badge status-badge--active">Active</span>
              <span class="expiry-date">Expires Dec 31, 2025</span>
            </div>
          </div>
          
          <div class="membership-benefits">
            <h3 class="benefits-title">Your Benefits</h3>
            <div class="benefits-grid">
              <div class="benefit-item">
                <svg fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
                <span>Unlimited Event Access</span>
              </div>
              <div class="benefit-item">
                <svg fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
                <span>Priority Support</span>
              </div>
              <div class="benefit-item">
                <svg fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
                <span>Exclusive Resources</span>
              </div>
              <div class="benefit-item">
                <svg fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
                <span>Partner Discounts</span>
              </div>
            </div>
          </div>
          
          <div class="membership-progress">
            <div class="progress-header">
              <span class="progress-label">Loyalty Points</span>
              <span class="progress-value">8,450 / 10,000</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill" style="width: 84.5%"></div>
            </div>
            <p class="progress-text">1,550 points to Diamond status</p>
          </div>
        </NeumorphicCard>
      </section>
      
      <!-- Quick Stats -->
      <section class="quick-stats">
        <StatCard
          label="Events Attended"
          value="24"
          trend="20"
          variant="primary"
          description="This year"
        />
        <StatCard
          label="Resources Downloaded"
          value="156"
          trend="15"
          variant="success"
          description="Total downloads"
        />
        <StatCard
          label="Community Posts"
          value="42"
          trend="-5"
          variant="info"
          description="Last 30 days"
        />
        <StatCard
          label="Savings Earned"
          value="3250"
          prefix="$"
          trend="35"
          variant="warning"
          description="Through benefits"
          format="currency"
        />
      </section>
      
      <!-- Main Dashboard Grid -->
      <div class="dashboard-grid">
        <!-- Upcoming Events -->
        <NeumorphicCard class="events-card">
          <template #header>
            <div class="card-header">
              <h2 class="card-title">Upcoming Events</h2>
              <a href="/member/events" class="card-link">View All</a>
            </div>
          </template>
          
          <div class="events-list">
            <div v-for="event in upcomingEvents" :key="event.id" class="event-item">
              <div class="event-date">
                <span class="event-month">{{ event.month }}</span>
                <span class="event-day">{{ event.day }}</span>
              </div>
              <div class="event-details">
                <span class="event-category">{{ event.category }}</span>
                <h3 class="event-title">{{ event.title }}</h3>
                <div class="event-meta">
                  <span class="event-time">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    {{ event.time }}
                  </span>
                  <span class="event-location">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                    {{ event.location }}
                  </span>
                </div>
                <div class="event-actions">
                  <ProfessionalButton size="sm" variant="primary">Register</ProfessionalButton>
                  <ProfessionalButton size="sm" variant="ghost">Details</ProfessionalButton>
                </div>
              </div>
            </div>
          </div>
        </NeumorphicCard>
        
        <!-- Resources & Documents -->
        <NeumorphicCard class="resources-card">
          <template #header>
            <div class="card-header">
              <h2 class="card-title">Latest Resources</h2>
              <a href="/member/resources" class="card-link">Browse All</a>
            </div>
          </template>
          
          <div class="resources-list">
            <div v-for="resource in latestResources" :key="resource.id" class="resource-item">
              <div class="resource-icon" :class="`resource-icon--${resource.type}`">
                <svg v-if="resource.type === 'pdf'" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-5L9 2H4z" clip-rule="evenodd" />
                </svg>
                <svg v-else-if="resource.type === 'video'" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
                </svg>
                <svg v-else fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" />
                </svg>
              </div>
              <div class="resource-info">
                <h4 class="resource-title">{{ resource.title }}</h4>
                <p class="resource-meta">{{ resource.category }} • {{ resource.size }}</p>
              </div>
              <button class="resource-download">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
                </svg>
              </button>
            </div>
          </div>
        </NeumorphicCard>
      </div>
      
      <!-- Community & Announcements -->
      <div class="community-grid">
        <!-- Community Activity -->
        <NeumorphicCard class="community-card">
          <template #header>
            <div class="card-header">
              <h2 class="card-title">Community Activity</h2>
              <a href="/member/community" class="card-link">Join Discussion</a>
            </div>
          </template>
          
          <div class="activity-feed">
            <div v-for="activity in communityActivity" :key="activity.id" class="activity-item">
              <img :src="`https://ui-avatars.com/api/?name=${activity.author}&background=random`" 
                   :alt="activity.author"
                   class="activity-avatar" />
              <div class="activity-content">
                <div class="activity-header">
                  <span class="activity-author">{{ activity.author }}</span>
                  <span class="activity-time">{{ activity.time }}</span>
                </div>
                <p class="activity-text">{{ activity.text }}</p>
                <div class="activity-actions">
                  <button class="activity-action">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                    </svg>
                    {{ activity.likes }}
                  </button>
                  <button class="activity-action">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                    </svg>
                    {{ activity.comments }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </NeumorphicCard>
        
        <!-- Important Announcements -->
        <NeumorphicCard class="announcements-card">
          <template #header>
            <h2 class="card-title">Important Announcements</h2>
          </template>
          
          <div class="announcements-list">
            <div v-for="announcement in announcements" :key="announcement.id" class="announcement-item">
              <div class="announcement-icon" :class="`announcement-icon--${announcement.type}`">
                <svg v-if="announcement.type === 'info'" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                </svg>
                <svg v-else-if="announcement.type === 'warning'" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
                <svg v-else fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
              </div>
              <div class="announcement-content">
                <h4 class="announcement-title">{{ announcement.title }}</h4>
                <p class="announcement-text">{{ announcement.text }}</p>
                <span class="announcement-date">{{ announcement.date }}</span>
              </div>
            </div>
          </div>
        </NeumorphicCard>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import NeumorphicCard from '../../components/core/NeumorphicCard.vue';
import ProfessionalButton from '../../components/core/ProfessionalButton.vue';
import StatCard from '../../components/core/StatCard.vue';

// Disable authentication for mockup
definePageMeta({
  auth: false,
  layout: false
});

// Data
const mobileMenuOpen = ref(false);
const profileMenuOpen = ref(false);

const memberNavItems = [
  { name: 'Dashboard', path: '/member', active: true },
  { name: 'Events', path: '/member/events' },
  { name: 'Resources', path: '/member/resources' },
  { name: 'Community', path: '/member/community' },
  { name: 'Benefits', path: '/member/benefits' },
  { name: 'Support', path: '/member/support' }
];

const upcomingEvents = ref([
  {
    id: 1,
    month: 'JAN',
    day: '20',
    category: 'Networking',
    title: 'Annual Monaco Gala',
    time: '7:00 PM EST',
    location: 'Grand Ballroom, NYC'
  },
  {
    id: 2,
    month: 'FEB',
    day: '05',
    category: 'Workshop',
    title: 'Investment Strategies 2025',
    time: '2:00 PM EST',
    location: 'Virtual Event'
  },
  {
    id: 3,
    month: 'FEB',
    day: '18',
    category: 'Conference',
    title: 'Innovation Summit',
    time: '9:00 AM EST',
    location: 'Monaco Convention Center'
  }
]);

const latestResources = ref([
  {
    id: 1,
    type: 'pdf',
    title: 'Q4 2024 Market Report',
    category: 'Reports',
    size: '2.5 MB'
  },
  {
    id: 2,
    type: 'video',
    title: 'Tax Planning Webinar',
    category: 'Webinars',
    size: '45 min'
  },
  {
    id: 3,
    type: 'pdf',
    title: 'Member Benefits Guide 2025',
    category: 'Guides',
    size: '1.2 MB'
  },
  {
    id: 4,
    type: 'image',
    title: 'Event Photo Gallery',
    category: 'Media',
    size: '15 photos'
  }
]);

const communityActivity = ref([
  {
    id: 1,
    author: 'Sarah Johnson',
    time: '2 hours ago',
    text: 'Just attended the virtual workshop on sustainable investing. Great insights from the speakers!',
    likes: 24,
    comments: 8
  },
  {
    id: 2,
    author: 'Michael Chen',
    time: '5 hours ago',
    text: 'Looking forward to the Monaco Gala next week. Who else is attending?',
    likes: 15,
    comments: 12
  },
  {
    id: 3,
    author: 'Emily Rodriguez',
    time: '1 day ago',
    text: 'The new member portal is fantastic! Love the improved navigation and resources section.',
    likes: 42,
    comments: 6
  }
]);

const announcements = ref([
  {
    id: 1,
    type: 'success',
    title: 'New Partnership Benefits',
    text: 'Exclusive discounts now available with our new luxury travel partner.',
    date: 'Jan 3, 2025'
  },
  {
    id: 2,
    type: 'warning',
    title: 'System Maintenance',
    text: 'Portal will be unavailable for maintenance on Jan 15, 2-4 AM EST.',
    date: 'Jan 2, 2025'
  },
  {
    id: 3,
    type: 'info',
    title: 'Membership Renewal Reminder',
    text: 'Early bird renewal discount available until February 28, 2025.',
    date: 'Dec 30, 2024'
  }
]);
</script>

<style lang="scss" scoped>
@import '../../styles/neumorphic-system.scss';

.member-dashboard {
  min-height: 100vh;
  background: linear-gradient(135deg, $neutral-50 0%, $neutral-100 100%);
}

// Header
.dashboard-header {
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  box-shadow: $shadow-soft-md;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 $space-6;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
  gap: $space-4;
}

.mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  
  svg {
    width: 24px;
    height: 24px;
    color: $neutral-700;
  }
  
  @media (max-width: $breakpoint-md) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: $space-3;
  
  &-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }
  
  &-text {
    font-family: $font-heading;
    font-size: $text-xl;
    font-weight: $font-bold;
    color: $neutral-800;
    
    @media (max-width: $breakpoint-sm) {
      display: none;
    }
  }
}

.header-nav {
  display: flex;
  gap: $space-2;
  
  @media (max-width: $breakpoint-md) {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: white;
    flex-direction: column;
    padding: $space-4;
    box-shadow: $shadow-soft-lg;
    transform: translateY(-100%);
    opacity: 0;
    transition: all $transition-base;
    
    &--open {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

.nav-item {
  padding: $space-2 $space-4;
  color: $neutral-700;
  text-decoration: none;
  font-weight: $font-medium;
  border-radius: $radius-lg;
  transition: all $transition-base;
  
  &:hover {
    background: rgba($primary-500, 0.05);
    color: $primary-600;
  }
  
  &--active {
    background: rgba($primary-500, 0.1);
    color: $primary-600;
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: $space-4;
}

.notification-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: $neutral-100;
  border-radius: $radius-lg;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: $shadow-soft-sm;
  transition: all $transition-base;
  
  svg {
    width: 20px;
    height: 20px;
    color: $neutral-600;
  }
  
  &:hover {
    box-shadow: $shadow-soft-md;
  }
}

.notification-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  background: $primary-500;
  color: white;
  border-radius: $radius-full;
  font-size: $text-xs;
  font-weight: $font-bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-menu {
  position: relative;
}

.profile-button {
  display: flex;
  align-items: center;
  gap: $space-2;
  padding: $space-2 $space-3;
  border: none;
  background: $neutral-100;
  border-radius: $radius-lg;
  box-shadow: $shadow-soft-sm;
  cursor: pointer;
  transition: all $transition-base;
  
  img {
    width: 32px;
    height: 32px;
    border-radius: $radius-full;
  }
  
  .profile-name {
    font-weight: $font-medium;
    color: $neutral-800;
    
    @media (max-width: $breakpoint-sm) {
      display: none;
    }
  }
  
  svg {
    width: 16px;
    height: 16px;
    color: $neutral-600;
  }
  
  &:hover {
    box-shadow: $shadow-soft-md;
  }
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + $space-2);
  right: 0;
  min-width: 200px;
  background: white;
  border-radius: $radius-lg;
  box-shadow: $shadow-soft-lg;
  overflow: hidden;
  
  .dropdown-item {
    display: block;
    padding: $space-3 $space-4;
    color: $neutral-700;
    text-decoration: none;
    transition: background $transition-base;
    
    &:hover {
      background: rgba($primary-500, 0.05);
      color: $primary-600;
    }
  }
  
  .dropdown-divider {
    margin: 0;
    border: none;
    border-top: 1px solid rgba($neutral-300, 0.3);
  }
}

// Main Content
.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: $space-8 $space-6;
}

// Welcome Section
.welcome-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $space-8;
  
  @media (max-width: $breakpoint-md) {
    flex-direction: column;
    align-items: flex-start;
    gap: $space-4;
  }
}

.welcome-content {
  .welcome-title {
    font-family: $font-heading;
    font-size: $text-3xl;
    font-weight: $font-bold;
    color: $neutral-800;
    margin-bottom: $space-2;
  }
  
  .welcome-subtitle {
    font-size: $text-lg;
    color: $neutral-600;
  }
}

.welcome-actions {
  display: flex;
  gap: $space-3;
  
  svg {
    width: 20px;
    height: 20px;
  }
}

// Membership Overview
.membership-overview {
  margin-bottom: $space-8;
}

.membership-card {
  .membership-header {
    display: flex;
    align-items: center;
    gap: $space-4;
    padding-bottom: $space-6;
    border-bottom: 1px solid rgba($neutral-300, 0.3);
    margin-bottom: $space-6;
    
    @media (max-width: $breakpoint-sm) {
      flex-wrap: wrap;
    }
  }
  
  .membership-badge {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, $primary-500, $primary-600);
    border-radius: $radius-xl;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: $shadow-soft-md;
    
    svg {
      width: 32px;
      height: 32px;
      color: white;
    }
  }
  
  .membership-info {
    flex: 1;
    
    .membership-type {
      font-size: $text-xl;
      font-weight: $font-bold;
      color: $neutral-800;
      margin-bottom: $space-1;
    }
    
    .membership-since {
      font-size: $text-sm;
      color: $neutral-600;
    }
  }
  
  .membership-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: $space-2;
    
    .status-badge {
      padding: $space-1 $space-3;
      border-radius: $radius-full;
      font-size: $text-xs;
      font-weight: $font-semibold;
      text-transform: uppercase;
      
      &--active {
        background: rgba($success-500, 0.1);
        color: $success-500;
      }
    }
    
    .expiry-date {
      font-size: $text-sm;
      color: $neutral-600;
    }
  }
  
  .membership-benefits {
    margin-bottom: $space-6;
    
    .benefits-title {
      font-size: $text-lg;
      font-weight: $font-semibold;
      color: $neutral-800;
      margin-bottom: $space-3;
    }
    
    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: $space-3;
    }
    
    .benefit-item {
      display: flex;
      align-items: center;
      gap: $space-2;
      
      svg {
        width: 20px;
        height: 20px;
        color: $success-500;
        flex-shrink: 0;
      }
      
      span {
        font-size: $text-sm;
        color: $neutral-700;
      }
    }
  }
  
  .membership-progress {
    background: rgba($neutral-100, 0.5);
    padding: $space-4;
    border-radius: $radius-lg;
    
    .progress-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: $space-2;
    }
    
    .progress-label {
      font-size: $text-sm;
      font-weight: $font-medium;
      color: $neutral-700;
    }
    
    .progress-value {
      font-size: $text-sm;
      font-weight: $font-bold;
      color: $primary-600;
    }
    
    .progress-bar {
      height: 8px;
      background: rgba($neutral-300, 0.3);
      border-radius: $radius-full;
      overflow: hidden;
      box-shadow: $shadow-inset-sm;
      margin-bottom: $space-2;
    }
    
    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, $primary-500, $primary-600);
      border-radius: $radius-full;
      transition: width $transition-slow;
    }
    
    .progress-text {
      font-size: $text-xs;
      color: $neutral-600;
    }
  }
}

// Quick Stats
.quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: $space-4;
  margin-bottom: $space-8;
}

// Dashboard Grid
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: $space-6;
  margin-bottom: $space-6;
  
  @media (max-width: $breakpoint-lg) {
    grid-template-columns: 1fr;
  }
}

// Community Grid
.community-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: $space-6;
  
  @media (max-width: $breakpoint-lg) {
    grid-template-columns: 1fr;
  }
}

// Card styles
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-family: $font-heading;
  font-size: $text-xl;
  font-weight: $font-semibold;
  color: $neutral-800;
}

.card-link {
  font-size: $text-sm;
  color: $primary-600;
  text-decoration: none;
  font-weight: $font-medium;
  transition: color $transition-base;
  
  &:hover {
    color: $primary-700;
    text-decoration: underline;
  }
}

// Events Card
.events-list {
  display: flex;
  flex-direction: column;
  gap: $space-4;
}

.event-item {
  display: flex;
  gap: $space-3;
  padding: $space-3;
  background: rgba($neutral-100, 0.5);
  border-radius: $radius-lg;
  transition: all $transition-base;
  
  &:hover {
    background: rgba($neutral-100, 0.8);
    box-shadow: $shadow-soft-sm;
  }
  
  .event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, $primary-500, $primary-600);
    border-radius: $radius-lg;
    color: white;
    flex-shrink: 0;
    
    .event-month {
      font-size: $text-xs;
      text-transform: uppercase;
      opacity: 0.9;
    }
    
    .event-day {
      font-size: $text-lg;
      font-weight: $font-bold;
    }
  }
  
  .event-details {
    flex: 1;
    
    .event-category {
      font-size: $text-xs;
      font-weight: $font-semibold;
      text-transform: uppercase;
      color: $primary-600;
      letter-spacing: 0.025em;
    }
    
    .event-title {
      font-size: $text-base;
      font-weight: $font-semibold;
      color: $neutral-800;
      margin: $space-1 0;
    }
    
    .event-meta {
      display: flex;
      gap: $space-3;
      margin-bottom: $space-2;
      
      span {
        display: flex;
        align-items: center;
        gap: $space-1;
        font-size: $text-sm;
        color: $neutral-600;
        
        svg {
          width: 14px;
          height: 14px;
        }
      }
    }
    
    .event-actions {
      display: flex;
      gap: $space-2;
    }
  }
}

// Resources Card
.resources-list {
  display: flex;
  flex-direction: column;
  gap: $space-3;
}

.resource-item {
  display: flex;
  align-items: center;
  gap: $space-3;
  padding: $space-3;
  background: rgba($neutral-100, 0.5);
  border-radius: $radius-lg;
  transition: all $transition-base;
  
  &:hover {
    background: rgba($neutral-100, 0.8);
    box-shadow: $shadow-soft-sm;
  }
  
  .resource-icon {
    width: 40px;
    height: 40px;
    border-radius: $radius-lg;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    
    svg {
      width: 20px;
      height: 20px;
    }
    
    &--pdf {
      background: rgba($error-500, 0.1);
      color: $error-500;
    }
    
    &--video {
      background: rgba($info-500, 0.1);
      color: $info-500;
    }
    
    &--image {
      background: rgba($success-500, 0.1);
      color: $success-500;
    }
  }
  
  .resource-info {
    flex: 1;
    
    .resource-title {
      font-size: $text-sm;
      font-weight: $font-semibold;
      color: $neutral-800;
      margin-bottom: $space-1;
    }
    
    .resource-meta {
      font-size: $text-xs;
      color: $neutral-600;
    }
  }
  
  .resource-download {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: $neutral-500;
    transition: color $transition-base;
    
    svg {
      width: 20px;
      height: 20px;
    }
    
    &:hover {
      color: $primary-600;
    }
  }
}

// Community Activity
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: $space-4;
}

.activity-item {
  display: flex;
  gap: $space-3;
  
  .activity-avatar {
    width: 40px;
    height: 40px;
    border-radius: $radius-full;
    flex-shrink: 0;
  }
  
  .activity-content {
    flex: 1;
    
    .activity-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: $space-1;
      
      .activity-author {
        font-size: $text-sm;
        font-weight: $font-semibold;
        color: $neutral-800;
      }
      
      .activity-time {
        font-size: $text-xs;
        color: $neutral-500;
      }
    }
    
    .activity-text {
      font-size: $text-sm;
      color: $neutral-700;
      line-height: $leading-relaxed;
      margin-bottom: $space-2;
    }
    
    .activity-actions {
      display: flex;
      gap: $space-3;
      
      .activity-action {
        display: flex;
        align-items: center;
        gap: $space-1;
        padding: $space-1 $space-2;
        border: none;
        background: transparent;
        font-size: $text-sm;
        color: $neutral-600;
        cursor: pointer;
        transition: color $transition-base;
        
        svg {
          width: 16px;
          height: 16px;
        }
        
        &:hover {
          color: $primary-600;
        }
      }
    }
  }
}

// Announcements
.announcements-list {
  display: flex;
  flex-direction: column;
  gap: $space-3;
}

.announcement-item {
  display: flex;
  gap: $space-3;
  padding: $space-3;
  background: rgba($neutral-100, 0.5);
  border-radius: $radius-lg;
  
  .announcement-icon {
    width: 32px;
    height: 32px;
    border-radius: $radius-lg;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    
    svg {
      width: 16px;
      height: 16px;
    }
    
    &--info {
      background: rgba($info-500, 0.1);
      color: $info-500;
    }
    
    &--warning {
      background: rgba($warning-500, 0.1);
      color: $warning-500;
    }
    
    &--success {
      background: rgba($success-500, 0.1);
      color: $success-500;
    }
  }
  
  .announcement-content {
    flex: 1;
    
    .announcement-title {
      font-size: $text-sm;
      font-weight: $font-semibold;
      color: $neutral-800;
      margin-bottom: $space-1;
    }
    
    .announcement-text {
      font-size: $text-sm;
      color: $neutral-600;
      line-height: $leading-normal;
      margin-bottom: $space-1;
    }
    
    .announcement-date {
      font-size: $text-xs;
      color: $neutral-500;
    }
  }
}

// Dark mode support
@include dark-mode {
  .member-dashboard {
    background: linear-gradient(135deg, $neutral-900 0%, $neutral-800 100%);
  }
  
  // Update other dark mode styles as needed
}
</style>