import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Building2} from 'lucide-react';
import logo from '../../assets/logo/logo.png'

type Props = {
  children: React.ReactNode
  title?: string
}

const AuthLayout: React.FC<Props> = ({ children }) => {

  return (
    <>
      <Helmet>
        <title>Connexion - Dataven ERP</title>
      </Helmet>

      <div className="min-h-screen w-full flex bg-white dark:bg-gray-950" style={{ 
        minHeight: '100vh', 
        width: '100%', 
        display: 'flex', 
        backgroundColor: 'white' 
      }}>
        
        {/* Left Side - Visual Branding */}
        <motion.div 
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
          className="hidden lg:flex w-1/2 bg-[#0F172A] relative overflow-hidden flex-col justify-between p-12"
        >
          {/* Animated Gradient Background */}
          <div className="absolute inset-0">
             <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-[#0F172A] via-[#1E293B] to-[#0F172A] z-0" />
             <div className="absolute top-[-20%] left-[-20%] w-[70%] h-[70%] bg-[#338660]/20 rounded-full blur-[120px] animate-pulse" />
             <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-[#338660]/10 rounded-full blur-[100px]" />
          </div>

          {/* Content */}
          <div className="relative z-10">
            <div className="flex items-center gap-3 mb-12">
              {/* <div className="w-10 h-10 rounded-xl bg-[#338660] flex items-center justify-center shadow-lg shadow-[#338660]/30">
                <Building2 className="w-6 h-6 text-white" />
              </div> */}
              <div><img src={logo} alt="" className='w-25 h-20'/></div>
              {/* <h1 className="text-2xl font-bold text-white tracking-tight">Dataven</h1> */}
            </div>
            
            <div className="max-w-md">
              <motion.h2 
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.5 }}
                className="text-5xl font-extrabold text-white leading-tight mb-6"
              >
                L'intelligence au cœur de votre <span className="text-[#338660]">croissance</span>.
              </motion.h2>
              <motion.p 
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.7 }}
                className="text-lg text-gray-400 leading-relaxed"
              >
                Pilotez votre entreprise avec une précision chirurgicale. CRM, Ventes, Achats et Comptabilité unifiés dans une plateforme d'exception.
              </motion.p>
            </div>
          </div>

          {/* Testimonial / Footer */}
          <div className="relative z-10 mt-auto">
             <div className="flex items-center gap-4 p-4 bg-white/5 backdrop-blur-md rounded-2xl border border-white/10">
                <div className="flex -space-x-3">
                   {[1,2,3].map(i => (
                     <div key={i} className="w-10 h-10 rounded-full bg-gray-700 border-2 border-[#0F172A] flex items-center justify-center text-xs font-bold text-white">
                        {String.fromCharCode(64+i)}
                     </div>
                   ))}
                </div>
                <div>
                   <div className="text-sm font-medium text-white">Rejoignez +2,000 entreprises</div>
                   <div className="text-xs text-gray-400">Leaders de leur marché</div>
                </div>
             </div>
          </div>
        </motion.div>

        {/* Right Side - Login Form */}
        <div className="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-12 relative bg-white dark:bg-gray-950">
          {children}
        </div>

        {/* Support Link Absolute */}
        <div className="absolute top-6 right-6 lg:top-8 lg:right-12">
           <Link to="/" className="text-sm font-medium text-gray-500 hover:text-[#338660] transition-colors">
              Besoin d'aide ?
           </Link>
        </div>
      </div>
    </>
  );
};

export default AuthLayout;
