"use client";

import { ChevronLeft, ChevronRight } from "lucide-react";
import { motion } from "motion/react";
import { useState } from "react";

export const successStories = [
  {
    partnerName: "Marcus Chen",
    partnerImage: "/images/home/success-image1.png",
    partnerComment:
      "Since switching to Lodging System, our front desk operations have become significantly faster and more organized. Reservations, payments, and guest communication are now handled from one place, which has improved both staff productivity and guest satisfaction.",
    partnerDesignation: "General Manager",
  },

  {
    partnerName: "Emily Carter",
    partnerImage: "/images/home/success-image2.png",
    partnerComment:
      "The channel management and direct booking tools helped us reduce manual updates and increase occupancy during peak seasons. Our team now spends less time managing systems and more time focusing on guests.",
    partnerDesignation: "Operations Director",
  },

  {
    partnerName: "David Morgan",
    partnerImage: "/images/home/success-image3.png",
    partnerComment:
      "Lodging System gave us the flexibility to manage multiple properties from one dashboard while keeping operations smooth across every location. Reporting and staff coordination are much easier now.",
    partnerDesignation: "Regional Operations Manager",
  },

  {
    partnerName: "Sophia Bennett",
    partnerImage: "/images/home/success-image4.png",
    partnerComment:
      "We needed a platform that was easy for staff to learn but powerful enough to automate our daily operations. Lodging System delivered exactly that with a very smooth onboarding experience.",
    partnerDesignation: "Property Owner",
  },

  {
    partnerName: "Daniel Kim",
    partnerImage: "/images/home/success-image5.png",
    partnerComment:
      "Real-time OTA synchronization helped us avoid overbookings completely. Inventory and pricing updates now happen automatically, saving our team hours of manual work every week.",
    partnerDesignation: "Revenue Manager",
  },

  {
    partnerName: "Olivia Turner",
    partnerImage: "/images/home/success-image6.png",
    partnerComment:
      "Our guests appreciate the digital check-in experience and automated communication features. It has reduced wait times and created a much smoother arrival experience overall.",
    partnerDesignation: "Guest Experience Manager",
  },

  {
    partnerName: "James Walker",
    partnerImage: "/images/home/success-image7.png",
    partnerComment:
      "What impressed us most was how flexible the platform is. We customized workflows, permissions, and integrations to fit our operations without unnecessary complexity.",
    partnerDesignation: "Business Owner",
  },

  {
    partnerName: "Ava Richardson",
    partnerImage: "/images/home/success-image8.png",
    partnerComment:
      "The housekeeping coordination tools helped our operational teams stay aligned in real time. Room turnovers are now faster and much easier to manage during busy periods.",
    partnerDesignation: "Operations Supervisor",
  },

  {
    partnerName: "Ethan Brooks",
    partnerImage: "/images/home/success-image9.png",
    partnerComment:
      "Lodging System helped us modernize our operations without disrupting existing workflows. The transition was smooth, and the platform scaled easily as our business continued growing.",
    partnerDesignation: "Managing Partner",
  },
];

export default function SuccessStories() {
  const [successStoryIndex, setSuccessStoryIndex] = useState(4);

  const nextSuccessStorySlide = () => {
    setSuccessStoryIndex((prev) => (prev + 1) % successStories.length);
  };

  const prevSuccessStorySlide = () => {
    setSuccessStoryIndex(
      (prev) => (prev - 1 + successStories.length) % successStories.length,
    );
  };

  return (
    <div className="px-[20px] xs:px-[20px] sm:px-[24px] md:px-[48px] lg:px-[58px] xl:px-[68px] 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-white">
      <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 lg:gap-4 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">
          Success Stories from{" "}
          <span className="text-[#F58220]">Our Hotel Partners</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-[65%] text-center text-[#444444] figtree">
          Direct feedback from hoteliers and property owners who have achieved
          transformative results using our comprehensive Lodging System.
        </div>
      </motion.div>
      <div className="flex flex-col gap-[12px] sm:gap-[16px] md:gap-[18px] lg:gap-[22px] justify-center items-center w-full">
        <div className="w-full overflow-x-auto overflow-y-hidden success-slider h-fit">
          <div className="flex flex-row gap-4 items-center min-w-max lg:min-w-fit mx-auto lg:mx-0 lg:justify-center px-4 lg:px-0 h-[130px] md:h-[150px] lg:h-[184px]">
            {successStories.map((story, index) => {
              const isActive = index === successStoryIndex;

              return (
                <div
                  key={index}
                  onClick={() => setSuccessStoryIndex(index)}
                  className={`cursor-pointer flex items-center justify-center rounded-[26px] overflow-hidden transition-all duration-700 shrink-0 ${
                    isActive
                      ? "w-[130px] md:w-[150px] lg:w-[184px] h-[130px] md:h-[150px] lg:h-[184px] border-[3px] border-[#F58220] bg-[#dfdedc] p-[6px]"
                      : "w-[120px] md:w-[140px] lg:w-[184px] h-[76px] md:h-[92px] lg:h-[102px] bg-[#E2D9CD]"
                  }`}
                >
                  <img
                    src={story.partnerImage}
                    alt={story.partnerName}
                    className={`w-full ${
                      isActive
                        ? "h-full object-contain object-center"
                        : "h-full object-contain"
                    }`}
                  />
                </div>
              );
            })}
          </div>
        </div>

        <motion.div
          initial={{ opacity: 0, x: -20 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{
            once: true,
            amount: 0.35,
          }}
          key={successStoryIndex}
          transition={{
            duration: 0.5,
            ease: "easeOut",
          }}
          className="text-center w-full md:max-w-[68%] flex flex-col gap-[8px] sm:gap-[12px] md:gap-[16px] lg:gap-[20px] xl:gap-[22px]"
        >
          <p className="text-[16px] sm:text-[18px] md:text-[20px] lg:text-[22px] xl:text-[24px] leading-[20px] sm:leading-[22px] md:leading-[24px] lg:leading-[28px] xl:leading-[32px] figtree lg:min-h-auto flex items-center justify-center">
            "{successStories[successStoryIndex].partnerComment}"
          </p>

          <div className="flex flex-col md:flex-row justify-between items-center text-center lg:text-left gap-6 lg:gap-0">
            <div className="flex flex-col gap-1 sm:gap-2 md:gap-3">
              <span className="font-semibold text-base sm:text-lg md:text-[20px] lg:text-[24px] leading-[18px] sm:leading-[20px] md:leading-[22px] lg:leading-[24px] figtree">
                {successStories[successStoryIndex].partnerName}
              </span>
              <span className="text-gray-500 text-sm md:text-base lg:text-lg leading-[20px] md:leading-[22px] lg:leading-[24px] figtree">
                {successStories[successStoryIndex].partnerDesignation}
              </span>
            </div>

            <div className="flex gap-4">
              <button
                onClick={prevSuccessStorySlide}
                className="p-[10px] lg:p-[15px] rounded-full text-[#868686] border border-[#E5E5E5] hover:text-[#F58220] cursor-pointer transition-colors duration-300"
              >
                <ChevronLeft className="w-4.5 h-4.5" />
              </button>

              <button
                onClick={nextSuccessStorySlide}
                className="p-[10px] lg:p-[15px] rounded-full text-[#868686] border border-[#E5E5E5] hover:text-[#F58220] cursor-pointer transition-colors duration-300"
              >
                <ChevronRight className="w-4.5 h-4.5" />
              </button>
            </div>
          </div>
        </motion.div>
      </div>
    </div>
  );
}