import { useNavigate } from 'react-router-dom';
import { DriverRegistrationForm } from '../components/DriverForm/DriverRegistrationForm';
import { Button } from '@/components/ui/button';
import { ArrowLeft } from 'lucide-react';

import { useDocumentMetadata } from '@/hooks/useDocumentMetadata';

export const ExternalDriverRegistrationView = () => {
  useDocumentMetadata('Cadastro Externo', 'gr');
  const navigate = useNavigate();

  return (
    <div className="min-h-screen bg-[#050505] relative overflow-hidden">
      {/* Background Animated Gradients - Synced with Workspace Theme */}
      <div className="fixed inset-0 z-0 pointer-events-none">
           <div className="absolute inset-0 bg-gradient-to-br from-emerald-900/20 to-transparent mix-blend-overlay" />
           <div className="absolute top-[-10%] right-[-10%] w-[50%] h-[50%] bg-emerald-500/10 blur-[120px] rounded-full" />
           <div className="absolute bottom-[-10%] left-[-10%] w-[50%] h-[50%] bg-blue-500/10 blur-[120px] rounded-full" />
      </div>

      {/* Header Premium */}
      <div className="relative z-10 bg-white/5 backdrop-blur-md border-b border-white/10">
        <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
             <div className="flex items-center gap-2">
                <div className="w-8 h-8 bg-emerald-600 rounded-lg flex items-center justify-center shadow-lg shadow-emerald-900/20">
                    <span className="text-white font-bold text-lg">P</span>
                </div>
                <span className="font-bold text-white tracking-tight">Pralog | GR</span>
             </div>
             
             <Button variant="ghost" size="sm" className="text-zinc-400 hover:text-white hover:bg-white/10" onClick={() => navigate('/plataforma/gr/login')}>
                <ArrowLeft size={16} className="mr-2" />
                Voltar ao Login
             </Button>
        </div>
      </div>

      <div className="relative z-10 max-w-7xl mx-auto px-4 py-12 md:py-20">
         <div className="text-center mb-12 space-y-4">
            <h1 className="text-4xl md:text-5xl font-bold text-white tracking-tight">Cadastro de Motorista Parceiro</h1>
            <p className="text-zinc-400 max-w-lg mx-auto text-sm md:text-base font-medium">
                Junte-se ao time Pralog. Preencha seus dados para iniciar o processo de seleção e análise de risco.
            </p>
         </div>
         
         <div className="flex justify-center">
            <div className="w-full max-w-4xl">
               <DriverRegistrationForm onSuccess={() => setTimeout(() => navigate('/plataforma/gr/login'), 3000)} />
            </div>
         </div>
      </div>
    </div>
  );
};
