'use client';

import React, { useState, useMemo } from 'react';
import { motion, AnimatePresence, type Variants } from 'framer-motion';
import { BookOpen, Mail, Lock, User, ArrowRight, GraduationCap, Heart, Sparkles, Flower2, Eye, EyeOff, KeyRound, Info, Shield, Leaf, Users as UsersIcon, HelpCircle, LockKeyhole, GitBranch, CheckCircle2, XCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Checkbox } from '@/components/ui/checkbox';
import { Badge } from '@/components/ui/badge';
import { useAppStore } from '@/lib/store';
import { t } from '@/lib/i18n';
import { login, register } from '@/lib/api';
import { toast } from 'sonner';

type LoginRole = 'teacher' | 'student' | 'parent';

const DEMO_ACCOUNTS = [
  { email: 'demo@competencetrack.org', password: 'Demo2025!', role: 'SCHOOL_ADMIN', labelKey: 'auth.demo_admin', icon: Shield, colorClass: 'from-emerald-400 to-emerald-600 hover:from-emerald-500 hover:to-emerald-700 shadow-emerald-300/40 dark:shadow-emerald-900/40' },
  { email: 'demo.vice@competencetrack.org', password: 'Demo2025!', role: 'VICE_PRINCIPAL', labelKey: 'auth.demo_vice_principal', icon: Shield, colorClass: 'from-emerald-400 to-emerald-600 hover:from-emerald-500 hover:to-emerald-700 shadow-emerald-300/40 dark:shadow-emerald-900/40' },
  { email: 'demo.teacher@competencetrack.org', password: 'Demo2025!', role: 'TEACHER', labelKey: 'auth.demo_teacher', icon: GraduationCap, colorClass: 'from-teal-400 to-teal-600 hover:from-teal-500 hover:to-teal-700 shadow-teal-300/40 dark:shadow-teal-900/40' },
  { email: 'demo.student@competencetrack.org', password: 'Demo2025!', role: 'STUDENT', labelKey: 'auth.demo_student', icon: User, colorClass: 'from-amber-400 to-amber-600 hover:from-amber-500 hover:to-amber-700 shadow-amber-300/40 dark:shadow-amber-900/40' },
  { email: 'demo.parent@competencetrack.org', password: 'Demo2025!', role: 'PARENT', labelKey: 'auth.demo_parent', icon: Heart, colorClass: 'from-violet-400 to-violet-600 hover:from-violet-500 hover:to-violet-700 shadow-violet-300/40 dark:shadow-violet-900/40' },
];

/* ─── Staggered entrance helpers ────────────────────────────── */
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.07, delayChildren: 0.1 },
  },
};

const itemVariants: Variants = {
  hidden: { opacity: 0, y: 14 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'easeOut' } },
};

/* ─── Floating particles ────────────────────────────────────── */
function FloatingParticles() {
  const particles = useMemo(() => [
    { id: 'p1', x: 8, y: 12, size: 6, opacity: 0.25, color: 'emerald', delay: 0, duration: 14 },
    { id: 'p2', x: 85, y: 18, size: 4, opacity: 0.2, color: 'teal', delay: 2, duration: 18 },
    { id: 'p3', x: 22, y: 65, size: 5, opacity: 0.18, color: 'amber', delay: 4, duration: 16 },
    { id: 'p4', x: 70, y: 75, size: 3, opacity: 0.22, color: 'violet', delay: 1, duration: 20 },
    { id: 'p5', x: 45, y: 88, size: 4, opacity: 0.15, color: 'emerald', delay: 3, duration: 12 },
    { id: 'p6', x: 92, y: 45, size: 5, opacity: 0.2, color: 'teal', delay: 5, duration: 15 },
    { id: 'p7', x: 15, y: 40, size: 3, opacity: 0.18, color: 'amber', delay: 6, duration: 22 },
    { id: 'p8', x: 55, y: 10, size: 4, opacity: 0.15, color: 'violet', delay: 2.5, duration: 17 },
    { id: 'p9', x: 35, y: 50, size: 2, opacity: 0.12, color: 'emerald', delay: 7, duration: 19 },
    { id: 'p10', x: 78, y: 55, size: 3, opacity: 0.16, color: 'teal', delay: 1.5, duration: 13 },
    { id: 'p11', x: 60, y: 30, size: 2, opacity: 0.14, color: 'amber', delay: 4.5, duration: 21 },
    { id: 'p12', x: 5, y: 80, size: 4, opacity: 0.2, color: 'violet', delay: 3.5, duration: 16 },
  ], []);

  const colorMap: Record<string, string> = {
    emerald: 'bg-emerald-400 dark:bg-emerald-500',
    teal: 'bg-teal-400 dark:bg-teal-500',
    amber: 'bg-amber-400 dark:bg-amber-500',
    violet: 'bg-violet-400 dark:bg-violet-500',
  };

  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      {particles.map((p) => (
        <motion.div
          key={p.id}
          className={`absolute rounded-full ${colorMap[p.color]}`}
          style={{
            left: `${p.x}%`,
            top: `${p.y}%`,
            width: p.size,
            height: p.size,
            opacity: p.opacity,
          }}
          animate={{
            y: [0, -20, 10, -15, 0],
            x: [0, 8, -6, 12, 0],
            opacity: [p.opacity, p.opacity * 0.6, p.opacity * 1.2, p.opacity * 0.8, p.opacity],
          }}
          transition={{
            duration: p.duration,
            repeat: Infinity,
            ease: 'easeInOut',
            delay: p.delay,
          }}
        />
      ))}
    </div>
  );
}

/* ─── Decorative geometric shapes ───────────────────────────── */
function FloatingShapes() {
  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      {/* Large circles */}
      <div className="absolute top-[10%] left-[8%] w-40 h-40 rounded-full bg-emerald-200/20 dark:bg-emerald-800/8 animate-float-slow" />
      <div className="absolute top-[55%] right-[15%] w-28 h-28 rounded-full bg-teal-200/18 dark:bg-teal-800/8 animate-float" />
      <div className="absolute bottom-[15%] left-[20%] w-20 h-20 rounded-full bg-amber-200/15 dark:bg-amber-800/8 animate-float-reverse" />

      {/* Rotated squares / diamonds */}
      <motion.div
        className="absolute top-[25%] right-[35%] w-12 h-12 rounded-xl bg-emerald-300/12 dark:bg-emerald-700/8"
        animate={{ rotate: [0, 90, 180, 270, 360] }}
        transition={{ duration: 30, repeat: Infinity, ease: 'linear' }}
      />
      <motion.div
        className="absolute top-[70%] left-[45%] w-8 h-8 rounded-lg bg-violet-300/12 dark:bg-violet-700/8"
        animate={{ rotate: [360, 270, 180, 90, 0] }}
        transition={{ duration: 25, repeat: Infinity, ease: 'linear' }}
      />
      <motion.div
        className="absolute top-[15%] left-[50%] w-10 h-10 rounded-lg bg-teal-300/10 dark:bg-teal-700/8"
        animate={{ rotate: [0, -90, -180, -270, -360] }}
        transition={{ duration: 35, repeat: Infinity, ease: 'linear' }}
      />

      {/* Hexagonal shapes (approximated with rounded corners) */}
      <motion.div
        className="absolute bottom-[30%] right-[25%] w-16 h-16 rounded-2xl bg-amber-200/10 dark:bg-amber-800/8 border border-amber-300/10 dark:border-amber-700/10"
        animate={{ rotate: [0, 45, 0], scale: [1, 1.05, 1] }}
        transition={{ duration: 12, repeat: Infinity, ease: 'easeInOut' }}
      />
      <motion.div
        className="absolute top-[45%] left-[5%] w-14 h-14 rounded-2xl bg-emerald-200/10 dark:bg-emerald-800/8 border border-emerald-300/10 dark:border-emerald-700/10"
        animate={{ rotate: [0, -30, 0], scale: [1, 1.08, 1] }}
        transition={{ duration: 15, repeat: Infinity, ease: 'easeInOut' }}
      />

      {/* Dot grid overlay */}
      <div className="absolute inset-0 bg-dots opacity-20 dark:opacity-8" />
    </div>
  );
}

/* ─── Left-side illustration panel ──────────────────────────── */
function LeftIllustration({ loginRole }: { loginRole: LoginRole }) {
  const features = [
    { icon: Sparkles, labelKey: 'auth.feature_competencies', color: 'emerald' },
    { icon: Heart, labelKey: 'auth.feature_student_centered', color: 'teal' },
    { icon: BookOpen, labelKey: 'auth.feature_open_source', color: 'amber' },
    { icon: GraduationCap, labelKey: 'auth.feature_reports', color: 'violet' },
    { icon: Flower2, labelKey: 'auth.feature_flower', color: 'rose' },
  ];

  const colorClasses: Record<string, { bg: string; text: string; ring: string }> = {
    emerald: { bg: 'bg-emerald-100 dark:bg-emerald-900/30', text: 'text-emerald-600 dark:text-emerald-400', ring: 'ring-emerald-200/50 dark:ring-emerald-800/30' },
    teal: { bg: 'bg-teal-100 dark:bg-teal-900/30', text: 'text-teal-600 dark:text-teal-400', ring: 'ring-teal-200/50 dark:ring-teal-800/30' },
    amber: { bg: 'bg-amber-100 dark:bg-amber-900/30', text: 'text-amber-600 dark:text-amber-400', ring: 'ring-amber-200/50 dark:ring-amber-800/30' },
    violet: { bg: 'bg-violet-100 dark:bg-violet-900/30', text: 'text-violet-600 dark:text-violet-400', ring: 'ring-violet-200/50 dark:ring-violet-800/30' },
    rose: { bg: 'bg-rose-100 dark:bg-rose-900/30', text: 'text-rose-600 dark:text-rose-400', ring: 'ring-rose-200/50 dark:ring-rose-800/30' },
  };

  return (
    <motion.div
      initial={{ opacity: 0, x: -40 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.7, delay: 0.2, ease: 'easeOut' }}
      className="relative z-10 hidden lg:flex flex-col items-center justify-center w-1/2 max-w-lg mr-12"
    >
      <div className="relative">
        {/* Decorative orbiting circles */}
        <motion.div
          initial={{ scale: 0, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 0.6, delay: 0.3 }}
          className="absolute -top-8 -left-8 w-20 h-20 rounded-full bg-emerald-200/40 dark:bg-emerald-800/20 ring-4 ring-emerald-100/50 dark:ring-emerald-900/20"
        />
        <motion.div
          initial={{ scale: 0, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 0.6, delay: 0.4 }}
          className="absolute -bottom-10 -right-10 w-24 h-24 rounded-full bg-teal-200/40 dark:bg-teal-800/20 ring-4 ring-teal-100/50 dark:ring-teal-900/20"
        />
        <motion.div
          initial={{ scale: 0, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 0.6, delay: 0.5 }}
          className="absolute top-10 -right-6 w-12 h-12 rounded-full bg-amber-200/40 dark:bg-amber-800/20 ring-2 ring-amber-100/50 dark:ring-amber-900/20"
        />
        <motion.div
          initial={{ scale: 0, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 0.6, delay: 0.6 }}
          className="absolute -bottom-4 -left-6 w-10 h-10 rounded-full bg-violet-200/40 dark:bg-violet-800/20 ring-2 ring-violet-100/50 dark:ring-violet-900/20"
        />

        {/* Main icon with role-based animation */}
        <motion.div
          initial={{ scale: 0.8 }}
          animate={{ scale: 1 }}
          transition={{ duration: 0.5, delay: 0.1 }}
          className="flex items-center justify-center w-32 h-32 rounded-3xl bg-gradient-to-br from-emerald-400 via-teal-500 to-emerald-600 text-white shadow-2xl shadow-emerald-300/50 dark:shadow-emerald-900/50 ring-1 ring-white/20"
        >
          <AnimatePresence mode="wait">
            {loginRole === 'teacher' && (
              <motion.div key="teacher" initial={{ rotate: -90, opacity: 0, scale: 0.5 }} animate={{ rotate: 0, opacity: 1, scale: 1 }} exit={{ rotate: 90, opacity: 0, scale: 0.5 }} transition={{ duration: 0.35, type: 'spring', stiffness: 200 }}>
                <GraduationCap className="w-16 h-16" />
              </motion.div>
            )}
            {loginRole === 'student' && (
              <motion.div key="student" initial={{ rotate: -90, opacity: 0, scale: 0.5 }} animate={{ rotate: 0, opacity: 1, scale: 1 }} exit={{ rotate: 90, opacity: 0, scale: 0.5 }} transition={{ duration: 0.35, type: 'spring', stiffness: 200 }}>
                <UsersIcon className="w-16 h-16" />
              </motion.div>
            )}
            {loginRole === 'parent' && (
              <motion.div key="parent" initial={{ rotate: -90, opacity: 0, scale: 0.5 }} animate={{ rotate: 0, opacity: 1, scale: 1 }} exit={{ rotate: 90, opacity: 0, scale: 0.5 }} transition={{ duration: 0.35, type: 'spring', stiffness: 200 }}>
                <Heart className="w-16 h-16" />
              </motion.div>
            )}
          </AnimatePresence>
        </motion.div>
      </div>

      {/* Feature highlights */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.7 }}
        className="mt-12 space-y-4 text-center"
      >
        <p className="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100">SchulOS</p>
        <div className="space-y-3">
          {features.map((f, i) => {
            const c = colorClasses[f.color];
            return (
              <motion.div
                key={f.labelKey}
                initial={{ opacity: 0, x: -16 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.4, delay: 0.8 + i * 0.1 }}
                className="flex items-center gap-3"
              >
                <div className={`flex items-center justify-center w-9 h-9 rounded-xl ${c.bg} ${c.text} ring-1 ${c.ring}`}>
                  <f.icon className="w-4.5 h-4.5" />
                </div>
                <p className="text-sm text-gray-800 dark:text-gray-200 font-semibold">{t(f.labelKey)}</p>
              </motion.div>
            );
          })}
        </div>

        {/* Mockup dashboard preview */}
        <motion.div
          initial={{ opacity: 0, y: 14 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 1.3 }}
          className="relative z-10 mt-8 p-5 rounded-2xl bg-white dark:bg-gray-800 border border-emerald-300 dark:border-emerald-600 shadow-xl shadow-emerald-200/60 dark:shadow-emerald-950/50"
        >
          <div className="flex items-center gap-2 mb-3">
            <div className="w-2.5 h-2.5 rounded-full bg-red-400" />
            <div className="w-2.5 h-2.5 rounded-full bg-amber-400" />
            <div className="w-2.5 h-2.5 rounded-full bg-emerald-400" />
            <div className="ml-3 flex-1 h-2.5 rounded-full bg-emerald-100 dark:bg-emerald-900" />
          </div>
          <div className="grid grid-cols-3 gap-2">
            {[0, 1, 2, 3, 4, 5].map((i) => (
              <div key={i} className={`h-10 rounded-lg ${i % 3 === 0 ? 'bg-gradient-to-br from-emerald-100 to-emerald-200 dark:from-emerald-800 dark:to-emerald-900' : i % 3 === 1 ? 'bg-gradient-to-br from-teal-100 to-teal-200 dark:from-teal-800 dark:to-teal-900' : 'bg-gradient-to-br from-amber-100 to-amber-200 dark:from-amber-800 dark:to-amber-900'}`} />
            ))}
          </div>
          <div className="mt-3 space-y-2">
            <div className="h-2 w-full rounded-full bg-emerald-100 dark:bg-emerald-900" />
            <div className="h-2 w-3/4 rounded-full bg-teal-100 dark:bg-teal-900" />
            <div className="h-2 w-1/2 rounded-full bg-amber-100 dark:bg-amber-900" />
          </div>
        </motion.div>
      </motion.div>
    </motion.div>
  );
}

/* ─── Main Auth View ────────────────────────────────────────── */
export default function AuthView() {
  const [mode, setMode] = useState<'login' | 'register'>('login');
  const [loginRole, setLoginRole] = useState<LoginRole>('teacher');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [schoolIdInput, setSchoolIdInput] = useState('');
  const [loading, setLoading] = useState(false);
  const [demoLoading, setDemoLoading] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const [rememberMe, setRememberMe] = useState(true);
  const [showForgotInfo, setShowForgotInfo] = useState(false);
  const [showForgotModal, setShowForgotModal] = useState(false);
  const [forgotEmail, setForgotEmail] = useState('');
  const [forgotSent, setForgotSent] = useState(false);
  const setCurrentUser = useAppStore((s) => s.setCurrentUser);

  // Input validation state
  const emailValid = email.length > 0 && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  const emailTouched = email.length > 0;
  const passwordValid = password.length >= 6;
  const passwordTouched = password.length > 0;
  const firstNameValid = firstName.length > 0;
  const lastNameValid = lastName.length > 0;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      if (mode === 'login') {
        const user = await login(email, password);
        setCurrentUser(user);
        if (user.role === 'STUDENT') {
          toast.success(t('auth.student_welcome'));
        } else if (user.role === 'PARENT') {
          toast.success(t('auth.parent_welcome'));
        } else {
          toast.success(t('auth.welcome_back'));
        }
      } else {
        const user = await register({
          email,
          password,
          firstName,
          lastName,
        });
        setCurrentUser(user);
        toast.success(t('toast.created'));
      }
    } catch (err) {
      const message = err instanceof Error ? err.message : t('auth.error.generic');
      if (message.includes('credentials') || message.includes('Invalid')) {
        toast.error(t('auth.error.invalid_credentials'));
      } else if (message.includes('already') || message.includes('registered')) {
        toast.error(t('auth.error.email_exists'));
      } else {
        toast.error(message);
      }
    } finally {
      setLoading(false);
    }
  };

  const toggleMode = () => {
    setMode(mode === 'login' ? 'register' : 'login');
    setEmail('');
    setPassword('');
    setFirstName('');
    setLastName('');
    setSchoolIdInput('');
  };

  const handleDemoLogin = async (demoEmail: string, demoPassword: string) => {
    setDemoLoading(true);
    setMode('login');
    setEmail(demoEmail);
    setPassword(demoPassword);

    try {
      const user = await login(demoEmail, demoPassword);
      setCurrentUser(user);
      if (user.role === 'STUDENT') {
        toast.success(t('auth.student_welcome'));
      } else if (user.role === 'PARENT') {
        toast.success(t('auth.parent_welcome'));
      } else {
        toast.success(t('auth.welcome_back'));
      }
    } catch (err) {
      const message = err instanceof Error ? err.message : t('auth.error.generic');
      if (message.includes('credentials') || message.includes('Invalid')) {
        toast.error(t('auth.error.invalid_credentials'));
      } else {
        toast.error(message);
      }
    } finally {
      setDemoLoading(false);
    }
  };

  // Role tab config with enhanced visual distinction
  const roleTabs: Array<{
    key: LoginRole;
    icon: React.ElementType;
    labelKey: string;
    color: string;
    iconColor: string;
    activeColor: string;
    activeBg: string;
    bgGradient: string;
    hoverBg: string;
    indicatorColor: string;
    glowColor: string;
  }> = [
    {
      key: 'teacher',
      icon: GraduationCap,
      labelKey: 'auth.login',
      color: 'text-emerald-600 dark:text-emerald-400',
      iconColor: 'text-emerald-600 dark:text-emerald-400',
      activeColor: 'text-white',
      activeBg: 'bg-gradient-to-r from-emerald-500 to-teal-500',
      bgGradient: 'from-emerald-50/50 to-teal-50/50 dark:from-emerald-950/10 dark:to-teal-950/10',
      hoverBg: 'hover:bg-emerald-50/60 dark:hover:bg-emerald-950/20',
      indicatorColor: 'bg-emerald-500',
      glowColor: 'shadow-emerald-200/50 dark:shadow-emerald-900/30',
    },
    {
      key: 'student',
      icon: UsersIcon,
      labelKey: 'auth.student_login',
      color: 'text-emerald-600 dark:text-emerald-400',
      iconColor: 'text-emerald-600 dark:text-emerald-400',
      activeColor: 'text-white',
      activeBg: 'bg-gradient-to-r from-amber-500 to-orange-500',
      bgGradient: 'from-amber-50/50 to-orange-50/50 dark:from-amber-950/10 dark:to-orange-950/10',
      hoverBg: 'hover:bg-amber-50/60 dark:hover:bg-amber-950/20',
      indicatorColor: 'bg-amber-500',
      glowColor: 'shadow-amber-200/50 dark:shadow-amber-900/30',
    },
    {
      key: 'parent',
      icon: Heart,
      labelKey: 'auth.parent_login',
      color: 'text-emerald-600 dark:text-emerald-400',
      iconColor: 'text-emerald-600 dark:text-emerald-400',
      activeColor: 'text-white',
      activeBg: 'bg-gradient-to-r from-violet-500 to-purple-500',
      bgGradient: 'from-violet-50/50 to-purple-50/50 dark:from-violet-950/10 dark:to-purple-950/10',
      hoverBg: 'hover:bg-violet-50/60 dark:hover:bg-violet-950/20',
      indicatorColor: 'bg-violet-500',
      glowColor: 'shadow-violet-200/50 dark:shadow-violet-900/30',
    },
  ];

  const activeRoleTab = roleTabs.find((r) => r.key === loginRole)!;

  return (
    <div className="min-h-screen flex items-center justify-center animated-gradient-bg p-4 md:p-8 relative overflow-hidden">
      {/* Animated gradient background overlay */}
      <div className="absolute inset-0 bg-gradient-to-br from-emerald-50/80 via-white/60 to-teal-50/80 dark:from-gray-950/90 dark:via-gray-900/90 dark:to-emerald-950/90 pointer-events-none" />

      {/* Floating geometric shapes */}
      <FloatingShapes />

      {/* Floating particles */}
      <FloatingParticles />

      {/* Left illustration side (hidden on small screens) */}
      <LeftIllustration loginRole={loginRole} />

      {/* Auth form */}
      <motion.div
        initial={{ opacity: 0, y: 24 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: 'easeOut' }}
        className="w-full max-w-md md:max-w-lg relative z-10"
      >
        {/* Branding (mobile only) */}
        <div className="text-center mb-8 lg:hidden">
          <motion.div
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.5, delay: 0.1, type: 'spring', stiffness: 180 }}
            className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-emerald-400 to-teal-500 text-white mb-4 shadow-lg shadow-emerald-200/50 dark:shadow-emerald-900/50 ring-1 ring-white/20"
          >
            <BookOpen className="w-8 h-8" />
          </motion.div>
          <motion.h1
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.4, delay: 0.2 }}
            className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight"
          >
            {t('app.name')}
          </motion.h1>
        </div>

        {/* Auth Card - Glassmorphism */}
        <motion.div
          initial={{ opacity: 0, scale: 0.97 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.5, delay: 0.15 }}
        >
          <Card className="shadow-2xl border-0 shadow-emerald-100/60 dark:shadow-emerald-900/30 rounded-2xl overflow-hidden bg-white/80 dark:bg-gray-950/80 backdrop-blur-xl ring-1 ring-white/40 dark:ring-gray-800/40">
            {/* Role tabs with enhanced visual distinction */}
            <div className="flex border-b border-gray-100/80 dark:border-gray-800/80 bg-gray-50/50 dark:bg-gray-900/30">
              {roleTabs.map((tab, i) => (
                <motion.button
                  key={tab.key}
                  type="button"
                  onClick={() => { setLoginRole(tab.key); setShowForgotInfo(false); }}
                  className={`relative flex-1 min-h-[48px] flex items-center justify-center gap-2 px-3 py-3.5 text-sm font-semibold transition-all duration-300 ${
                    loginRole === tab.key
                      ? `${tab.activeBg} ${tab.activeColor} shadow-sm ${tab.glowColor}`
                      : `${tab.color} bg-transparent ${tab.hoverBg}`
                  }`}
                  initial={{ opacity: 0, y: -8 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.3, delay: 0.2 + i * 0.05 }}
                  whileHover={{ scale: loginRole === tab.key ? 1 : 1.02 }}
                  whileTap={{ scale: 0.98 }}
                >
                  <tab.icon className={`h-4.5 w-4.5 ${loginRole === tab.key ? 'text-white' : tab.iconColor}`} />
                  <span>{t(tab.labelKey)}</span>
                  {/* Active indicator */}
                  {loginRole === tab.key && (
                    <motion.div
                      layoutId="activeTabIndicator"
                      className="absolute bottom-0 left-2 right-2 h-0.5 rounded-full bg-white/60"
                      transition={{ type: 'spring', stiffness: 300, damping: 30 }}
                    />
                  )}
                </motion.button>
              ))}
            </div>

            <CardHeader className={`text-center pb-2 pt-6 bg-gradient-to-r ${activeRoleTab.bgGradient} transition-all duration-300`}>
              <AnimatePresence mode="wait">
                <motion.div key={loginRole} initial={{ opacity: 0, y: -8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 8 }} transition={{ duration: 0.25 }}>
                  <CardTitle className="text-xl font-bold text-gray-900 dark:text-gray-100">
                    {loginRole === 'teacher' ? (mode === 'login' ? t('auth.login') : t('auth.register_title'))
                      : loginRole === 'student' ? t('auth.student_login')
                      : t('auth.parent_login')}
                  </CardTitle>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1.5">
                    {loginRole === 'teacher' ? (mode === 'login' ? t('auth.login_subtitle') : t('auth.register_subtitle'))
                      : loginRole === 'student' ? t('auth.student_login_desc')
                      : t('auth.parent_login_desc')}
                  </p>
                </motion.div>
              </AnimatePresence>
            </CardHeader>

            <CardContent className="pt-6 pb-6">
              <motion.form
                onSubmit={handleSubmit}
                className="space-y-5"
                variants={containerVariants}
                initial="hidden"
                animate="visible"
              >
                <AnimatePresence mode="wait">
                  {/* Name fields for register (teacher only) */}
                  {mode === 'register' && loginRole === 'teacher' && (
                    <motion.div key="name-fields" initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.25 }} className="space-y-4">
                      <motion.div variants={itemVariants} className="grid grid-cols-2 gap-3">
                        <div className="space-y-2">
                          <Label htmlFor="firstName" className="text-sm font-medium">{t('auth.firstName')}</Label>
                          <div className="relative">
                            <User className="pointer-events-none absolute z-10 left-3.5 top-1/2 -translate-y-1/2 h-5 w-5 text-emerald-600 dark:text-emerald-400" />
                            <Input id="firstName" value={firstName} onChange={(e) => setFirstName(e.target.value)} className={`pl-10 pr-9 h-12 min-h-[44px] bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-all duration-200 ${
                              firstName.length > 0 && firstNameValid ? 'input-valid border-emerald-400 dark:border-emerald-500'
                                : firstName.length > 0 && !firstNameValid ? 'input-invalid border-red-300 dark:border-red-700'
                                : 'border-emerald-200 dark:border-emerald-800 focus:border-emerald-400 focus:ring-emerald-400/20'
                            }`} placeholder={t('auth.firstName')} required />
                            {firstName.length > 0 && (
                              <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ type: 'spring', stiffness: 300, damping: 20 }} className="absolute right-2.5 top-1/2 -translate-y-1/2">
                                {firstNameValid ? <CheckCircle2 className="h-4 w-4 text-emerald-500" /> : <XCircle className="h-4 w-4 text-red-400" />}
                              </motion.div>
                            )}
                          </div>
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="lastName" className="text-sm font-medium">{t('auth.lastName')}</Label>
                          <div className="relative">
                            <Input id="lastName" value={lastName} onChange={(e) => setLastName(e.target.value)} className={`pr-9 h-12 min-h-[44px] bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-all duration-200 ${
                              lastName.length > 0 && lastNameValid ? 'input-valid border-emerald-400 dark:border-emerald-500'
                                : lastName.length > 0 && !lastNameValid ? 'input-invalid border-red-300 dark:border-red-700'
                                : 'border-emerald-200 dark:border-emerald-800 focus:border-emerald-400 focus:ring-emerald-400/20'
                            }`} placeholder={t('auth.lastName')} required />
                            {lastName.length > 0 && (
                              <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ type: 'spring', stiffness: 300, damping: 20 }} className="absolute right-2.5 top-1/2 -translate-y-1/2">
                                {lastNameValid ? <CheckCircle2 className="h-4 w-4 text-emerald-500" /> : <XCircle className="h-4 w-4 text-red-400" />}
                              </motion.div>
                            )}
                          </div>
                        </div>
                      </motion.div>
                    </motion.div>
                  )}

                  {/* Student-specific: School ID field */}
                  {loginRole === 'student' && (
                    <motion.div key="school-id" initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.25 }} className="space-y-2">
                      <Label htmlFor="schoolId" className="text-sm font-medium">{t('auth.school_id')}</Label>
                      <div className="relative">
                        <Info className="pointer-events-none absolute z-10 left-3.5 top-1/2 -translate-y-1/2 h-5 w-5 text-emerald-600 dark:text-emerald-400" />
                        <Input id="schoolId" value={schoolIdInput} onChange={(e) => setSchoolIdInput(e.target.value)} className="pl-10 h-12 min-h-[44px] border-emerald-200 dark:border-emerald-800 focus:border-emerald-400 focus:ring-emerald-400/20 text-base bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400" placeholder={t('auth.school_id')} />
                      </div>
                    </motion.div>
                  )}

                  {/* Parent-specific: name fields on login */}
                  {loginRole === 'parent' && mode === 'login' && (
                    <motion.div key="parent-name" initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.25 }}>
                      <div className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-emerald-50/50 dark:bg-emerald-900/10 border border-emerald-100/50 dark:border-emerald-900/20 backdrop-blur-sm">
                        <Heart className="h-4 w-4 text-emerald-500" />
                        <p className="text-xs text-emerald-700 dark:text-emerald-300 font-medium">{t('auth.parent_login_desc')}</p>
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>

                {/* Email field (always shown) with validation feedback */}
                <motion.div variants={itemVariants} className="space-y-2">
                  <Label htmlFor="email" className="text-sm font-medium">{t('auth.email')}</Label>
                  <div className="relative">
                    <Mail className="pointer-events-none absolute z-10 left-3.5 top-1/2 -translate-y-1/2 h-5 w-5 text-emerald-600 dark:text-emerald-400" />
                    <Input
                      id="email"
                      type="email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      className={`pl-10 pr-10 h-12 min-h-[44px] text-base bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-all duration-200 ${
                        emailTouched && emailValid ? 'input-valid border-emerald-400 dark:border-emerald-500 focus:border-emerald-500 focus:ring-emerald-400/20'
                          : emailTouched && !emailValid ? 'input-invalid border-red-300 dark:border-red-700 focus:border-red-400 focus:ring-red-400/20'
                          : 'border-emerald-200 dark:border-emerald-800 focus:border-emerald-400 focus:ring-emerald-400/20'
                      } ${
                        loginRole === 'student' ? 'focus:border-amber-400 focus:ring-amber-400/20'
                          : loginRole === 'parent' ? 'focus:border-violet-400 focus:ring-violet-400/20'
                          : ''
                      }`}
                      placeholder={loginRole === 'student' ? 'name@schule.de' : loginRole === 'parent' ? 'parent@email.de' : 'name@schule.de'}
                      required
                    />
                    {/* Validation icon */}
                    {emailTouched && (
                      <motion.div
                        initial={{ scale: 0, opacity: 0 }}
                        animate={{ scale: 1, opacity: 1 }}
                        transition={{ type: 'spring', stiffness: 300, damping: 20 }}
                        className="absolute right-3.5 top-1/2 -translate-y-1/2"
                      >
                        {emailValid ? (
                          <CheckCircle2 className="h-5 w-5 text-emerald-500" />
                        ) : (
                          <XCircle className="h-5 w-5 text-red-400" />
                        )}
                      </motion.div>
                    )}
                  </div>
                </motion.div>

                {/* Password field with validation feedback */}
                <motion.div variants={itemVariants} className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label htmlFor="password" className="text-sm font-medium">{t('auth.password')}</Label>
                    {mode === 'login' && (
                      <motion.button
                        type="button"
                        onClick={() => setShowForgotModal(true)}
                        className="text-xs text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300 font-medium transition-colors"
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.95 }}
                      >
                        {t('auth.forgot_password')}
                      </motion.button>
                    )}
                  </div>
                  <div className="relative">
                    <Lock className="pointer-events-none absolute z-10 left-3.5 top-1/2 -translate-y-1/2 h-5 w-5 text-emerald-600 dark:text-emerald-400" />
                    <Input
                      id="password"
                      type={showPassword ? 'text' : 'password'}
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      className={`pl-9 pr-12 h-12 min-h-[44px] bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-all duration-200 ${
                        passwordTouched && passwordValid ? 'input-valid border-emerald-400 dark:border-emerald-500 focus:border-emerald-500 focus:ring-emerald-400/20'
                          : passwordTouched && !passwordValid ? 'input-invalid border-red-300 dark:border-red-700 focus:border-red-400 focus:ring-red-400/20'
                          : 'border-emerald-200 dark:border-emerald-800 focus:border-emerald-400 focus:ring-emerald-400/20'
                      }`}
                      placeholder="••••••"
                      minLength={6}
                      required
                    />
                    {/* Validation icon */}
                    {passwordTouched && (
                      <motion.div
                        initial={{ scale: 0, opacity: 0 }}
                        animate={{ scale: 1, opacity: 1 }}
                        transition={{ type: 'spring', stiffness: 300, damping: 20 }}
                        className="absolute right-10 top-1/2 -translate-y-1/2"
                      >
                        {passwordValid ? (
                          <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                        ) : (
                          <XCircle className="h-4 w-4 text-red-400" />
                        )}
                      </motion.div>
                    )}
                    <motion.button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute right-3.5 top-1/2 -translate-y-1/2 text-emerald-400 hover:text-emerald-600 dark:hover:text-emerald-300 transition-colors w-6 h-6 flex items-center justify-center"
                      tabIndex={-1}
                      aria-label={showPassword ? t('polish.hide_password') : t('polish.show_password')}
                      whileHover={{ scale: 1.1 }}
                      whileTap={{ scale: 0.9 }}
                    >
                      {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                    </motion.button>
                  </div>

                  {/* Password strength indicator (register mode) */}
                  {mode === 'register' && passwordTouched && (
                    <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} transition={{ duration: 0.2 }}>
                      <div className="flex gap-1 mt-1">
                        {[1, 2, 3, 4].map((level) => (
                          <div
                            key={level}
                            className={`h-1 flex-1 rounded-full transition-colors duration-300 ${
                              password.length >= level * 2
                                ? level <= 1 ? 'bg-red-400'
                                  : level <= 2 ? 'bg-amber-400'
                                  : level <= 3 ? 'bg-emerald-400'
                                  : 'bg-teal-400'
                                : 'bg-gray-200 dark:bg-gray-700'
                            }`}
                          />
                        ))}
                      </div>
                      <p className="text-[10px] mt-1 text-gray-500 dark:text-gray-400">
                        {password.length < 4 ? t('auth.password_weak') || 'Weak' : password.length < 6 ? t('auth.password_fair') || 'Fair' : password.length < 8 ? t('auth.password_good') || 'Good' : t('auth.password_strong') || 'Strong'}
                      </p>
                    </motion.div>
                  )}

                  {/* Forgot Password info */}
                  <AnimatePresence>
                    {showForgotInfo && (
                      <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.25 }} className="mt-2">
                        <div className="flex items-start gap-2 px-3 py-3 rounded-xl bg-emerald-50/50 dark:bg-emerald-900/10 border border-emerald-200/30 dark:border-emerald-900/20 backdrop-blur-sm">
                          <HelpCircle className="h-4 w-4 text-emerald-500 shrink-0 mt-0.5" />
                          <p className="text-xs text-emerald-700 dark:text-emerald-300">
                            {loginRole === 'student'
                              ? (t('polish.demo_email') + ': demo.student@competencetrack.org / ' + t('polish.demo_password') + ': Demo2025!')
                              : loginRole === 'parent'
                              ? (t('polish.demo_email') + ': demo.parent@competencetrack.org / ' + t('polish.demo_password') + ': Demo2025!')
                              : (t('polish.demo_email') + ': demo@competencetrack.org / ' + t('polish.demo_password') + ': Demo2025!')
                            }
                          </p>
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </motion.div>

                {/* Remember me (login mode only) */}
                {mode === 'login' && (
                  <motion.div variants={itemVariants} className="flex items-center gap-2">
                    <Checkbox id="remember" checked={rememberMe} onCheckedChange={(v) => setRememberMe(v === true)} className="border-emerald-300 dark:border-emerald-700 data-[state=checked]:bg-emerald-500 data-[state=checked]:border-emerald-500" />
                    <Label htmlFor="remember" className="text-xs text-gray-600 dark:text-gray-400 cursor-pointer">{t('polish.remember_me')}</Label>
                  </motion.div>
                )}

                {/* Submit button with glow effect */}
                <motion.div variants={itemVariants}>
                  <Button
                    type="submit"
                    className={`group relative w-full h-12 min-h-[44px] text-white shadow-lg rounded-xl text-base font-semibold overflow-hidden transition-all duration-300 ${
                      loginRole === 'teacher' ? 'bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 shadow-emerald-300/30 dark:shadow-emerald-900/30 hover:shadow-emerald-300/50 dark:hover:shadow-emerald-900/50'
                        : loginRole === 'student' ? 'bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 shadow-amber-300/30 dark:shadow-amber-900/30 hover:shadow-amber-300/50 dark:hover:shadow-amber-900/50'
                        : 'bg-gradient-to-r from-violet-500 to-purple-500 hover:from-violet-600 hover:to-purple-600 shadow-violet-300/30 dark:shadow-violet-900/30 hover:shadow-violet-300/50 dark:hover:shadow-violet-900/50'
                    }`}
                    disabled={loading || demoLoading}
                  >
                    {/* Glow effect layer */}
                    <div className="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-white/10" />
                    <motion.div
                      className="absolute inset-0 rounded-xl"
                      animate={{
                        boxShadow: loginRole === 'teacher'
                          ? ['0 0 0px rgba(16,185,129,0)', '0 0 20px rgba(16,185,129,0.15)', '0 0 0px rgba(16,185,129,0)']
                          : loginRole === 'student'
                          ? ['0 0 0px rgba(245,158,11,0)', '0 0 20px rgba(245,158,11,0.15)', '0 0 0px rgba(245,158,11,0)']
                          : ['0 0 0px rgba(139,92,246,0)', '0 0 20px rgba(139,92,246,0.15)', '0 0 0px rgba(139,92,246,0)'],
                      }}
                      transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
                    />
                    <span className="relative z-10 flex items-center justify-center gap-2">
                      {loading || demoLoading ? (
                        <>
                          <span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
                          {demoLoading ? t('auth.demo_logging_in') : t('empty.loading')}
                        </>
                      ) : (
                        <>
                          {mode === 'login' ? t('auth.login') : t('auth.register')}
                          <ArrowRight className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-1" />
                        </>
                      )}
                    </span>
                  </Button>
                </motion.div>
              </motion.form>

              {/* Role-specific demo login buttons */}
              {mode === 'login' && (
                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.3, duration: 0.4 }}
                  className="mt-6"
                >
                  <div className="text-center mb-3">
                    <div className="flex items-center justify-center gap-1.5">
                      <KeyRound className="h-3.5 w-3.5 text-emerald-500" />
                      <p className="text-sm font-semibold text-gray-700 dark:text-gray-300">{t('auth.demo_section_title')}</p>
                      <Badge className="bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 border-emerald-200/50 dark:border-emerald-900/30 text-[10px] px-1.5 py-0">{t('badge.demo')}</Badge>
                    </div>
                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{t('auth.demo_section_subtitle')}</p>
                  </div>
                  <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                    {DEMO_ACCOUNTS.map((demo, i) => (
                      <motion.div
                        key={demo.email}
                        initial={{ opacity: 0, scale: 0.9 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ delay: 0.35 + i * 0.06, duration: 0.3 }}
                      >
                        <Button
                          type="button"
                          variant="outline"
                          onClick={() => handleDemoLogin(demo.email, demo.password)}
                          disabled={loading || demoLoading}
                          className={`group min-h-12 h-auto w-full min-w-0 px-2 py-2 rounded-xl border-0 bg-gradient-to-r ${demo.colorClass} text-white font-semibold text-sm shadow-lg flex items-center justify-center gap-1.5 hover:shadow-xl hover:scale-[1.01] active:scale-[0.99] transition-all duration-200`}
                        >
                          <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white/90 text-emerald-600">
                            <demo.icon className="h-4 w-4 transition-transform duration-200 group-hover:scale-110" />
                          </span>
                          <span className="min-w-0 break-words text-center leading-tight">{t(demo.labelKey)}</span>
                        </Button>
                      </motion.div>
                    ))}
                  </div>
                </motion.div>
              )}

              {/* Toggle register/login (only for teacher role) */}
              {loginRole === 'teacher' && (
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ delay: 0.4 }}
                  className="mt-6 text-center"
                >
                  <motion.button
                    type="button"
                    onClick={toggleMode}
                    className="text-sm text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300 font-medium transition-colors"
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                  >
                    {mode === 'login' ? t('auth.no_account') : t('auth.has_account')}
                  </motion.button>
                </motion.div>
              )}

              {/* Student info: accounts created by teachers */}
              {loginRole === 'student' && mode === 'login' && (
                <motion.div
                  initial={{ opacity: 0, y: 8 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.4 }}
                  className="mt-5 text-center space-y-2"
                >
                  <div className="flex items-center justify-center gap-2 px-4 py-3 rounded-xl bg-amber-50/50 dark:bg-amber-900/10 border border-amber-200/30 dark:border-amber-900/20 backdrop-blur-sm">
                    <Info className="h-4 w-4 text-amber-500" />
                    <p className="text-xs text-amber-700 dark:text-amber-300 font-medium">
                      {t('auth.create_student_account')} — {t('auth.student_login_desc')}
                    </p>
                  </div>
                  {/* Jugendschutz notice for students */}
                  <div className="flex items-center justify-center gap-2 px-4 py-3 rounded-xl bg-emerald-50/50 dark:bg-emerald-900/10 border border-emerald-200/30 dark:border-emerald-900/20 backdrop-blur-sm">
                    <Shield className="h-4 w-4 text-emerald-500" />
                    <p className="text-xs text-emerald-700 dark:text-emerald-300 font-medium">
                      {t('dsgvo.jugendschutz_login_notice')}
                    </p>
                  </div>
                </motion.div>
              )}

              {/* Parent info */}
              {loginRole === 'parent' && mode === 'login' && (
                <motion.div
                  initial={{ opacity: 0, y: 8 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.4 }}
                  className="mt-5 text-center"
                >
                  <div className="flex items-center justify-center gap-2 px-4 py-3 rounded-xl bg-violet-50/50 dark:bg-violet-900/10 border border-violet-200/30 dark:border-violet-900/20 backdrop-blur-sm">
                    <Heart className="h-4 w-4 text-violet-500" />
                    <p className="text-xs text-violet-700 dark:text-violet-300 font-medium">
                      {t('parent.my_children')} — {t('auth.parent_login_desc')}
                    </p>
                  </div>
                </motion.div>
              )}
            </CardContent>
          </Card>
        </motion.div>

        {/* Footer */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.8, duration: 0.5 }}
          className="mt-8 text-center flex items-center justify-center gap-1.5"
        >
          <Leaf className="h-3.5 w-3.5 text-emerald-500/40 dark:text-emerald-400/30" />
          <p className="text-xs text-emerald-600/40 dark:text-emerald-400/30">{t('app.tagline')}</p>
        </motion.div>
      </motion.div>

      {/* Forgot Password Modal */}
      <Dialog open={showForgotModal} onOpenChange={setShowForgotModal}>
        <DialogContent className="sm:max-w-md glass-card rounded-2xl border-0">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-lg">
              <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-400 to-teal-500 text-white shadow-sm">
                <LockKeyhole className="h-4 w-4" />
              </div>
              {t('auth.forgot_password')}
            </DialogTitle>
            <DialogDescription className="text-sm text-gray-500 dark:text-gray-400 mt-2">
              {t('auth.forgot_password_desc') || 'Enter your email address and we will send you a link to reset your password.'}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-2">
            {forgotSent ? (
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ type: 'spring', stiffness: 200, damping: 20 }}
                className="flex flex-col items-center py-4"
              >
                <div className="flex items-center justify-center w-14 h-14 rounded-full bg-emerald-100 dark:bg-emerald-900/30 mb-4">
                  <CheckCircle2 className="h-7 w-7 text-emerald-500" />
                </div>
                <p className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1">{t('auth.forgot_email_sent') || 'Reset link sent!'}</p>
                <p className="text-xs text-gray-500 dark:text-gray-400 text-center">{t('auth.forgot_check_inbox') || 'Check your inbox for the password reset link.'}</p>
              </motion.div>
            ) : (
              <>
                <div className="relative">
                  <Mail className="absolute left-3.5 top-1/2 -translate-y-1/2 h-5 w-5 text-emerald-400" />
                  <Input
                    value={forgotEmail}
                    onChange={(e) => setForgotEmail(e.target.value)}
                    className="pl-10 h-12 border-emerald-200/50 dark:border-emerald-900/30 focus:border-emerald-400 focus:ring-emerald-400/20 bg-white/60 dark:bg-gray-900/40 backdrop-blur-sm"
                    placeholder="name@schule.de"
                    type="email"
                  />
                </div>
                {/* Demo credentials reminder */}
                <div className="flex items-start gap-2 px-3 py-3 rounded-xl bg-emerald-50/50 dark:bg-emerald-900/10 border border-emerald-200/30 dark:border-emerald-900/20 backdrop-blur-sm">
                  <HelpCircle className="h-4 w-4 text-emerald-500 shrink-0 mt-0.5" />
                  <p className="text-xs text-emerald-700 dark:text-emerald-300">
                    {t('polish.demo_email')}: demo@competencetrack.org / {t('polish.demo_password')}: Demo2025!
                  </p>
                </div>
              </>
            )}
          </div>
          <DialogFooter className="flex-row gap-2 sm:justify-end">
            {forgotSent ? (
              <Button
                onClick={() => { setShowForgotModal(false); setForgotSent(false); setForgotEmail(''); }}
                className="bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white min-h-[44px] px-5 font-semibold"
              >
                {t('auth.back_to_login') || 'Back to login'}
              </Button>
            ) : (
              <>
                <Button
                  variant="outline"
                  onClick={() => setShowForgotModal(false)}
                  className="min-h-[44px] px-4"
                >
                  {t('auth.cancel') || 'Cancel'}
                </Button>
                <Button
                  onClick={() => { setForgotSent(true); toast.success(t('auth.forgot_email_sent') || 'Reset link sent!'); }}
                  disabled={!forgotEmail || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(forgotEmail)}
                  className="bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white min-h-[44px] px-5 font-semibold"
                >
                  {t('auth.send_reset_link') || 'Send reset link'}
                  <ArrowRight className="h-4 w-4 ml-1.5" />
                </Button>
              </>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}