import { Link } from 'react-router-dom';
import { GraduationCap } from 'lucide-react';

export default function AuthLayout({ title, subtitle, children, footer }) {
  return (
    <div className="flex min-h-screen">
      <div className="hidden lg:flex lg:w-1/2 flex-col justify-between bg-gradient-to-br from-brand-950 via-brand-800 to-brand-900 p-12 text-white">
        <Link to="/" className="flex items-center gap-3">
          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white/10 ring-1 ring-white/20">
            <GraduationCap className="h-7 w-7 text-accent-400" />
          </div>
          <span className="font-display text-2xl font-bold">EduPay</span>
        </Link>
        <div>
          <h1 className="font-display text-4xl font-bold leading-tight">
            Smart payroll for
            <span className="block text-accent-400">modern schools</span>
          </h1>
          <p className="mt-4 max-w-md text-lg text-brand-200">
            Manage staff salaries, departments, and monthly pay runs — all in one beautiful dashboard.
          </p>
          <div className="mt-10 grid grid-cols-3 gap-4">
            {['6+ Staff', '5 Depts', 'Real-time'].map((t) => (
              <div
                key={t}
                className="rounded-xl bg-white/10 px-4 py-3 text-center text-sm font-medium ring-1 ring-white/10"
              >
                {t}
              </div>
            ))}
          </div>
        </div>
        <p className="text-sm text-brand-300">© 2026 EduPay School Payroll</p>
      </div>

      <div className="flex flex-1 items-center justify-center p-8">
        <div className="w-full max-w-md animate-slide-up">
          <div className="mb-8 lg:hidden flex items-center gap-3">
            <GraduationCap className="h-8 w-8 text-brand-600" />
            <span className="font-display text-2xl font-bold text-slate-800">EduPay</span>
          </div>
          <h2 className="font-display text-2xl font-bold text-slate-800">{title}</h2>
          <p className="mt-1 text-slate-500">{subtitle}</p>
          {children}
          {footer}
        </div>
      </div>
    </div>
  );
}
