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


export default function RobotSelection({ robots = [], packageId }: { robots?: any[], packageId?: string }) {
  const FallbackRobot = [
    { 
	  image: withCDN("/Package/windmill.png"),
	  name:"Windmill",
	},
    { 
	  image: withCDN("/Package/Conveyor%20Belt.png"),
	  name:"Conveyor Belt",
	},
	{ 
	  image: withCDN("/Package/Pendulum%20Ride%20(2).png"),
	  name:"BackerBot",
	},
	{ 
	  image:withCDN("/Package/Pendulum%20Ride%20(1).png"),
	  name:"Pendulum Ride ",
	},
	{ 
	  image:withCDN("/Package/Patrol%20Police.png") ,
	  name:"Patrol Police ",
	},
	{ 
	  image:withCDN("/Package/Robo%20Bot.png"),
	  name:"Robo Bot",
	},
	{ 
	  image:withCDN("/Package/Painting%20Easel.png"),
	  name:"Painting Easel",
	},
	{ 
	  image:withCDN("/Package/Goaltender.png"),
	  name:"Goaltender",
	},      
  ];

  const displayRobots = robots.length > 0 ? robots : FallbackRobot;

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="/package-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 max-[767px]:w-[230px]">STARTER package / Select ROBOT</h2>
                    </div>
                </div>
            </div>
        </section>

        
        <section className="relative w-full flex h-full items-start min-h-[650px]">
           {/* 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-[-100px] max-[768px]:mt-[-120px]">
                <div className="flex item-center justify-center gap-5 flex-wrap pb-[260px] xl:pb-0 max-[481px]:pb-[120px]">
                    {displayRobots.map((item, index) => (
                      <div key={item.id || index} className="bg-white w-[290px] h-[290px] rounded-[55px] shadow-[12px_12px_24px_#00000033] overflow-hidden">
                        <div className="relative flex flex-col items-center justify-center gap-0 font-medium">
                            <Image
                            src={item.image}
                            alt={item.name}
                            width={241}
                            height={170}
                            className="object-contain w-[241px] h-[170px]"
                            />
                            <p className="text-[26px] text-[#58585A] mt-[-16px]">{item.name}</p>
                        </div>

                        {/* image-bottom */}
                        <div className="relative mt-5">
                            <Image
                            src={withCDN("/Package/brick-light%20blue-hex-00bdf2.png")}
                            alt="logo"
                            width={364}
                            height={80}
                            unoptimized
                            className="object-cover w-[364px] h-[80px]"
                            />
                           
                           <div className="flex items-center justify-center w-full mt-[-56px] relative z-10">
                            <a href={`/building-instruction?robot=${item.id || ''}&package=${packageId || ''}`}>
                            <Image
                            src={withCDN("/resource-access/video-controller.png")}
                            alt="logo"
                            width={40}
                            height={40}
                            unoptimized
                            className="object-cover w-[40px] h-[40px]"
                            />
                            </a>
                           </div>
                        </div>
                      </div>
                    ))} 
                </div>
            </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-0 right-0 z-1 max-[768px]:-right-26 max-[768px]:hidden">
                <Image
                src={withCDN("/Package/BackerBot.png")}
                alt="BackerBot"
                width={420}
                height={600}
                unoptimized
                className="object-cover w-[420px] h-[600px]"
                />
            </div>
        </section>

        {/*=================== Footer-image-bottom =============*/}
        <section className="relative w-full">
             {/* Background */}
            <div
            className="absolute inset-0 z-0 top-[-160px] bg-cover bg-top"
            style={{
             backgroundImage: "url('https://YEOLMS.b-cdn.net/Package/botom%20bricks.png')",
             backgroundRepeat: "no-repeat",
            }}
            />
        </section>
    </main>
    );
}