import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:lottie/lottie.dart';

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

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    var height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: Container(
        padding: EdgeInsets.symmetric(
          horizontal: 20,
          vertical: 30,
        ),
        width: width,
        height: height,
        decoration: BoxDecoration(
          color: Colors.black,
          image: DecorationImage(
            image: NetworkImage(
              "https://images.unsplash.com/photo-1550807014-1236e91b92d4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=980&q=80",
            ),
            opacity: 0.4,
            fit: BoxFit.cover,
          ),
        ),
        child: Column(
          children: [
            Text(
              "Welcome",
              style: GoogleFonts.abel(
                color: Colors.white,
                fontWeight: FontWeight.w900,
                fontSize: width / 5,
              ),
            ),
            Text(
              "The all-in-one AI powered\nCinnamon cultivation help assistant",
              style: GoogleFonts.abel(
                color: Colors.white70,
                fontSize: width / 15,
                fontStyle: FontStyle.italic,
                fontWeight: FontWeight.w700,
              ),
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: height / 10,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                //price_prediction
                ModuleCard(
                  bgColor: Colors.indigo.shade900,
                  title: Text(
                    "Forecasting",
                    style: GoogleFonts.poppins(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: width / 21,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  lottie: "assets/lottie/90021-graph-stats.json",


                ),
                //ai_based_ommunity
                ModuleCard(
                  bgColor: Colors.white,
                  title: Text(
                    "Community",
                    style: GoogleFonts.poppins(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: width / 21,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  lottie: "assets/lottie/99782-help.json",


                ),
              ],
            ),
            SizedBox(
              height: 30,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                //cinnamon_grading
                ModuleCard(
                  bgColor: Colors.lime,
                  title: Text(
                    "Grading",
                    style: GoogleFonts.poppins(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: width / 21,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  lottie:
                      "assets/lottie/112180-paper-notebook-writing-animation.json",


                ),
                //rbd_disease_identification
                ModuleCard(
                  bgColor: Colors.red,
                  title: Text(
                    "Diseases",
                    style: GoogleFonts.poppins(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: width / 21,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  lottie:
                      "assets/lottie/102131-hand-holding-plant-seedling.json",


                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class ModuleCard extends StatelessWidget {
  ModuleCard({
    super.key,
    required this.bgColor,
    required this.title,
    required this.lottie,
    this.onTap,
  });
  Color bgColor;
  Text title;
  String lottie;
  void Function()? onTap;

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    var height = MediaQuery.of(context).size.height;
    return GestureDetector(
      onTap: onTap,
      child: Card(
        elevation: 10,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15.0),
        ),
        color: bgColor,
        child: Container(
          width: width / 2.5,
          height: height / 4,
          padding: EdgeInsets.symmetric(
            vertical: height / 40,
            horizontal: width / 20,
          ),
          child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                LottieBuilder.asset(
                  lottie,
                  reverse: true,
                  width: width / 3,
                ),
                title,
              ],
            ),
          ),
        ),
      ),
    );
  }
}
