import React, { useState } from "react";
import { motion } from "framer-motion";
import { Features } from "./Features";
import { Pricing } from "./Pricing";
import { DemoWidget } from "./DemoWidget";
import { ArrowRight, CheckCircle2, Trophy } from "lucide-react";
import HowItWorks from "./HowItWorks";
import WhoWeAre from "./WhoWeAre";
import ModelBenefits from "./ModelBenefits";
import Testimonials from "./Testimonials";
import ROUTE_CONSTANTS from "@/constants/route.constants";
import { useNavigate } from "react-router-dom";

export const LandingPage: React.FC = () => {
  const navigate = useNavigate();

  return (
    <>
      {/* Hero Section */}
      <section className="pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden relative">
        <div className="absolute top-0 right-0 -z-10 opacity-10">
          <svg
            width="800"
            height="800"
            viewBox="0 0 100 100"
            className="text-brand-green fill-current"
          >
            <circle cx="50" cy="50" r="50" />
          </svg>
        </div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
          <div className="lg:grid lg:grid-cols-12 lg:gap-8 items-center">
            {/* LEFT: Text */}
            <motion.div
              className="lg:col-span-6 text-center lg:text-left"
              initial={{ opacity: 0, y: 40 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.7, ease: "easeOut" }}
            >
              <motion.div
                className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-50 border border-orange-100 text-brand-orange text-sm font-semibold mb-6"
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 0.3 }}
              >
                <Trophy className="w-4 h-4" />
                <span>Build for Institutional Growth</span>
              </motion.div>

              <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-brand-navy tracking-tight leading-tight mb-6">
                Empower Your <br />
                <span className="text-brand-green">Institution Smarter</span>
              </h1>

              <p className="text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto lg:mx-0 leading-relaxed">
                Manage question banks, tests, and staff through a unified
                digital examination infrastructure. Pay only for student access.
              </p>

              {/* Buttons */}
              <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                <motion.button
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.97 }}
                  className="px-8 py-4 bg-brand-navy text-white rounded-xl font-bold text-lg hover:bg-blue-900 transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-2"
                  onClick={() => navigate(ROUTE_CONSTANTS.Register)}
                >
                  Register Your Institution <ArrowRight className="w-5 h-5" />
                </motion.button>

                {/* <motion.button
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.97 }}
                  onClick={() => {
                    const el = document.getElementById("features");
                    if (el) {
                      el.scrollIntoView({ behavior: "smooth" });
                    }
                  }}
                  className="px-8 py-4 bg-white text-brand-navy border-2 border-brand-navy rounded-xl font-bold text-lg hover:bg-gray-50 transition-all flex items-center justify-center"
                >
                  Explore Features
                </motion.button> */}
              </div>

              {/* Highlight Icons */}
              {/* <motion.div
                className="mt-8 flex items-center justify-center lg:justify-start gap-6 text-sm text-gray-500 font-medium"
                initial="hidden"
                animate="visible"
                variants={{
                  hidden: {},
                  visible: {
                    transition: { staggerChildren: 0.2 },
                  },
                }}
              >
                {[
                  "Free Management",
                  "Infinite Question Bank",
                  "Paid Student Access",
                ].map((text, i) => (
                  <motion.span
                    key={i}
                    className="flex items-center gap-1"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                  >
                    <CheckCircle2 className="w-4 h-4 text-green-500" /> {text}
                  </motion.span>
                ))}
              </motion.div> */}
            </motion.div>

            {/* RIGHT: Image Section */}
            <motion.div
              className="lg:col-span-6 mt-16 lg:mt-0 relative"
              initial={{ opacity: 0, x: 50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, ease: "easeOut" }}
            >
              <motion.div
                className="relative rounded-2xl bg-gradient-to-br from-brand-navy to-blue-900 p-2 shadow-2xl transform rotate-2 hover:rotate-0 transition-transform duration-500"
                whileHover={{ scale: 1.02 }}
              >
                <div className="bg-white rounded-xl overflow-hidden h-full">
                  <img
                    src="/student_study.png"
                    alt="Student studying on laptop"
                    className="object-cover w-full h-[400px]"
                  />

                  <div className="p-6">
                    <div className="flex items-center justify-between mb-4">
                      <div className="flex gap-2">
                        <div className="w-3 h-3 rounded-full bg-red-400"></div>
                        <div className="w-3 h-3 rounded-full bg-yellow-400"></div>
                        <div className="w-3 h-3 rounded-full bg-green-400"></div>
                      </div>
                    </div>

                    <div className="space-y-3">
                      <div className="h-4 bg-gray-100 rounded w-3/4"></div>
                      <div className="h-4 bg-gray-100 rounded w-1/2"></div>

                      <div className="flex gap-4 mt-4">
                        <div className="h-20 w-1/3 bg-blue-50 rounded-lg border border-blue-100"></div>
                        <div className="h-20 w-1/3 bg-green-50 rounded-lg border border-green-100"></div>
                        <div className="h-20 w-1/3 bg-orange-50 rounded-lg border border-orange-100"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </motion.div>

              {/* Floating Badge */}
              <motion.div
                className="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-xl border border-gray-100 hidden md:block"
                initial={{ opacity: 0, scale: 0.5, y: 20 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                transition={{ delay: 0.8, type: "spring", stiffness: 120 }}
              >
                <div className="flex items-center gap-3">
                  <div className="bg-green-100 p-2 rounded-full">
                    <Trophy className="w-6 h-6 text-green-600" />
                  </div>
                  <div>
                    <p className="text-xs text-gray-500 font-semibold uppercase">
                      Success Rate
                    </p>
                    <p className="text-xl font-bold text-brand-navy">99%</p>
                  </div>
                </div>
              </motion.div>
            </motion.div>
          </div>
        </div>
      </section>

      <WhoWeAre />

      <Features />

      {/* Demo Section (scroll reveal) */}
      <motion.section
        id="demo"
        className="py-20 bg-brand-navy relative overflow-hidden"
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 0.8 }}
      >
        <div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
          <div className="absolute top-10 left-10 w-32 h-32 bg-brand-orange rounded-full blur-3xl"></div>
          <div className="absolute bottom-10 right-10 w-64 h-64 bg-brand-green rounded-full blur-3xl"></div>
        </div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center mb-12 text-white">
            <motion.h2
              className="text-3xl md:text-4xl font-extrabold mb-4"
              initial={{ y: 20, opacity: 0 }}
              whileInView={{ y: 0, opacity: 1 }}
              transition={{ duration: 0.6 }}
            >
              AI-Powered Question Generation
            </motion.h2>

            <motion.p
              className="text-blue-100 max-w-2xl mx-auto text-lg"
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              transition={{ delay: 0.3 }}
            >
              Use our AI-enabled question generation engine to create structured
              practice questions by entering a topic.
            </motion.p>
          </div>

          <DemoWidget />
        </div>
      </motion.section>
      <Pricing />
      <ModelBenefits />
      <Testimonials />
      <main className="w-full max-w-7xl mx-auto px-6 md:px-12 py-16 space-y-20">
        <div className="h-1 w-full bg-gray-100 rounded-full mx-auto" />
        <HowItWorks />
      </main>
    </>
  );
};