import React from "react";
import first from "../assets/bento/image1.svg";
import second from "../assets/bento/image3.svg";
import third from "../assets/bento/image2.svg";
import { useNavigate } from "react-router-dom";


function Bento() {
    const navigate = useNavigate();
    const goTo = () => {
        navigate("/seller-login");
};

    return (
        <>
   
         <div className="bg-[#E9FAFF] relative p-4 font-montserrat ">
                <h2 className="text-blue-600 py-2 text-4xl text-center font-light mb-6">
                    Get Start now
                </h2>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">        
                    <div className="col-span-2 row-span-2 group relative overflow-hidden rounded-lg shadow-lg">
                        <img src={first} alt="Large Item" className="w-full h-full object-cover"/>                   
                        <div className="absolute inset-x-0 bottom-0 h-full flex flex-col items-center justify-center bg-black/40 bg-opacity-0 transform translate-y-full group-hover:translate-y-0 transition-transform duration-1000 ease-[cubic-bezier(0.4,0,0.2,1)]"  style={{
                                background: "linear-gradient(to top, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.3) 70%)"
                            }}>
                            <p className="text-white text-center font-extrabold text-6xl cursor-pointer" onClick={goTo}>
                                    <span className="block">Seller</span>
                                    <span className="block">Registration</span>                              
                            </p>
                        </div>
                    </div>
                    <div className="col-span-2 row-span-1 group relative overflow-hidden rounded-lg shadow-lg">
                        <img src={second} alt="Small Item 1" className="w-full h-full"/>
                        <div className="absolute inset-x-0 bottom-0 h-full flex flex-col items-center justify-center bg-black/40 bg-opacity-0 transform translate-y-full group-hover:translate-y-0 transition-transform duration-1000 ease-[cubic-bezier(0.4,0,0.2,1)]"  style={{
                                background: "linear-gradient(to top, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.3) 70%)"
                            }}>
                            <p className="text-white text-center font-extrabold text-4xl">
                                <a href=""><span className="block">Buyer</span>
                                <span className="block">Registration</span></a>                              
                            </p>
                        </div>
                     </div>
                     <div className="col-span-2 row-span-1 group relative overflow-hidden rounded-lg shadow-lg">
                        <img src={third} alt="Small Item 2" className="w-full h-full"/>
                        <div className="absolute inset-x-0 bottom-0 h-full flex flex-col items-center justify-center bg-black/40 bg-opacity-0 transform translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-[cubic-bezier(0.4,0,0.2,1)]"  style={{
                                background: "linear-gradient(to top, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.3) 70%)"
                            }}>
                            <p className="text-white text-center font-extrabold text-4xl">
                                <a href=""><span className="block">Agent</span>
                                <span className="block">Login</span></a>                              
                            </p>
                        </div>
                     </div>
                </div>
            </div>
        </>
    );
}
export default Bento;