<template>
  <div>
    <PageHeader
      title="Welcome to Ghost Guild"
      subtitle="You're officially part of the community!"
      size="large"
    />

    <section class="py-16 bg-guild-900">
      <UContainer>
        <div class="max-w-4xl mx-auto">
          <!-- Welcome Message -->
          <div class="text-center mb-16">
            <div class="w-24 h-24 mx-auto mb-6">
              <img
                v-if="memberData?.avatar"
                :src="`/ghosties/Ghost-${memberData.avatar.charAt(0).toUpperCase() + memberData.avatar.slice(1)}.png`"
                :alt="memberData.name"
                class="w-full h-full object-contain"
              />
              <img
                v-else
                src="/ghosties/Ghost-Sweet.png"
                alt="Ghost Guild"
                class="w-full h-full object-contain"
              />
            </div>
            <h2 class="text-display font-bold text-guild-100 mb-4">
              Hey {{ memberData?.name || "there" }}!
            </h2>
            <p class="text-lg text-guild-300 max-w-2xl mx-auto">
              You've joined a an awesome community!!👻 Welcome to Ghost guild…
            </p>
          </div>

          <!-- Getting Started Steps -->
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
            <div class="p-6 bg-guild-800/50 rounded-xl border border-guild-700">
              <div
                class="w-12 h-12 bg-candlelight-500/20 rounded-lg flex items-center justify-center mb-4"
              >
                <Icon
                  name="heroicons:user-circle"
                  class="w-6 h-6 text-candlelight-400"
                />
              </div>
              <h3 class="font-semibold text-guild-100 mb-2">
                <span class="text-ui-label text-candlelight-400 mr-2">1.</span>Complete Your Profile
              </h3>
              <p class="text-sm text-guild-400 mb-4">
                Tell the community about yourself, your skills, and what you're
                looking for.
              </p>
              <UButton to="/member/profile" variant="outline" size="sm">
                Edit Profile
              </UButton>
            </div>

            <div class="p-6 bg-guild-800/50 rounded-xl border border-guild-700">
              <div
                class="w-12 h-12 bg-candlelight-500/20 rounded-lg flex items-center justify-center mb-4"
              >
                <Icon
                  name="heroicons:calendar-days"
                  class="w-6 h-6 text-candlelight-400"
                />
              </div>
              <h3 class="font-semibold text-guild-100 mb-2">
                <span class="text-ui-label text-candlelight-400 mr-2">2.</span>Join an Event
              </h3>
              <p class="text-sm text-guild-400 mb-4">
                From workshops to game nights, events are the heart of our
                community.
              </p>
              <UButton to="/events" variant="outline" size="sm">
                Browse Events
              </UButton>
            </div>

            <div class="p-6 bg-guild-800/50 rounded-xl border border-guild-700">
              <div
                class="w-12 h-12 bg-candlelight-500/20 rounded-lg flex items-center justify-center mb-4"
              >
                <Icon name="heroicons:users" class="w-6 h-6 text-candlelight-400" />
              </div>
              <h3 class="font-semibold text-guild-100 mb-2">
                <span class="text-ui-label text-candlelight-400 mr-2">3.</span>Meet the Community
              </h3>
              <p class="text-sm text-guild-400 mb-4">
                Connect with other members and find peers for support and
                collaboration.
              </p>
              <UButton to="/members" variant="outline" size="sm">
                View Members
              </UButton>
            </div>
          </div>

          <!-- About Circles -->
          <div
            class="p-8 bg-guild-800/30 rounded-2xl border border-guild-700 mb-16"
          >
            <h3 class="text-display-sm font-bold text-guild-100 mb-4">
              Understanding Circles
            </h3>
            <p class="text-guild-300 mb-6">
              Ghost Guild is organized into three circles based on where you are
              in your journey. Your circle helps us tailor events and resources
              to your needs.
            </p>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div
                class="p-4 rounded-lg"
                :class="
                  memberData?.circle === 'community'
                    ? 'circle-surface-community border border-[var(--color-circle-community)]/50'
                    : 'bg-guild-800/50'
                "
              >
                <h4 class="font-semibold text-guild-100 mb-2">
                  Community Circle
                  <span
                    v-if="memberData?.circle === 'community'"
                    class="text-candlelight-400 text-sm ml-2"
                    >← You're here</span
                  >
                </h4>
                <p class="text-sm text-guild-400">
                  For those exploring solidarity economics and alternative
                  studio models.
                </p>
              </div>

              <div
                class="p-4 rounded-lg"
                :class="
                  memberData?.circle === 'founder'
                    ? 'circle-surface-founder border border-[var(--color-circle-founder)]/50'
                    : 'bg-guild-800/50'
                "
              >
                <h4 class="font-semibold text-guild-100 mb-2">
                  Founder Circle
                  <span
                    v-if="memberData?.circle === 'founder'"
                    class="text-candlelight-400 text-sm ml-2"
                    >← You're here</span
                  >
                </h4>
                <p class="text-sm text-guild-400">
                  For those actively building or running a cooperative or
                  solidarity-based studio.
                </p>
              </div>

              <div
                class="p-4 rounded-lg"
                :class="
                  memberData?.circle === 'practitioner'
                    ? 'circle-surface-practitioner border border-[var(--color-circle-practitioner)]/50'
                    : 'bg-guild-800/50'
                "
              >
                <h4 class="font-semibold text-guild-100 mb-2">
                  Practitioner Circle
                  <span
                    v-if="memberData?.circle === 'practitioner'"
                    class="text-candlelight-400 text-sm ml-2"
                    >← You're here</span
                  >
                </h4>
                <p class="text-sm text-guild-400">
                  For consultants, advisors, and professionals supporting
                  cooperative game studios.
                </p>
              </div>
            </div>
          </div>

          <!-- Resources -->
          <div
            class="p-8 bg-guild-800/30 rounded-2xl border border-guild-700 mb-16"
          >
            <h3 class="text-display-sm font-bold text-guild-100 mb-4">
              Resources & Support
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div class="flex items-start gap-4">
                <div
                  class="w-10 h-10 bg-candlelight-500/20 rounded-lg flex items-center justify-center flex-shrink-0"
                >
                  <Icon
                    name="heroicons:book-open"
                    class="w-5 h-5 text-candlelight-400"
                  />
                </div>
                <div>
                  <h4 class="font-semibold text-guild-100 mb-1">
                    Resource Library
                  </h4>
                  <p class="text-sm text-guild-400 mb-2">
                    Templates, guides, and tools for building solidarity-based
                    studios.
                  </p>
                  <UButton
                    to="https://wiki.ghostguild.org"
                    target="_blank"
                    variant="link"
                    size="sm"
                    class="p-0"
                  >
                    Browse Resources →
                  </UButton>
                </div>
              </div>

              <div class="flex items-start gap-4">
                <div
                  class="w-10 h-10 bg-ember-500/20 rounded-lg flex items-center justify-center flex-shrink-0"
                >
                  <Icon
                    name="heroicons:chat-bubble-left-right"
                    class="w-5 h-5 text-ember-400"
                  />
                </div>
                <div>
                  <h4 class="font-semibold text-guild-100 mb-1">
                    Peer Support
                  </h4>
                  <p class="text-sm text-guild-400 mb-2">
                    Connect 1:1 with community members for advice and support.
                  </p>
                  <UButton
                    to="/members?peerSupport=true"
                    variant="link"
                    size="sm"
                    class="p-0"
                  >
                    Find Peers →
                  </UButton>
                </div>
              </div>
            </div>
          </div>

          <!-- CTA -->
          <div class="text-center">
            <UButton to="/member/dashboard" size="xl" class="px-12">
              Go to Your Dashboard
            </UButton>
          </div>
        </div>
      </UContainer>
    </section>
  </div>
</template>

<script setup>
const { memberData, checkMemberStatus } = useAuth();

// Ensure user is authenticated
definePageMeta({
  middleware: ["auth"],
});

onMounted(async () => {
  await checkMemberStatus();
});

useHead({
  title: "Welcome - Ghost Guild",
  meta: [
    {
      name: "description",
      content: "Welcome to Ghost Guild! Get started with your membership.",
    },
  ],
});
</script>
