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

import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import '../../theme.dart';
import '../../widgets/mascot.dart';
import '../../widgets/s_button.dart';
import '../../model/quiz_state.dart';
import '../../router.dart';
import 's19_signup.dart';

class IngredientScienceScreen extends StatelessWidget {
  final QuizState state;
  const IngredientScienceScreen({super.key, required this.state});

  @override
  Widget build(BuildContext context) {
    final (hero, title, body, ingredients) = _content(state);

    return Scaffold(
      backgroundColor: SColors.bgSurface,
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              flex: 40,
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Mascot(mood: MascotMood.analyze, size: 160)
                      .animate().fadeIn(duration: 500.ms).slideY(begin: 0.06, end: 0),
                  Positioned(
                    top: 20, right: 40,
                    child: Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(
                        color: SColors.bgSurface,
                        borderRadius: BorderRadius.circular(14),
                        border: Border.all(color: SColors.borderLight),
                      ),
                      child: Text(hero, style: const TextStyle(fontSize: 28)),
                    ).animate().fadeIn(duration: 400.ms, delay: 600.ms)
                     .scaleXY(begin: 0.6, end: 1.0, duration: 400.ms, curve: Curves.elasticOut),
                  ),
                ],
              ),
            ),
            Expanded(
              flex: 60,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(height: 8),
                    _badge('🔬 Ingredient science')
                        .animate().fadeIn(duration: 350.ms, delay: 100.ms),
                    const SizedBox(height: 14),
                    Text(title, style: SText.headline2(SColors.textHead))
                        .animate().fadeIn(duration: 400.ms, delay: 180.ms)
                        .slideY(begin: 0.05, end: 0),
                    const SizedBox(height: 8),
                    Text(body, style: SText.subtitle(SColors.textSub))
                        .animate().fadeIn(duration: 400.ms, delay: 260.ms),
                    const SizedBox(height: 16),
                    Wrap(
                      spacing: 8, runSpacing: 8,
                      children: ingredients.asMap().entries.map((e) =>
                        _chip(e.value, e.key)
                      ).toList(),
                    ).animate().fadeIn(duration: 400.ms, delay: 360.ms),
                    const Spacer(),
                    SButton(
                      label: 'SAVE MY RESULTS',
                      onTap: () => Navigator.of(context).push(slideRoute(SignupScreen(state: state))),
                    ).animate().fadeIn(duration: 400.ms, delay: 500.ms),
                    const SizedBox(height: 12),
                    Center(
                      child: GestureDetector(
                        onTap: () => Navigator.of(context).push(slideRoute(SignupScreen(state: state))),
                        child: Text('Skip for now', style: SText.caption(SColors.textSub)),
                      ),
                    ).animate().fadeIn(duration: 400.ms, delay: 560.ms),
                    const SizedBox(height: 20),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  (String, String, String, List<String>) _content(QuizState state) {
    if (state.concerns.contains('Dark spots')) {
      return ('☀️', 'Your skin needs\nVitamin C + SPF', 'This combo fades dark spots faster than any other. Vitamin C inhibits melanin production, SPF stops new ones forming.', ['Vitamin C 15%', 'Niacinamide', 'Alpha Arbutin', 'SPF 50+']);
    }
    if (state.concerns.contains('Fine lines')) {
      return ('⏳', 'Retinol is\nyour best ally', 'The most clinically proven anti-aging ingredient. Starts at 0.3%, works up to 1%. Use at night only.', ['Retinol 0.3%', 'Peptides', 'Hyaluronic acid', 'SPF 50+']);
    }
    if (state.concerns.contains('Breakouts')) {
      return ('🫧', 'Your skin needs\nSalicylic acid', 'BHA that gets inside pores to clear them out. 2% is the sweet spot — effective without over-drying.', ['Salicylic acid 2%', 'Niacinamide 10%', 'Benzoyl peroxide', 'Zinc']);
    }
    return ('💧', 'Hydration is\neverything', 'A healthy moisture barrier is the foundation of all great skin. These ingredients rebuild and lock it in.', ['Hyaluronic acid', 'Ceramides', 'Glycerin', 'Squalane']);
  }

  Widget _badge(String label) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      decoration: BoxDecoration(color: SColors.primaryLight, borderRadius: BorderRadius.circular(20)),
      child: Text(label, style: SText.caption(SColors.primary).copyWith(fontWeight: FontWeight.w700)),
    );
  }

  Widget _chip(String label, int i) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 7),
      decoration: BoxDecoration(
        color: SColors.bgSurface,
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: SColors.primary.withAlpha(80)),
      ),
      child: Text(label, style: SText.caption(SColors.primary).copyWith(fontWeight: FontWeight.w600)),
    )
        .animate(delay: (i * 80).ms)
        .fadeIn(duration: 250.ms)
        .scaleXY(begin: 0.8, end: 1.0, duration: 250.ms, curve: Curves.easeOut);
  }
}