<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."
      size="large"
    />

    <!-- How Ghost Guild Works -->
    <section class="py-20 bg-[--ui-bg]">
      <UContainer>
        <div class="max-w-4xl mx-auto">
          <h2 class="text-display font-bold text-[--ui-text] mb-6">
            How membership 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="list-disc pl-6 text-lg leading-relaxed text-[--ui-text-muted] space-y-3 mb-12"
            >
              <li>
                The entire knowledge commons, all events, and full community
                participation on our private Slack
              </li>
              <li>One member, one vote in all decisions</li>
              <li>Pay what you can ($0-50+/month)</li>
              <li>Contribute your skills, time, and knowledge</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-display 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 now!
          </p>

          <div class="space-y-12">
            <!-- Community Circle -->
            <div class="circle-surface-community rounded-xl p-6">
              <h3 class="text-display-sm font-bold text-[--ui-text] mb-2">
                Community Circle
              </h3>

              <div
                class="prose prose-lg dark:prose-invert max-w-none text-[--ui-text-muted]"
              >
                <p>
                  Maybe you've heard rumours about cooperatives in game dev and
                  you're curious. Or you're frustrated with traditional studio
                  hierarchies and wondering if there's another way. This circle
                  is for anyone exploring whether cooperative principles might
                  fit their work.
                </p>

                <p>
                  This space is for you if you're: an individual game worker
                  dreaming of different possibilities • a researcher digging
                  into the rise of alternative studio models • an industry ally
                  who wants to support cooperative work • <em>anyone</em> who's
                  co-op-curious!
                </p>

                <p>
                  Our resources and community space will help you understand
                  cooperative basics, connect with others asking the same
                  questions, and give you a look at real examples from game
                  studios. You don't need to have a studio or project of your
                  own - just join and see what strikes your fancy!
                </p>
              </div>
            </div>

            <!-- Founder Circle -->
            <div class="circle-surface-founder rounded-xl p-6">
              <h3 class="text-display-sm font-bold text-[--ui-text] mb-2">
                Founder Circle
              </h3>

              <div
                class="prose prose-lg dark:prose-invert max-w-none text-[--ui-text-muted]"
              >
                <p>
                  You're way past wondering about "what if" and into "how do we
                  actually do this?" Perhaps you're forming a new cooperative
                  studio from scratch, or converting an existing team to a co-op
                  structure, or working through the messy reality of turning
                  values into sustainable practice.
                </p>

                <p>
                  This is the space for the practical stuff: governance
                  documents you can read and adapt, financial models for
                  cooperative studios, connections with other founders
                  navigating similar challenges.
                </p>

                <p>
                  We have two paths through this circle that we will be
                  launching soon:
                </p>

                <ul>
                  <li>
                    Peer Accelerator Prep Track <em>(coming soon)</em> –
                    Structured preparation if you're planning to apply for the
                    PA program
                  </li>
                  <li>
                    Indie Track <em>(coming soon)</em> – Flexible, self-paced
                    support for teams building at their own pace
                  </li>
                </ul>

                <p>
                  Join us to figure out how you can balance your values with
                  keeping the lights on - whether you're a full founding team, a
                  solo founder exploring structures, or an existing studio in
                  transition.
                </p>
              </div>
            </div>

            <!-- Practitioner Circle -->
            <div class="circle-surface-practitioner rounded-xl p-6">
              <h3 class="text-display-sm font-bold text-[--ui-text] mb-2">
                Practitioner Circle
              </h3>

              <div
                class="prose prose-lg dark:prose-invert max-w-none text-[--ui-text-muted]"
              >
                <p>
                  You've done it. You're actually running a
                  cooperative/worker-centric studio or you've been through our
                  Peer Accelerator. Now you're figuring out how to sustain it,
                  improve it, and maybe help others learn from what
                  <em>you've</em> learned.
                </p>

                <p>
                  This circle is for: Peer Accelerator alumni • members of
                  established co-ops • mentors who want to support other
                  cooperatives • researchers studying cooperative models in
                  practice
                </p>

                <p>
                  Here, we create space for practitioners to share what's
                  actually working (and what isn't), support emerging
                  cooperatives, collaborate across studios, and contribute to
                  building a knowledge commons.
                </p>
              </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-display 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 circles page at this time
</script>
