import Image from 'next/image';
import Link from 'next/link';
import { LoginForm } from './login-form';

export default function AdminLoginPage() {
  return (
    <main className="min-h-screen bg-[#0b1117] px-6 py-8 text-slate-100 lg:px-10 lg:py-10">
      <div className="mx-auto grid max-w-7xl gap-6 lg:min-h-[calc(100vh-5rem)] lg:grid-cols-[minmax(0,1.1fr)_440px]">
        <section className="relative overflow-hidden rounded-[2rem] border border-white/10 bg-[#0f172a] p-8 text-white shadow-[0_30px_90px_rgba(0,0,0,0.38)] lg:p-10">
          <Image src="/brand/chego-hero.jpeg" alt="Chego" fill className="object-cover opacity-30" priority />
          <div className="absolute inset-0 bg-[linear-gradient(135deg,rgba(8,12,18,0.92)_0%,rgba(8,12,18,0.76)_46%,rgba(255,122,26,0.12)_100%)]" />
          <div className="relative flex h-full flex-col justify-between gap-8">
            <div>
              <div className="max-w-[280px] rounded-[1.5rem] border border-white/10 bg-black/20 p-4 backdrop-blur">
                <Image src="/brand/chego-logo.png" alt="Chego" width={560} height={220} className="h-auto w-full object-contain" priority />
              </div>
              <p className="mt-5 text-xs font-bold uppercase tracking-[0.34em] text-[#ff9a57]">Chego Admin</p>
              <h1 className="mt-4 max-w-xl text-4xl font-black tracking-tight text-white lg:text-5xl">Seguranca, operacao e dinheiro no mesmo cockpit.</h1>
              <p className="mt-4 max-w-2xl text-sm leading-7 text-slate-300 lg:text-base">
                Cada sessao entra filtrada por papel. Nada de dados de uma loja, entregador ou cliente misturados com outro.
              </p>
            </div>

            <div className="grid gap-4 sm:grid-cols-3">
              <div className="rounded-[1.5rem] border border-white/10 bg-black/20 p-4 backdrop-blur">
                <p className="text-[11px] font-bold uppercase tracking-[0.24em] text-[#ffb27c]">Segregacao</p>
                <p className="mt-3 text-3xl font-black">100%</p>
                <p className="mt-2 text-sm text-slate-300">Por papel e sessao</p>
              </div>
              <div className="rounded-[1.5rem] border border-white/10 bg-black/20 p-4 backdrop-blur">
                <p className="text-[11px] font-bold uppercase tracking-[0.24em] text-[#ffb27c]">Auditoria</p>
                <p className="mt-3 text-3xl font-black">JWT</p>
                <p className="mt-2 text-sm text-slate-300">Com trilha e perfil</p>
              </div>
              <div className="rounded-[1.5rem] border border-white/10 bg-black/20 p-4 backdrop-blur">
                <p className="text-[11px] font-bold uppercase tracking-[0.24em] text-[#ffb27c]">Foco</p>
                <p className="mt-3 text-3xl font-black">1 painel</p>
                <p className="mt-2 text-sm text-slate-300">Sem excesso visual</p>
              </div>
            </div>
          </div>
        </section>

        <section className="rounded-[2rem] border border-white/10 bg-[#10141b] p-6 shadow-[0_24px_70px_rgba(0,0,0,0.28)] backdrop-blur lg:p-8">
          <div className="flex h-full flex-col justify-between gap-8">
            <div>
              <p className="text-xs font-bold uppercase tracking-[0.3em] text-slate-500">Acesso seguro</p>
              <h2 className="mt-3 text-3xl font-black tracking-tight text-white">Entrar no painel</h2>
              <p className="mt-3 text-sm leading-6 text-slate-400">Autenticacao real contra a API, perfil isolado e sessao protegida.</p>
              <div className="mt-4 rounded-[1.4rem] border border-rose-400/20 bg-rose-500/10 px-4 py-4 text-sm text-rose-100">
                <strong className="block text-[11px] font-black uppercase tracking-[0.24em] text-rose-200">Acesso administrativo</strong>
                Esta tela e exclusiva para `ADMIN` e `SUPER_ADMIN`. Restaurante, entregador e cliente nao devem entrar por aqui.
              </div>
            </div>

            <LoginForm />

            <div className="grid gap-3 sm:grid-cols-2">
              <div className="rounded-[1.4rem] border border-white/10 bg-white/5 p-4">
                <p className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-500">Perfil demo</p>
                <p className="mt-2 text-sm font-semibold text-white">admin@chego.app</p>
                <p className="mt-1 text-sm text-slate-400">Senha: Admin@123</p>
              </div>
              <div className="rounded-[1.4rem] border border-white/10 bg-white/5 p-4">
                <p className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-500">Destino</p>
                <p className="mt-2 text-sm font-semibold text-white">Dashboard principal</p>
                <p className="mt-1 text-sm text-slate-400">Pedidos, suporte, parceiros, financeiro e auditoria.</p>
              </div>
            </div>

            <Link href="/access" className="inline-flex items-center justify-center rounded-full border border-white/10 px-4 py-3 text-xs font-black uppercase tracking-[0.18em] text-slate-300 transition hover:border-[#ff7a1a] hover:text-white">
              Ver todos os acessos
            </Link>
          </div>
        </section>
      </div>
    </main>
  );
}