import HeroSection from "@/components/HeroSection";
import BusinessGrowth from "@/components/svgComponents/BusinessGrowth";
import Centralized from "@/components/svgComponents/Centralized";
import Hotel from "@/components/svgComponents/Hotel";
import Inventory from "@/components/svgComponents/Inventory";
import SmartConnect from "@/components/svgComponents/SmartConnect";
import {
  Bell,
  Blocks,
  CircleGauge,
  Handshake,
  MessageCircle,
  Smartphone,
} from "lucide-react";
import Link from "next/link";

const serviceCards = [
  {
    title: "Flexible Stay Models",
    description:
      "Manage nightly, weekly, monthly, or extended stays effortlessly from one centralized platform.",
    image: "/images/alternative-accomodation/flexible-stay.png",
  },
  {
    title: "Multi-Space Management",
    description:
      "Operate apartments, villas, hostels, cabins, co-living spaces, and boutique properties together in one system.",
    image: "/images/alternative-accomodation/multi-space.png",
  },
  {
    title: "Independent Brand Control",
    description:
      "Customize guest journeys, booking flows, and property experiences without relying entirely on third-party platforms.",
    image: "/images/alternative-accomodation/brand-control.png",
  },
  {
    title: "Scalable for Growing Portfolios",
    description:
      "Whether you manage a few units or multiple locations, your operations stay organized and easy to control.",
    image: "/images/alternative-accomodation/scalable.png",
  },
];

const operationFeatures = [
  {
    title: "Centralized Property Oversight",
    description:
      "Monitor reservations, housekeeping, maintenance, and guest activity from one dashboard.",
    icon: (
      <CircleGauge className="text-[#407BFF] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[28px] lg:w-[28px] xl:h-[32px] xl:w-[32px]" />
    ),
  },
  {
    title: "Smarter Team Coordination",
    description:
      "Assign tasks instantly to cleaners, support staff, or property managers with real-time updates.",
    icon: (
      <Handshake className="text-[#65BE9F] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[28px] lg:w-[28px] xl:h-[32px] xl:w-[32px]" />
    ),
  },
  {
    title: "Automated Guest Communication",
    description:
      "Reduce repetitive messaging with automated arrival instructions, reminders, and follow-ups.",
    icon: (
      <Bell className="text-[#F58220] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[28px] lg:w-[28px] xl:h-[32px] xl:w-[32px]" />
    ),
  },
];

const guestControl = [
  {
    title: "Contactless Arrival Experiences",
    description:
      "Allow guests to check in digitally and access property instructions before arrival.",
    icon: (
      <Hotel className="text-[#407BFF] h-[18px] w-[18px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
  {
    title: "Mobile-First Guest Journeys",
    description:
      "Enable guests to manage bookings, requests, and communication directly from their devices.",
    icon: (
      <Smartphone className="text-[#F58220] h-[18px] w-[18px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
  {
    title: "Flexible Stay Experiences",
    description:
      "Support self-check-in, extended stays, remote arrivals, and non-traditional booking flows effortlessly",
    icon: (
      <Centralized className="text-[#65BE9F] h-[18px] w-[18px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
  {
    title: "Personalized Guest Communication",
    description:
      "Create a more welcoming experience with automated yet personalized guest messaging.",
    icon: (
      <MessageCircle className="text-[#F58220] h-[18px] w-[18px] md:h-[24px] md:w-[24px] lg:h-[32px] lg:w-[32px]" />
    ),
  },
];

const bookingChannels = [
  {
    title: "OTA Synchronization",
    description:
      "Sync reservations and inventory across Airbnb, Booking.com, Expedia, and other booking channels in real time.",
    icon: (
      <SmartConnect className="text-[#407BFF] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[28px] lg:w-[28px] xl:h-[32px] xl:w-[32px]" />
    ),
    blurColor: "bg-[#407BFF]",
  },
  {
    title: "Unified Availability Control",
    description:
      "Avoid double bookings and manual updates with centralized inventory management.",
    icon: (
      <Inventory className="text-[#F58220] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[28px] lg:w-[28px] xl:h-[32px] xl:w-[32px]" />
    ),
    blurColor: "bg-[#F58220]",
  },
  {
    title: "Flexible Integration Ecosystem",
    description:
      "Connect smart locks, payment gateways, communication tools, and operational systems seamlessly.",
    icon: (
      <Blocks className="text-[#65BE9F] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[28px] lg:w-[28px] xl:h-[32px] xl:w-[32px]" />
    ),
    blurColor: "bg-[#65BE9F]",
  },
  {
    title: "Direct Booking Independence",
    description:
      "Build stronger guest relationships through commission-free direct reservations.",
    icon: (
      <BusinessGrowth className="text-[#FF725E] h-[20px] w-[20px] md:h-[24px] md:w-[24px] lg:h-[28px] lg:w-[28px] xl:h-[32px] xl:w-[32px]" />
    ),
    blurColor: "bg-[#FF725E]",
  },
];

const reliableFeatures = [
  {
    title: "Secure Guest Data Protection",
    description:
      "Protect reservations, payments, and guest information with industry-standard security practices.",
    bgColor: "border-[#407BFF] ",
  },
  {
    title: "Automated Backups & Reliability",
    description:
      "Cloud infrastructure ensures stable performance and operational continuity.",
    bgColor: "border-[#EB996E] ",
  },
  {
    title: "Consistent Performance",
    description:
      "Keep your operations running smoothly with reliable uptime and automatic system updates.",
    bgColor: "border-[#65BE9F] ",
  },
];

export default function AlternativeAccommodation() {
  return (
    <div>
      {/* hero section */}
      <HeroSection
        titleStart="Modernize Every Stay with Smarter"
        titleHighlight="Hospitality"
        titleEnd="Management"
        description="From vacation rentals and serviced apartments to boutique stays and hybrid properties, Lodging System gives you the flexibility to manage unique accommodations with ease. Automate operations, simplify guest experiences, and grow your business from one powerful platform."
      />

      {/* service section */}
      <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 md:flex-col gap-[16px] sm:gap-[22px] md:gap-[30px] lg:gap-[36px] xl:gap-[40px]">
        <div className="w-full flex flex-col gap-3 sm:gap-4 md:gap-4.5 lg:gap-5.5 xl:gap-6.5 items-center md:items-center h-full justify-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-center w-full md:w-[50%]">
            Designed for Every Type of{" "}
            <span className="text-[#F58220]">Stay</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-center text-[#444444] figtree w-full md:w-[65%]">
            Alternative accommodations require flexibility, speed, and control.
            Lodging System adapts to your property model so you can manage
            diverse spaces, guest types, and booking styles without operational
            complexity.
          </div>
        </div>
        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-[15px] lg:gap-[16px] 2xl:gap-[27px]">
          {serviceCards.map((item, index) => (
            <div
              key={index}
              className="relative rounded-[24px] lg:rounded-[36px] overflow-hidden group h-auto max-h-[400px] md:max-h-none"
            >
              <img
                src={item.image}
                alt={item.title}
                className="w-full h-full object-cover"
              />
              <div className="hidden md:block absolute inset-0 z-1 bg-linear-to-b from-transparent to-[#000000] h-[50%] mt-auto" />

              <div className="absolute bottom-0 left-0 rounded-[16px] lg:rounded-[24px] border border-[#FFFFFF33] bg-[#FFFFFF33] text-white z-10 backdrop-blur-sm m-[8px] p-2 lg:p-3 2xl:p-4 flex flex-col gap-[6px] 2xl:gap-3">
                <div className="lg:text-[20px] 2xl:text-[23px] leading-[24px] 2xl:leading-[28px] figtree font-semibold">
                  {item.title}
                </div>
                <div className="text-[14px] lg:text-[16px] 2xl:text-[18px] leading-[18px] lg:leading-[20px] 2xl:leading-[22px] figtree">
                  {item.description}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* operations section */}
      <div className="py-[40px] md: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 md:flex-row gap-[26px] bg-[#EFEFE6]">
        {/* Left Content */}
        <div className="flex flex-col gap-[20px] xl:gap-[50px] w-full lg:w-[59%] justify-center items-center">
          <div className="flex flex-col gap-3 sm:gap-4 md:gap-4.5 lg:gap-5.5 xl:gap-6.5 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-semibold figtree text-left max-w-full">
              Operate Professionally{" "}
              <span className="text-[#F58220]">Without a Large Team</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 lg:max-w-[95%]">
              Whether you manage a few units or a growing portfolio, Lodging
              System helps independent operators automate operations, simplify
              coordination, and maintain high-quality guest experiences with
              fewer resources.
            </div>
          </div>

          <div className="bg-white px-[16px] xs:px-[20px] lg:px-[26px] py-[16px] xs:py-[20px] lg:pt-[36px] lg:pb-[40px] flex flex-col gap-6 lg:gap-9 rounded-[16px] h-full">
            {operationFeatures.map((feature, index) => (
              <div
                key={index}
                className="flex flex-row items-start lg:items-center gap-4 pb-4 lg:pb-10 border-b border-[#E5E5E5] last:border-b-0 last:pb-0"
              >
                <div className="p-2 lg:p-4 bg-[#F5F6FA] rounded-[8px] sm:rounded-[16px] w-fit h-fit shrink-0">
                  {feature.icon}
                </div>

                <div className="flex flex-col gap-2">
                  <div className="font-medium 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-[12px] xs:text-[14px] lg:text-[16px] xl:text-[18px] leading-[18px] xs:leading-[20px] lg:leading-[22px] xl:leading-[24px] text-[#444444] figtree">
                    {feature.description}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Right Images Section */}
        <div className="w-full lg:w-[41%] flex items-center justify-center">
          <div className="rounded-[16px] sm:rounded-[24px] lg:rounded-[24px] overflow-hidden h-auto flex items-center justify-center w-fit">
            <img
              src="/images/alternative-accomodation/operate-professionally.png"
              alt="Profile Management"
              className="w-full h-auto sm:max-h-[440px] md:max-h-none object-contain object-center"
            />
          </div>
        </div>
      </div>

      {/* revenue section */}
      <div className="py-[40px] md: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-3 xs:p-4 lg:p-6 xl:p-3 flex flex-col md:flex-row gap-6 lg:gap-8 xl:gap-[46px] rounded-[16px] sm:rounded-[26px] overflow-hidden border border-[#EDEDED]">
          <div className="overflow-hidden w-full h-auto my-auto lg:w-[52%] flex flex-col justify-center gap-3 rounded-[12px] sm:rounded-[24px]">
            <div className="w-auto flex justify-center items-center h-full">
              <img
                src="/images/alternative-accomodation/revenue.png"
                className="w-auto max-h-[300px] sm:max-h-[340px] md:max-h-none h-full object-center rounded-[12px] sm:rounded-[26px] overflow-hidden"
                alt="Who We Serve 1"
              />
            </div>
          </div>
          <div className="flex flex-col justify-center items-center lg:items-start gap-6 lg:gap-8 xl:pr-[5px] w-full lg:w-[50%] xl:w-[48%]">
            <div className="flex flex-col gap-3 sm:gap-4 md:gap-4.5 lg:gap-5.5 xl:gap-6.5">
              <h2 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">
                Unlock Revenue Across{" "}
                <span className="text-[#6948CD]">Every Space</span>
              </h2>
              <p 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 w-full lg:w-[90%]">
                Alternative accommodations often generate revenue beyond nightly
                bookings. Lodging System helps you monetize flexible spaces,
                services, and experiences while keeping pricing optimized
                automatically.
              </p>
            </div>
            <div className="flex flex-col gap-6 lg:gap-9 w-full">
              <div className="flex flex-col gap-3">
                <div className="text-[18px] lg:text-[20px] leading-[24px] font-semibold figtree text-left">
                  Key Benefits
                </div>

                <ul className="flex flex-col sm:gap-3 gap-1 text-sm sm:text-base md:text-base lg:text-lg leading-[18px] sm:leading-[20px] md:leading-[28px] lg:leading-[24px] text-[#444444] figtree">
                  {[
                    "Manage rooms, apartments, parking, coworking areas, storage, or event spaces from one platform.",
                    "Offer curated local experiences, transportation, add-ons, or premium amenities during the booking journey.",
                    "Adjust rates automatically based on occupancy trends, local demand, and stay patterns.",
                  ].map((item, index) => (
                    <li key={index} className="flex items-start gap-3">
                      <span className="w-2 h-2 rounded-full bg-[#444444] mt-[8px] shrink-0" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div 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>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* guest control section  */}
      <div className="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-[#EFEFE6]">
        {/* Heading */}
        <div className="flex flex-col gap-3 sm:gap-4 md:gap-4.5 lg:gap-5.5 xl:gap-6.5 items-center px-[20px] xs:px-[20px] sm:px-[30px] md:px-[60px] lg:px-[110px] xl:px-[135px]">
          <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-[80%] 2xl:w-[60%]">
            Give Guests More Control Over Their Stay
          </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">
            Modern travelers expect flexibility, speed, and convenience. Lodging
            System helps you create frictionless stays that feel independent,
            connected, and easy from arrival to departure.
          </div>
        </div>

        {/* Responsive Grid */}
        <div className="bg-white rounded-[16px] md:rounded-[24px] overflow-hidden mx-[20px] sm:mx-[40px] md:mx-[70px] lg:mx-[128px] xl:mx-[208px]">
          <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 lg:px-[18px] ">
            {guestControl.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

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

            /* ---------- XL (4 cols) ---------- */
            xl:nth-[3n]:before:block
            xl:nth-[4n]:before:hidden
            xl:nth-last-[-n+4]:after: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>
        </div>
      </div>

      {/* booking channels section */}
      <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">
        <div 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">
            Stay Synced Across Every{" "}
            <span className="text-[#F58220]">Booking Channel</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-[70%] text-center text-[#444444] figtree">
            Keep your listings, availability, and pricing updated automatically
            across the platforms your guests already trust.
          </div>
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-4 gap-[16px]">
          {bookingChannels.map((feature, index) => (
            <div
              key={index}
              className="flex flex-col w-full min-w-0 bg-[#F6F7F9] rounded-[20px] sm:rounded-[18px] lg:rounded-[26px] p-3 xs:p-3 md:p-4 lg:p-4 xl:p-4 relative overflow-hidden"
            >
              {/* Background Number */}
              <div className="absolute top-[-5%] right-[1%] xs:top-[-5%] xs:right-[1%] sm:top-[-15%] sm:right-[1%] md:top-[-20%] md:right-0 lg:top-[-5%] lg:right-[1%] xl:top-[-5%] xl:right-[5%] text-[56px] xs:text-[64px] sm:text-[80px] md:text-[100px] lg:text-[120px] xl:text-[145px] leading-[64px] sm:leading-[90px] md:leading-[110px] lg:leading-[165px] xl:leading-[174px] font-semibold text-[#F0F2F5] figtree pointer-events-none select-none z-0">
                {(index + 1).toString().padStart(2, "0")}
              </div>

              {/* Content */}
              <div className="flex flex-row lg:flex-col gap-3 xs:gap-4 sm:gap-4 lg:gap-[120px] xl:gap-[136px] items-start lg:items-start relative z-10">
                <div className="relative">
                  <div
                    className={`absolute w-[84px] h-[84px] ${feature.blurColor} rounded-full top-0 left-0 blur-[50px] z-0`}
                  />
                  <div className="p-2 sm:p-3 lg:p-4  lg:mt-[16px] lg:ml-[16px] xl:mt-[18px] xl:ml-[18px] bg-[#FFFFFF80] rounded-[8px] xs:rounded-[12px] lg:rounded-[18px] shrink-0 relative z-1">
                    {feature.icon}
                  </div>
                </div>

                <div className="flex flex-col gap-1 xs:gap-2 xl:gap-3">
                  <div className="font-medium text-[16px] sm:text-[18px] xl:text-[20px] leading-[20px] sm:leading-[24px] xl:leading-[28px] figtree wrap-break-word">
                    {feature.title}
                  </div>

                  <div className="text-[14px] sm:text-[16px] xl:text-[18px] leading-[18px] sm:leading-[22px] xl:leading-[24px] text-[#444444] figtree wrap-break-word">
                    {feature.description}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* integrate tools */}
      <div className="py-[40px] md: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-[#F4F3FA]">
        <div className="bg-white p-3 xs:p-4 lg:p-6 xl:p-3 xl:pr-[62px] xl:pl-[52px] flex flex-col md:flex-row-reverse gap-6 lg:gap-8 xl:gap-[73px] rounded-[16px] sm:rounded-[26px] overflow-hidden border border-[#EDEDED]">
          <div className="overflow-hidden w-full h-auto my-auto lg:w-[53%] flex flex-col justify-center gap-3 rounded-[12px] sm:rounded-[24px]">
            <div className="w-auto flex justify-center items-center h-full">
              <img
                src="/images/alternative-accomodation/integrations.png"
                className="w-auto max-h-[300px] sm:max-h-[340px] md:max-h-none h-full object-center rounded-[12px] sm:rounded-[26px] overflow-hidden"
                alt="Who We Serve 1"
              />
            </div>
          </div>

          <div className="flex flex-col justify-center items-center lg:items-start lg:gap-6 gap-[16px] sm:gap-[22px] w-full lg:w-[50%] xl:w-[47%]">
            <div className="flex flex-col gap-3 sm:gap-4 md:gap-4.5 lg:gap-5.5 xl:gap-6.5">
              <h2 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">
                Integrate the Tools You{" "}
                <span className="text-[#6948CD]">Already Use</span>
              </h2>
              <p
                className="text-[#444444] figtree text-left text-sm sm:text-base md:text-base lg:text-lg leading-[18px] sm:leading-[20px] md:leading-[20px] lg:leading-[24px]
              "
              >
                Connect your accommodation business with the platforms and
                services your team already depends on. Lodging System helps you
                create a fully connected operational ecosystem.
              </p>
            </div>
            <div className="flex flex-col gap-6 lg:gap-9 w-full">
              <div className="flex flex-col gap-3">
                <div className="text-[18px] lg:text-[20px] leading-[24px] font-semibold figtree text-left">
                  Key Benefits
                </div>

                <ul className="flex flex-col sm:gap-3 gap-1 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">
                  {[
                    "Sync availability, pricing, and reservations across Airbnb, Booking.com, Expedia, and more.",
                    "Connect payment gateways, guest communication tools, accounting software, and operational systems seamlessly.",
                    "Add new properties, integrations, and operational tools without rebuilding your workflow.",
                  ].map((item, index) => (
                    <li key={index} className="flex items-start gap-3">
                      <span className="w-2 h-2 rounded-full bg-[#444444] mt-[8px] shrink-0" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div 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 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>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* reliable and secure  */}
      <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">
        <div 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">
            Reliable, Secure, and{" "}
            <span className="text-[#F58220]">Guest-Friendly</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-[55%] text-center text-[#444444] figtree">
            Deliver secure guest experiences while protecting operational data
            with a platform built for modern hospitality businesses.
          </div>
        </div>
        <div className="flex flex-col md:flex-row justify-between items-center gap-[16px] md:gap-[18px] lg:gap-[20px] xl:gap-[24px] 2xl:gap-[34px]">
          <div className="w-auto md:w-[45%] lg:w-[35%] xl:w-[40%] flex items-center justify-center overflow-hidden h-fit">
            <img
              src="/images/alternative-accomodation/secure.png"
              className="w-auto max-h-[350px] md:max-h-none md:h-auto object-cover rounded-[26px]"
              alt=""
            />
          </div>
          <div className="w-full md:w-[55%] lg:w-[65%] xl:w-[60%] flex flex-col md:flex-col gap-4 md:py-[30px] lg:py-[45px] flex-wrap xs:flex-nowrap relative md:before:content-[''] md:before:absolute md:before:top-0 md:before:right-[-140px] md:before:w-[80%] md:before:h-[6px] md:before:bg-[#F4F3FA] md:after:content-[''] md:after:absolute md:after:bottom-0 md:after:right-[-140px] md:after:w-full md:after:h-[6px] md:after:bg-[#F4F3FA]">
            {reliableFeatures.map((feature, index) => (
              <div
                key={index}
                className={`flex flex-col w-full bg-[#F4F3FA] rounded-[16px] md:rounded-[26px] p-[12px] sm:p-[16px] 2xl:p-[18px] relative overflow-hidden border-l-4 ${feature.bgColor}`}
              >
                <div className="-right-1 md:right-0 top-[-15%] md:top-0 text-[48px] leading-[54px] font-semibold text-[#E8E6F5] figtree absolute z-1">
                  {(index + 1).toString().padStart(2, "0")}
                </div>
                <div className="flex flex-row md:flex-col gap-[16px] md:gap-[18px] lg:gap-[30px] 2xl:gap-[36px] items-center md:items-start relative z-1">
                  <div className="flex flex-col gap-2">
                    <div className="font-semibold text-[16px] leading-[18px] lg:text-[20px] lg:leading-[28px] figtree">
                      {feature.title}
                    </div>
                    <div className="text-[14px] leading-[18px] lg:text-[16px] 2xl:text-[18px] lg:leading-[20px] 2xl:leading-[24px] text-[#444444] figtree">
                      {feature.description}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Quote */}
      <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">
        <div 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">
            Modernize the Way You Manage Alternative Accommodations
          </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 flexible guest experiences, simplify operations, and grow
            your accommodation business with a platform designed for modern
            hospitality. Whether you manage vacation rentals, serviced
            apartments, boutique stays, or hybrid properties, Lodging System
            gives you the tools to operate smarter every day.
          </div>
        </div>
        <div 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>
        </div>
      </div>
    </div>
  );
}
