import { Zap, Bot, MessageSquare, Users, BarChart2, Shield, Clock, Sparkles } from "lucide-react";
import Link from "next/link";

const features = [
  { icon: Bot,         text: "9 template-uri gata de folosit" },
  { icon: MessageSquare, text: "Raspunsuri instant, 24/7, fara pauze" },
  { icon: Users,       text: "Captare automata de leaduri calificate" },
  { icon: BarChart2,   text: "Statistici complete + export date" },
  { icon: Shield,      text: "Date in siguranta, 100% GDPR" },
  { icon: Clock,       text: "Setup complet in 3 minute" },
];

export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen flex" style={{ background: "var(--bg-base)" }}>

      {/* Left panel — brand */}
      <div className="hidden lg:flex w-[420px] shrink-0 flex-col justify-between p-10 border-r border-white/[0.06] relative overflow-hidden"
        style={{ background: "linear-gradient(160deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.05) 50%, var(--bg-base) 100%)" }}>

        {/* Background effects */}
        <div className="absolute top-0 left-0 right-0 h-[400px] bg-gradient-to-b from-indigo-600/10 to-transparent pointer-events-none" />
        <div className="absolute top-20 -left-20 w-64 h-64 bg-indigo-600/8 rounded-full blur-3xl animate-blob pointer-events-none" />
        <div className="absolute bottom-20 -right-10 w-48 h-48 bg-violet-600/8 rounded-full blur-3xl animate-blob pointer-events-none" style={{ animationDelay: "3s" }} />
        <div className="absolute inset-0 bg-dots opacity-30 pointer-events-none" />

        {/* Logo */}
        <Link href="/" className="relative flex items-center gap-3 group w-fit">
          <div className="relative w-10 h-10 shrink-0">
            <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 animate-spin-slow opacity-30 blur-[2px]" />
            <div className="relative w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center shadow-lg shadow-indigo-500/40">
              <Zap className="w-5 h-5 text-white" />
            </div>
          </div>
          <div>
            <span className="text-xl font-black text-white tracking-tight">Dialpilot</span>
            <div className="flex items-center gap-1.5">
              <span className="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-pulse" />
              <span className="text-[9px] text-emerald-400 font-bold uppercase tracking-wider">AI Powered</span>
            </div>
          </div>
        </Link>

        {/* Main copy */}
        <div className="relative">
          <div className="flex items-center gap-2 mb-3">
            <Sparkles className="w-4 h-4 text-indigo-400" />
            <span className="text-xs text-indigo-400 font-semibold uppercase tracking-widest">Platforma #1 in Romania</span>
          </div>
          <h2 className="text-3xl font-black text-white leading-tight mb-4">
            Chatboti AI care<br />
            <span className="text-gradient-animate">lucreaza pentru tine</span>
          </h2>
          <p className="text-slate-400 text-sm mb-8 leading-relaxed">
            Setup in 3 minute, rezultate imediate. Peste 247 afaceri romanesti au activat deja chatbotii lor.
          </p>
          <div className="space-y-2.5">
            {features.map(({ icon: Icon, text }, i) => (
              <div key={text}
                className="flex items-center gap-3 animate-slide-left"
                style={{ animationDelay: `${i * 80}ms` }}>
                <div className="w-7 h-7 rounded-lg bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center shrink-0">
                  <Icon className="w-3.5 h-3.5 text-indigo-400" />
                </div>
                <span className="text-sm text-slate-300">{text}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="relative text-xs text-slate-600 text-center">
          © 2025 Dialpilot · contact@dialpilot.com
        </div>
      </div>

      {/* Right panel — form */}
      <div className="flex-1 flex flex-col items-center justify-center p-6 relative">
        {/* Top gradient line */}
        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-indigo-500/30 to-transparent" />

        <div className="lg:hidden mb-8">
          <Link href="/" className="flex items-center gap-2.5 justify-center">
            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center shadow-lg shadow-indigo-500/30">
              <Zap className="w-4 h-4 text-white" />
            </div>
            <span className="text-xl font-black text-white">Dialpilot</span>
          </Link>
        </div>
        {children}
      </div>
    </div>
  );
}