<template>
  <div>
    <!-- Page Header -->
    <PageHeader 
      title="Join"
      subtitle="Become a member of our cooperative community and start building the future of game development together"
      theme="blue"
      size="large"
    />

    <!-- Membership Sign Up Form -->
    <section class="py-20 bg-white dark:bg-gray-900">
      <UContainer class="max-w-4xl">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-4">
            Membership Sign Up
          </h2>
          <p class="text-gray-600 dark:text-gray-300">
            Choose your circle and contribution level to get started
          </p>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl border border-blue-200 dark:border-blue-800">
          <UForm :state="form" class="space-y-8" @submit="handleSubmit">
            <!-- Personal Information -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <UFormField label="Full Name" name="name" required>
                <UInput
                  v-model="form.name"
                  placeholder="Enter your full name"
                  size="xl"
                  class="w-full"
                />
              </UFormField>

              <UFormField label="Email Address" name="email" required>
                <UInput
                  v-model="form.email"
                  type="email"
                  size="xl"
                  class="w-full"
                  placeholder="Enter your email address"
                />
              </UFormField>
            </div>

            <!-- Circle Selection -->
            <div>
              <h3 class="text-lg font-semibold mb-4">Choose Your Circle</h3>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <label
                  v-for="option in circleOptions"
                  :key="option.value"
                  class="flex flex-col p-6 rounded-lg border-2 cursor-pointer transition-all hover:shadow-md"
                  :class="
                    form.circle === option.value
                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                      : 'border-gray-200 dark:border-gray-700 hover:border-blue-300'
                  "
                >
                  <input
                    v-model="form.circle"
                    type="radio"
                    :value="option.value"
                    name="circle"
                    class="mb-3"
                  >
                  <div class="font-medium text-lg mb-2">{{ option.label }}</div>
                  <div class="text-sm text-gray-600 dark:text-gray-400">
                    {{ option.description }}
                  </div>
                </label>
              </div>
            </div>

            <!-- Contribution Selection -->
            <div>
              <h3 class="text-lg font-semibold mb-4">Choose Your Monthly Contribution</h3>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <label
                  v-for="option in contributionOptions"
                  :key="option.value"
                  class="flex flex-col p-6 rounded-lg border-2 cursor-pointer transition-all hover:shadow-md"
                  :class="
                    form.contributionTier === option.value
                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                      : 'border-gray-200 dark:border-gray-700 hover:border-blue-300'
                  "
                >
                  <input
                    v-model="form.contributionTier"
                    type="radio"
                    :value="option.value"
                    name="contributionTier"
                    class="mb-3"
                  >
                  <div class="font-medium text-lg mb-2">{{ option.label }}</div>
                  <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
                    <li v-for="feature in option.features.slice(0, 2)" :key="feature">
                      • {{ feature }}
                    </li>
                  </ul>
                </label>
              </div>
            </div>

            <!-- Submit Button -->
            <div class="flex justify-center pt-6">
              <UButton
                type="submit"
                :loading="isSubmitting"
                :disabled="!isFormValid"
                size="xl"
                class="px-12"
              >
                Continue to Payment
              </UButton>
            </div>
          </UForm>
        </div>
      </UContainer>
    </section>

    <!-- Membership Benefits -->
    <section class="py-20 bg-gray-50 dark:bg-gray-800">
      <UContainer>
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-4">
            Membership Benefits
          </h2>
          <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Join our community and unlock these amazing benefits.
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-lg">
            <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-6">
              <div class="w-6 h-6 bg-blue-500 rounded" />
            </div>
            <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
              Community Access
            </h3>
            <div class="space-y-2 mb-4">
              <div class="h-1 bg-blue-500 rounded-full w-full" />
              <div class="h-1 bg-blue-300 rounded-full w-3/4" />
              <div class="h-1 bg-blue-200 rounded-full w-1/2" />
            </div>
            <p class="text-gray-600 dark:text-gray-400">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Access to forums and resources.
            </p>
          </div>

          <div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-lg">
            <div class="w-12 h-12 bg-emerald-100 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center mb-6">
              <div class="w-6 h-6 bg-emerald-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
            </div>
            <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
              Learning Resources
            </h3>
            <div class="space-y-2 mb-4">
              <div class="h-1 bg-emerald-500 rounded-full w-full" />
              <div class="h-1 bg-emerald-300 rounded-full w-2/3" />
              <div class="h-1 bg-emerald-200 rounded-full w-3/4" />
            </div>
            <p class="text-gray-600 dark:text-gray-400">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Educational content and workshops.
            </p>
          </div>

          <div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-lg md:col-span-2 lg:col-span-1">
            <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-6">
              <div class="w-6 h-6 bg-purple-500 rounded-full" />
            </div>
            <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
              Network & Support
            </h3>
            <div class="space-y-2 mb-4">
              <div class="h-1 bg-purple-500 rounded-full w-5/6" />
              <div class="h-1 bg-purple-300 rounded-full w-full" />
              <div class="h-1 bg-purple-200 rounded-full w-2/3" />
            </div>
            <p class="text-gray-600 dark:text-gray-400">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Connect with like-minded professionals.
            </p>
          </div>
        </div>
      </UContainer>
    </section>

    <!-- How to Join -->
    <section class="py-20 bg-white dark:bg-gray-900">
      <UContainer>
        <div class="text-center mb-16">
          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-4">
            How to Join
          </h2>
          <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Follow these simple steps to become a member.
          </p>
        </div>

        <div class="max-w-4xl mx-auto">
          <div class="space-y-12">
            <div class="flex flex-col md:flex-row items-center gap-8">
              <div class="flex-shrink-0">
                <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-xl">
                  1
                </div>
              </div>
              <div class="flex-1 text-center md:text-left">
                <div class="space-y-3 mb-4">
                  <div class="h-2 bg-blue-500 rounded-full max-w-md mx-auto md:mx-0" />
                  <div class="h-2 bg-blue-300 rounded-full max-w-sm mx-auto md:mx-0" />
                  <div class="h-2 bg-blue-200 rounded-full max-w-xs mx-auto md:mx-0" />
                </div>
                <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">
                  Choose Your Circle
                </h3>
                <p class="text-gray-600 dark:text-gray-400">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Select the circle that matches your interests.
                </p>
              </div>
            </div>

            <div class="flex flex-col md:flex-row items-center gap-8">
              <div class="flex-shrink-0">
                <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-xl">
                  2
                </div>
              </div>
              <div class="flex-1 text-center md:text-left">
                <div class="space-y-3 mb-4">
                  <div class="h-2 bg-blue-500 rounded-full max-w-lg mx-auto md:mx-0" />
                  <div class="h-2 bg-blue-300 rounded-full max-w-md mx-auto md:mx-0" />
                  <div class="h-2 bg-blue-200 rounded-full max-w-sm mx-auto md:mx-0" />
                </div>
                <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">
                  Set Your Contribution
                </h3>
                <p class="text-gray-600 dark:text-gray-400">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Choose a contribution level based on your means.
                </p>
              </div>
            </div>

            <div class="flex flex-col md:flex-row items-center gap-8">
              <div class="flex-shrink-0">
                <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-xl">
                  3
                </div>
              </div>
              <div class="flex-1 text-center md:text-left">
                <div class="space-y-3 mb-4">
                  <div class="h-2 bg-blue-500 rounded-full max-w-sm mx-auto md:mx-0" />
                  <div class="h-2 bg-blue-300 rounded-full max-w-lg mx-auto md:mx-0" />
                  <div class="h-2 bg-blue-200 rounded-full max-w-md mx-auto md:mx-0" />
                </div>
                <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">
                  Complete Registration
                </h3>
                <p class="text-gray-600 dark:text-gray-400">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Finalize your membership and start participating.
                </p>
              </div>
            </div>
          </div>
        </div>
      </UContainer>
    </section>

    <!-- Ready to Join CTA -->
    <section class="py-20 bg-blue-50 dark:bg-blue-900/20">
      <UContainer>
        <div class="text-center max-w-3xl mx-auto">
          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
            Ready to Join?
          </h2>
          
          <div class="flex flex-col md:flex-row items-center justify-center gap-8 mb-8">
            <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg border border-blue-200 dark:border-blue-800 flex-1 max-w-md">
              <div class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-2">
                Start Today
              </div>
              <p class="text-gray-600 dark:text-gray-300 mb-4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </p>
              <div class="space-y-2">
                <div class="h-1 bg-blue-500 rounded-full" />
                <div class="h-1 bg-blue-300 rounded-full w-3/4" />
                <div class="h-1 bg-blue-200 rounded-full w-1/2" />
              </div>
            </div>
            
            <div class="flex flex-col items-center gap-4">
              <UButton 
                to="#membership-form"
                size="xl" 
                color="primary"
                class="px-8 py-4"
              >
                Join Now
              </UButton>
              <div class="h-2 bg-blue-500 rounded-full w-32" />
            </div>
          </div>

          <p class="text-gray-600 dark:text-gray-300">
            Questions? Contact us at <a href="mailto:hello@ghostguild.org" class="text-blue-600 dark:text-blue-400 hover:underline">hello@ghostguild.org</a>
          </p>
        </div>
      </UContainer>
    </section>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { getCircleOptions } from '~/config/circles'
import { getContributionOptions } from '~/config/contributions'

// Form state
const form = reactive({
  email: '',
  name: '',
  circle: 'community',
  contributionTier: '15',
})

// UI state
const isSubmitting = ref(false)

// Circle options from central config
const circleOptions = getCircleOptions()

// Contribution options from central config
const contributionOptions = getContributionOptions()

// Form validation
const isFormValid = computed(() => {
  return form.name && form.email && form.circle && form.contributionTier
})

// Form submission - redirect to detailed form
const handleSubmit = async () => {
  if (isSubmitting.value) return

  // For now, just scroll to the form or redirect to detailed signup
  const formElement = document.getElementById('membership-form')
  if (formElement) {
    formElement.scrollIntoView({ behavior: 'smooth' })
  } else {
    // Could redirect to a detailed form page
    await navigateTo('/join/details')
  }
}
</script>