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

class SignupScreen extends StatefulWidget {
  final QuizState state;
  const SignupScreen({super.key, required this.state});
  @override
  State<SignupScreen> createState() => _State();
}

class _State extends State<SignupScreen> {
  final _email = TextEditingController();
  bool _ready = false;

  @override
  void initState() {
    super.initState();
    _email.addListener(() => setState(
      () => _ready = _email.text.contains('@') && _email.text.contains('.'),
    ));
  }

  @override
  void dispose() { _email.dispose(); super.dispose(); }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: SColors.bgSurface,
      resizeToAvoidBottomInset: true,
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              flex: 38,
              child: Container(
                color: SColors.primaryLight,
                width: double.infinity,
                child: Center(
                  child: Mascot(mood: MascotMood.wave, size: 140)
                      .animate().fadeIn(duration: 600.ms).slideY(begin: 0.08, end: 0),
                ),
              ),
            ),
            Expanded(
              flex: 62,
              child: SingleChildScrollView(
                padding: const EdgeInsets.symmetric(horizontal: 24),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(height: 20),
                    Text('Save your\nresults 🔒', style: SText.headline2(SColors.textHead))
                        .animate().fadeIn(duration: 400.ms, delay: 200.ms)
                        .slideY(begin: 0.05, end: 0),
                    const SizedBox(height: 8),
                    Text('Create a free account to access your personalised routine anytime.',
                        style: SText.subtitle(SColors.textSub))
                        .animate().fadeIn(duration: 400.ms, delay: 280.ms),
                    const SizedBox(height: 24),
                    _inputField('Email address', _email, TextInputType.emailAddress)
                        .animate().fadeIn(duration: 400.ms, delay: 360.ms),
                    const SizedBox(height: 12),
                    _benefitsList()
                        .animate().fadeIn(duration: 400.ms, delay: 440.ms),
                    const SizedBox(height: 24),
                    SButton(
                      label: 'CREATE FREE ACCOUNT',
                      enabled: _ready,
                      onTap: _ready ? () => Navigator.of(context).push(
                        scaleRoute(WelcomeScreen(state: widget.state))
                      ) : null,
                    ).animate().fadeIn(duration: 400.ms, delay: 520.ms),
                    const SizedBox(height: 12),
                    Center(
                      child: GestureDetector(
                        onTap: () => Navigator.of(context).push(scaleRoute(WelcomeScreen(state: widget.state))),
                        child: Text('Maybe later', style: SText.caption(SColors.textSub)),
                      ),
                    ).animate().fadeIn(duration: 400.ms, delay: 580.ms),
                    const SizedBox(height: 20),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _inputField(String hint, TextEditingController ctrl, TextInputType type) {
    return Container(
      decoration: BoxDecoration(
        color: SColors.bgSurface,
        borderRadius: BorderRadius.circular(14),
        border: Border.all(color: SColors.borderMedium, width: 1.5),
      ),
      child: TextField(
        controller: ctrl,
        keyboardType: type,
        style: SText.cardLabel(SColors.textHead).copyWith(fontSize: 16),
        decoration: InputDecoration(
          hintText: hint,
          hintStyle: SText.cardLabel(SColors.textDisabled).copyWith(fontSize: 16, fontWeight: FontWeight.w500),
          border: InputBorder.none,
          contentPadding: const EdgeInsets.symmetric(horizontal: 18, vertical: 16),
        ),
      ),
    );
  }

  Widget _benefitsList() {
    const items = [
      (Icons.sync_rounded, 'Routine syncs across devices'),
      (Icons.notifications_rounded, 'Daily check-in reminders'),
      (Icons.trending_up_rounded, 'Track your skin progress'),
    ];
    return Column(
      children: items.map((item) => Padding(
        padding: const EdgeInsets.only(bottom: 10),
        child: Row(
          children: [
            Container(
              width: 28, height: 28,
              decoration: const BoxDecoration(color: SColors.primaryLight, shape: BoxShape.circle),
              child: Icon(item.$1, size: 14, color: SColors.primary),
            ),
            const SizedBox(width: 10),
            Text(item.$2, style: SText.body(SColors.textBody)),
          ],
        ),
      )).toList(),
    );
  }
}