shaynee-flutter/lib/screens/onboarding/s03_value_prop.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 's04_social_proof.dart';

class ValuePropScreen extends StatefulWidget {
  const ValuePropScreen({super.key});
  @override
  State<ValuePropScreen> createState() => _State();
}

class _State extends State<ValuePropScreen> {
  int _page = 0;

  static const _props = [
    (Icons.auto_awesome_rounded, '🔬', 'AI-powered\nskin analysis', 'Upload a selfie or answer quick\nquestions — Shaynee reads your skin.'),
    (Icons.science_rounded, '💧', 'Ingredient\nscience', 'Know what every product does to\nyour skin before you buy it.'),
    (Icons.trending_up_rounded, '📈', 'Routine that\ngets results', '94% of users see visible improvement\nwithin 4 weeks.'),
  ];

  @override
  Widget build(BuildContext context) {
    final (_, emoji, title, sub) = _props[_page];
    final isLast = _page == _props.length - 1;

    return Scaffold(
      backgroundColor: SColors.bgSurface,
      body: SafeArea(
        child: Column(
          children: [
            // Illustration zone
            Expanded(
              flex: 45,
              child: AnimatedSwitcher(
                duration: const Duration(milliseconds: 350),
                child: _IllustrationCard(key: ValueKey(_page), emoji: emoji),
              ),
            ),
            // Content zone
            Expanded(
              flex: 55,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(height: 8),
                    // Dots
                    Row(
                      children: List.generate(_props.length, (i) => _dot(i)),
                    ).animate().fadeIn(duration: 400.ms),
                    const SizedBox(height: 20),
                    AnimatedSwitcher(
                      duration: const Duration(milliseconds: 300),
                      child: Column(
                        key: ValueKey(_page),
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(title, style: SText.headline2(SColors.textHead))
                              .animate().fadeIn(duration: 350.ms).slideX(begin: 0.04, end: 0),
                          const SizedBox(height: 10),
                          Text(sub, style: SText.subtitle(SColors.textSub))
                              .animate().fadeIn(duration: 350.ms, delay: 80.ms),
                        ],
                      ),
                    ),
                    const Spacer(),
                    SButton(
                      label: isLast ? 'SOUNDS GOOD' : 'NEXT',
                      onTap: () {
                        if (isLast) {
                          Navigator.of(context).push(slideRoute(const SocialProofScreen()));
                        } else {
                          setState(() => _page++);
                        }
                      },
                    ).animate().fadeIn(duration: 400.ms, delay: 200.ms),
                    const SizedBox(height: 12),
                    if (!isLast)
                      Center(
                        child: GestureDetector(
                          onTap: () => Navigator.of(context).push(slideRoute(const SocialProofScreen())),
                          child: Text('Skip', style: SText.caption(SColors.textSub)),
                        ),
                      ),
                    const SizedBox(height: 20),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _dot(int i) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 250),
      margin: const EdgeInsets.only(right: 6),
      width: _page == i ? 20 : 8,
      height: 8,
      decoration: BoxDecoration(
        color: _page == i ? SColors.primary : SColors.borderLight,
        borderRadius: BorderRadius.circular(4),
      ),
    );
  }
}

class _IllustrationCard extends StatelessWidget {
  final String emoji;
  const _IllustrationCard({super.key, required this.emoji});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 160,
        height: 160,
        decoration: BoxDecoration(
          color: SColors.primaryLight,
          borderRadius: BorderRadius.circular(40),
          border: Border.all(color: SColors.borderLight, width: 1.5),
        ),
        alignment: Alignment.center,
        child: Text(emoji, style: const TextStyle(fontSize: 72)),
      )
          .animate(onPlay: (c) => c.repeat(reverse: true))
          .moveY(begin: 0, end: -8, duration: 2000.ms, curve: Curves.easeInOut),
    );
  }
}