<template>
  <div>
    <!-- Page Header -->
    <PageHeader
      title="About Our Membership Circles"
      subtitle="All members of Ghost Guild share the Baby Ghosts mission: Advancing cooperative and worker-centric labour models in the Canadian interactive digital arts sector."
      theme="blue"
      size="large"
    />

    <!-- How Ghost Guild Works -->
    <section class="py-20 bg-[--ui-bg]">
      <UContainer>
        <div class="max-w-4xl mx-auto">
          <h2 class="text-3xl font-bold text-[--ui-text] mb-6">
            How Ghost Guild Works
          </h2>

          <div class="prose prose-lg dark:prose-invert max-w-none">
            <p class="text-xl font-semibold text-[--ui-text] mb-6">
              Everyone gets everything. Your circle reflects where you are in
              your cooperative journey. Your financial contribution reflects
              what you can afford. These are completely separate choices.
            </p>

            <ul
              class="text-lg leading-relaxed text-[--ui-text-muted] space-y-3 mb-12"
            >
              <li>
                <strong>Equal access:</strong> The entire knowledge commons, all
                events, and full community participation
              </li>
              <li>
                <strong>Equal voice:</strong> One member, one vote in all
                decisions
              </li>
              <li>
                <strong>Solidarity economics:</strong> Pay what you can
                ($0-50+/month), take what you need
              </li>
              <li>
                <strong>Value Flow integration:</strong> Contribute your skills,
                time, and knowledge - not just money
              </li>
            </ul>
          </div>
        </div>
      </UContainer>
    </section>

    <!-- Find Your Circle -->
    <section class="py-20 bg-[--ui-bg-elevated]">
      <UContainer>
        <div class="max-w-4xl mx-auto">
          <h2 class="text-3xl font-bold text-[--ui-text] mb-4">
            Find Your Circle
          </h2>
          <p class="text-lg text-[--ui-text-muted] mb-12">
            Circles help us provide relevant guidance and connect you with
            others at similar stages. Choose based on where you are, not what
            you want to access.
          </p>

          <div class="space-y-12">
            <!-- Community Circle -->
            <div class="bg-[--ui-bg] rounded-xl p-8">
              <h3 class="text-2xl font-bold text-[--ui-text] mb-2">
                Community Circle
              </h3>
              <p class="text-lg text-[--ui-text-muted] mb-6">
                You're exploring what cooperatives could mean for your work
              </p>

              <div class="mb-6">
                <h4 class="text-lg font-semibold text-[--ui-text] mb-3">
                  Where you might be:
                </h4>
                <ul class="text-[--ui-text-muted] space-y-2">
                  <li>
                    Curious about alternatives to traditional studio structures
                  </li>
                  <li>Researching cooperative principles</li>
                  <li>Considering if a co-op is right for you</li>
                  <li>Supporting the movement as an ally</li>
                </ul>
              </div>

              <div class="mb-6">
                <h4 class="text-lg font-semibold text-[--ui-text] mb-3">
                  We'll help you navigate:
                </h4>
                <ul class="text-[--ui-text-muted] space-y-2">
                  <li>Understanding cooperative basics</li>
                  <li>Connecting with others asking similar questions</li>
                  <li>Exploring real examples from game studios</li>
                  <li>Deciding your next steps</li>
                </ul>
              </div>

              <div>
                <h4 class="text-lg font-semibold text-[--ui-text] mb-3">
                  You might be:
                </h4>
                <ul class="text-[--ui-text-muted] space-y-2">
                  <li>Individual game workers</li>
                  <li>Researchers and students</li>
                  <li>Industry allies and supporters</li>
                  <li>Anyone co-op-curious</li>
                </ul>
              </div>
            </div>

            <!-- Founder Circle -->
            <div class="bg-[--ui-bg] rounded-xl p-8">
              <h3 class="text-2xl font-bold text-[--ui-text] mb-2">
                Founder Circle
              </h3>
              <p class="text-lg text-[--ui-text-muted] mb-6">
                You're actively building or transitioning to a cooperative model
              </p>

              <div class="mb-6">
                <h4
                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
                >
                  Where you might be:
                </h4>
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                  <li>Forming a new cooperative studio</li>
                  <li>Converting an existing studio to a co-op</li>
                  <li>Preparing to apply for the Peer Accelerator</li>
                  <li>Working through governance and structure decisions</li>
                </ul>
              </div>

              <div class="mb-6">
                <h4
                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
                >
                  We'll help you navigate:
                </h4>
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                  <li>Practical implementation challenges</li>
                  <li>Governance document creation</li>
                  <li>Financial planning for co-ops</li>
                  <li>Peer connections with other founders</li>
                  <li>Balancing ideals with sustainability</li>
                </ul>
              </div>

              <div class="mb-6">
                <h4
                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
                >
                  Two paths available:
                </h4>
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                  <li>
                    <strong>Peer Accelerator Prep Track:</strong> Structured
                    preparation for the PA program
                  </li>
                  <li>
                    <strong>Indie Track:</strong> Self-paced development for
                    alternative pathways
                  </li>
                </ul>
              </div>

              <div>
                <h4
                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
                >
                  You might be:
                </h4>
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                  <li>Founding teams</li>
                  <li>Studios in transition</li>
                  <li>PA program applicants</li>
                  <li>Solo founders exploring structures</li>
                </ul>
              </div>
            </div>

            <!-- Practitioner Circle -->
            <div class="bg-[--ui-bg] rounded-xl p-8">
              <h3 class="text-2xl font-bold text-[--ui-text] mb-2">
                Practitioner Circle
              </h3>
              <p class="text-lg text-[--ui-text-muted] mb-6">
                You're operating a cooperative and contributing to the field
              </p>

              <div class="mb-6">
                <h4
                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
                >
                  Where you might be:
                </h4>
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                  <li>Running an established cooperative studio</li>
                  <li>Graduated from the Peer Accelerator</li>
                  <li>Mentoring other cooperatives</li>
                  <li>Advancing cooperative practices in games</li>
                </ul>
              </div>

              <div class="mb-6">
                <h4
                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
                >
                  We'll help you navigate:
                </h4>
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                  <li>Advanced operational challenges</li>
                  <li>Opportunities to mentor and teach</li>
                  <li>Contributing to best practices</li>
                  <li>Cross-pollination with other co-ops</li>
                  <li>Research and publication opportunities</li>
                  <li>Co-op to co-op collaboration</li>
                </ul>
              </div>

              <div>
                <h4
                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
                >
                  You might be:
                </h4>
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                  <li>Peer Accelerator alumni</li>
                  <li>Established co-op members</li>
                  <li>Industry mentors</li>
                  <li>Cooperative researchers</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </UContainer>
    </section>

    <!-- Important Notes -->
    <section class="py-20 bg-[--ui-bg]">
      <UContainer>
        <div class="max-w-4xl mx-auto">
          <h2 class="text-3xl font-bold text-[--ui-text] mb-8">
            Important Notes
          </h2>

          <div class="space-y-6 text-lg text-[--ui-text-muted]">
            <p>
              <strong>Movement between circles is fluid.</strong> As you move
              along in your journey, you can shift circles anytime. Just let us
              know.
            </p>

            <p>
              <strong>Your contribution is separate from your circle.</strong>
              Whether you contribute $0 or $50+/month, you get full access to
              everything. Choose based on your financial capacity, not your
              circle.
            </p>

            <p>
              <strong>Not sure which circle?</strong> Start with Community - you
              can always move. Or email us and we'll chat about what makes sense
              for you.
            </p>
          </div>
        </div>
      </UContainer>
    </section>
  </div>
</template>

<script setup>
// No specific logic needed for the about page at this time
</script>
