<!-- pages/index.vue -->
<template>
  <div>
    <UContainer>
      <div class="py-24 text-center">
        <h1 class="text-4xl font-bold mb-4">
          Pay what you can, take what you need, build what we dream
        </h1>
        <p class="text-xl text-gray-600 dark:text-gray-400 mb-8">
          Ghost Guild: A solidarity-based community for game developers
          exploring cooperative models
        </p>
        <UButton to="/join" size="lg" color="primary">
          Join Ghost Guild
        </UButton>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
        <UCard v-for="circle in circles" :key="circle.id">
          <template #header>
            <h3>{{ circle.name }}</h3>
          </template>
          {{ circle.description }}
        </UCard>
      </div>
    </UContainer>
  </div>
</template>

<script setup>
const circles = [
  {
    id: 1,
    name: 'Community Circle',
    description: 'Join our community for $15/month. Perfect for indie developers and students looking to connect with like-minded creators.'
  },
  {
    id: 2,
    name: 'Support Circle',
    description: 'Support the community at $25/month. Get access to additional resources and help sustain solidarity memberships.'
  },
  {
    id: 3,
    name: 'Sustaining Circle',
    description: 'Champion our mission at $50/month. Your contribution helps us provide more solidarity spots and expand our programs.'
  }
];
</script>
