import Link from 'next/link'

function BrandMark() {
  return (
    <svg
      className="h-16 w-16 sm:h-20 sm:w-20"
      viewBox="0 0 80 80"
      fill="none"
      aria-hidden="true"
    >
      <circle cx="40" cy="40" r="38" stroke="currentColor" strokeOpacity="0.16" />
      <path
        d="M40 14C25.64 14 14 25.64 14 40c0 11.55 7.53 21.34 17.95 24.72 3.25 1.05 5.45 4.08 5.45 7.5V75h5.2v-2.78c0-3.42 2.2-6.45 5.45-7.5C58.47 61.34 66 51.55 66 40 66 25.64 54.36 14 40 14Z"
        fill="currentColor"
      />
      <circle cx="40" cy="40" r="13" className="fill-red-700" />
    </svg>
  )
}

export async function generateMetadata({ params }) {
  const { lang } = await params
  const isFa = lang === 'fa'

  return {
    title: isFa ? 'به‌زودی برمی‌گردیم | رهاورد' : 'Coming soon | Rahavard',
    description: isFa
      ? 'وب‌سایت رهاورد در حال به‌روزرسانی است.'
      : 'The Rahavard website is being updated.',
  }
}

export default async function ComingSoon({ params }) {
  const { lang } = await params
  const isFa = lang === 'fa'
  const otherLanguage = isFa ? 'en' : 'fa'

  return (
    <main className="relative isolate flex min-h-screen overflow-hidden bg-[#f4f1eb] text-zinc-900">
      <div
        className="pointer-events-none absolute inset-0 opacity-[0.045]"
        style={{
          backgroundImage:
            'linear-gradient(to right, #18181b 1px, transparent 1px), linear-gradient(to bottom, #18181b 1px, transparent 1px)',
          backgroundSize: '48px 48px',
        }}
      />
      <div className="pointer-events-none absolute -left-36 -top-36 h-[30rem] w-[30rem] rounded-full bg-red-700/[0.08] blur-3xl" />
      <div className="pointer-events-none absolute -bottom-56 -right-40 h-[34rem] w-[34rem] rounded-full bg-zinc-900/[0.07] blur-3xl" />

      <nav className="absolute inset-x-0 top-0 z-10 flex items-center justify-between px-6 py-6 sm:px-10 sm:py-8 lg:px-16">
        <div className="flex items-center gap-3" aria-label={isFa ? 'رهاورد' : 'Rahavard'}>
          <span className="h-2.5 w-2.5 rounded-full bg-red-700" />
          <span className="text-sm font-[4] tracking-[0.18em] sm:text-base">
            {isFa ? 'رهاورد منیزیم پارسه' : 'RAHAVARD MGP'}
          </span>
        </div>
        <Link
          href={`/${otherLanguage}`}
          hrefLang={otherLanguage}
          className="rounded-full border border-zinc-900/15 bg-white/40 px-4 py-2 text-xs font-[5] backdrop-blur transition-colors hover:border-zinc-900/30 hover:bg-white/70 sm:text-sm"
        >
          {isFa ? 'English' : 'فارسی'}
        </Link>
      </nav>

      <section className="relative z-[1] mx-auto flex w-full max-w-6xl flex-col justify-center px-6 pb-24 pt-36 sm:px-10 lg:px-16">
        <div className="mb-8 flex items-center gap-5 text-zinc-900 sm:mb-10">
          <BrandMark />
          <div className="h-px w-16 bg-zinc-900/20 sm:w-28" />
          <span className="text-xs font-[5] tracking-[0.22em] text-zinc-500 sm:text-sm">
            {isFa ? 'در حال به‌روزرسانی' : 'UNDER CONSTRUCTION'}
          </span>
        </div>

        <h1 className="max-w-4xl text-[clamp(3rem,10vw,7.5rem)] font-[4] leading-[0.95] tracking-[-0.045em]">
          {isFa ? (
            <>
              به‌زودی
              <br />
              <span className="text-red-700">برمی‌گردیم.</span>
            </>
          ) : (
            <>
              We&apos;ll be
              <br />
              <span className="text-red-700">back soon.</span>
            </>
          )}
        </h1>

        <div className="mt-9 flex max-w-2xl items-start gap-4 border-t border-zinc-900/15 pt-6 sm:mt-12 sm:gap-6 sm:pt-8">
          <span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-red-700 shadow-[0_0_0_6px_rgba(185,28,28,0.1)]" />
          <p className="text-base font-[5] leading-8 text-zinc-600 sm:text-lg">
            {isFa
              ? 'در حال آماده‌سازی تجربه‌ای تازه برای شما هستیم. وب‌سایت جدید رهاورد به‌زودی در دسترس خواهد بود.'
              : 'We are preparing a new experience for you. The new Rahavard website will be available shortly.'}
          </p>
        </div>
      </section>

      <div className="absolute bottom-7 left-6 right-6 z-10 flex items-end justify-between text-[10px] font-[5] uppercase tracking-[0.16em] text-zinc-500 sm:bottom-9 sm:left-10 sm:right-10 lg:left-16 lg:right-16">
        <span>{isFa ? 'قم، ایران' : 'Qom, Iran'}</span>
        <span dir="ltr">© {new Date().getFullYear()} RAHAVARD MGP</span>
      </div>
    </main>
  )
}