import 'package:detective_mind/common/extensions/media_query_extension.dart'; import 'package:flutter/material.dart';

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

@override Widget build(BuildContext context) { double height = context.screenHeight; return Scaffold( backgroundColor: const Color(0xFF111418), body: SafeArea( child: Column( children: [ // Top Image Section Container( width: double.infinity, height: height * 0.4,

          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage(
                'assets/images/detect.png',
              ), // ✅ using asset image
              fit: BoxFit.cover,
            ),
            borderRadius: BorderRadius.circular(12),
          ),
        ),

        const SizedBox(height: 16),

        // Buttons
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Column(
            children: [
              // Continue with Email
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xFF4793ea),
                  minimumSize: const Size.fromHeight(48),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
                onPressed: () {},
                child: const Text(
                  'Continue with Email',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                    letterSpacing: 0.015,
                    color: Colors.white,
                  ),
                ),
              ),
              const SizedBox(height: 12),

              // Continue with Google
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xFF293038),
                  minimumSize: const Size.fromHeight(48),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
                onPressed: () {},
                child: const Text(
                  'Continue with Google',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                    letterSpacing: 0.015,
                    color: Colors.white,
                  ),
                ),
              ),
              const SizedBox(height: 12),

              // Play as Guest
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xFF293038),
                  minimumSize: const Size.fromHeight(48),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
                onPressed: () {},
                child: const Text(
                  'Play as Guest',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                    letterSpacing: 0.015,
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        ),

        const SizedBox(height: 16),

        // Terms Text
        const Padding(
          padding: EdgeInsets.symmetric(horizontal: 16),
          child: Text(
            'By continuing, you agree to our Terms of Service and Privacy Policy.',
            textAlign: TextAlign.center,
            style: TextStyle(color: Color(0xFF9daab8), fontSize: 13),
          ),
        ),

        const Spacer(),

        // Bottom Spacer
        Container(height: 20, color: Color(0xFF111418)),
      ],
    ),
  ),
);

} } make this more beautiful page and lets gamify the elements to present this like a game nterface in dart