import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('About Payfrit'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(24),
        children: [
          // Logo/Icon
          Center(
            child: Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                color: Theme.of(context).colorScheme.primaryContainer,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Icon(
                Icons.restaurant_menu,
                size: 50,
                color: Theme.of(context).colorScheme.primary,
              ),
            ),
          ),
          const SizedBox(height: 24),

          // App name
          Center(
            child: Text(
              'Payfrit',
              style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                    fontWeight: FontWeight.bold,
                  ),
            ),
          ),
          const SizedBox(height: 4),

          // Version
          Center(
            child: Text(
              'Version 0.1.0',
              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                    color: Theme.of(context).colorScheme.onSurfaceVariant,
                  ),
            ),
          ),
          const SizedBox(height: 32),

          // Description
          Text(
            'Payfrit makes dining out easier. Order from your table, split the bill with friends, and pay without waiting.',
            style: Theme.of(context).textTheme.bodyLarge,
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 32),

          // Features section
          _buildSectionHeader(context, 'Features'),
          const SizedBox(height: 12),
          _buildFeatureItem(
            context,
            Icons.qr_code_scanner,
            'Scan & Order',
            'Scan the table beacon to browse the menu and order directly from your phone',
          ),
          _buildFeatureItem(
            context,
            Icons.group,
            'Group Orders',
            'Invite friends to join your order and split the bill easily',
          ),
          _buildFeatureItem(
            context,
            Icons.delivery_dining,
            'Delivery & Takeaway',
            'Order for delivery or pick up when dining in isn\'t an option',
          ),
          _buildFeatureItem(
            context,
            Icons.payment,
            'Easy Payment',
            'Pay your share securely with just a few taps',
          ),

          const SizedBox(height: 32),

          // Contact section
          _buildSectionHeader(context, 'Contact'),
          const SizedBox(height: 12),
          ListTile(
            leading: const Icon(Icons.email_outlined),
            title: const Text('support@payfrit.com'),
            contentPadding: EdgeInsets.zero,
          ),
          ListTile(
            leading: const Icon(Icons.language),
            title: const Text('www.payfrit.com'),
            contentPadding: EdgeInsets.zero,
          ),

          const SizedBox(height: 32),

          // Legal
          Center(
            child: Text(
              '\u00a9 2025 Payfrit. All rights reserved.',
              style: Theme.of(context).textTheme.bodySmall?.copyWith(
                    color: Theme.of(context).colorScheme.onSurfaceVariant,
                  ),
            ),
          ),
          const SizedBox(height: 16),
        ],
      ),
    );
  }

  Widget _buildSectionHeader(BuildContext context, String title) {
    return Text(
      title,
      style: Theme.of(context).textTheme.titleMedium?.copyWith(
            fontWeight: FontWeight.bold,
            color: Theme.of(context).colorScheme.primary,
          ),
    );
  }

  Widget _buildFeatureItem(
    BuildContext context,
    IconData icon,
    String title,
    String description,
  ) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: const EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: Theme.of(context).colorScheme.primaryContainer.withValues(alpha: 0.5),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Icon(
              icon,
              size: 24,
              color: Theme.of(context).colorScheme.primary,
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: Theme.of(context).textTheme.titleSmall?.copyWith(
                        fontWeight: FontWeight.w600,
                      ),
                ),
                const SizedBox(height: 2),
                Text(
                  description,
                  style: Theme.of(context).textTheme.bodySmall?.copyWith(
                        color: Theme.of(context).colorScheme.onSurfaceVariant,
                      ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}