Icon_Colour Change_V1.3

import React, { useState } from 'react';
import type { FormEvent } from 'react';
import { motion } from 'framer-motion';
import type { Variants } from 'framer-motion';
import {
  HiOutlineLockClosed,
  HiOutlineMail,
  HiOutlineShieldCheck,
  HiOutlineExclamationCircle,
  HiOutlineArrowRight,
  HiOutlineChartBar,
  HiOutlineClock,
  HiOutlineLightningBolt,
} from 'react-icons/hi';

// Animation variants
const fadeIn: Variants = {
  hidden: { opacity: 0, y: 20 },
  show: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
  },
};

const features = [
  {
    icon: HiOutlineChartBar,
    title: 'Real-time Analytics',
    description: 'Track your investments with professional-grade tools',
  },
  {
    icon: HiOutlineClock,
    title: '24/7 Monitoring',
    description: 'Continuous oversight of your portfolio performance',
  },
  {
    icon: HiOutlineLightningBolt,
    title: 'Instant Insights',
    description: 'AI-powered analysis for informed decision making',
  },
];

export const LoginPage: React.FC = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    if (!email || !password) {
      setError('Email and password are required');
    } else {
      setError('');
      // Add login logic here
    }
  };

  return (
    <div className="min-h-screen bg-[#111827] flex items-center justify-center p-8">
      <div className="w-full max-w-[1100px] bg-[#1F2937] rounded-2xl p-8 md:p-12">
        <div className="flex flex-col lg:flex-row gap-12 items-center">
          {/* Left Side */}
          <div className="flex-1 w-full">
            <motion.div initial="hidden" animate="show" variants={fadeIn}>
              <div className="flex items-center gap-3 mb-8">
                <HiOutlineShieldCheck className="text-5xl text-indigo-500" />
                <span className="text-3xl font-bold text-white">WealthTrack</span>
              </div>
              <h2 className="text-2xl font-bold text-white mb-8">
                Experience premium wealth management
              </h2>

              <div className="space-y-6">
                {features.map((feature, index) => (
                  <motion.div
                    key={index}
                    className="flex items-start gap-4"
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: index * 0.2 }}
                  >
                    <div className="p-2 bg-indigo-500/10 rounded-lg">
                      <feature.icon className="text-2xl text-indigo-500" />
                    </div>
                    <div>
                      <h3 className="text-white font-semibold mb-1">{feature.title}</h3>
                      <p className="text-gray-400 text-sm">{feature.description}</p>
                    </div>
                  </motion.div>
                ))}
              </div>
            </motion.div>
          </div>

          {/* Right Side */}
          <div className="flex-1 w-full">
            <motion.div
              className="bg-[#374151] p-8 rounded-xl"
              initial="hidden"
              animate="show"
              variants={fadeIn}
            >
              <h1 className="text-2xl font-bold text-white mb-2">Welcome back</h1>
              <p className="text-gray-400 mb-8">
                Please enter your details to sign in
              </p>

              {error && (
                <div className="flex items-center gap-2 bg-red-500/10 text-red-400 p-4 rounded-lg mb-6">
                  <HiOutlineExclamationCircle className="text-xl" />
                  <span className="text-sm">{error}</span>
                </div>
              )}

              <form onSubmit={handleSubmit} className="space-y-6">
                {/* Email */}
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-300">Email address</label>
                  <div className="relative">
                    <HiOutlineMail className="absolute left-4 top-1/2 -translate-y-1/2 text-indigo-500 text-xl" />
                    <input
                      type="email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      className="w-full bg-[#1F2937] border border-gray-600 rounded-xl py-3.5 px-12 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all duration-200"
                      placeholder="Enter your email"
                    />
                  </div>
                </div>

                {/* Password */}
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-300">Password</label>
                  <div className="relative">
                    <HiOutlineLockClosed className="absolute left-4 top-1/2 -translate-y-1/2 text-indigo-500 text-xl" />
                    <input
                      type="password"
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      className="w-full bg-[#1F2937] border border-gray-600 rounded-xl py-3.5 px-12 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all duration-200"
                      placeholder="Enter your password"
                    />
                  </div>
                </div>

                {/* Remember Me & Forgot Password */}
                <div className="flex items-center justify-between">
                  <label className="flex items-center gap-2 cursor-pointer group">
                    <input
                      type="checkbox"
                      className="w-5 h-5 rounded border-gray-600 bg-[#1F2937] text-indigo-500 focus:ring-indigo-500 focus:ring-offset-0 cursor-pointer"
                    />
                    <span className="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-200">
                      Remember me
                    </span>
                  </label>
                  <a
                    href="/forgot-password"
                    className="text-sm text-indigo-400 hover:text-indigo-300 font-medium transition-colors duration-200"
                  >
                    Forgot password?
                  </a>
                </div>

                {/* Submit */}
                <button
                  type="submit"
                  className="w-full bg-indigo-500 text-white rounded-xl py-3.5 font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200"
                >
                  Sign in to your account
                </button>
              </form>

              {/* Sign-up Link */}
              <p className="mt-8 text-center text-gray-400">
                Don&apos;t have an account?{' '}
                <a
                  href="/register"
                  className="text-indigo-400 hover:text-indigo-300 font-medium inline-flex items-center gap-1 group transition-colors duration-200"
                >
                  Create an account
                  <HiOutlineArrowRight className="text-lg transition-transform duration-200 group-hover:translate-x-1" />
                </a>
              </p>
            </motion.div>
          </div>
        </div>
      </div>
    </div>
  );
};