"use client";

import Faq from "@/components/Faq";
import GetStarted from "@/components/GetStarted";
import HeroSection from "@/components/HeroSection";
import AddUsers from "@/components/svgComponents/AddUsers";
import Building from "@/components/svgComponents/Building";
import Language from "@/components/svgComponents/Language";
import LinkSvg from "@/components/svgComponents/Link";
import MobileSettings from "@/components/svgComponents/MobileSettings";
import OpenApi from "@/components/svgComponents/OpenApi";
import Responsive from "@/components/svgComponents/Responsive";
import Revenue from "@/components/svgComponents/Revenue";
import Rocket from "@/components/svgComponents/Rocket";
import TimeSync from "@/components/svgComponents/TimeSync";
import Upsells from "@/components/svgComponents/Upsells";
import Link from "next/link";
import { motion } from "motion/react";
import { Check } from "lucide-react";

const pmsFeatures = [
  {
    title: "Higher Direct Booking Conversion",
    description:
      "Encourage guests to book directly through your branded website while reducing dependency on external booking platforms.",
    icon: (
      <Revenue className="text-[#407BFF] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
  {
    title: "Real-Time Reservation Accuracy",
    description:
      "Automatically display updated pricing, room availability, and reservation data to ensure a smooth and reliable booking experience.",
    icon: (
      <TimeSync className="text-[#65BE9F] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
  {
    title: "Built-In Revenue Opportunities",
    description:
      "Increase guest spending with promotional offers, room upgrades, special packages, and personalized booking incentives.",
    icon: (
      <Upsells className="text-[#F58220] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
];

const directBookings = [
  {
    title: "Clear Pricing & Reservation Details",
    description:
      "Display room rates, taxes, add-ons, and reservation summaries clearly so guests can book with confidence.",
    icon: (
      <OpenApi className="text-[#407BFF] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
  {
    title: "Faster Booking Decisions",
    description:
      "Provide guests with intuitive booking steps, flexible search filters, and streamlined checkout experiences that simplify reservations.",
    icon: (
      <TimeSync className="text-[#65BE9F] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
  {
    title: "Secure & Frictionless Checkout",
    description:
      "Deliver a smooth booking process with responsive layouts, promo code support, and secure reservation handling across every device.",
    icon: (
      <Responsive className="text-[#F58220] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
];

const everydevice = [
  {
    title: "Unified Booking Experience",
    description:
      "Provide a consistent reservation journey across desktop, tablet, and mobile platforms without compromising usability.",
    icon: (
      <Responsive className="text-[#407BFF] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
  {
    title: "Flexible Booking Access Points",
    description:
      "Allow guests to access reservations easily through direct booking links and streamlined reservation pathways.",
    icon: (
      <LinkSvg className="text-[#65BE9F] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
  {
    title: "Localized & Personalized Experiences",
    description:
      "Enhance guest convenience with customizable booking interfaces and multilingual reservation support.",
    icon: (
      <Language className="text-[#F58220] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
];

const coreFeatures = [
  {
    title: "Flexible Booking Widgets",
    description:
      "Embed customizable booking widgets directly into your website to make reservations simple, accessible, and conversion-friendly.",
    icon: (
      <Building className="text-[#407BFF] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
  {
    title: "Instant Reservation Management",
    description:
      "Allow guests to book, modify, or cancel reservations easily with real-time confirmation and automated updates.",
    icon: (
      <TimeSync className="text-[#65BE9F] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
  {
    title: "Optimized for Every Device",
    description:
      "Deliver a seamless booking experience across mobile, tablet, and desktop platforms with responsive reservation interfaces.",
    icon: (
      <MobileSettings className="text-[#65BE9F] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
  {
    title: "Built-In Upsell Opportunities",
    description:
      "Increase average booking value with room upgrades, add-ons, special packages, and promotional offers during checkout.",
    icon: (
      <Rocket className="text-[#407BFF] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
];

export default function BookingEngine() {
  return (
    <div>
      <HeroSection
        titleStart="Hotel"
        titleHighlight="Booking"
        titleEnd="Engine"
        description="Offers a smooth and personalized reservation journey with a modern booking engine built to increase direct bookings and maximize guest satisfaction."
      />

      {/* Turn Visitors into Guests with Ease */}
      <div className="py-[40px] lg:py-[50px] px-[20px] xs:px-[20px] sm:px-[30px] md:px-[60px] lg:px-[110px] xl:px-[135px] flex flex-col gap-3 sm:gap-4 md:gap-4.5 lg:gap-5.5 xl:gap-6.5">
        <motion.div
          initial={{ opacity: 0, scale: 0.96 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{
            once: true,
            amount: 0.3,
          }}
          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] figtree font-semibold text-center">
            Convert More Website Visitors Into Direct Bookings
          </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-[75%] xl:w-[50%] text-center text-[#444444] figtree">
            Deliver a fast, intuitive, and mobile-friendly booking experience
            that helps guests reserve with confidence while increasing direct
            revenue for your property.
          </div>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{
            once: true,
            amount: 0.3,
          }}
          transition={{
            delay: 0.2,
            duration: 1.5,
            ease: "easeOut",
          }} className="flex flex-col gap-5.5 justify-center items-center w-full mt-2 lg:mt-0">
          <Link
            href="/demo#get-demo"
            className="w-auto relative overflow-hidden px-4 md:px-5.5 py-3 md:py-4 bg-[#2c2c2c] text-white rounded-full lg:rounded-[26px] text-xs md:text-sm font-semibold leading-[100%] shadow-[0px_12px_36px_rgba(0,0,0,0.32)] hover:shadow-none transition-all duration-500 group cursor-pointer montserrat text-center"
          >
            <span className="relative z-10">Book a demo</span>

            <span className="pointer-events-none absolute top-[-20%] left-[-30%] h-[160%] w-[24px] bg-white/70 blur-md rotate-20 transition-all duration-500 ease-in-out group-hover:left-[95%]" />
          </Link>
        </motion.div>
      </div>

      {/* Seamless Lodging System Booking Engine */}
      <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-reverse md:flex-row gap-[26px] bg-[#F4F3FA]">
        {/* Left Content */}
        <motion.div
          initial={{ opacity: 0, x: -40 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{
            once: true,
            amount: 0.35,
          }}
          transition={{
            duration: 1.5,
            ease: "easeOut",
          }}
          className="flex flex-col gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] xl:gap-[52px] w-full md:w-[55%] lg:w-[55%] xl:w-[55%] h-full justify-center items-center">
          <motion.div
            initial={{ opacity: 0, x: -40 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{
              once: true,
              amount: 0.5,
            }}
            transition={{
              delay: 0.2,
              duration: 1.5,
              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 md:items-start">
            <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 md:text-left">
              Designed to Simplify{" "}
              <span className="text-[#F58220]">Direct Hotel Bookings</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-[95%] text-center md:text-left text-[#444444] figtree">
              Give guests a fast, intuitive, and conversion-focused booking
              experience with real-time availability, flexible search tools, and
              seamless reservation management integrated directly with your PMS.
            </div>
          </motion.div>

          <div className="flex flex-col gap-2 sm:gap-2.5 md:gap-2.5 lg:gap-3 xl:gap-3 h-full w-full">
            {pmsFeatures.map((feature, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, x: -40 }}
                whileInView={{
                  opacity: 1,
                  x: 0,
                  transition: {
                    duration: 0.75,
                    ease: "easeOut",
                    delay: index * 0.5,
                  },
                }}
                viewport={{
                  once: true,
                  amount: 0.5,
                }}
                className="flex flex-row items-start lg:items-center gap-2 md:gap-4 rounded-[12px] md:rounded-[16px] bg-white p-3 lg:p-[18px]"
              >
                <div className="p-2 lg:p-2.5 xl:p-3 bg-[#F5F6FA] rounded-[8px] md:rounded-[16px] w-fit h-fit shrink-0">
                  {feature.icon}
                </div>

                <div className="flex flex-col gap-1 md:gap-2">
                  <div className="font-semibold text-[14px] xs:text-[16px] lg:text-[18px] xl:text-[20px] leading-[16px] xs:leading-[20px] lg:leading-[22px] xl:leading-[24px] figtree">
                    {feature.title}
                  </div>
                  <div className="text-[13px] xs:text-[14px] lg:text-[16px] xl:text-[18px] leading-[16px] xs:leading-[20px] lg:leading-[22px] xl:leading-[22px] text-[#444444] figtree">
                    {feature.description}
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>

        {/* Right Images Section */}
        <motion.div
          initial={{ opacity: 0, x: 40 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{
            once: true,
            amount: 0.35,
          }}
          transition={{
            duration: 1.5,
            ease: "easeOut",
          }}
          className="w-auto md:w-[45%] lg:w-[45%] xl:w-[45%] h-full relative overflow-hidden my-auto px-2 md:px-0 lg:px-0 py-2 md:py-0 lg:py-0 max-h-[540px] sm:max-h-none flex items-center justify-center">

          <img
            src="/images/booking-interface/direct-bookings.png"
            alt="Profile Management"
            className="w-auto object-contain max-h-[350px] xs:max-h-[350px] md:max-h-none rounded-[16px] md:rounded-[24px]"
          />
        </motion.div>
      </div>

      {/* Maximize Direct Booking Performance */}
      <div className="py-[40px] lg:py-[80px] xl:py-[100px] px-[20px] sm:px-[40px] md:px-[70px] lg:px-[25px] flex flex-col gap-[16px] sm:gap-[22px] md:gap-[30px] lg:gap-[36px] xl:gap-[40px] bg-[#EFEFE6]">
        {/* Heading */}
        <motion.div
          initial={{ opacity: 0, scale: 0.96 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{
            once: true,
            amount: 0.3,
          }}
          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] figtree font-semibold text-center w-full lg:w-[80%] xl:w-[60%]">
            Designed to Improve Every Booking Experience
          </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-[70%] xl:w-[50%] text-center text-[#444444] figtree">
            Give guests a faster, smoother, and more flexible reservation
            journey with booking tools built to increase direct conversions and
            simplify the entire booking process.
          </div>
        </motion.div>

        {/* Responsive Grid */}
        <motion.div
          initial={{ opacity: 0, x: -50 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{
            once: true,
            amount: 0.3,
          }}
          transition={{
            duration: 0.75,
            ease: "easeOut",
          }} className="bg-white rounded-[16px] md:rounded-[24px] overflow-hidden">
          <div className="grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 lg:px-[18px]">
            {coreFeatures.map((feature, index) => (
              <div
                key={index}
                className={`
          relative flex flex-row xs:flex-col gap-4 xs:gap-[20px] md:gap-[26px]
            px-[20px] lg:px-[18px]
            py-[24px] lg:pt-[54px] lg:pb-[54px] 2xl:pt-[64px] 2xl:pb-[74px] overflow-hidden

          /* Horizontal Gradient Border */
          after:content-['']
          after:absolute
          after:bottom-0
          after:left-0
          after:translate-x-0
          after:h-px
          after:w-[80%]
          after:bg-[linear-gradient(90deg,#ffffff_0%,#BFBFBF_50%,#ffffff_100%)]

          /* Vertical Gradient Border */
          before:content-['']
          before:absolute
          before:top-1/2
          before:-translate-y-1/2
          before:right-0
          before:w-px
          before:h-full
          before:bg-[linear-gradient(180deg,#BFBFBF_0%,#ffffff_90%,#ffffff_100%)]

          /* ---------- MOBILE ---------- */
          before:hidden
          last:after:hidden

          /* ---------- XS (2 cols) ---------- */
          xs:before:block
          xs:nth-[2n]:before:hidden
          xs:last:after:hidden
          xs:nth-last-[-n+2]:after:hidden

          /* ---------- LG (3 cols) ---------- */
          lg:nth-[2n]:before:block
          lg:nth-[3n]:before:hidden
          lg:nth-last-[-n+3]:after:hidden

          /* ---------- XL (5 cols single row) ---------- */
          xl:nth-[3n]:before:block
          xl:nth-[5n]:before:hidden
          xl:after:hidden
          xl:last:before:hidden
        `}
              >
                {/* Large Background Index */}
                <div className="absolute top-[-15%] right-[-2%] xs:top-[-8%] sm:top-[-12%] xl:top-[-14%] xs:right-2 sm:right-4 xl:right-[15%] text-[72px] sm:text-[90px] xl:text-[130px] leading-none text-[#FAF9FF] font-semibold figtree select-none z-0 pointer-events-none">
                  {(index + 1).toString().padStart(2, "0")}
                </div>

                {/* Icon */}
                <div className="relative z-10 h-9 w-9 md:w-10 md:h-10 lg:w-12 lg:h-12 bg-[#F4F3FA] flex items-center justify-center rounded-[8px] shrink-0">
                  {feature.icon}
                </div>

                {/* Content */}
                <div className="relative z-10 flex flex-col gap-1 xs:gap-2 md:gap-3 w-fit">
                  <div className="font-semibold text-[16px] lg:text-[20px] lg:leading-[24px] figtree ">
                    {feature.title}
                  </div>

                  <div className="text-[14px] lg:text-[18px] lg:leading-[24px] text-[#444444] figtree">
                    {feature.description}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </motion.div>
      </div>

      {/* Make Simplify Direct Bookings */}
      <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] bg-white">
        <div className="bg-[#F6F7F9] p-[16px] sm:p-[20px] lg:p-3 flex flex-col md:flex-row gap-[24px] sm:gap-[24px] lg:gap-[28px] xl:gap-[46px] rounded-[18px] md:rounded-[26px] border border-[#EDEDED]">
          {/* Image Section */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{
              once: true,
              amount: 0.35,
            }}
            transition={{
              duration: 1.5,
              ease: "easeOut",
            }}
            className="w-auto md:w-[45%] lg:w-[50%] xl:w-[53%] h-auto  overflow-hidden flex justify-center items-center bg-[#F6F7F9]"
          >
            <img
              src="/images/booking-interface/website-booking.png"
              className="w-auto object-contain max-h-[350px] xs:max-h-[350px] md:max-h-none rounded-[16px] md:rounded-[26px]"
              alt="Lodging Booking Engine"
            />
          </motion.div>

          {/* Content Section */}
          <div className="flex flex-col justify-center items-center lg:items-start gap-3 sm:gap-[16px] md:gap-[18px] lg:gap-[20px] xl:gap-[24px] sm-p-0 lg:p-0 lg:py-0 lg:pr-[20px] 2xl:py-0 2xl:pr-0 w-full md:w-[55%] lg:w-[50%] xl:w-[47%]">
            <div className="flex flex-col gap-3 sm:gap-4 md:gap-[16px] lg:gap-[18px] xl:gap-[22px]">
              <motion.div
                initial={{ opacity: 0, x: 20 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{
                  once: true,
                  amount: 0.35,
                }}
                transition={{
                  duration: 1.5,
                  ease: "easeOut",
                }}
                className="text-[28px] sm:text-[30px] md:text-[32px] lg:text-[42px] xl:text-[46px] leading-[32px] sm:leading-[32px] md:leading-[36px] lg:leading-[44px] xl:leading-[50px] font-semibold figtree text-left"
              >
                Turn Your Website Into a{" "}
                <span className="text-[#F58220]">Direct Booking Channel</span>
              </motion.div>
              <motion.div
                initial={{ opacity: 0, x: 20 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{
                  once: true,
                  amount: 0.35,
                }}
                transition={{
                  delay: 0.2,
                  duration: 1.5,
                  ease: "easeOut",
                }}
                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"
              >
                Our fully integrated booking engine powers modern hotel websites
                with seamless reservations, responsive design, and automated
                guest communication — helping increase direct bookings and
                reduce commission dependency.
              </motion.div>
            </div>

            <div className="flex flex-col gap-3 lg:gap-4 xl:gap-9 w-full">
              <div className="flex flex-col gap-3 items-start">
                <motion.div
                  initial={{ opacity: 0, x: 20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{
                    once: true,
                    amount: 0.35,
                  }}
                  transition={{
                    duration: 1.5,
                    ease: "easeOut",
                  }}
                  className="text-[16px] lg:text-[20px] leading-[24px] font-semibold figtree text-left"
                >
                  Key Benefits
                </motion.div>

                <ul className="flex flex-col gap-1 lg:gap-3 w-full text-[14px] lg:text-[18px] leading-[20px] lg:leading-[24px] text-[#444444] figtree">
                  {[
                    "Custom hotel website with integrated booking functionality",
                    "Smooth reservation experience across all devices",
                    "Automated emails and guest communication workflows",
                  ].map((item, index) => (
                    <motion.li
                      key={index}
                      initial={{ opacity: 0, x: 20 }}
                      whileInView={{ opacity: 1, x: 0 }}
                      viewport={{
                        once: true,
                        amount: 0.35,
                      }}
                      transition={{
                        duration: 1.5,
                        delay: index * 0.4,
                        ease: "easeOut",
                      }}
                      className="flex items-start gap-3 justify-start text-left"
                    >
                      <Check className="bg-[#F58220] w-4 h-4 md:w-4.5 md:h-4.5 mt-[5px] text-white p-0.5 rounded-full shrink-0" />
                      <span>{item}</span>
                    </motion.li>
                  ))}
                </ul>
              </div>

              <motion.div
                initial={{ opacity: 0, x: 50 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{
                  once: true,
                  amount: 0.35,
                }}
                transition={{
                  delay: 0.6,
                  duration: 1.5,
                  ease: "easeOut",
                }}
                className="flex justify-start"
              >
                <Link
                  href="/demo#get-demo"
                  className="relative overflow-hidden px-4 md:px-5.5 py-3 md:py-4 bg-[#2c2c2c] text-white rounded-[26px] text-[12px] md:text-[14px] font-semibold leading-[100%] shadow-[0px_12px_36px_rgba(0,0,0,0.32)] hover:shadow-none transition-all duration-500 group cursor-pointer montserrat w-full sm:w-auto text-center"
                >
                  <span className="relative z-10">Request a Quote</span>

                  <span className="pointer-events-none absolute top-[-20%] left-[-30%] h-[160%] w-[24px] bg-white/70 blur-md rotate-20 transition-all duration-500 ease-in-out group-hover:left-[95%]" />
                </Link>
              </motion.div>
            </div>
          </div>
        </div>
      </div>

      {/* Boost Direct Reservations */}
      <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-reverse md:flex-row gap-[26px] bg-[#F4F3FA]">
        {/* Left Content */}
        <motion.div
          initial={{ opacity: 0, x: -40 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{
            once: true,
            amount: 0.35,
          }}
          transition={{
            duration: 1.5,
            ease: "easeOut",
          }}
          className="flex flex-col gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] xl:gap-[52px] w-full md:w-[55%] lg:w-[55%] xl:w-[55%] h-full justify-center items-center">
          <motion.div
            initial={{ opacity: 0, x: -40 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{
              once: true,
              amount: 0.5,
            }}
            transition={{
              delay: 0.2,
              duration: 1.5,
              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 md:items-start">
            <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 md:text-left">
              Simplify the{" "}
              <span className="text-[#F58220]">Guest Checkout Experience</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-[95%] text-center md:text-left text-[#444444] figtree">
              Help guests complete reservations faster with a clean,
              transparent, and easy-to-follow booking flow designed to reduce
              drop-offs and improve direct booking conversions.
            </div>
          </motion.div>

          <div className="flex flex-col gap-2 sm:gap-2.5 md:gap-2.5 lg:gap-3 xl:gap-3 h-full w-full">
            {directBookings.map((feature, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, x: -40 }}
                whileInView={{
                  opacity: 1,
                  x: 0,
                  transition: {
                    duration: 0.75,
                    ease: "easeOut",
                    delay: index * 0.5,
                  },
                }}
                viewport={{
                  once: true,
                  amount: 0.5,
                }}
                className="flex flex-row items-start lg:items-center gap-2 md:gap-4 rounded-[12px] md:rounded-[16px] bg-white p-3 lg:p-[18px]"
              >
                <div className="p-2 lg:p-2.5 xl:p-3 bg-[#F5F6FA] rounded-[8px] md:rounded-[16px] w-fit h-fit shrink-0">
                  {feature.icon}
                </div>

                <div className="flex flex-col gap-1 md:gap-2">
                  <div className="font-semibold text-[14px] xs:text-[16px] lg:text-[18px] xl:text-[20px] leading-[16px] xs:leading-[20px] lg:leading-[22px] xl:leading-[24px] figtree">
                    {feature.title}
                  </div>
                  <div className="text-[13px] xs:text-[14px] lg:text-[16px] xl:text-[18px] leading-[16px] xs:leading-[20px] lg:leading-[22px] xl:leading-[22px] text-[#444444] figtree">
                    {feature.description}
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>

        {/* Right Images Section */}
        <motion.div
          initial={{ opacity: 0, x: 40 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{
            once: true,
            amount: 0.35,
          }}
          transition={{
            duration: 1.5,
            ease: "easeOut",
          }}
          className="w-auto md:w-[45%] lg:w-[45%] xl:w-[45%] h-full relative overflow-hidden my-auto px-2 md:px-0 lg:px-0 py-2 md:py-0 lg:py-0 max-h-[540px] sm:max-h-none flex items-center justify-center">

          <img
            src="/images/booking-interface/easy-checkout.png"
            alt="Profile Management"
            className="w-auto object-contain max-h-[350px] xs:max-h-[350px] md:max-h-none rounded-[16px] md:rounded-[24px]"
          />
        </motion.div>
      </div>

      {/* Optimized for Every Device */}
      <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-reverse md:flex-row gap-[26px] bg-[#F8F5F2]">
        {/* Left Content */}
        <motion.div
          initial={{ opacity: 0, x: -40 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{
            once: true,
            amount: 0.35,
          }}
          transition={{
            duration: 1.5,
            ease: "easeOut",
          }}
          className="flex flex-col gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] xl:gap-[52px] w-full md:w-[55%] lg:w-[55%] xl:w-[55%] h-full justify-center items-center">
          <motion.div
            initial={{ opacity: 0, x: -40 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{
              once: true,
              amount: 0.5,
            }}
            transition={{
              delay: 0.2,
              duration: 1.5,
              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 md:items-start">
            <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 md:text-left">
              Designed for Modern Travelers on <span className="text-[#F58220]">Every Device</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-[95%] text-center md:text-left text-[#444444] figtree">
              Deliver responsive, accessible, and guest-friendly booking experiences with flexible reservation tools optimized for convenience, usability, and global accessibility.
            </div>
          </motion.div>

          <div className="flex flex-col gap-2 sm:gap-2.5 md:gap-2.5 lg:gap-3 xl:gap-3 h-full w-full">
            {everydevice.map((feature, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, x: -40 }}
                whileInView={{
                  opacity: 1,
                  x: 0,
                  transition: {
                    duration: 0.75,
                    ease: "easeOut",
                    delay: index * 0.5,
                  },
                }}
                viewport={{
                  once: true,
                  amount: 0.5,
                }}
                className="flex flex-row items-start lg:items-center gap-2 md:gap-4 rounded-[12px] md:rounded-[16px] bg-white p-3 lg:p-[18px]"
              >
                <div className="p-2 lg:p-2.5 xl:p-3 bg-[#F5F6FA] rounded-[8px] md:rounded-[16px] w-fit h-fit shrink-0">
                  {feature.icon}
                </div>

                <div className="flex flex-col gap-1 md:gap-2">
                  <div className="font-semibold text-[14px] xs:text-[16px] lg:text-[18px] xl:text-[20px] leading-[16px] xs:leading-[20px] lg:leading-[22px] xl:leading-[24px] figtree">
                    {feature.title}
                  </div>
                  <div className="text-[13px] xs:text-[14px] lg:text-[16px] xl:text-[18px] leading-[16px] xs:leading-[20px] lg:leading-[22px] xl:leading-[22px] text-[#444444] figtree">
                    {feature.description}
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>

        {/* Right Images Section */}
        <motion.div
          initial={{ opacity: 0, x: 40 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{
            once: true,
            amount: 0.35,
          }}
          transition={{
            duration: 1.5,
            ease: "easeOut",
          }}
          className="w-auto md:w-[45%] lg:w-[45%] xl:w-[45%] h-full relative overflow-hidden my-auto px-2 md:px-0 lg:px-0 py-2 md:py-0 lg:py-0 max-h-[540px] sm:max-h-none flex items-center justify-center">

          <img
            src="/images/booking-interface/com-mob-img.jpg"
            alt="Profile Management"
            className="w-auto object-contain max-h-[350px] xs:max-h-[350px] md:max-h-none rounded-[16px] md:rounded-[24px]"
          />
        </motion.div>
      </div>

      {/* Frequently Asked Ques */}
      <Faq />

      {/* Get Started */}
      <GetStarted />

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