import { User, School } from "lucide-react";
import { motion } from "framer-motion";
import { useState } from "react";
import StudentRegister from "./StudentRegister";
import InstitutionRegister from "./InstitutionRegister";
import LandingLayout from "./LandingLayout";
import { Link } from "react-router-dom";

export default function RegisterPage() {
  const [userType, setUserType] = useState<"student" | "institution">(
    "institution",
  );

  const isInstitution = userType === "institution";

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className="min-h-screen bg-gray-50 flex justify-center px-4 pt-[10rem] pb-[10rem]"
    >
      <div className="w-full max-w-6xl bg-white shadow-2xl rounded-2xl grid grid-cols-1 md:grid-cols-3 overflow-hidden">
        <div
          className={`bg-brand-navy text-white p-6 flex flex-col justify-between`}
        >
          <div>
            <h2 className="text-xl font-bold mb-4">Why Join Us?</h2>
            <ul className="space-y-4 text-base leading-relaxed">
              {[
                "Trusted technology partner for exam creation and preparation",
                "Ready digital examination infrastructure (Web Portal & Mobile App)",
                "Simple student onboarding and batch management",
                "Professional and transparent digital system",
                "Flexible usage across multiple competitive exams",
              ].map((text, index) => (
                <li key={index} className="flex gap-2 items-center">
                  <span className="mt-1 w-2 h-2 rounded-full bg-white/80 inline-flex"></span>
                  <p className="text-sm">{text}</p>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="w-full p-6 md:col-span-2 flex flex-col">
          <Link
            to={"/landing"}
            className="w-full flex-shrink-0 flex items-center justify-center cursor-pointer gap-2 mb-4"
          >
            <img src="/logo.png" alt="logo" className="h-[5rem] w-[5rem]" />
          </Link>
          <h2 className="text-3xl font-extrabold text-brand-navy text-center mb-2">
            Create Your Account
          </h2>
          <p className="text-gray-500 text-center mb-4">
            Register as a Institution
          </p>

          {/* <div className="flex justify-center mb-5">
            <div className="bg-gray-100 p-1 rounded-full border border-gray-200 shadow-sm inline-flex relative">
              <motion.div
                layout
                transition={{ type: "spring", stiffness: 260, damping: 22 }}
                className={`
                  absolute top-1 bottom-1 rounded-full shadow-md
                  ${userType === "student" ? "bg-brand-green" : "bg-brand-navy"}
                `}
                style={{
                  width: "50%",
                  left: userType === "student" ? "0%" : "50%",
                }}
              />

              <button
                onClick={() => setUserType("student")}
                className={`flex items-center gap-2 px-6 py-3 rounded-full font-medium 
                transition-all duration-300 relative z-10
                ${
                  userType === "student"
                    ? "text-white"
                    : "text-gray-600 hover:text-gray-900"
                }`}
              >
                <User className="w-4 h-4" />
                Students
              </button>

              <button
                onClick={() => setUserType("institution")}
                className={`flex items-center gap-2 px-6 py-3 rounded-full font-medium 
                transition-all duration-300 relative z-10
                ${
                  userType === "institution"
                    ? "text-white"
                    : "text-gray-600 hover:text-gray-900"
                }`}
              >
                <School className="w-4 h-4" />
                Institutions
              </button>
            </div>
          </div> */}
          <div className="mt-5">
            {isInstitution ? <InstitutionRegister /> : <StudentRegister />}
          </div>
        </div>
      </div>
    </motion.div>
  );
}