export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex min-h-screen">
      {/* Left side - branding */}
      <div className="hidden lg:flex lg:w-1/2 flex-col justify-between bg-primary p-12 text-primary-foreground">
        <div>
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/20 backdrop-blur">
              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 2a2 2 0 0 0-2 2v5H4a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h5v5c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-5h5a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-5V4a2 2 0 0 0-2-2h-2z"/></svg>
            </div>
            <span className="text-2xl font-bold">CRM Clinicas</span>
          </div>
        </div>
        <div className="space-y-6">
          <blockquote className="text-lg font-medium leading-relaxed opacity-90">
            &ldquo;Simplificamos la gestion de tu clinica para que te enfoques en lo que importa: tus pacientes.&rdquo;
          </blockquote>
          <div className="flex items-center gap-4">
            <div className="h-px flex-1 bg-white/20" />
            <span className="text-sm opacity-70">Gestion medica inteligente</span>
            <div className="h-px flex-1 bg-white/20" />
          </div>
          <div className="grid grid-cols-3 gap-4 text-center">
            <div className="rounded-lg bg-white/10 p-4 backdrop-blur">
              <div className="text-2xl font-bold">100%</div>
              <div className="text-xs opacity-70">Digital</div>
            </div>
            <div className="rounded-lg bg-white/10 p-4 backdrop-blur">
              <div className="text-2xl font-bold">NOM</div>
              <div className="text-xs opacity-70">Cumplimiento</div>
            </div>
            <div className="rounded-lg bg-white/10 p-4 backdrop-blur">
              <div className="text-2xl font-bold">CFDI</div>
              <div className="text-xs opacity-70">Facturacion</div>
            </div>
          </div>
        </div>
        <p className="text-sm opacity-60">&copy; 2026 CRM Clinicas. Todos los derechos reservados.</p>
      </div>
      {/* Right side - form */}
      <div className="flex w-full items-center justify-center p-6 lg:w-1/2">
        <div className="w-full max-w-[420px]">{children}</div>
      </div>
    </div>
  );
}
