<template>
  <div class="relative">
    <!-- Experimental Hero Section -->
    <section class="mb-24">
      <div class="relative">
        <!-- Large artistic title -->
        <h1
          class="text-6xl md:text-8xl font-bold text-stone-100 ethereal-text leading-tight mb-8"
        >
          Become a Ghostie
        </h1>

        <!-- Floating subtitle -->
        <div class="mb-16">
          <p class="text-stone-100 text-lg max-w-md">
            A community for creatives and game devs<br />
            exploring cooperative models
          </p>
        </div>

        <!-- Decorative elements -->
        <div
          class="absolute top-0 right-0 w-32 h-32 border border-ghost-800 rounded-full opacity-20"
        />
        <div
          class="absolute top-20 -left-8 w-16 h-px bg-whisper-500 opacity-40"
        />
      </div>
    </section>

    <!-- Join Section - Offset Layout -->
    <section class="mb-32 relative">
      <div>
        <NuxtLink
          to="/join"
          class="inline-block px-8 py-3 border border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500 hover:ethereal-text transition-all duration-500"
        >
          Join Us Today →
        </NuxtLink>
      </div>

      <!-- Decorative corner element -->
      <div
        class="absolute -right-4 top-0 w-20 h-20 border-t border-r border-ghost-800 opacity-30"
      />
    </section>

    <!-- Circles - Asymmetrical Grid -->
    <section class="mb-32">
      <div class="space-y-8">
        <div
          v-for="(circle, index) in circles"
          :key="circle.value"
          class="flex gap-8 items-start"
        >
          <!-- Content -->
          <div class="flex-1 max-w-lg">
            <h3 class="text-xl text-stone-100 mb-3">{{ circle.label }}</h3>
            <p class="text-stone-200 text-sm leading-relaxed mb-4">
              {{ circle.description }}
            </p>

            <!-- Features as inline text -->
            <div class="text-sm text-stone-400">
              <span v-for="(feature, i) in circle.features" :key="feature">
                {{ feature
                }}<span v-if="i < circle.features.length - 1"> • </span>
              </span>
            </div>
          </div>

          <!-- Side accent -->
        </div>
      </div>
    </section>

    <!-- Why Join? - Diagonal Layout -->
    <section class="mb-32 relative">
      <div class="transform -rotate-1">
        <h2 class="text-3xl font-light text-stone-200 mb-12">Why Join?</h2>
      </div>

      <div class="ml-12 relative">
        <div
          class="absolute -left-4 top-0 w-32 h-px bg-whisper-500 opacity-30 transform rotate-12"
        />

        <div class="max-w-2xl">
          <p class="text-stone-300 leading-loose text-lg mb-8">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>

          <p class="text-stone-400 leading-relaxed ml-8">
            Sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua.<br />
            Ut enim ad minim veniam, quis nostrud exercitation.
          </p>
        </div>

        <div
          class="absolute -bottom-8 right-0 text-6xl text-stone-800 opacity-20 font-bold"
        >
          ?
        </div>
      </div>
    </section>
  </div>
</template>

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

const circles = getCircleOptions();
</script>
