shaynee-flutter/lib/screens/onboarding/s04_social_proof.dart

import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import '../../theme.dart';
import '../../widgets/s_button.dart';
import '../../router.dart';
import 's05_name.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: SColors.bgSurface,
      body: SafeArea(
        child: Column(
          children: [
            // Illustration zone
            Expanded(
              flex: 40,
              child: Center(
                child: _StatsVisual()
                    .animate()
                    .fadeIn(duration: 500.ms, delay: 100.ms)
                    .scaleXY(begin: 0.9, end: 1.0, duration: 500.ms, curve: Curves.easeOut),
              ),
            ),
            // Content zone
            Expanded(
              flex: 60,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(height: 8),
                    Text('Trusted by\n50,000+ women', style: SText.headline2(SColors.textHead))
                        .animate().fadeIn(duration: 400.ms, delay: 200.ms)
                        .slideY(begin: 0.06, end: 0, duration: 400.ms),
                    const SizedBox(height: 12),
                    _testimonial().animate().fadeIn(duration: 400.ms, delay: 360.ms),
                    const Spacer(),
                    Row(
                      children: List.generate(3, (i) => _statChip(i)),
                    ).animate().fadeIn(duration: 400.ms, delay: 480.ms),
                    const SizedBox(height: 20),
                    SButton(
                      label: "BUILD MY ROUTINE",
                      onTap: () => Navigator.of(context).push(slideRoute(NameScreen())),
                    ).animate().fadeIn(duration: 400.ms, delay: 560.ms),
                    const SizedBox(height: 20),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _testimonial() {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: SColors.primaryLight,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: SColors.borderLight),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('⭐⭐⭐⭐⭐', style: TextStyle(fontSize: 16)),
          const SizedBox(height: 8),
          Text(
            '"My skin cleared up in 3 weeks. The routine Shaynee built actually works — I finally know what I\'m putting on my face."',
            style: SText.body(SColors.textBody).copyWith(fontStyle: FontStyle.italic),
          ),
          const SizedBox(height: 8),
          Text('— Ayla K., 28', style: SText.caption(SColors.textSub)),
        ],
      ),
    );
  }

  Widget _statChip(int i) {
    const data = [('50K+', 'Users'), ('4.9★', 'Rating'), ('94%', 'Results')];
    final (value, label) = data[i];
    return Expanded(
      child: Container(
        margin: EdgeInsets.only(right: i < 2 ? 8 : 0),
        padding: const EdgeInsets.symmetric(vertical: 14),
        decoration: BoxDecoration(
          color: SColors.bgSurface,
          borderRadius: BorderRadius.circular(14),
          border: Border.all(color: SColors.borderLight, width: 1.5),
        ),
        child: Column(
          children: [
            Text(value, style: SText.title(SColors.primary)),
            const SizedBox(height: 2),
            Text(label, style: SText.caption(SColors.textSub)),
          ],
        ),
      ),
    );
  }
}

class _StatsVisual extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        Container(
          width: 160, height: 160,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: SColors.primaryLight,
          ),
        ),
        const Text('💜', style: TextStyle(fontSize: 64))
            .animate(onPlay: (c) => c.repeat(reverse: true))
            .scaleXY(begin: 0.95, end: 1.05, duration: 1800.ms, curve: Curves.easeInOut),
      ],
    );
  }
}