import 'package:citycards_customer/common_packages/app_bar.dart';
import 'package:citycards_customer/common_packages/custom_filled_button.dart';
import 'package:citycards_customer/common_packages/custom_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                color: Colors.white,
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                child: CommonAppBar(isWhiteLogo: false, isProfilePage: false),
              ),

              /************************* Top Banner  ***********************/
              Stack(
                children: [
                  Image.asset(
                    "assets/images/esim_top_bg.png",
                    width: double.infinity,
                  ),
                  Positioned(
                    top: 32.h,
                    left: 24.w,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          height: 48.h,
                          width: 48.w,
                          decoration: BoxDecoration(
                            color: Color(0xFFFFFFFF).withOpacity(.2),
                            borderRadius: BorderRadius.circular(20.r),
                          ),
                          child: Icon(Icons.wifi, color: Colors.white),
                        ),

                        SizedBox(height: 24.h),
                        SizedBox(
                          width: 350.w,
                          child: CustomText(
                            text:
                                "Stay Connected Instantly with Your Complimentary eSIM",
                            size: 22.sp,
                            color: Color(0xFFFFFFFF),
                          ),
                        ),
                        SizedBox(height: 12.h),
                        SizedBox(
                          width: 350,
                          child: CustomText(
                            text:
                                "Because every unforgettable trip starts with seamless connectivity.",
                            size: 14.sp,
                            color: Colors.white,
                          ),
                        ),
                        SizedBox(height: 22.h),
                        Container(
                          height: 48.h,
                          width: 165.w,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(38.r),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black12,
                                offset: Offset(4, 4),
                                blurRadius: 5,
                              ),
                            ],
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              CustomText(
                                text: "View Plans",
                                size: 16.sp,
                                color: Color(0xFFF95F62),
                              ),
                              SizedBox(width: 6.w),
                              Icon(
                                Icons.arrow_forward,
                                color: Color(0xFFF95F62),
                                size: 18,
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),

              SizedBox(height: 32.h),

              Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: "With your ",
                      style: TextStyle(
                        fontSize: 26.sp,
                        fontWeight: FontWeight.w300,
                      ),
                    ),
                    TextSpan(
                      text: "eSIM",
                      style: TextStyle(
                        color: Color(0xFFF95F62),
                        fontSize: 26.sp,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                    TextSpan(
                      text: ", you can:",
                      style: TextStyle(
                        fontSize: 26.sp,
                        fontWeight: FontWeight.w300,
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 37.h),
              ServiceCard(
                "assets/icons/esim_location.png",
                "Navigate the city with ease",
                "Access real-time maps and directions wherever you go",
              ),
              SizedBox(height: 28.h),
              ServiceCard(
                "assets/icons/esim_phone.png",
                "Book rides, access maps, and find attractions in real time",
                "Stay connected to all essential travel services",
              ),
              SizedBox(height: 28.h),
              ServiceCard(
                "assets/icons/esim_camera.png",
                "Share photos and memories instantly",
                "Upload and share your travel moments without delay",
              ),
              SizedBox(height: 28.h),
              ServiceCard(
                "assets/icons/esim_people.png",
                "Stay connected with friends, family, and travel plans",
                "Never miss important updates or messages while traveling",
              ),

              SizedBox(height: 75.h),

              Container(
                width: double.infinity,
                padding: EdgeInsets.only(
                  left: 33.w,
                  right: 33.w,
                  top: 70.h,
                  bottom: 37.h,
                ),
                color: Color(0xFFFFF5F5),
                child: Column(
                  children: [
                    Text.rich(
                      TextSpan(
                        children: [
                          TextSpan(
                            text: "Simple ",
                            style: TextStyle(fontSize: 26.sp),
                          ),
                          TextSpan(
                            text: "3-Step Process",
                            style: TextStyle(
                              color: Color(0xFFF95F62),
                              fontSize: 26.sp,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(height: 16.h),
                    CustomText(
                      text: "Get connected in seconds",
                      size: 17.5,
                      color: Color(0xFF4B5563),
                    ),
                    SizedBox(height: 56.h),
                    ProcessCard(
                      "Receive QR Code",
                      "Get your unique eSIM QR code with your CityCard",
                      "1",
                      "assets/icons/process_qr.png",
                    ),
                    SizedBox(height: 28.h),
                    ProcessCard(
                      "Scan Code",
                      "Open your phone camera and scan the QR code",
                      "2",
                      "assets/icons/process_phone.png",
                    ),
                    SizedBox(height: 28.h),
                    ProcessCard(
                      "Connected",
                      "You're online instantly - start exploring!",
                      "3",
                      "assets/icons/process_wifi.png",
                    ),
                  ],
                ),
              ),

              Stack(
                children: [
                  Image.asset(
                    'assets/images/esim_bottom_banner.png',
                    fit: BoxFit.contain,
                  ),
                  Positioned.fill(
                    child: Container(
                      height: double.infinity,
                      width: double.infinity,
                      color: Colors.black.withOpacity(.68),
                    ),
                  ),
                  Positioned.fill(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text.rich(
                          TextSpan(
                            children: [
                              TextSpan(
                                text: "It's one more way",
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 21.sp,
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                              TextSpan(
                                text: " CityCard",
                                style: TextStyle(
                                  color: Color(0xFFF95F62),
                                  fontSize: 21.sp,
                                  fontWeight: FontWeight.w700,
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 4.h,),
                        Text.rich(
                          TextSpan(
                            children: [
                              TextSpan(
                                text: "makes your journey",
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 21.sp,
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                              TextSpan(
                                text: " smarter",
                                style: TextStyle(
                                  color: Color(0xFFF95F62),
                                  fontSize: 21.sp,
                                  fontWeight: FontWeight.w700,
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 4.h,),
                        Text.rich(
                          TextSpan(
                            children: [
                              TextSpan(
                                text: "and more",
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 21.sp,
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                              TextSpan(
                                text: " effortless",
                                style: TextStyle(
                                  color: Color(0xFFF95F62),
                                  fontSize: 21.sp,
                                  fontWeight: FontWeight.w700,
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 28.h,),
                        CustomFilledButton(onTap: (){}, label: "Start Your Journey Today", height: 60.h, width: 300.w,showArrow: true,),
                      ],
                    ),
                  ),
                ],
              ),
              SizedBox(height: 150.h,)
            ],
          ),
        ),
      ),
    );
  }

  Widget ServiceCard(String icon, String title, String subTitle) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 28.w),
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 21.h, horizontal: 21.w),
        decoration: BoxDecoration(
          color: Color(0xFFFFF5F5),
          borderRadius: BorderRadius.circular(14.r),
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Image.asset(icon, scale: 4),
            SizedBox(width: 14.w),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w600,
                    ),
                    softWrap: true,
                  ),
                  SizedBox(height: 6.h),
                  Text(
                    subTitle,
                    style: TextStyle(fontSize: 14.sp, color: Color(0xFF4B5563)),
                    softWrap: true,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget ProcessCard(String title, String subTitle, String count, String icon) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 28.h, horizontal: 28.w),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(color: Colors.black12, offset: Offset(0, 5), blurRadius: 5),
        ],
        borderRadius: BorderRadius.circular(14.sp),
      ),
      child: Column(
        children: [
          Container(
            height: 56.h,
            width: 56.w,
            decoration: BoxDecoration(
              color: Color(0xFFF95F62),
              borderRadius: BorderRadius.circular(30.r),
            ),
            child: Center(
              child: CustomText(
                text: count,
                size: 21.sp,
                weight: FontWeight.w700,
                color: Colors.white,
              ),
            ),
          ),
          SizedBox(height: 21.h),
          Image.asset(icon, scale: 4),
          SizedBox(height: 14.h),
          CustomText(text: title, size: 18.sp, weight: FontWeight.w700),
          SizedBox(height: 10.h),
          Text(
            subTitle,
            style: TextStyle(fontSize: 14.sp, color: Color(0xFF4B5563)),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}
