import 'package:flutter/material.dart';
import 'package:flutter_kinetra/kt_pages/kt_home/logic.dart';
import 'package:flutter_kinetra/kt_utils/kt_string_extend.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

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

  @override
  State<KtHomePage> createState() => _KtHomePageState();
}

class _KtHomePageState extends State<KtHomePage> {
  final logic = Get.put(KtHomeLogic());
  final state = Get.find<KtHomeLogic>().state;
  @override
  Widget build(BuildContext context) {
    return GetBuilder<KtHomeLogic>(
      assignId: true,
      builder: (logic) {
        return Stack(
          children: [
            Container(
              width: ScreenUtil().screenWidth,
              height: ScreenUtil().screenHeight,
              padding: EdgeInsets.only(top: kToolbarHeight),
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('bg1.png'.ktIcon),
                  fit: BoxFit.fill,
                ),
              ),
              child: Column(
                children: [
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 15.w),
                    margin: EdgeInsets.only(top: 20.w),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          width: 235.w,
                          height: 22.w,
                          padding: EdgeInsets.only(right: 7.w),
                          alignment: Alignment.centerRight,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage('home_top_slogan.png'.ktIcon),
                              fit: BoxFit.fill,
                            ),
                          ),
                          child: Text(
                            'Get Hooked in Seconds',
                            style: TextStyle(
                              fontSize: 12.sp,
                              fontWeight: FontWeight.w600,
                              fontStyle: FontStyle.italic,
                              color: Colors.white,
                            ),
                          ),
                        ),
                        Image.asset('ic_search.png'.ktIcon, width: 34.w),
                      ],
                    ),
                  ),
                  Container(
                    width: ScreenUtil().screenWidth,
                    height: 129.h,
                    padding: EdgeInsets.fromLTRB(29.w, 32.w, 17.w, 15.h),
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage('home_top.png'.ktIcon),
                        fit: BoxFit.fill,
                      ),
                    ),
                    child: Row(
                      children: [
                        Column(
                          mainAxisAlignment: MainAxisAlignment.end,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                Stack(
                                  alignment: Alignment.bottomCenter,
                                  children: [
                                    Image.asset(
                                      'text_bg.png'.ktIcon,
                                      height: 17.w,
                                    ),
                                    Text(
                                      'Trend Cyclone',
                                      style: TextStyle(
                                        fontSize: 14.sp,
                                        color: Color(0xFF1E1E20),
                                        fontWeight: FontWeight.w800,
                                      ),
                                    ),
                                  ],
                                ),
                                Image.asset('ic_right.png'.ktIcon, width: 10.w),
                              ],
                            ),
                            SizedBox(height: 5.w),
                            Text(
                              'Everyone\'s Watching',
                              style: TextStyle(
                                fontSize: 12.sp,
                                fontWeight: FontWeight.w400,
                                color: Color(0xFFAEAEAE),
                              ),
                            ),
                          ],
                        ),
                        SizedBox(width: 17.w),
                        Container(
                          child: Column(
                            children: [
                              Row(
                                children: [
                                  Image.asset(
                                    'ic_star.png'.ktIcon,
                                    width: 14.w,
                                  ),
                                  SizedBox(width: 4.w),

                                  SizedBox(
                                    width: 162.w,
                                    child: Text(
                                      'rebirth: power and beauty',
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                      style: TextStyle(
                                        fontSize: 13.sp,
                                        color: Colors.black,
                                        fontWeight: FontWeight.w500,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        );
      },
    );
  }
}