"use client";

import { motion } from "motion/react";

const getStartedCards = [
  {
    title: "Seamless Setup",
    description:
      "We configure your platform, migrate your data, and tailor the system to your hotel operations.",
    image: "/images/home/get-started-1.png",
    ellipseColors: [
      "bg-[#BACDF0]",
      "bg-[#BBCEF5]",
      "bg-[#D5E3F7]",
      "bg-[#D5E3F7]",
      "bg-[#F1D5F7]",
    ],
  },
  {
    title: "Staff Onboarding",
    description:
      "Your team gets guided onboarding and hands-on training to start using the platform efficiently.",
    image: "/images/home/get-started-2.png",
    ellipseColors: [
      "bg-[#F0BABA]",
      "bg-[#EEBD9D]",
      "bg-[#F3E6E0]",
      "bg-[#F7E5CD]",
      "bg-[#F7D5DC]",
    ],
  },
  {
    title: "Launch & Scale",
    description:
      "Go live with confidence and streamline daily operations as your hospitality business grows.",
    image: "/images/home/get-started-3.png",
    ellipseColors: [
      "bg-[#E9FFD7]",
      "bg-[#B2DEE1]",
      "bg-[#B9E1E9]",
      "bg-[#C5EACD]",
      "bg-[#FFFFFF]",
    ],
  },
];

export default function GetStarted() {
  return (
    <div className="px-[20px] xs:px-[20px] sm:px-[30px] md:px-[60px] lg:px-[110px] xl:px-[135px] py-[40px] lg:py-[80px] xl:py-[100px] flex flex-col gap-[16px] sm:gap-[22px] md:gap-[30px] lg:gap-[36px] xl:gap-[40px] bg-[#F3F2FAE3]">
      <motion.div
        initial={{ opacity: 0, scale: 0.96 }}
        whileInView={{ opacity: 1, scale: 1 }}
        viewport={{
          once: true,
          amount: 0.5,
        }}
        transition={{
          duration: 0.75,
          ease: "easeOut",
        }}
        className="flex flex-col gap-3 sm:gap-4 md:gap-4.5 lg:gap-5.5 xl:gap-6.5 items-center"
      >
        <div className="text-[28px] sm:text-[32px] md:text-[40px] lg:text-[48px] leading-[32px] sm:leading-[36px] md:leading-[50px] lg:leading-[54px] font-medium walsheim text-center">
          Get Started in{" "}
          <span className="text-[#6948CD]">Three Simple Steps</span>
        </div>
        <div className="text-sm sm:text-base md:text-base lg:text-lg leading-[18px] sm:leading-[20px] md:leading-[20px] lg:leading-[24px] w-full lg:w-[50%] text-center text-[#444444] figtree">
          From setup to onboarding and launch, Lodging System makes it easy for
          hotels to transition smoothly and start managing operations with
          confidence.
        </div>
      </motion.div>
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-[12px] sm:gap-[16px] md:gap-[18px] lg:gap-[22px] xl:gap-[26px]">
        {getStartedCards.map((card, index) => (
          <div
            key={index}
            className={`flex gap-[12px] sm:gap-[16px] md:gap-[18px] lg:gap-[22px] xl:gap-[26px] ${index % 2 == 0 ? "flex-col  xs:flex-row sm:flex-col justify-between" : "flex-col xs:flex-row-reverse sm:flex-col-reverse justify-between"}`}
          >
            <motion.div
              initial={{ opacity: 0, y: index % 2 == 0 ? -40 : 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{
                once: true,
                amount: 0.35,
              }}
              transition={{
                duration: 0.75,
                delay: index * 0.4,
                ease: "easeOut",
              }}
              className="w-full rounded-[12px] md:rounded-[16px] bg-white flex flex-col gap-1 md:gap-2 lg:gap-3 py-[20px] lg:py-[24px] px-4 relative overflow-hidden h-auto xs:h-full sm:h-[220px] lg:h-auto justify-center lg:justify-start"
            >
              <div
                className={`w-[165px] h-[169px] rotate-[-42.09deg] absolute top-[60%] left-[10%] z-0 blur-[50px] lg:blur-[70px] ${card.ellipseColors[0]}`}
              />
              <div
                className={`w-[198px] h-[300px] lg:h-[360px] rotate-[42.09deg] absolute bottom-[-25%] left-[30%] z-0 rounded-[100%] blur-[50px] lg:blur-[70px] ${card.ellipseColors[1]}`}
              />
              <div
                className={`w-[200px] lg:w-[241px] h-[200px] lg:h-[241px] rounded-full absolute bottom-[-15%] left-[-15%] z-0 blur-2xl lg:blur-[70px] ${card.ellipseColors[2]}`}
              />
              <div
                className={`w-[200px] lg:w-[265px] h-[200px] lg:h-[265px] rounded-full absolute top-[-15%] right-[-15%] z-0 blur-2xl lg:blur-[70px] ${card.ellipseColors[3]}`}
              />
              <div
                className={`w-[200px] lg:w-[241px] h-[200px] lg:h-[241px] rounded-full absolute bottom-[-70%] left-[30%] z-0 blur-[50px] lg:blur-[70px] ${card.ellipseColors[4]}`}
              />
              <div className="z-1 flex flex-col gap-3">
                <div className="flex flex-row gap-3.5 items-center figtree">
                  <div className="text-[30px] sm:text-[36px] md:text-[42px] lg:text-[48px] xl:text-[54px] leading-[38px] sm:leading-[42px] md:leading-[46px] lg:leading-[54px] xl:leading-[60px] font-semibold text-white">
                    {(index + 1).toString().padStart(2, "0")}
                  </div>
                  <div className="text-[16px] sm:text-[18px] md:text-[20px] lg:text-[22px] xl:text-[24px] leading-[20px] sm:leading-[24px] md:leading-[24px] lg:leading-[26px] xl:leading-[30px] font-semibold">
                    {card.title}
                  </div>
                </div>
                <div className="bg-[#2C2C2C2B] h-px w-full" />
                <div className="text-[12px] sm:text-[14px] lg:text-base w-full lg:w-auto leading-[16px] sm:leading-[18px] lg:leading-[22px] text-[#444444] figtree">
                  {card.description}
                </div>
              </div>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: index % 2 == 0 ? 40 : -40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{
                once: true,
                amount: 0.35,
              }}
              transition={{
                duration: 0.75,
                delay: index * 0.4,
                ease: "easeOut",
              }}
              className="rounded-[12px] md:rounded-[16px] overflow-hidden h-[250px] lg:h-auto w-full"
            >
              <img
                src={card.image}
                alt={card.title}
                className="w-full h-full object-cover"
              />
            </motion.div>
          </div>
        ))}
      </div>
    </div>
  );
}