import React from "react";
import key from "../assets/seller-login/first!.svg";
import icon2 from "../assets/seller-login/eye.svg";
import icon from "../assets/seller-login/mail.svg";
import { useNavigate } from "react-router-dom";
function Seller_login() {
    const navigate = useNavigate();
        const goto = () => {
            navigate("/create-account");
        }            
  return (
    <>
      <div className="relative bg-[#E9FAFF]  p-4 flex flex-col md:flex-row font-montserrat">
        <div className="relative w-full">
          <h2 className="font-bold text-[15px] md:text-5xl px-2 md:px-10 py-3 md:py-10 ">
            OMPOI-Seller
          </h2>
          <div className=" bg-[#FFFFFF] grid grid-cols-1 md:grid-cols-3 items-center justify-center gap-3 p-10 shadow-lg rounded-[15.3px] md:rounded-[32.6px] left-[10px] right-[10px] ">
            <img
              src={key}
              alt="illutration"
              className="size-full md:size-[380px] px-4 md:px-12"
            />
            <div className="hidden md:flex bg-[#E2E7EE] w-[3px] h-full ml-[180px] "></div>
            <div className="flex flex-col p-4 bg-[#FFFFFF] border-none">
              <form className="mt-0 md:mt-[-150px] ml-0 md:ml-[-150px]  ">
                <div className="flex justify-center items-center mt-[70px]">
                    <div className="font-[600px] text-center text-[16.48px] mt-[50px] md:text-[33.91px] mb-[15px] md:mb-[30px] ">LOGIN</div>
                </div>
                <div>
                  <label
                    htmlFor="merchant_id"
                    className="text-[10px] md:text-[18px] text-[#45505F] p-[0.5px] bg-white relative top-1 left-6  px-1"
                  >
                    Merchant ID
                  </label>
                  <input
                    type="text"
                    className="w-full p-2 md:p-3 border border-[#C4CFDE] rounded-[12px] mt-[-10px] text-[10px] md:text-[18px] focus:outline-none"
                    placeholder="Enter id"
                    required
                  />
                  <span className="flex inset-y-0 justify-end ">
                    <img src={icon} alt="icon" className=" relative items-center w-3 md:w-5 h-3 md:h-5 mt-[-25px] md:mt-[-35px] mr-[12px] md:mr-[20px] " />
                  </span>
                  <br />
                  <div>
                    <label
                      htmlFor="password"
                      className="text-[10px] md:text-[18px] text-[#45505F] p-[0.5px] bg-white relative top-1 left-6  px-1 "
                    >
                      Password
                    </label>
                    <input
                      type="text"
                      className="w-full p-2 md:p-3 border border-[#C4CFDE] rounded-[12px] mt-[-10px] text-[10px] md:text-[18px] focus:outline-none"
                      placeholder="Enter your password"
                      required
                    />
                    <span className="flex inset-y-0 justify-end ">
                      <img src={icon2} alt="icon" className=" relative items-center w-3 md:w-5 h-3 md:h-5 mt-[-25px] md:mt-[-35px] mr-[12px] md:mr-[20px]" />
                    </span>
                    <div className="flex flex-col md:flex-row gap-1 md:gap-3 items-center justify-center md:justify-between p-3 md:p-4">
                        <span className="relative  font-[300px] md:font-[600px] text-[10px] md:text-[18.26px] ">Forgot Password</span>
                        <span className="relative  font-[300px] md:font-[600px] text-[10px] md:text-[18.26px] cursor-pointer hover:text-[#FFBD69] " onClick={goto}>Create Account</span>                                               
                    </div>
                    <div className="flex justify-center p-4">
                        <button className="bg-[#FFBD69] pb-[13.04px] pt-[13.04px] pr-[39.12px] pl-[39.12px] w-fit h-flt rounded-[32.60px] inline-flex justify-center items-center text-[10px] md:text-[20.87px] font-[800px]  ">Sign in</button>
                    </div>
                    <div className="flex justify-center p-4">
                        <button className="bg-white pb-[13.04px] pt-[13.04px] pr-[39.12px] pl-[39.12px] w-fit h-fit rounded-[32.60px] border-[#FFBD69] border-2 inline-flex justify-center items-center text-[10px] md:text-[20.87px] font-[800px] ">check Status</button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
export default Seller_login;