<script setup lang="ts">
import { cards } from "~/Data/CardsData.json";
import SocialIcon from "~/components/card/SocialIcon.vue";
import ContactBar from "~/components/card/ContactBar.vue";
import EgyptFlag from "~/components/svg/country/EgyptFlag.vue";
import SaudiFlag from "~/components/svg/country/SaudiFlag.vue";
import MailAt from "~/components/svg/Contact/MailAt.vue";
import VisitWebsite from "~/components/card/VisitWebsite.vue";
import CardLocation from "~/components/card/CardLocation.vue";
import NoiseBg from "~/components/svg/NoiseBg.vue";

definePageMeta({
  layout: "card-layout",
  showScrollToTop: false,
});

const route = useRoute();
const idParam = route.params.id as string;

const card = computed(() => cards.find((item) => item.id === idParam));

if (!card.value) {
  throw createError({
    statusCode: 404,
    statusMessage: "Page not found",
    fatal: true,
  });
}

const name = computed(() => card.value?.name);
const title = computed(() => card.value?.title);
const EgyPhone = computed(() => card.value?.EgyPhone ?? "");
const SaudiPhone = computed(() => card.value?.SaudiPhone ?? "");
const email = computed(() => card.value?.email ?? "");

useSeoMeta({
  title: name.value,
  description: email.value,
  keywords: title.value,
  ogTitle: name.value,
  ogDescription: email.value,
});

const setI18nParams = useSetI18nParams();
watch(
  card,
  (newCard) => {
    if (newCard) {
      setI18nParams({
        ar: { name: newCard.name },
        en: { name: newCard.name },
      });
    }
  },
  { immediate: true },
);
</script>

<template>
  <section
    id="card"
    class="container mx-auto flex h-full w-full flex-col items-center justify-center bg-white pb-[90px]"
  >
    <!-- Card Header -->
    <div class="curved-edge card-header relative h-48 w-full">
      <div class="gradient absolute inset-0"></div>
    </div>

    <!-- Image  -->
    <div class="relative -mt-50 flex justify-center">
      <NuxtImg
        :src="card?.image || 'images/cards-images/placeholder.jpg'"
        class="h-40 w-40 rounded-full border-4 border-white shadow-lg"
      />
    </div>
    <NoiseBg
      class="pointer-events-none fixed top-[20%] left-[25%] h-[350px] w-[350px]"
    />
    <NoiseBg
      class="pointer-events-none fixed top-[50%] left-[50%] h-[450px] w-[450px]"
    />
    <NoiseBg
      class="pointer-events-none fixed top-[80%] left-[25%] h-[350px] w-[350px]"
    />
    <!-- Card Body -->
    <div class="m-3 flex h-auto w-full flex-col gap-4 p-2">
      <!-- Bio -->
      <div>
        <p class="text-dark-text m-2 text-center text-2xl font-bold">
          {{ name }}
        </p>
        <p class="text-center text-[18px] font-[500] text-[#2A3D52]">
          {{ title }}
        </p>
      </div>
      <!-- Social Icons -->
      <div class="flex flex-row-reverse items-center justify-center gap-4">
        <SocialIcon
          name="fa-brands:facebook-f"
          url="https://www.facebook.com/Web.STDY"
        />
        <SocialIcon
          name="fa-brands:instagram"
          url="https://www.instagram.com/webstdy/"
        />
        <SocialIcon
          name="fa-brands:linkedin-in"
          url="https://www.linkedin.com/company/webstdy-softwarehouse"
        />
        <SocialIcon
          name="fa-brands:snapchat-ghost"
          url="https://www.snapchat.com/@webstdy"
        />
        <SocialIcon
          name="fa-brands:tiktok"
          url="https://www.tiktok.com/@webstdy"
        />
        <SocialIcon name="hugeicons:new-twitter" url="https://x.com/webstdys" />
        <SocialIcon
          name="fa-brands:youtube"
          url="https://www.youtube.com/@webstdy"
        />
      </div>

      <!-- Location -->
      <CardLocation />

      <!-- Contact Numbers -->
      <div class="flex flex-col items-center justify-center gap-4">
        <ContactBar v-if="EgyPhone" :info="EgyPhone" :component="EgyptFlag" />
        <ContactBar
          v-if="SaudiPhone"
          :info="SaudiPhone"
          :component="SaudiFlag"
        />
        <ContactBar v-if="email" :info="email" :component="MailAt" />
        <VisitWebsite />
      </div>
    </div>

    <!-- Card Tab -->
    <div class="fixed right-0 bottom-0 left-0">
      <CardTab
        v-if="email || EgyPhone || SaudiPhone"
        :email="email"
        :egy-phone="EgyPhone"
        :saudi-phone="SaudiPhone"
        :whatsapp-egy="EgyPhone"
        :whatsapp-saudi="SaudiPhone"
      />
    </div>
  </section>
</template>

<style scoped>
.gradient {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(
      circle at 10% 30%,
      rgba(80, 120, 255, 0.25) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 90% 70%,
      rgba(160, 80, 255, 0.2) 0%,
      transparent 40%
    ),
    linear-gradient(360deg, #061d37 0%, #0a1e2d 100%);
}

.curved-edge {
  --c: 25%;
  height: 42vh;
  aspect-ratio: 3/2;
  mask: radial-gradient(60% var(--c) at bottom, #0000 calc(100% - 8px), #000);
  background: #fff;
}

.body-gradient {
  background: linear-gradient(
    90deg,
    oklch(0.9 0.03 208.13) 0%,
    oklch(0.885 0.04 317.67) 100%
  );
}
</style>
