import 'package:flutter/material.dart';
import '../constants.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('About AtmoSphere')),
      body: ListView(
        padding: const EdgeInsets.all(24.0),
        children: [
          const SizedBox(height: 20),
          // App Icon/Logo
          Center(
            child: Container(
              width: 120,
              height: 120,
              decoration: BoxDecoration(
                color: Colors.blueAccent.withOpacity(0.2),
                borderRadius: BorderRadius.circular(30),
              ),
              child: const Icon(
                Icons.wb_sunny,
                size: 60,
                color: Colors.blueAccent,
              ),
            ),
          ),
          const SizedBox(height: 32),
          // App Name
          const Center(
            child: Text(
              'AtmoSphere',
              style: TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
          const SizedBox(height: 8),
          // Version
          Center(
            child: Text(
              'Version 1.1.0',
              style: TextStyle(
                fontSize: 16,
                color: Colors.white.withOpacity(0.7),
              ),
            ),
          ),
          const SizedBox(height: 48),
          // Description
          Container(
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: kCardBackground,
              borderRadius: kCardBorderRadius,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  'Description',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                const SizedBox(height: 12),
                Text(
                  'AtmoSphere is a beautiful weather app that provides real-time weather information with dynamic wallpapers that change based on current weather conditions. Stay informed about the weather in your favorite cities with an elegant and intuitive interface.',
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.white.withOpacity(0.8),
                    height: 1.5,
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 24),
          // Features
          Container(
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: kCardBackground,
              borderRadius: kCardBorderRadius,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  'Features',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                const SizedBox(height: 16),
                _FeatureItem(
                  icon: Icons.location_on,
                  text: 'Multi-city weather tracking',
                ),
                const SizedBox(height: 12),
                _FeatureItem(
                  icon: Icons.wallpaper,
                  text: 'Dynamic wallpapers based on weather',
                ),
                const SizedBox(height: 12),
                _FeatureItem(
                  icon: Icons.calendar_today,
                  text: '7-day weather forecast',
                ),
                const SizedBox(height: 12),
                _FeatureItem(
                  icon: Icons.notifications,
                  text: 'Weather alerts and notifications',
                ),
              ],
            ),
          ),
          const SizedBox(height: 24),
          // Copyright
          Center(
            child: Text(
              '© 2024 AtmoSphere',
              style: TextStyle(
                fontSize: 12,
                color: Colors.white.withOpacity(0.5),
              ),
            ),
          ),
          const SizedBox(height: 8),
          Center(
            child: Text(
              'All rights reserved',
              style: TextStyle(
                fontSize: 12,
                color: Colors.white.withOpacity(0.5),
              ),
            ),
          ),
          const SizedBox(height: 40),
        ],
      ),
    );
  }
}

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(
      children: [
        Icon(icon, color: Colors.blueAccent, size: 20),
        const SizedBox(width: 12),
        Expanded(
          child: Text(
            text,
            style: TextStyle(
              fontSize: 14,
              color: Colors.white.withOpacity(0.8),
            ),
          ),
        ),
      ],
    );
  }
}