<template>
  <div class="overflow-hidden">
    <div class="pb-container my-[40px] flex justify-center">
      <div class="bg-gray-100 rounded-lg md:rounded-2xl flex justify-center w-full" v-if="headerComponent">
        <div class="flex items-center justify-center flex-col gap-4 py-[40px] px-4 max-w-[820px]">
          <div class="flex justify-between relative w-[150px]">
            <div class="w-[56px] h-[56px] border-[2px] border-white bg-gray-200 rounded-full flex justify-center items-center">
              <Phone class="w-6 h-6 text-gray-600"></Phone>
            </div>
            <div class="w-[56px] h-[56px] border-[2px] border-white bg-gray-200 rounded-full flex justify-center items-center absolute top-[40%] left-1/2 -translate-x-1/2 -translate-y-1/2">
              <Help class="w-6 h-6 text-gray-600"></Help>
            </div>
            <div class="w-[56px] h-[56px] border-[2px] border-white bg-gray-200 rounded-full flex justify-center items-center">
              <Email class="w-6 h-6 text-gray-600"></Email>
            </div>
          </div>
          <div class="flex flex-col gap-2 text-center">
            <h3 class="text-[24px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
            <p v-if="headerComponent?.supporting_text" class="text-[18px] font-normal text-gray-600 leading-[30px] text-center" v-html="headerComponent.supporting_text"></p>
          </div>
          <div class="flex justify-center gap-2 flex-wrap">
            <template v-for="item in contactUs.data">
              <a
                  v-if="item?.show"
                  class="inline-flex gap-1.5 items-center font-semibold text-base px-5 py-2.5 rounded-full"
                  :class="{'text-brand-700 hover:bg-white border border-brand-300': item.type === 'phone', 'text-white bg-brand-600 hover:bg-brand-800': item.type === 'email'}"
                  :href="`${item.type === 'email' ? 'mailto:' : 'tel:'} ${item.address}`">
                {{ item.label }}
                <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
              </a>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref, computed} from "vue";
import Phone from "@/assets/img/icons/phone.svg";
import Help from "@/assets/img/icons/help-circle.svg";
import Email from "@/assets/img/icons/mail-01.svg";
import ArrowUpRight from "@/assets/img/icons/arrow-up-right.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 contactUs = computed(() => {
  return section.value.components.find((component) => component.type === "contact_us");
});
</script>
