---

import 'package:flutter/material.dart';

void main() {
  runApp(const DNSApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'DNS',
      theme: ThemeData(
        scaffoldBackgroundColor: const Color(0xFFFDFDFD),
        fontFamily: 'Roboto',
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFFCE7549),
        ),
      ),
      home: const ArticlePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    const textColor = Color(0xFF505050);

    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: SingleChildScrollView(
                padding: const EdgeInsets.fromLTRB(
                  18, 22, 18, 12,
                ),
                child: Center(
                  child: ConstrainedBox(
                    constraints: const BoxConstraints(
                      maxWidth: 620,
                    ),
                    child: Column(
                      crossAxisAlignment:
                          CrossAxisAlignment.start,
                      children: [
                        const Text(
                          'DNS',
                          style: TextStyle(
                            fontSize: 22,
                            fontWeight: FontWeight.bold,
                            color: Color(0xFFB87857),
                          ),
                        ),

                        const SizedBox(height: 20),

                        const Text(
                          'Покрытие подошвы у утюгов: какие лучше '
                          'и что выбрать',
                          style: TextStyle(
                            fontSize: 25,
                            height: 1.35,
                            fontWeight: FontWeight.w800,
                            color: textColor,
                          ),
                        ),

                        const SizedBox(height: 14),

                        const IronImage(
                          assetPath: 'assets/iron1.jpg',
                        ),

                        const SizedBox(height: 8),

                        const Text(
                          'Автор изображения: ВИДЕОСТУДИЯ КЛУБА DNS '
                          'Источник: youtube.ru',
                          style: TextStyle(
                            fontSize: 11,
                            color: Color(0xFF777777),
                          ),
                        ),

                        const SizedBox(height: 30),

                        const Text(
                          'Паровой удар: зачем он нужен и как им '
                          'пользоваться',
                          style: TextStyle(
                            fontSize: 25,
                            height: 1.4,
                            fontWeight: FontWeight.w800,
                            color: textColor,
                          ),
                        ),

                        const SizedBox(height: 16),

                        const IronImage(
                          assetPath: 'assets/iron2.jpg',
                        ),

                        const SizedBox(height: 20),
                      ],
                    ),
                  ),
                ),
              ),
            ),

            const BottomNavigation(),
          ],
        ),
      ),
    );
  }
}

class IronImage extends StatelessWidget {
  final String assetPath;

  const IronImage({
    super.key,
    required this.assetPath,
  });

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1.62,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(19),
        child: Image.asset(
          assetPath,
          fit: BoxFit.cover,
          errorBuilder: (context, error, stackTrace) {
            return Container(
              color: const Color(0xFF777469),
              alignment: Alignment.center,
              child: const Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    Icons.iron,
                    size: 75,
                    color: Colors.white70,
                  ),
                  SizedBox(height: 8),
                  Text(
                    'Фотография утюга',
                    style: TextStyle(color: Colors.white),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    const inactive = Color(0xFF777777);
    const active = Color(0xFFB87857);

    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        border: Border(
          top: BorderSide(
            color: Color(0xFFEAEAEA),
            width: 0.6,
          ),
        ),
      ),
      padding: const EdgeInsets.only(
        top: 8,
        bottom: 5,
      ),
      child: const Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          NavItem(
            icon: Icons.home,
            label: 'Главная',
            selected: true,
          ),
          NavItem(
            icon: Icons.grid_view,
            label: 'Каталог',
          ),
          NavItem(
            icon: Icons.search,
            label: 'Поиск',
          ),
          NavItem(
            icon: Icons.shopping_cart_outlined,
            label: 'Корзина',
          ),
          NavItem(
            icon: Icons.location_on_outlined,
            label: 'Профиль',
          ),
        ],
      ),
    );
  }
}

class NavItem extends StatelessWidget {
  final IconData icon;
  final String label;
  final bool selected;

  const NavItem({
    super.key,
    required this.icon,
    required this.label,
    this.selected = false,
  });

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(
            icon,
            size: 25,
            color: selected
                ? const Color(0xFFB87857)
                : const Color(0xFF777777),
          ),
          const SizedBox(height: 5),
          Text(
            label,
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 10,
              color: selected
                  ? const Color(0xFFB87857)
                  : const Color(0xFF777777),
            ),
          ),
        ],
      ),
    );
  }
}