<template>
  <div>
    <!-- Hero Section -->
    <PageHeader 
      title="Discover Ghost Guild"
      subtitle="A community for game developers exploring cooperative models"
      theme="blue"
      size="hero"
      :show-interactive-area="true"
      interactive-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    />

    <!-- Join Us Today -->
    <section class="py-20 bg-white dark:bg-gray-900">
      <UContainer>
        <div class="text-center max-w-3xl mx-auto">
          <h2 class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-12">
            Join Us Today
          </h2>
          
          <div class="space-y-6">
            <div class="h-2 bg-blue-500 rounded-full mx-auto max-w-sm" />
            <div class="h-12 bg-blue-500 rounded-xl mx-auto max-w-xs flex items-center justify-center">
              <UButton to="/join" size="lg" color="primary" class="text-white font-semibold">
                Get Started
              </UButton>
            </div>
          </div>
        </div>
      </UContainer>
    </section>

    <!-- About Our Circles -->
    <section class="py-20 bg-gray-50 dark:bg-gray-800">
      <UContainer>
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-8">
            About Our Circles
          </h2>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <UCard v-for="circle in circles" :key="circle.value" class="h-full">
            <template #header>
              <div class="flex items-center gap-4 mb-4">
                <div v-if="circle.value === 'community'" class="w-8 h-8 bg-blue-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
                <div v-else-if="circle.value === 'founder'" class="w-8 h-8 bg-blue-500 flex items-center justify-center">
                  <div class="w-4 h-1 bg-white" />
                  <div class="w-1 h-4 bg-white absolute" />
                </div>
                <div v-else class="w-8 h-8 bg-blue-500 rounded" />
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">{{ circle.label }}</h3>
              </div>
            </template>
            
            <div class="space-y-4">
              <p class="text-gray-600 dark:text-gray-300">{{ circle.description }}</p>
              
              <div class="space-y-2">
                <div class="h-1 bg-blue-500 rounded-full" />
                <div class="h-1 bg-blue-300 rounded-full" />
                <div class="h-1 bg-blue-200 rounded-full" />
              </div>
              
              <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
                <li v-for="feature in circle.features" :key="feature" class="flex items-start">
                  <span class="mr-2">•</span>
                  <span>{{ feature }}</span>
                </li>
              </ul>
            </div>
          </UCard>
        </div>
      </UContainer>
    </section>

    <!-- Why Join? -->
    <section class="py-20 bg-white dark:bg-gray-900">
      <UContainer>
        <div class="text-center max-w-4xl mx-auto">
          <h2 class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-12">
            Why Join?
          </h2>
          
          <div class="bg-blue-50 dark:bg-blue-900/20 rounded-2xl p-12 border border-blue-200 dark:border-blue-800">
            <div class="max-w-2xl mx-auto">
              <div class="h-2 bg-blue-500 rounded-full mb-8" />
              <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </p>
            </div>
          </div>
        </div>
      </UContainer>
    </section>

  </div>
</template>

<script setup>
import { getCircleOptions } from '~/config/circles'

const circles = getCircleOptions()
</script>