// src/Login.jsx
import { useState } from "react";
import { User, Lock } from "lucide-react";

export default function Login() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-teal-700 to-emerald-800 text-white">
      <div className="w-full max-w-6xl flex shadow-2xl rounded-2xl overflow-hidden">
        {/* Lado Izquierdo */}
        <div className="w-1/2 bg-gradient-to-b from-emerald-700 to-teal-800 flex flex-col items-center justify-center p-10">
          <div className="flex items-center space-x-3">
            <img
              src="https://img.icons8.com/ios-filled/100/ffffff/graduation-cap.png"
              alt="Herlin Logo"
              className="w-12 h-12"
            />
            <h1 className="text-3xl font-bold">ChatBot Herlin</h1>
          </div>
          <div className="mt-16 text-center">
            <img
              src="https://img.icons8.com/emoji/96/1f468-200d-1f393.png"
              alt="Herlin Icon"
              className="mx-auto mb-4 opacity-70"
            />
            <h2 className="text-5xl font-extrabold">Herlin</h2>
            <p className="text-gray-200 mt-3">
              Chatbot de orientación <br /> vocacional
            </p>
          </div>
          <div className="absolute bottom-5 flex space-x-6 text-gray-300 text-2xl">
            <a href="#"><i className="bx bxl-xing"></i></a>
            <a href="#"><i className="bx bxl-instagram"></i></a>
            <a href="#"><i className="bx bxl-whatsapp"></i></a>
          </div>
          <p className="absolute bottom-2 text-xs text-gray-300">
            Copyright © 2025 Bali Innovation
          </p>
        </div>

        {/* Lado Derecho */}
        <div className="w-1/2 bg-gradient-to-b from-emerald-800 to-teal-900 flex flex-col justify-center items-center p-10">
          {/* Navbar */}
          <div className="absolute top-5 right-10 flex space-x-8 text-sm">
            <a href="#" className="flex items-center space-x-1 hover:text-emerald-400">
              <i className="bx bx-log-in"></i>
              <span>Iniciar sesión</span>
            </a>
            <a href="#" className="flex items-center space-x-1 hover:text-emerald-400">
              <i className="bx bx-info-circle"></i>
              <span>Información</span>
            </a>
            <a href="#" className="flex items-center space-x-1 hover:text-emerald-400">
              <i className="bx bx-group"></i>
              <span>Sobre nosotros</span>
            </a>
          </div>

          <h2 className="text-2xl font-bold mb-8">
            Inicia sesión para descubrir <br /> tu carrera ideal
          </h2>

          <img
            src="https://img.icons8.com/external-flaticons-lineal-color-flat-icons/64/null/external-university-education-flaticons-lineal-color-flat-icons.png"
            alt="University Logo"
            className="mb-6"
          />

          <div className="w-80 space-y-4">
            <div className="flex items-center bg-gray-200 text-black rounded-md px-3 py-2">
              <User className="w-5 h-5 mr-2 text-gray-600" />
              <input
                type="text"
                placeholder="Steven Suaza"
                className="bg-transparent outline-none flex-1"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
              />
            </div>

            <div className="flex items-center bg-gray-200 text-black rounded-md px-3 py-2">
              <Lock className="w-5 h-5 mr-2 text-gray-600" />
              <input
                type="password"
                placeholder="********"
                className="bg-transparent outline-none flex-1"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>

            <button className="w-full bg-emerald-500 hover:bg-emerald-600 text-white font-semibold py-2 rounded-full shadow-md transition">
              Iniciar sesión
            </button>

            <p className="text-sm text-center text-gray-200 hover:underline cursor-pointer">
              Olvide mi contraseña
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}