<template>
  <div>
    <!-- Page Header -->
    <PageHeader 
      title="About"
      subtitle="Learn about Ghost Guild, our mission to support cooperative game development, and the community we're building together."
      theme="blue"
      size="large"
    />

    <!-- About Ghost Guild -->
    <section class="py-20 bg-white dark:bg-gray-900">
      <UContainer>
        <div class="max-w-4xl mx-auto">
          <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
              About Ghost Guild
            </h2>
          </div>

          <div class="space-y-8">
            <!-- Main Description with Progress Bars -->
            <div class="bg-blue-50 dark:bg-blue-900/20 rounded-2xl p-8 border border-blue-200 dark:border-blue-800">
              <div class="space-y-6 mb-8">
                <div class="h-2 bg-blue-500 rounded-full" />
                <div class="h-2 bg-blue-400 rounded-full w-5/6" />
                <div class="h-2 bg-blue-300 rounded-full w-2/3" />
              </div>
              
              <div class="prose prose-lg dark:prose-invert max-w-none">
                <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ghost Guild is a cooperative community dedicated to supporting game developers who want to build sustainable, worker-owned studios. We believe in the power of collaboration and shared ownership to create better working conditions and more innovative games.
                </p>
                
                <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Our community provides resources, mentorship, and financial support to help developers transition from traditional employment to cooperative ownership models. We're building a network of studios that prioritize worker wellbeing and creative freedom.
                </p>
                
                <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Through our various circles and contribution-based membership model, we create an inclusive space where developers at all stages of their cooperative journey can find support and guidance.
                </p>
              </div>
            </div>

            <!-- Mission Statement -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-200 dark:border-gray-700">
                <h3 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-400">Our Mission</h3>
                <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. To democratize game development by empowering developers to create worker-owned studios that prioritize sustainability, creativity, and fair compensation.
                </p>
              </div>
              
              <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-200 dark:border-gray-700">
                <h3 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-400">Our Vision</h3>
                <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. A thriving ecosystem of cooperative game studios that create innovative experiences while providing their worker-owners with meaningful, sustainable careers.
                </p>
              </div>
            </div>
          </div>
        </div>
      </UContainer>
    </section>

    <!-- Who It's For -->
    <section class="py-20 bg-gray-50 dark:bg-gray-800">
      <UContainer>
        <div class="text-center mb-16">
          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
            Who It's For
          </h2>
          <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ghost Guild welcomes developers from all backgrounds and experience levels.
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto">
          <!-- Game Developers -->
          <div class="flex items-start gap-6">
            <div class="flex-shrink-0">
              <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center">
                <div class="w-8 h-8 bg-blue-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
              </div>
            </div>
            <div class="flex-1">
              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
                Game Developers
              </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 leading-relaxed">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Whether you're a solo indie developer, part of a small team, or working at a larger studio, our community provides resources for exploring cooperative models and building sustainable careers in game development.
              </p>
            </div>
          </div>

          <!-- Studio Founders -->
          <div class="flex items-start gap-6">
            <div class="flex-shrink-0">
              <div class="w-16 h-16 bg-emerald-100 dark:bg-emerald-900/30 rounded-2xl flex items-center justify-center">
                <div class="w-8 h-8 bg-emerald-500 rounded" />
              </div>
            </div>
            <div class="flex-1">
              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
                Studio Founders
              </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-5/6" />
                <div class="h-1 bg-emerald-200 rounded-full w-2/3" />
              </div>
              <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entrepreneurs and leaders who want to build studios that prioritize worker ownership, democratic decision-making, and sustainable business practices will find mentorship and practical guidance in our community.
              </p>
            </div>
          </div>

          <!-- Industry Allies -->
          <div class="flex items-start gap-6">
            <div class="flex-shrink-0">
              <div class="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center">
                <div class="w-8 h-8 bg-purple-500 rounded-full" />
              </div>
            </div>
            <div class="flex-1">
              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
                Industry Allies
              </h3>
              <div class="space-y-2 mb-4">
                <div class="h-1 bg-purple-500 rounded-full w-4/5" />
                <div class="h-1 bg-purple-300 rounded-full w-full" />
                <div class="h-1 bg-purple-200 rounded-full w-3/5" />
              </div>
              <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Investors, publishers, service providers, and other industry professionals who want to support cooperative game development and learn about alternative business models.
              </p>
            </div>
          </div>

          <!-- Researchers & Advocates -->
          <div class="flex items-start gap-6">
            <div class="flex-shrink-0">
              <div class="w-16 h-16 bg-yellow-100 dark:bg-yellow-900/30 rounded-2xl flex items-center justify-center">
                <div class="w-8 h-8 bg-yellow-500 rounded-sm" />
              </div>
            </div>
            <div class="flex-1">
              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
                Researchers & Advocates
              </h3>
              <div class="space-y-2 mb-4">
                <div class="h-1 bg-yellow-500 rounded-full w-3/4" />
                <div class="h-1 bg-yellow-300 rounded-full w-full" />
                <div class="h-1 bg-yellow-200 rounded-full w-1/2" />
              </div>
              <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Academics, journalists, and advocates studying cooperative economics, worker ownership, and alternative organizational structures in the creative industries.
              </p>
            </div>
          </div>
        </div>
      </UContainer>
    </section>

    <!-- Our Values -->
    <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-8">
            Our Values
          </h2>
          <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. These core principles guide everything we do at Ghost Guild.
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- Cooperation -->
          <div class="text-center">
            <div class="mb-6">
              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
                Cooperation
              </h3>
              <div class="space-y-2">
                <div class="h-1 bg-blue-500 rounded-full w-full" />
                <div class="h-1 bg-blue-400 rounded-full w-3/4 mx-auto" />
                <div class="h-1 bg-blue-300 rounded-full w-1/2 mx-auto" />
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. We believe in the power of working together, sharing knowledge, and supporting each other's success rather than competing for scarce resources.
            </p>
          </div>

          <!-- Sustainability -->
          <div class="text-center">
            <div class="mb-6">
              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
                Sustainability
              </h3>
              <div class="space-y-2">
                <div class="h-1 bg-emerald-500 rounded-full w-full" />
                <div class="h-1 bg-emerald-400 rounded-full w-5/6 mx-auto" />
                <div class="h-1 bg-emerald-300 rounded-full w-2/3 mx-auto" />
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. We prioritize long-term thinking, environmental responsibility, and creating work cultures that support developer wellbeing and work-life balance.
            </p>
          </div>

          <!-- Democracy -->
          <div class="text-center">
            <div class="mb-6">
              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
                Democracy
              </h3>
              <div class="space-y-2">
                <div class="h-1 bg-purple-500 rounded-full w-full" />
                <div class="h-1 bg-purple-400 rounded-full w-4/5 mx-auto" />
                <div class="h-1 bg-purple-300 rounded-full w-3/5 mx-auto" />
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. We advocate for democratic decision-making processes where all workers have a voice in shaping their workplace and the direction of their studio.
            </p>
          </div>

          <!-- Transparency -->
          <div class="text-center">
            <div class="mb-6">
              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
                Transparency
              </h3>
              <div class="space-y-2">
                <div class="h-1 bg-cyan-500 rounded-full w-full" />
                <div class="h-1 bg-cyan-400 rounded-full w-3/5 mx-auto" />
                <div class="h-1 bg-cyan-300 rounded-full w-4/5 mx-auto" />
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. We promote open communication, shared financial information, and clear decision-making processes that build trust and accountability.
            </p>
          </div>

          <!-- Innovation -->
          <div class="text-center">
            <div class="mb-6">
              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
                Innovation
              </h3>
              <div class="space-y-2">
                <div class="h-1 bg-orange-500 rounded-full w-full" />
                <div class="h-1 bg-orange-400 rounded-full w-2/3 mx-auto" />
                <div class="h-1 bg-orange-300 rounded-full w-5/6 mx-auto" />
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. We encourage creative risk-taking, experimentation with new business models, and innovative approaches to both game development and studio management.
            </p>
          </div>

          <!-- Solidarity -->
          <div class="text-center">
            <div class="mb-6">
              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
                Solidarity
              </h3>
              <div class="space-y-2">
                <div class="h-1 bg-red-500 rounded-full w-full" />
                <div class="h-1 bg-red-400 rounded-full w-4/6 mx-auto" />
                <div class="h-1 bg-red-300 rounded-full w-3/4 mx-auto" />
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. We stand together in mutual support, recognizing that our individual success is connected to the wellbeing of our entire community.
            </p>
          </div>
        </div>

        <!-- Call to Action -->
        <div class="mt-16 text-center">
          <div class="bg-blue-50 dark:bg-blue-900/20 rounded-2xl p-8 border border-blue-200 dark:border-blue-800 max-w-2xl mx-auto">
            <h3 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-400">
              Join Our Community
            </h3>
            <p class="text-gray-600 dark:text-gray-300 mb-6">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ready to be part of the cooperative game development movement?
            </p>
            <UButton 
              to="/join"
              size="lg" 
              color="primary"
              class="px-8"
            >
              Get Started
            </UButton>
          </div>
        </div>
      </UContainer>
    </section>
  </div>
</template>

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