feat(ads): enhance demo interstitial ad dialog with countdown timer

- Transform DemoInterstitialAdDialog from StatelessWidget to StatefulWidget
- Add countdown timer before close button is enabled
- Display countdown value on the dialog
- Update UI to show disabled close button with countdown

Author: fulleni

lib/ads/widgets/demo_interstitial_ad_dialog.dart

@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_news_app_mobile_client_full_source_code/l10n/app_localizations.dart';
 import 'package:ui_kit/ui_kit.dart';
@@ -6,15 +8,53 @@ import 'package:ui_kit/ui_kit.dart';
 /// A dialog widget that displays a placeholder for an interstitial ad in demo mode.
 ///
 /// This dialog mimics a full-screen interstitial ad but contains only static
-/// text to indicate it's a demo.
+/// text to indicate it's a demo. It includes a countdown before the close
+/// button is enabled.
 /// {@endtemplate}
-class DemoInterstitialAdDialog extends StatelessWidget {
+class DemoInterstitialAdDialog extends StatefulWidget {
   /// {@macro demo_interstitial_ad_dialog}
   const DemoInterstitialAdDialog({super.key});
 
+  @override
+  State<DemoInterstitialAdDialog> createState() =>
+      _DemoInterstitialAdDialogState();
+}
+
+class _DemoInterstitialAdDialogState extends State<DemoInterstitialAdDialog> {
+  static const int _countdownDuration = 5;
+  int _countdown = _countdownDuration;
+  Timer? _timer;
+
+  @override
+  void initState() {
+    super.initState();
+    _startTimer();
+  }
+
+  void _startTimer() {
+    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
+      if (_countdown > 0) {
+        setState(() {
+          _countdown--;
+        });
+      } else {
+        _timer?.cancel();
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    _timer?.cancel();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
+    final l10n = AppLocalizations.of(context);
+    final canClose = _countdown == 0;
+
     return Dialog.fullscreen(
       backgroundColor: theme.colorScheme.surface,
       child: Stack(
@@ -25,15 +65,15 @@ class DemoInterstitialAdDialog extends StatelessWidget {
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
                   Text(
-                    AppLocalizations.of(context).demoInterstitialAdText,
+                    l10n.demoInterstitialAdText,
                     style: theme.textTheme.titleLarge?.copyWith(
                       color: theme.colorScheme.onSurface,
                     ),
                     textAlign: TextAlign.center,
                   ),
                   const SizedBox(height: AppSpacing.md),
                   Text(
-                    AppLocalizations.of(context).demoInterstitialAdDescription,
+                    l10n.demoInterstitialAdDescription,
                     style: theme.textTheme.bodyMedium?.copyWith(
                       color: theme.colorScheme.onSurfaceVariant,
                     ),
@@ -46,13 +86,39 @@ class DemoInterstitialAdDialog extends StatelessWidget {
           Positioned(
             top: AppSpacing.lg,
             right: AppSpacing.lg,
-            child: IconButton(
-              icon: Icon(Icons.close, color: theme.colorScheme.onSurface),
-              onPressed: () {
-                // Dismiss the dialog.
-                Navigator.of(context).pop();
-              },
-            ),
+            child: canClose
+                ? IconButton(
+                    icon:
+                        Icon(Icons.close, color: theme.colorScheme.onSurface),
+                    onPressed: () => Navigator.of(context).pop(),
+                  )
+                : Container(
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: AppSpacing.sm,
+                      vertical: AppSpacing.xs,
+                    ),
+                    decoration: BoxDecoration(
+                      color: theme.colorScheme.onSurface.withOpacity(0.1),
+                      borderRadius: BorderRadius.circular(AppSpacing.lg),
+                    ),
+                    child: Row(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Text(
+                          '$_countdown',
+                          style: theme.textTheme.bodySmall?.copyWith(
+                            color: theme.colorScheme.onSurface,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                        const SizedBox(width: AppSpacing.xs),
+                        Icon(
+                          Icons.close,
+                          color: theme.colorScheme.onSurface.withOpacity(0.5),
+                        ),
+                      ],
+                    ),
+                  ),
           ),
         ],
       ),