<template>
  <section class="not-found-page min-h-dvh overflow-hidden bg-[#F7F9FC] text-[#192F52]">
    <div class="mx-auto flex min-h-dvh max-w-screen-2xl items-center px-6 py-10 sm:px-8 md:px-12 lg:px-16 xl:px-20">
      <div class="relative isolate grid w-full gap-10 overflow-hidden rounded-[32px] bg-white px-6 py-8 shadow-[0px_24px_80px_0px_#19213D14] sm:px-10 sm:py-12 lg:grid-cols-[minmax(0,1.1fr)_minmax(320px,420px)] lg:items-center lg:px-14 xl:px-20">
        <div class="pointer-events-none absolute -top-24 ltr:-left-24 rtl:-right-24 h-56 w-56 rounded-full bg-[#EB57571A] blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-28 ltr:-right-16 rtl:-left-16 h-72 w-72 rounded-full bg-[#192F5214] blur-3xl"></div>

        <div class="relative z-[1]">
          <router-link :to="homeHref" class="inline-flex w-fit items-center gap-3 rounded-full border border-solid border-[#D8E0EA] bg-white px-4 py-2 text-sm font-medium text-[#192F52] transition-colors duration-300 hover:border-[#192F52]">
            <img src="@/assets/images/logo-blue.svg" alt="ValuePlus" class="h-7 w-auto">
            <span>ValuePlus</span>
          </router-link>

          <p class="mt-8 text-sm font-semibold uppercase tracking-[0.32em] text-[#EB5757]">Error 404</p>
          <h1 class="mt-4 max-w-xl text-4xl font-bold leading-tight text-[#192F52] sm:text-5xl lg:text-6xl">
            {{ $t('Page not found') }}
          </h1>
          <p class="mt-5 max-w-2xl text-base leading-7 text-[#5E6A7D] sm:text-lg">
            {{ $t('The page you are looking for might have been moved, deleted, or the link may be incorrect.') }}
          </p>

          <div class="mt-8 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
            <router-link :to="homeHref" class="inline-flex items-center justify-center rounded-full bg-[#192F52] px-6 py-3 text-sm font-medium text-white transition-all duration-300 hover:bg-[#10203B]">
              {{ $t('Back to Home') }}
            </router-link>
            <router-link :to="blogsHref" class="inline-flex items-center justify-center rounded-full border border-solid border-[#192F52] px-6 py-3 text-sm font-medium text-[#192F52] transition-all duration-300 hover:bg-[#192F520A]">
              {{ $t('Explore Blogs') }}
            </router-link>
          </div>
        </div>

        <div class="relative z-[1]">
          <div class="relative overflow-hidden rounded-[28px] bg-[#192F52] p-6 text-white sm:p-8">
            <div class="absolute inset-0 opacity-30">
              <img src="@/assets/images/value-blur.svg" alt="" class="h-full w-full object-cover">
            </div>
            <div class="relative">
              <div>
                <p class="text-sm uppercase tracking-[0.28em] text-white/70">{{ $t('Need help?') }}</p>
                <div class="flex items-center justify-between gap-4 mt-2">
                  <p class="text-7xl font-bold leading-none sm:text-8xl">404</p>
                  <span class="material-symbols-rounded rounded-full bg-white/10 p-3 text-4xl w-[60px] h-[60px]">search_off</span>
                </div>
              </div>

              <div class="mt-8 space-y-4 rounded-[22px] border border-solid border-white/10 bg-white/10 p-5 backdrop-blur-sm">
                <p class="text-lg font-medium leading-7">{{ $t('You can return to the homepage or contact our team if you need assistance finding the right page.') }}</p>
                <router-link :to="contactHref" class="inline-flex items-center gap-2 text-sm font-medium text-white transition-opacity duration-300 hover:opacity-80">
                  <span>{{ $t('Contact Us') }}</span>
                  <span class="material-symbols-rounded text-base">{{ $i18n.locale === 'en' ? 'arrow_right_alt' : 'arrow_left_alt' }}</span>
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  computed: {
    locale () {
      return this.$route.params.lang || this.$i18n.locale || 'en'
    },
    homeHref () {
      return `/${this.locale}`
    },
    blogsHref () {
      return `/${this.locale}/blogs`
    },
    contactHref () {
      return `/${this.locale}/contact-us`
    }
  }
}
</script>
