'use client'

import { signIn } from 'next-auth/react'

export default function LoginPage() {
  return (
    <div className="min-h-screen bg-gray-900 flex items-center justify-center px-4">
      <div className="w-full max-w-sm">
        <div className="text-center mb-8">
          <h1 className="text-white text-3xl font-bold">AILLIN</h1>
          <p className="text-gray-400 text-sm mt-1">Intranet Corporativa</p>
        </div>

        <div className="bg-gray-800 rounded-xl p-8 space-y-5">
          <p className="text-gray-300 text-sm text-center">
            Inicia sesión con tu cuenta corporativa
          </p>

          <button
            onClick={() => signIn('azure-ad', { callbackUrl: '/dashboard' })}
            className="w-full flex items-center justify-center gap-3 bg-white hover:bg-gray-100 text-gray-800 font-medium rounded-lg py-2.5 text-sm transition-colors"
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 23 23">
              <path fill="#f3f3f3" d="M0 0h23v23H0z"/>
              <path fill="#f35325" d="M1 1h10v10H1z"/>
              <path fill="#81bc06" d="M12 1h10v10H12z"/>
              <path fill="#05a6f0" d="M1 12h10v10H1z"/>
              <path fill="#ffba08" d="M12 12h10v10H12z"/>
            </svg>
            Iniciar sesión con Microsoft
          </button>

          <p className="text-gray-500 text-xs text-center">
            Solo cuentas @aillin.cl
          </p>
        </div>
      </div>
    </div>
  )
}