<template>
  <section class="md:px-6 mt-4" :class="active ? 'mb-36' : 'mb-14'">
    <div class="bg-navy-800 py-10 px-4 md:px-10 rounded-3xl md:rounded-[48px]">
      <div class="max-w-[51.25rem] text-center mx-auto">
        <article class="mb-10">
          <p class="leading-6 font-semibold text-yellow-100 mb-2" v-text="headerComponent.sub_title"></p>
          <h2 class="text-3xl md:text-5xl mb-4 font-semibold text-white" v-text="headerComponent.title"></h2>
          <p class="text-lg md:text-xl md:leading-8 text-gray-200" v-text="headerComponent.supporting_text"></p>
        </article>

        <nav class="mx-auto flex items-center justify-center flex-col md:flex-row gap-1 border border-white rounded-xl md:rounded-[60px] p-1.5 mb-8">
          <button
              v-for="membership in horizontalTabComponent.data"
              :key="membership.id"
              @click="active = membership.id"
              class="flex-1 rounded-full text-center font-semibold flex justify-center items-center gap-1 py-2.5 px-3 cursor-pointer text-white transition-colors text-base max-md:w-full"
              :class="{ 'bg-white !text-gray-700': active === membership.id }"
          >
            {{ membership.name }}
          </button>
        </nav>
      </div>

      <!-- Show image when none selected with transition -->
      <div v-if="!active" class="flex justify-center">
        <SelectType></SelectType>
      </div>

      <!-- Membership details with transition -->
      <Transition name="fade" mode="out-in">
        <div
            v-if="activeMembership"
            :key="activeMembership.id"
            class="bg-white p-4 md:!p-8 rounded-xl md:rounded-3xl shadow-sm border border-gray-200 flex max-lg:flex-col gap-4 md:!gap-8 max-w-[1400px] mx-auto -mb-[140px]"
        >
          <!-- Left section -->
          <div class="lg:w-2/5">
            <div
                :class="[
                'p-8 rounded-[20px] text-left min-h-full',
                'bg-brand-25'
              ]"
            >
              <span
                  :class="[
                  'w-12 h-12 flex items-center justify-center rounded-full mb-4',
                  'bg-brand-100 text-brand-600'
              ]"
              >
                <StarIcon class="w-5 h-5"></StarIcon>
              </span>
              <h3
                  :class="[
                  'text-4xl leading-10 font-semibold mb-4',
                  'text-brand-700'
              ]"
              >
                {{ activeMembership.name }}
              </h3>
              <p class="leading-6 text-gray-600">{{ activeMembership.description }}</p>
            </div>
          </div>

          <!-- Right section -->
          <div class="lg:w-3/5 flex flex-col gap-12 justify-between">
            <div class="flex max-md:flex-col gap-6">
              <div v-if="activeMembership.access" class="flex-1">
                <h4 class="font-bold text-gray-900 leading-6 mb-6">{{ activeMembership.access.title }}</h4>
                <ul>
                  <li
                      v-for="(item, idx) in activeMembership.access.list"
                      :key="`access-${activeMembership.id}-${idx}`"
                      class="leading-6 flex items-top text-gray-600 mb-4"
                  >
                    <span class="flex items-center justify-center min-w-6 h-6 bg-success-100 text-success-500 rounded-full mr-3">
                      <Check class="w-5 h-5"></Check>
                    </span>
                    {{ item }}
                  </li>
                </ul>
              </div>

              <div v-if="activeMembership.excludes && activeMembership.excludes?.list?.length" class="flex-1">
                <h4 class="font-bold text-gray-900 leading-6 mb-6">{{ activeMembership.excludes.title }}</h4>
                <ul>
                  <li
                      v-for="(item, idx) in activeMembership.excludes.list"
                      :key="`excludes-${activeMembership.id}-${idx}`"
                      class="leading-6 flex items-top text-gray-600 mb-4"
                  >
                    <span class="flex items-center justify-center min-w-6 h-6 bg-gray-100 rounded-full mr-3">
                      <XIcon class="w-5 h-5"></XIcon>
                    </span>
                    {{ item }}
                  </li>
                </ul>
              </div>
            </div>

            <!-- CTA Button -->
            <a
                :href="activeMembership.url"
                class="py-3 px-6 rounded-full font-semibold flex items-center justify-center transition-colors bg-brand-600 text-white hover:bg-brand-700"
            >
              {{ activeMembership.button.label }}
              <span class="ml-2"><ArrowUpRight class="w-5 h-5"></ArrowUpRight></span>
            </a>
          </div>
        </div>
      </Transition>
    </div>
  </section>
</template>

<script setup>
import { ref, computed } from 'vue'
import SelectType from '@/assets/svg/select-type.svg'
import ArrowUpRight from '@/assets/img/icons/arrow-up-right.svg'
import Check from '@/assets/img/icons/check.svg'
import XIcon from '@/assets/img/icons/x.svg'
import StarIcon from '@/assets/img/icons/stars-02.svg'

const props = defineProps({
  section: {
    required: true,
    type: Object,
  },
});

const section = ref(props.section);

const headerComponent = computed(() => {
  return section.value.components.find((component) => component.type === "header");
});

const horizontalTabComponent = computed(() => {
  return section.value.components.find((component) => component.type === "horizontal_tabs");
});

const active = ref('')

const activeMembership = computed(() =>
    horizontalTabComponent.value.data.find(m => m.id === active.value) || null
)
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.1s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
