pb_authenticator/lib/pages/how_it_works.dart

import 'package:flutter/material.dart';
import 'package:introduction_screen/introduction_screen.dart';
import '../l10n/app_localizations.dart';

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

  List<PageViewModel> _getPages(BuildContext context) {
    return [
      PageViewModel(
        title: AppLocalizations.of(context)?.howItWorksTitle1 ?? 'Secure your accounts',
        body: AppLocalizations.of(context)?.howItWorksBody1 ?? 'Add your accounts to generate time-based one-time passwords (TOTP) for secure sign-in.',
        image: const Icon(Icons.security, size: 120, color: Colors.blue),
      ),
      PageViewModel(
        title: AppLocalizations.of(context)?.howItWorksTitle2 ?? 'Scan QR codes',
        body: AppLocalizations.of(context)?.howItWorksBody2 ?? 'Easily add new accounts by scanning QR codes provided by your services.',
        image: const Icon(Icons.qr_code_scanner, size: 120, color: Colors.green),
      ),
      PageViewModel(
        title: AppLocalizations.of(context)?.howItWorksTitle3 ?? 'Backup & Restore',
        body: AppLocalizations.of(context)?.howItWorksBody3 ?? 'Backup your accounts securely and restore them when needed.',
        image: const Icon(Icons.backup, size: 120, color: Colors.orange),
      ),
      PageViewModel(
        title: AppLocalizations.of(context)?.howItWorksTitle4 ?? 'Offline & Private',
        body: AppLocalizations.of(context)?.howItWorksBody4 ?? 'All data stays on your device. No internet required for generating codes.',
        image: const Icon(Icons.lock, size: 120, color: Colors.purple),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return IntroductionScreen(
      pages: _getPages(context),
      showSkipButton: true,
      skip: Text(AppLocalizations.of(context)?.skip ?? 'Skip'),
      next: const Icon(Icons.arrow_forward),
      done: Text(AppLocalizations.of(context)?.done ?? 'Done', style: const TextStyle(fontWeight: FontWeight.w600)),
      onDone: () => Navigator.of(context).pop(),
      onSkip: () => Navigator.of(context).pop(),
      dotsDecorator: const DotsDecorator(
        size: Size(10.0, 10.0),
        color: Colors.black26,
        activeSize: Size(22.0, 10.0),
        activeColor: Colors.blue,
        activeShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(25.0)),
        ),
      ),
    );
  }
}