import Image from "next/image";
import { withCDN } from "@/lib/utils";
import UserGreeting from "@/components/userGreeting";
import UserMenu from "@/components/userMenu";


export default function Welldone() {
return (
   <main>
        {/*=============== Hero===================*/}
            <section className="relative w-full xl:h-screen flex h-full min-h-[300px] max-[768px]:min-h-[400px] max-[400px]:min-h-[370px] items-start overflow-hidden welldon-hero pb-20 max-[767px]:h-screen">
                {/* Background */}
                <div
                className="absolute inset-0 z-0 bg-cover bg-center md:bg-bottom"
                style={{
                backgroundImage: "url('https://YEOLMS.b-cdn.net/building-instruction/BG%20(13).png')",
                backgroundRepeat: "no-repeat",
                }}
                />
            
                {/* COntent */}
                <div className="relative z-10 max-w-7xl mx-auto w-full  px-5 py-5">
                    <div className="grid grid-cols-1 md:grid-cols-3 items-center header-grid">
                        <div className="bg-[#0097DC] shadow-[12px_12px_24px_#00000033] px-20 py-[10px] rounded-[50px] rounded-tl-none rounded-bl-none w-max h-[58px] relative name-intro xl:ml-[-147px] md:ml-[-30px] hidden md:block tab1">
                             <UserGreeting className="text-white text-[20px] xl:text-[25px]" />
                        </div>
                        <div className="flex items-center justify-center">
                            <Image
                            src={withCDN("/logo_horizontal%20(1)%20(1).png")}
                            alt="logo"
                            width={160}
                            height={52}
                            unoptimized
                            className="object-contain w-[150px] h-[45px] xl:w-[160px] xl:h-[52px]"
                            />
                        </div>
                        <div className="flex items-center justify-end max-[768px]:absolute max-[768px]:right-[30px]">
                            <UserMenu />
                        </div>
                    </div>
                    <div className="text-center mt-5 tab-s">
                        <UserGreeting className="text-white w-max mx-auto text-[20px] block md:hidden px-[30px] py-[10px] bg-[#0097DC] rounded-[50px] mb-5 tabs-1" />
                        <div className="w-full flex flex-center items-center gap-3 justify-center">
                            <a href="/">
                                <Image
                                src={withCDN("/building-instruction/home.png")}
                                alt="logo"
                                width={36}
                                height={36}
                                unoptimized
                                className="object-contain w-[36px] h-[36px] mt-[10px]"
                                />
                            </a>
                            <h2 className="text-white text-center text-[35px] font-bold tracking-[2px] uppercase  max-[768px]:text-[20px] package-heading">Well DONE!</h2>
                        </div>
                    </div>

                    {/* =============content=============== */}
                    <div className="relative flex flex-col items-center">
                        <Image
                        src={withCDN("/building-instruction/Robot%20image.png")}
                        alt="logo"
                        width={700}
                        height={700}
                        unoptimized
                        className="object-contain w-full xl:w-[700px] h-auto mb-[40px] lg:mb-[-80px]"
                        />
                        <p className="text-[#0097DC] text-[40px] w-max px-[30px] py-[10px] shadow-[4px_4px_8px_#00000040] rounded-[50px] bg-white uppercase">windmill</p>
                    </div>
                </div>
            </section>
           
   </main>
);
}