import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:glassmorphism/glassmorphism.dart';
import 'package:regroup/Utils/Common/CustomNextButton.dart';
import 'package:regroup/Utils/Common/sized_box.dart';
import 'package:regroup/Utils/texts.dart';
import 'package:regroup/resources/routes/route_name.dart';

class Onboarding1 extends StatefulWidget {
  const Onboarding1({super.key});

  @override
  State<Onboarding1> createState() => _Onboarding1State();
}

class _Onboarding1State extends State<Onboarding1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.center,
              end: Alignment.bottomCenter,
              colors: [
                Color(0xFF222935).withOpacity(0.12),
                Color(0xFF222935).withOpacity(0.60),
                Color(0XFF222B37),
                Color(0xFF222935),
              ],
            ),
            image: DecorationImage(
                image: AssetImage("assets/images/png/onboarding1.png"),
                fit: BoxFit.fill)),
        child: Stack(children: [
          Positioned(
            top: 800,
            left: 0,
            child: Container(
              height: 70.h,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                // shape: BoxShape.circle,
                color:
                    //  Colors.red
                    Color(0xFF009DAB).withOpacity(0.50),
              ),
            ),
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Spacer(),
              SvgPicture.asset(
                "assets/images/svg/onboarding2.svg",
                width: 104.w,
                height: 104.h,
              ),
              const Spacer(
                flex: 8,
              ),
              SizedBox(
                width: 301.w,
                height: 64.h,
                child: text22400white(
                    "Find motivation and support from like-minded people"),
              ),
              sizedBoxHeight(30.h),
              GlassmorphicContainer(
                width: MediaQuery.of(context).size.width,
                height: 180.h,
                borderRadius: 2,
                blur: 30,
                alignment: Alignment.bottomLeft,
                border: 2,
                linearGradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.centerRight,
                  colors: [
                    Color(0xFF222935).withOpacity(0.12),
                    Color(0xFF222935).withOpacity(0.60),
                    Color(0XFF222B37).withOpacity(0.12),
                    Color(0xFF222935).withOpacity(0.60),
                  ],
                ),
                borderGradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Color(0xFF222935).withOpacity(0.12),
                    Color(0xFF222935).withOpacity(0.60),
                    Color(0XFF222B37),
                    Color(0xFF222935),
                  ],
                ),
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.w),
                  child: Column(
                    children: [
                      CustomButton(
                          text: "Sign up",
                          onPressed: () {
                            Get.toNamed(RouteName.signupscreen);
                          }),
                      sizedBoxHeight(30.h),
                      CustomButton2(
                          text: "Login",
                          onPressed: () {
                            Get.toNamed(RouteName.loginScreen);
                          }),
                      // sizedBoxHeight(10.h),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ]),
      ),
    );
  }
}