import 'package:flutter/material.dart';
import 'login_page.dart';

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

  static const Color primaryColor = Color(0xff4E7C34);
  static const Color secondaryColor = Color(0xff6A994E);
  static const Color backgroundColor = Color(0xffFFF8E8);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 18),
          child: Column(
            children: [
              Container(
                height: 140,
                width: double.infinity,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  image: const DecorationImage(
                    image: AssetImage("assets/wudhu.png"),
                    fit: BoxFit.cover,
                  ),
                ),

                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 18),
                  child: Row(
                    children: [
                      Image.asset("assets/logo.png", width: 50),

                      const SizedBox(width: 12),

                      const Expanded(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Score_PAI",
                              style: TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.bold,
                                color: StartPage.primaryColor,
                              ),
                            ),

                            SizedBox(height: 4),

                            Text(
                              "Monitoring Nilai Papan Pembelajaran",
                              style: TextStyle(fontSize: 16),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              const SizedBox(height: 16),
              //================ TENTANG =================
              Container(
                width: double.infinity,
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(30),
                  boxShadow: const [
                    BoxShadow(
                      color: Colors.black12,
                      blurRadius: 15,
                      offset: Offset(0, 6),
                    ),
                  ],
                ),

                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Image.asset(
                          "assets/polije.png",
                          width: 90,
                          height: 45,
                          fit: BoxFit.contain,
                        ),

                        const SizedBox(width: 15),

                        const Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                "Tentang Aplikasi",
                                style: TextStyle(
                                  fontSize: 20,
                                  fontWeight: FontWeight.bold,
                                  color: StartPage.primaryColor,
                                ),
                              ),

                              SizedBox(height: 10),
                            ],
                          ),
                        ),
                      ],
                    ),

                    const SizedBox(height: 10),

                    const Text(
                      "Score_PAI merupakan aplikasi monitoring nilai dari papan pembelajaran interaktif yang digunakan untuk membantu guru dalam memantau hasil belajar siswa secara real-time. Selain menampilkan hasil nilai, aplikasi ini juga menyediakan fitur untuk mengunduh data nilai dalam bentuk file Excel sehingga memudahkan guru dalam melakukan dokumentasi dan pengolahan nilai.",
                      textAlign: TextAlign.justify,
                      style: TextStyle(
                        fontSize: 12,
                        height: 1.3,
                        color: Colors.black87,
                      ),
                    ),

                    const SizedBox(height: 6),

                    const Divider(),

                    const SizedBox(height: 10),

                    const Text(
                      "Dibuat Oleh",
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: primaryColor,
                        fontSize: 14,
                      ),
                    ),

                    const SizedBox(height: 8),

                    const Row(
                      children: [
                        Icon(Icons.person, color: primaryColor, size: 18),
                        SizedBox(width: 8),
                        Text(
                          "Nanda Setia Arianti",
                          style: TextStyle(fontSize: 12),
                        ),
                      ],
                    ),

                    const SizedBox(height: 6),

                    const Row(
                      children: [
                        Icon(Icons.school, color: primaryColor, size: 18),
                        SizedBox(width: 8),
                        Text(
                          "Teknik Komputer Angkatan 2023",
                          style: TextStyle(fontSize: 12),
                        ),
                      ],
                    ),

                    const SizedBox(height: 6),

                    const Row(
                      children: [
                        Icon(
                          Icons.location_city,
                          color: primaryColor,
                          size: 18,
                        ),
                        SizedBox(width: 8),
                        Text(
                          "Politeknik Negeri Jember",
                          style: TextStyle(fontSize: 12),
                        ),
                      ],
                    ),

                    const SizedBox(height: 6),

                    const Row(
                      children: [
                        Icon(
                          Icons.calendar_month,
                          color: primaryColor,
                          size: 18,
                        ),
                        SizedBox(width: 8),
                        Text("April 2026", style: TextStyle(fontSize: 12)),
                      ],
                    ),
                  ],
                ),
              ),

              const SizedBox(height: 16),

              //================ BUTTON =================
              SizedBox(
                width: double.infinity,
                height: 46,

                child: DecoratedBox(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(35),
                    gradient: const LinearGradient(
                      colors: [primaryColor, secondaryColor],
                    ),
                  ),

                  child: ElevatedButton(
                    onPressed: () {
                      Navigator.pushReplacement(
                        context,
                        MaterialPageRoute(builder: (_) => const LoginPage()),
                      );
                    },

                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.transparent,
                      shadowColor: Colors.transparent,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(35),
                      ),
                    ),

                    child: const Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          "Mulai",
                          style: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                          ),
                        ),

                        SizedBox(width: 10),

                        Icon(Icons.arrow_forward_rounded, color: Colors.white),
                      ],
                    ),
                  ),
                ),
              ),

              const SizedBox(height: 6),

              //================ SPESIFIKASI =================
              Container(
                width: double.infinity,
                padding: const EdgeInsets.symmetric(
                  horizontal: 20,
                  vertical: 14,
                ),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(30),
                  boxShadow: const [
                    BoxShadow(
                      color: Colors.black12,
                      blurRadius: 15,
                      offset: Offset(0, 6),
                    ),
                  ],
                ),
                child: const Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.settings, color: primaryColor),
                        SizedBox(width: 8),
                        Text(
                          "Spesifikasi Aplikasi",
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                            color: primaryColor,
                          ),
                        ),
                      ],
                    ),

                    SizedBox(height: 10),

                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        SpecItem(
                          icon: Icons.android,
                          title: "Platform",
                          value: "Android",
                        ),
                        SpecItem(
                          icon: Icons.phone_android,
                          title: "Versi",
                          value: "7.0+",
                        ),
                        SpecItem(
                          icon: Icons.language,
                          title: "Bahasa",
                          value: "Indonesia",
                        ),
                        SpecItem(
                          icon: Icons.info,
                          title: "App",
                          value: "1.0.0",
                          iconColor: Color(0xffD6A419),
                        ),
                      ],
                    ),
                  ],
                ),
              ),

              const SizedBox(height: 8),
            ],
          ),
        ),
      ),
    );
  }
}

//================ FEATURE CARD =================

class FeatureCard extends StatelessWidget {
  final IconData icon;
  final String title;

  const FeatureCard({super.key, required this.icon, required this.title});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 72,
      height: 72,
      decoration: BoxDecoration(
        color: const Color(0xffF2F8EC),
        borderRadius: BorderRadius.circular(15),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(icon, color: StartPage.primaryColor, size: 24),
          const SizedBox(height: 5),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 3),
            child: Text(
              title,
              textAlign: TextAlign.center,
              style: const TextStyle(fontSize: 9, fontWeight: FontWeight.w600),
            ),
          ),
        ],
      ),
    );
  }
}

//================ SPEC ITEM =================

class SpecItem extends StatelessWidget {
  final IconData icon;
  final String title;
  final String value;
  final Color iconColor;

  const SpecItem({
    super.key,
    required this.icon,
    required this.title,
    required this.value,
    this.iconColor = StartPage.primaryColor,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 70,
      child: Column(
        children: [
          Container(
            width: 52,
            height: 52,
            decoration: BoxDecoration(
              color: const Color(0xffF4F8EE),
              borderRadius: BorderRadius.circular(15),
            ),
            child: Icon(icon, color: iconColor, size: 28),
          ),

          const SizedBox(height: 10),

          Text(
            title,
            textAlign: TextAlign.center,
            style: const TextStyle(fontSize: 11, color: Colors.black54),
          ),

          const SizedBox(height: 4),

          Text(
            value,
            textAlign: TextAlign.center,
            style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
          ),
        ],
      ),
    );
  }
}