Projects/front/src/components/layout/AuthLayout.tsx

// src/components/layout/AuthLayout.tsx
import { Outlet } from "react-router-dom";
import { BookOpen, Sparkles } from "lucide-react";
import { motion } from "framer-motion";

export default function AuthLayout() {
  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 relative overflow-hidden flex items-center justify-center selection:bg-indigo-500/30">
      {/* Background ambient orbs */}
      <div className="absolute top-[-15%] left-[-10%] w-[60%] h-[60%] rounded-full bg-indigo-600/15 blur-[150px] pointer-events-none mix-blend-screen" />
      <div className="absolute bottom-[-15%] right-[-10%] w-[60%] h-[60%] rounded-full bg-pink-600/15 blur-[150px] pointer-events-none mix-blend-screen" />

      <div className="relative flex w-full min-h-screen">
        {/* Left Side - Branding */}
        <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-b from-slate-900 via-indigo-950/40 to-slate-950 p-16 flex-col justify-between text-white relative overflow-hidden border-r border-white/5">
          <div className="absolute top-[-20%] left-[-20%] w-[80%] h-[80%] rounded-full bg-primary/15 blur-[120px] pointer-events-none" />
          <div className="absolute bottom-[-20%] right-[-20%] w-[80%] h-[80%] rounded-full bg-secondary/15 blur-[120px] pointer-events-none" />
          
          <div className="relative z-10 flex items-center gap-3">
            <div className="w-11 h-11 rounded-2xl bg-gradient-to-tr from-primary to-secondary flex items-center justify-center shadow-lg shadow-indigo-500/20">
              <BookOpen className="w-5 h-5 text-white" />
            </div>
            <span className="text-2xl font-bold tracking-tight bg-gradient-to-r from-white via-slate-200 to-slate-400 bg-clip-text text-transparent">
              IE Research
            </span>
          </div>

          <div className="relative z-10 space-y-6 max-w-md">
            <h1 className="text-5xl font-extrabold tracking-tight leading-tight">
              The Future of Academic Publishing.
            </h1>
            <p className="text-lg text-slate-400 font-medium">
              Discover cutting-edge discoveries, collaborate in real-time, and publish open science with globally trusted researchers.
            </p>
            <div className="flex items-center gap-2.5 text-sm font-semibold text-indigo-400">
              <Sparkles className="w-5 h-5 text-indigo-400 animate-float" />
              <span>Join 10,000+ researchers worldwide</span>
            </div>
          </div>

          <div className="relative z-10 text-sm text-slate-500">
            © 2026 IE Research Platform. All rights reserved.
          </div>
        </div>
        
        {/* Right Side - Form */}
        <div className="flex-1 flex items-center justify-center p-6 lg:p-12 relative">
          {/* Subtle right side glow */}
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-indigo-900/10 via-transparent to-transparent pointer-events-none" />
          <motion.div 
            initial={{ opacity: 0, y: 30, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            transition={{ duration: 0.6, type: "spring", bounce: 0.4 }}
            className="w-full max-w-md relative z-10"
          >
            <div className="absolute -inset-1 bg-gradient-to-r from-indigo-500/20 to-pink-500/20 rounded-3xl blur opacity-30"></div>
            <div className="relative bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-3xl p-8 shadow-2xl">
              <Outlet />
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  );
}