import Link from "next/link"
import { Coins, ShieldCheck, KeyRound, Globe, Activity, Server } from "lucide-react"
import { LoginForm } from "@/components/auth/login-form"
import i18n from "@/lib/i18n";

export default function LoginPage() {
  return (
    <div
      dir="rtl"
      className="relative min-h-screen overflow-hidden bg-gradient-to-br from-[#0b0d14] via-[#111320] to-[#1a1c2a] text-white"
    >
      {/* Unified shared background */}
      <div
        className="absolute inset-0 opacity-[0.055]"
        style={{
          backgroundImage:
            "linear-gradient(to right, #fff 1px, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px)",
          backgroundSize: "60px 60px",
        }}
      />

      <div className="absolute -top-32 -left-32 h-96 w-96 rounded-full bg-gold-500/20 blur-3xl" />
      <div className="absolute bottom-0 right-0 h-96 w-96 rounded-full bg-gold-500/10 blur-3xl" />
      <div className="absolute left-1/2 top-1/3 h-[420px] w-[420px] -translate-x-1/2 rounded-full bg-white/[0.035] blur-3xl" />

      <main className="relative z-10 min-h-screen w-full">
        <div className="grid min-h-screen w-full grid-cols-1 lg:grid-cols-[minmax(440px,520px)_minmax(0,1fr)]">
          {/* Security telemetry area */}
          <section className="order-1 hidden min-h-screen w-full flex-col justify-between overflow-hidden border-r border-white/10 bg-white/[0.025] px-10 py-8 backdrop-blur-[2px] lg:order-2 lg:flex xl:px-14 xl:py-10">
            <div className="flex items-center gap-3">
              <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-gold-400 to-gold-600 shadow-[0_4px_20px_rgba(201,162,39,0.35)]">
                <Coins className="h-6 w-6 text-[#1f1604]" strokeWidth={2.25} />
              </div>

              <div>
                <div className="text-[18px] font-bold tracking-tight">Gold Wallet</div>
                <div className="text-[12px] text-white/60">{i18n.t('app.login.page.text_4')}</div>
              </div>
            </div>

            <div className="max-w-4xl">
              <h2 className="mb-3 text-[38px] font-bold leading-tight tracking-tight xl:text-[48px]">
                {i18n.t('app.login.page.text_5')}<br />
                <span className="text-gold-400">{i18n.t('app.login.page.text_6')}</span>
              </h2>

              <p className="max-w-2xl text-[14px] leading-relaxed text-white/70">
                {i18n.t('app.login.page.text_7')}</p>

              <div className="mt-10 grid gap-3 xl:grid-cols-[minmax(0,1fr)_260px]">
                <div className="rounded-2xl border border-white/10 bg-white/[0.045] p-4 backdrop-blur">
                  <div className="mb-3 flex items-center gap-2.5 text-[12px] text-white/60">
                    <Activity className="h-4 w-4 text-gold-400" />
                    <span className="font-semibold uppercase tracking-wider">{i18n.t('app.login.page.text_8')}</span>
                  </div>

                  <dl className="space-y-2.5">
                    <div className="flex items-center justify-between gap-4">
                      <dt className="text-[12.5px] text-white/70">{i18n.t('app.login.page.text_9')}</dt>
                      <dd className="flex items-center gap-1.5 text-[12px] font-semibold text-emerald-400">
                        <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-400" />
                        {i18n.t('app.login.page.text_10')}</dd>
                    </div>

                    <div className="flex items-center justify-between gap-4">
                      <dt className="text-[12.5px] text-white/70">{i18n.t('app.login.page.text_11')}</dt>
                      <dd className="text-[12px] font-semibold text-white">Production Cluster</dd>
                    </div>

                    <div className="flex items-center justify-between gap-4">
                      <dt className="text-[12.5px] text-white/70">{i18n.t('app.login.page.text_12')}</dt>
                      <dd className="text-[12px] font-mono font-semibold text-gold-400">
                        AU-GOLD-01
                      </dd>
                    </div>

                    <div className="flex items-center justify-between gap-4">
                      <dt className="text-[12.5px] text-white/70">{i18n.t('app.login.page.text_13')}</dt>
                      <dd className="flex items-center gap-1.5 text-[12px] font-semibold text-emerald-400">
                        <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
                        {i18n.t('app.login.page.text_14')}</dd>
                    </div>
                  </dl>
                </div>

                <div className="grid grid-cols-3 gap-2 xl:grid-cols-1">
                  {[
                    { icon: ShieldCheck, label: i18n.t('app.login.page.text_1') },
                    { icon: Globe, label: i18n.t('app.login.page.text_2') },
                    { icon: KeyRound, label: i18n.t('app.login.page.text_3') },
                  ].map((b) => (
                    <div
                      key={b.label}
                      className="flex flex-col items-center justify-center gap-1.5 rounded-xl border border-gold-500/20 bg-gold-500/5 px-3 py-2.5 text-center"
                    >
                      <b.icon className="h-4 w-4 text-gold-400" />
                      <span className="text-[10.5px] font-semibold text-gold-100">
                        {b.label}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="rounded-2xl border border-white/10 bg-white/[0.045] p-4">
              <div className="flex items-start gap-3">
                <Server className="mt-0.5 h-5 w-5 shrink-0 text-gold-400" />

                <div className="text-[11.5px] leading-relaxed text-white/70">
                  <span className="mb-1 block font-semibold text-white">
                    {i18n.t('app.login.page.text_15')}</span>
                  {i18n.t('app.login.page.text_16')}</div>
              </div>
            </div>
          </section>

          {/* Login area */}
          <section className="order-1 flex min-h-screen w-full items-center justify-center px-5 py-8 md:px-8 lg:order-1 lg:px-10 xl:px-12">
            <div className="w-full max-w-md">
              {/* <div className="mb-8 flex items-center gap-3">
                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-gold-400 to-gold-600 shadow-[0_4px_20px_rgba(201,162,39,0.35)]">
                  <Coins className="h-6 w-6 text-[#1f1604]" strokeWidth={2.25} />
                </div>

                <div>
                  <div className="text-[18px] font-bold tracking-tight">Gold Wallet</div>
                  <div className="text-[12px] text-white/60">{t('app.login.page.text_secure_portal')}</div>
                </div>
              </div> */}

              <div className="mb-6">
                <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-gold-500/20 bg-gold-500/10 px-3 py-1.5 text-[11px] font-semibold text-gold-100">
                  <ShieldCheck className="h-3.5 w-3.5 text-gold-400" />
                  {i18n.t('app.login.page.text_17')}</div>

                <h1 className="mb-2 text-[28px] font-bold tracking-tight text-white">
                  {i18n.t('app.login.page.text_18')}</h1>

                <p className="text-[13.5px] leading-relaxed text-white/65">
                  {i18n.t('app.login.page.text_19')}</p>
              </div>

              <div className="rounded-[24px] border border-white/10 bg-white/[0.97] p-5 text-foreground shadow-2xl shadow-black/25">
                <LoginForm />
              </div>

              <div className="mt-6 flex items-center justify-between gap-4 text-[11.5px] text-white/55">
                <span>{i18n.t('app.login.page.text_20')}</span>

                <Link href="#" className="transition hover:text-white">
                  {i18n.t('app.login.page.text_21')}</Link>
              </div>
            </div>
          </section>

          
        </div>
      </main>
    </div>
  )
}