"use client";

import HeroSection from "@/components/HeroSection";

import {
  ChevronDown,
  ChevronRight,
  MessageSquareMore,
  MonitorPlay,
  Rocket,
  Users,
} from "lucide-react";
import { motion } from "motion/react";
import ReCaptchaProvider from "@/components/RecaptchaProvider";
import DemoForm from "@/components/DemoForm";

const guidedJourney = [
  {
    title: "Send your message",
    description:
      "Fill out the form or call us. Tell us about your property and what you need.",
    icon: MessageSquareMore,
    bgColor: "bg-[#F18904]",
    bgColorLight: "bg-[#F18904]/10",
    textColor: "text-[#F18904]",
    borderColor: "border-[#F18904]/30",
  },
  {
    title: "Expert Consultation",
    description:
      "A hospitality specialist reaches out within 2 hours for a discovery call.",
    icon: Users,
    bgColor: "bg-[#6BA116]",
    bgColorLight: "bg-[#6BA116]/10",
    textColor: "text-[#6BA116]",
    borderColor: "border-[#6BA116]/30",
  },
  {
    title: "Tailored Demo",
    description:
      "We build a custom demo showing exactly how Lodging System fits your property.",
    icon: MonitorPlay,
    bgColor: "bg-[#693FCD]",
    bgColorLight: "bg-[#693FCD]/10",
    textColor: "text-[#693FCD]",
    borderColor: "border-[#693FCD]/30",
  },
  {
    title: "Go live",
    description:
      "Our onboarding team sets everything up and trains your staff. You're live in days.",
    icon: Rocket,
    bgColor: "bg-[#4C80E1]",
    bgColorLight: "bg-[#4C80E1]/10",
    textColor: "text-[#4C80E1]",
    borderColor: "border-[#4C80E1]/30",
  },
];

export default function DemoPage() {


  return (
    <div className="flex flex-col">
      {/* Hero Section */}
      <HeroSection
        titleStart="One small step for a demo, one giant leap for"
        titleHighlight="your property."
        titleEnd=""
        description="Transform your property, streamline operations, enhance guest experiences, and boost efficiency  all in one platform. book a demo today, and our experts will show you how Lodging System can simplify and elevate your hospitality management."
        titleClassName="max-w-[1305px]"
        showImages={false}
      />

      {/* step */}
      <ReCaptchaProvider>
        <DemoForm />
      </ReCaptchaProvider>

      {/* How It Works */}
      <div className="py-[40px] lg:py-[80px] xl:py-[100px] px-[20px] xs:px-[20px] sm:px-[30px] md:px-[60px] lg:px-[110px] xl:px-[135px] flex flex-col gap-[16px] sm:gap-[26px] md:gap-[32px] lg:gap-[40px] xl:gap-[50px] overflow-hidden bg-[#F4F3FA]">
        <motion.div
          initial={{ opacity: 0, scale: 0.96 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{
            once: true,
            amount: 0.3,
          }}
          transition={{
            duration: 1,
            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-[42px] xl:text-[48px] leading-[32px] sm:leading-[36px] md:leading-[50px] lg:leading-[54px] font-semibold figtree text-left">
            From First Contact to{" "}
            <span className="text-[#6948CD]">Fully Launched</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] text-[#444444] figtree text-left">
            A simple, guided journey from your first message to a running hotel
            management system.
          </div>
        </motion.div>
        <div className="relative flex flex-col sm:flex-row justify-between">
          {guidedJourney.map((item, index) => {
            const Icon = item.icon;

            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, x: -40 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{
                  once: true,
                  amount: 0.3,
                }}
                transition={{
                  delay: index * 0.2,
                  duration: 1,
                  ease: "easeOut",
                }}
                className="relative flex flex-row sm:flex-col items-center justify-center gap-8 w-full text-center flex-1 overflow-hidden min-h-[180px] sm:min-h-none"
              >
                {/* Connection Line */}
                {index !== guidedJourney.length - 1 && (
                  <div className="hidden sm:block absolute top-[73%] left-[29%] sm:top-[130px] sm:left-[calc(50%+45px)] sm:w-full w-[2px] sm:h-[2px] h-[50%] bg-[#D9D9D9] z-0" />
                )}
                {/* Arrow Icon */}
                {index !== 0 && (
                  <div className="hidden sm:block absolute top-[62px] right-0 z-10 w-full text-[#A0A0A0] text-[28px] font-light">
                    <ChevronRight />
                  </div>
                )}
                {index !== guidedJourney.length - 1 && (
                  <div className="sm:hidden bottom-0 absolute z-10 w-fit text-[#A0A0A0] text-[28px] font-light">
                    <ChevronDown />
                  </div>
                )}
                {index !== 0 && (
                  <div className="hidden sm:block absolute left-[29%] sm:left-auto top-[-25%] sm:top-[130px] sm:right-[calc(50%+45px)] sm:w-full w-[2px] sm:h-[2px] h-[50%] bg-[#D9D9D9] z-0" />
                )}

                {/* Top Circle + Icon */}
                <div className="relative flex flex-row sm:flex-col items-center justify-center z-20 sm:w-fit ">
                  {/* Number Circle */}
                  <div
                    className={`text-3xl font-bold w-16 h-16 sm:w-[110px] sm:h-[110px] ${item.textColor} ${item.bgColorLight} rounded-full flex items-center justify-center sm:mb-[-22px] relative z-10`}
                  >
                    {(index + 1).toString().padStart(2, "0")}
                  </div>

                  {/* Icon Circle */}
                  <div
                    className={`w-14 h-14 sm:w-16 sm:h-16 rounded-full flex items-center justify-center ${item.bgColor} relative z-20 shadow-[0_10px_30px_rgba(0,0,0,0.12)]`}
                  >
                    <Icon className="text-white w-6 h-6 sm:w-7 sm:h-7" />
                  </div>

                  {/* Bottom Circular Arc */}
                  <div
                    className={` absolute right-[-14px] sm:right-auto sm:bottom-[-18px] w-[100px] h-[65px] sm:w-[90px] sm:h-[60px] sm:border-b-2 border-r-2 rounded-r-full sm:border-r-0 sm:rounded-r-none sm:rounded-b-full ${item.borderColor}`}
                  >
                    {/* Left Dot */}
                    <div
                      className={`absolute right-[20%] bottom-[-10%] sm:right-auto sm:bottom-auto sm:left-0 sm:top-[30%] -translate-x-1/2 w-2.5 h-2.5 rounded-full ${item.bgColor}`}
                    />

                    {/* Center Bottom Dot */}
                    <div
                      className={`absolute right-[-10%] sm:right-auto top-[40%] sm:top-auto sm:left-1/2 sm:bottom-[-6px] -translate-x-1/2 w-2.5 h-2.5 rounded-full ${item.bgColor}`}
                    />

                    {/* Right Dot */}
                    <div
                      className={`absolute right-[30%] sm:right-0 top-[-10%] sm:top-[30%] translate-x-1/2 w-2.5 h-2.5 rounded-full ${item.bgColor}`}
                    />
                  </div>
                </div>

                {/* Content */}
                <div className="flex flex-col items-center justify-center gap-2 z-10 w-[70%] sm:w-auto sm:max-w-[90%] mt-2 sm:min-h-[140px]">
                  <p className="text-lg leading-[24px] font-semibold">
                    {item.title}
                  </p>

                  <p className="text-[14px] text-[#444444] leading-[20px]">
                    {item.description}
                  </p>
                </div>
              </motion.div>
            );
          })}
        </div>
      </div>

      {/* Success Stories */}
      {/* <SuccessStories /> */}
    </div>
  );
}