import 'package:flutter/material.dart';

class BackgroundAuth extends StatelessWidget {
  const BackgroundAuth({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Color(0xFF42A4EF), Color(0xFF1565C0)],
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(16),
            ),
            child: Image.network(
              'https://prosapp.co/img/logo_prosapp.png',
              height: 48,
              fit: BoxFit.contain,
              errorBuilder: (_, __, ___) => const Text(
                'ProsApp',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Color(0xFF42A4EF)),
              ),
            ),
          ),
          const SizedBox(height: 24),
          const Text(
            'Conecta con los mejores\nprofesionales',
            textAlign: TextAlign.center,
            style: TextStyle(color: Colors.white70, fontSize: 16, height: 1.5),
          ),
          const SizedBox(height: 48),
          _FeatureItem(icon: Icons.verified_user_outlined, text: 'Profesionales verificados'),
          const SizedBox(height: 12),
          _FeatureItem(icon: Icons.star_outline, text: 'Calificaciones reales'),
          const SizedBox(height: 12),
          _FeatureItem(icon: Icons.chat_bubble_outline, text: 'Chat directo'),
        ],
      ),
    );
  }
}

class _FeatureItem extends StatelessWidget {
  final IconData icon;
  final String text;
  const _FeatureItem({required this.icon, required this.text});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(icon, color: Colors.white70, size: 18),
        const SizedBox(width: 8),
        Text(text, style: const TextStyle(color: Colors.white70, fontSize: 14)),
      ],
    );
  }
}