<script setup>
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

function copyEmail() {
  navigator.clipboard.writeText("fiee@dlkadvisory.com");
}
</script>

<template>
  <div class="contact-container">
    <!-- Title Section -->
    <div class="title-section">
      <div class="title-decoration"></div>
      <div class="contact-title">{{ t("contacts.title") }}</div>
    </div>

    <!-- Card Section -->
    <div class="contact-card">
      <div class="logo-text">{{ t("contacts.company_name") }}</div>
      <div class="relation-text">{{ t("contacts.investor_relations") }}</div>
      <div class="email-section">
        <span>{{ t("contacts.email_label") }}</span>
        <span class="email-address" @click="copyEmail"
          >fiee@dlkadvisory.com</span
        >
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.contact-container {
  width: 650 * 2.5px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16 * 2.5px;
  padding: 0 16 * 2.5px;
  margin-bottom: 32 * 2.5px;
}

.title-decoration {
  width: 58 * 2.5px;
  height: 7 * 2.5px;
  background: #ff7bac;
  margin: auto 0;
  margin-top: 43 * 2.5px;
}

.contact-title {
  font-family: "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 32 * 2.5px;
  line-height: 1.4em;
  letter-spacing: 0.03em;
  color: #000000;
}

.contact-card {
  display: flex;
  width: 100%;
  height: 511 * 2.5px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background-color: white;
  border-radius: 1rem;
  background-image: url("@/assets/image/768/contacts-bg.png");
  background-size: 64% auto;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0px 3 * 2.5px 14 * 2.5px 0px rgba(0, 0, 0, 0.16);
  animation: fade-in 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.logo-text {
  width: 100%;
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;
  font-family: "PingFang SC", sans-serif;
  font-size: 110 * 2.5px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.48 * 2.5px;
  background: linear-gradient(90deg, #ff7bac 0%, #0ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay: 0.2s;
}

.relation-text {
  font-family: "PingFang SC", sans-serif;
  font-size: 24 * 2.5px;
  color: #000000;
  font-weight: 600;
  animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay: 0.4s;
}

.email-section {
  font-size: 18 * 2.5px;
  color: #4a5568;
  display: flex;
  align-items: center;
  gap: 8 * 2.5px;
  animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay: 0.6s;
  margin-top: 16 * 2.5px;
}

.email-address {
  color: #ff7bac;
  cursor: pointer;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20 * 2.5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
