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

export default function BuildingInstruction({ robotData, packageId }: { robotData?: any, packageId?: string }) {
    return (
        <main>
            {/*=============== Hero===================*/}
            <section className="relative w-full flex h-full min-h-[300px] max-[768px]:min-h-[400px] max-[400px]:min-h-[370px] items-start overflow-hidden hero">
                {/* Background */}
                <div
                    className="absolute inset-0 z-0 bg-cover bg-top"
                    style={{
                        backgroundImage: "url('https://YEOLMS.b-cdn.net/Package/hero%20section.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={packageId ? `/robot-selection?package=${packageId}` : "/robot-selection"}>
                                <Image
                                    src={withCDN("/building-instruction/arrow%20back%20%2B%20close.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">{robotData?.title?.rendered || "Windmill"}</h2>
                        </div>
                    </div>
                </div>
            </section>


            <section className="relative w-full flex h-full items-start min-h-[590px] big-slider">
                {/* Background */}
                <div
                    className="absolute inset-0 z-0 top-[-185px] xl:top-[-160px] bg-cover bg-top"
                    style={{
                        backgroundImage: "url('https://YEOLMS.b-cdn.net/Package/BG%20(13).png')",
                        backgroundRepeat: "no-repeat",
                    }}
                />

                <div className="relative z-10 max-w-7xl mx-auto w-full px-5 mt-[-120px] max-[768px]:mt-[-180px]">
                    <div className="relative z-9 flex justify-center xl:hidden">
                        <Image
                            src={robotData?.small_image || withCDN("/building-instruction/Robot%20image.png")}
                            alt="robot"
                            width={455}
                            height={321}
                            unoptimized
                            className="object-cover w-[455px] h-[321px]"
                        />
                    </div>

                    <ImageSlider images={robotData?.model_0_gallery} />
                </div>

                {/* images */}
                <div className="absolute bottom-0 left-0 z-1  max-[768px]:-left-33 gear-box">
                    <Image
                        src={withCDN("/Package/gear%20blue-01.png")}
                        alt="gear"
                        width={420}
                        height={420}
                        unoptimized
                        className="object-cover w-[370px] xl:w-[420px] h-[420px]"
                    />
                </div>
                <div className="absolute bottom-[200px] right-0 z-1 max-[768px]:-right-26 hidden xl:block">
                    <Image
                        src={robotData?.small_image || withCDN("/building-instruction/Robot%20image.png")}
                        alt="robot"
                        width={455}
                        height={321}
                        unoptimized
                        className="object-cover w-[455px] h-[321px]"
                    />
                </div>
            </section>
            <section className="w-full h-[30px] bg-[#0097dc]"></section>
        </main>
    );
}