kupos-ui-components-lib 9.7.4 → 9.7.5

package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx

@@ -1,1021 +0,0 @@
-import React from "react";
-import LottiePlayer from "../../assets/LottiePlayer";
-import commonService from "../../utils/CommonService";
-
-const HARDCODED_OPERATORS = [
-  {
-    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Turbus_logo.svg/320px-Turbus_logo.svg.png",
-    name: "Turbus",
-    time: "7:00 am",
-    seatsAvailable: "3 disponibles",
-  },
-  {
-    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Pullman_Bus_logo.svg/320px-Pullman_Bus_logo.svg.png",
-    name: "Pullmanbus",
-    time: "8:00 am",
-    seatsAvailable: "5 disponibles",
-  },
-  {
-    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Turbus_logo.svg/320px-Turbus_logo.svg.png",
-    name: "Expreso Santa C...",
-    time: "9:00 am",
-    seatsAvailable: "3 disponibles",
-  },
-];
-
-const FeatureServiceUiMobile = ({
-  serviceItem,
-  showTopLabel,
-  colors,
-  isSoldOut,
-  cityOrigin,
-  cityDestination,
-  renderIcon,
-  viewersConfig,
-  isFeatureDropDownExpand,
-  onToggleExpand,
-  ticketQuantity = 1,
-  onIncreaseTicketQuantity,
-  onDecreaseTicketQuantity,
-  onBookButtonPress,
-}) => {
-  const operators =
-    serviceItem?.operators?.length > 0
-      ? serviceItem.operators
-      : HARDCODED_OPERATORS;
-
-  const isItemExpanded =
-    serviceItem.id === isFeatureDropDownExpand ||
-    isFeatureDropDownExpand === true;
-  const canDecreaseTicketQuantity = ticketQuantity > 1;
-
-  const HOW_IT_WORKS_STEPS = [
-    {
-      icon: "flexible",
-      name: "1. Salida flexible",
-      text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
-    },
-    {
-      icon: "bus",
-      name: "2. Empresa asignada",
-      text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
-    },
-    {
-      icon: "price",
-      name: "3. Precio garantizado",
-      text: "Mejor precio garantizado. Sin cambios ni cancelación.",
-    },
-    {
-      icon: "ticket",
-      name: "4. ¡Listo!",
-      text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
-    },
-  ];
-
-  const FeatureStepIcon = ({ icon }) => {
-    switch (icon) {
-      case "flexible":
-        return renderIcon("flexibleIcon", "20px");
-      case "bus":
-        return renderIcon("empressaIcon", "20px");
-      case "price":
-        return renderIcon("precioIcon", "20px");
-      default:
-        return renderIcon("listoIcon", "20px");
-    }
-  };
-
-  return (
-    <div
-      // ${
-      //   serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
-      // }
-      className={`relative  mb-[10px]
-       ${
-         serviceItem?.is_direct_trip ||
-         serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
-         showTopLabel
-           ? "mt-[24px]"
-           : "mt-[20px]"
-       }`}
-    >
-      <div
-        className="shadow-service"
-        style={{
-          // border: "1px solid #c0c0c0",
-          padding: "12px",
-          borderRadius: "14px",
-        }}
-      >
-        <div className="flex flex-col items-center px-[12px] pb-[8px] text-[13.33px] gap-[8px]">
-          <div>
-            <span className="flex items-center">
-              <img
-                src={serviceItem?.icons?.fireIcon}
-                alt="fire"
-                className="h-[14px] w-[14px] mr-[4px]"
-              />
-              <span className="bold-text">Remate</span> términa en{" "}
-              <span
-                className="bold-text text-end"
-                ref={(node) => commonService.startCountdown(node, 599)}
-                style={{
-                  fontVariantNumeric: "tabular-nums",
-                  display: "inline-block",
-                  color: "#FF5C60",
-                  minWidth: "40px",
-                }}
-              />
-            </span>
-          </div>
-          <div className="flex items-center gap-[10px]">
-            <span>Salida flexible</span>
-            <div
-              className="bold-text font-[9px]"
-              style={{
-                backgroundColor: "#FF5C60",
-                padding: "1px 8px",
-                borderRadius: "4px",
-                color: "#fff",
-                animation: "pulse-zoom 2s ease-in-out infinite",
-                whiteSpace: "nowrap",
-              }}
-            >
-              <span>AHORRAS 60%</span>
-            </div>
-          </div>
-        </div>
-        <div
-          id={`service-card-${serviceItem.id}`}
-          className="bg-[#0C1421] text-white mx-auto relative rounded-[14px]  p-[14px] text-[13.33px]"
-        >
-          <div className="flex flex-col gap-[10px]">
-            <div className=" text-[white]">
-              <div className="flex flex-col gap-[10px] relative">
-                <div className="flex items-center gap-[6px]">
-                  <img
-                    src={serviceItem.icons?.whiteOrigin}
-                    alt="origin"
-                    className={`w-[14px] h-[14px] shrink-0 ${
-                      isSoldOut ? "grayscale" : ""
-                    }`}
-                  />
-                  <span className="text-[13px] bold-text">
-                    {cityOrigin?.label.split(",")[0]}
-                    <span className="mx-[6px]">→</span>
-                    {cityDestination?.label.split(",")[0]}
-                  </span>
-                </div>
-                <div
-                  style={{
-                    width: "1px",
-                    flex: 1,
-                    backgroundColor: "#fff",
-                    margin: "3px 0",
-                    minHeight: "8px",
-                    position: "absolute",
-                    top: "13px",
-                    left: "7px",
-                  }}
-                />
-                <div className="flex items-center gap-[6px]">
-                  <img
-                    src={serviceItem.icons?.whiteDestination}
-                    alt="destination"
-                    className={`w-[14px] h-[14px] shrink-0 ${
-                      isSoldOut ? "grayscale" : ""
-                    }`}
-                    style={{ opacity: isSoldOut ? 0.5 : 1 }}
-                  />
-                  <span className="text-[13px]">
-                    23 de mayo,{" "}
-                    <span className="bold-text">Entre 07:00 AM y 10:00 AM</span>
-                  </span>
-                </div>
-              </div>
-              {/* <div className="flex gap-[8px]">
-                <div className="flex flex-col items-center">
-                  <img
-                    src={serviceItem.icons?.whiteOrigin}
-                    alt="origin"
-                    className={`w-[14px] h-[14px] shrink-0 ${
-                      isSoldOut ? "grayscale" : ""
-                    }`}
-                  />
-                  <div
-                    style={{
-                      width: "1px",
-                      flex: 1,
-                      backgroundColor: "#fff",
-                      margin: "3px 0",
-                      minHeight: "8px",
-                    }}
-                  />
-                  <img
-                    src={serviceItem.icons?.whiteDestination}
-                    alt="destination"
-                    className={`w-[14px] h-[14px] shrink-0 ${
-                      isSoldOut ? "grayscale" : ""
-                    }`}
-                    style={{ opacity: isSoldOut ? 0.5 : 1 }}
-                  />
-                </div>
-                <div className="flex flex-col gap-[8px]">
-                  <span className="text-[13px] bold-text">
-                    {cityOrigin?.label.split(",")[0]}
-                    <span className="mx-[6px]">→</span>
-                    {cityDestination?.label.split(",")[0]}
-                  </span>
-                  <span className="text-[13px]">
-                    23 de mayo,{" "}
-                    <span className="bold-text">Entre 07:00 AM y 10:00 AM</span>
-                  </span>
-                </div>
-              </div> */}
-            </div>
-
-            <div className="border-t border-[#363c48] my-[8px]" />
-
-            <div>
-              <span className="text-[15px] bold-text text-[white] flex items-center justify-center mb-[10px]">
-                3 operadores compitiendo por tu compra
-              </span>
-              <div className="flex gap-[8px] text-[white]">
-                {operators.map((op, idx) => (
-                  <div
-                    key={idx}
-                    className="flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]"
-                    style={{
-                      // height: "80px",
-                      border: "1px solid #363c48",
-                      backgroundColor: "#1a202e",
-                      padding: "14px 10px",
-                    }}
-                  >
-                    <img
-                      src={serviceItem.operator_details[0]}
-                      alt={op.name}
-                      className={`h-[24px] max-w-full object-contain ${
-                        isSoldOut ? "grayscale" : ""
-                      }`}
-                    />
-                    <span className="text-[11px] truncate max-w-full text-center">
-                      {serviceItem.operator_details[2]}
-                    </span>
-                    <div className="bg-[#FF8F45] text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">
-                      <span>{op?.time}</span>
-                    </div>
-                    <span className="text-[10px] mt-[6px]">
-                      {op?.seatsAvailable}
-                    </span>
-                  </div>
-                ))}
-              </div>
-
-              <div
-                className="flex w-full items-center justify-center gap-[6px] text-[12px] mt-[12px]"
-                style={{
-                  border: "1px solid #363c48",
-                  backgroundColor: "#1a202e",
-                  padding: "4px 14px",
-                  borderRadius: "24px",
-                }}
-              >
-                <LottiePlayer
-                  animationData={serviceItem.icons.personsAnim}
-                  // animationData={getAnimationIcon("usersAnimation")}
-                  width="18px"
-                  height="18px"
-                />
-                <span>
-                  <span className="bold-text text-[white]">
-                    {" "}
-                    <span
-                      className="bold-text"
-                      ref={(node) =>
-                        commonService.startViewerCount(node, viewersConfig)
-                      }
-                      style={{
-                        fontVariantNumeric: "tabular-nums",
-                        color: "#FF5C60",
-                      }}
-                    />{" "}
-                  </span>{" "}
-                  <span className="text-[white]">viendo |</span>{" "}
-                  <span
-                    className="bold-text text-[white]"
-                    ref={(node) =>
-                      commonService.startComprandoCount(node, 4, 16)
-                    }
-                    style={{ fontVariantNumeric: "tabular-nums" }}
-                  />{" "}
-                  <span className="text-[white]">han comprado</span>
-                </span>
-              </div>
-
-              <div className="mt-[10px] flex flex-col items-center gap-[8px]">
-                <span className="text-[12px] text-[white]">
-                  ¿Cuántos pasajes quieres?
-                </span>
-                <div
-                  className="flex w-[50%] items-center justify-between"
-                  style={{
-                    border: "1px solid #363c48",
-                    backgroundColor: "#1a202e",
-                    padding: "6px 14px",
-                    borderRadius: "14px",
-                  }}
-                >
-                  <button
-                    type="button"
-                    aria-label="Disminuir pasajes"
-                    disabled={!canDecreaseTicketQuantity}
-                    onClick={() => onDecreaseTicketQuantity?.(serviceItem)}
-                    className={`flex h-[34px] w-[34px] items-center justify-center rounded-full border-none text-[25px] leading-none text-[white] ${
-                      canDecreaseTicketQuantity
-                        ? "cursor-pointer bg-[#2d374d]"
-                        : "cursor-not-allowed bg-[#222b3d] opacity-50"
-                    }`}
-                  >
-                    -
-                  </button>
-                  <span className="bold-text text-[20px] text-white">
-                    {ticketQuantity}
-                  </span>
-                  <button
-                    type="button"
-                    aria-label="Aumentar pasajes"
-                    onClick={() => onIncreaseTicketQuantity?.(serviceItem)}
-                    className="flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[25px] leading-none text-[white]"
-                  >
-                    +
-                  </button>
-                </div>
-              </div>
-
-              <div
-                className="mt-[10px] flex justify-between items-center rounded-[14px]"
-                style={{
-                  // height: "80px",
-                  border: "1px solid #363c48",
-                  backgroundColor: "#1a202e",
-                  padding: "14px 10px",
-                }}
-              >
-                <div className="flex flex-col">
-                  <span
-                    className="text-[20px] font-normal leading-[20px] text-[#9f9f9f] relative"
-                    style={{ position: "relative" }}
-                  >
-                    $10.000
-                    <span
-                      style={{
-                        position: "absolute",
-                        left: "-2px",
-                        top: "50%",
-                        width: "calc(80% + 4px)",
-                        height: "1px",
-
-                        backgroundColor: "#FF5C60",
-
-                        transform: "rotate(-10deg)",
-                        transformOrigin: "center",
-                      }}
-                    />
-                  </span>
-                  <span className="text-[white] bold-text text-[28px] leading-none mt-[4px]">
-                    {`$${(4000 * ticketQuantity).toLocaleString()}`}
-                  </span>
-                </div>
-                <div>
-                  <span
-                    className="text-[#FF8F45] bold-text text-[26px] leading-tight"
-                    style={{
-                      animation: "pulse-zoom 2s ease-in-out infinite",
-                      whiteSpace: "nowrap",
-                    }}
-                  >
-                    60% OFF
-                  </span>
-                </div>
-              </div>
-
-              <button
-                type="button"
-                onClick={onBookButtonPress}
-                className="flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-[white] bold-text text-[13px] mt-[10px]  justify-center border-none cursor-pointer"
-                style={{
-                  backgroundColor: "#FF5C60",
-                  animation: "pulse-zoom 2s ease-in-out infinite",
-                  whiteSpace: "nowrap",
-                  width: "100%",
-                }}
-              >
-                <LottiePlayer
-                  animationData={serviceItem.icons.thunderAnim}
-                  width="18px"
-                  height="18px"
-                />
-                <span className="whitespace-nowrap">¡Lo quiero!</span>
-              </button>
-
-              <div
-                className={`flex justify-end mt-[10px] transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`}
-                onClick={onToggleExpand}
-              >
-                <img
-                  src={serviceItem?.icons?.downArrow}
-                  alt="down arrow"
-                  style={{
-                    width: "14px",
-                    height: "8px",
-                    filter: "brightness(0) invert(1)",
-                  }}
-                />
-              </div>
-            </div>
-
-            {/* <div>
-              <div className="flex items-center text-[white]">
-                <span>Vie, 04/11</span>
-                <span className="h-[20px] flex items-center justify-center mx-[10px]">
-                  •
-                </span>
-                <span>07:00 AM - 10:00 AM</span>
-              </div>
-              <div
-                style={{
-                  // height: "80px",
-                  border: "1px solid #363c48",
-                  backgroundColor: "#1a202e",
-                  padding: "14px 10px",
-                  borderRadius: "14px",
-                  marginTop: "14px",
-                }}
-              >
-                <div className="flex flex-col justify-center items-center text-[white]">
-                  <span className="text-[15px] bold-text">
-                    3 operadores compitiendo por tu compra
-                  </span>
-
-                  <span className="mt-[8px]">
-                    Empresa a confirmar después de tu pago
-                  </span>
-                </div>
-                <div className="grid w-full grid-cols-3 items-stretch gap-[14px] mb-[12px] mt-[12px] text-[white]">
-                  {operators.map((op, idx) => (
-                    <div
-                      key={idx}
-                      className="flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]"
-                      style={{
-                        // height: "80px",
-                        border: "1px solid #363c48",
-                        backgroundColor: "#1a202e",
-                        padding: "14px 10px",
-                      }}
-                    >
-                      <img
-                        src={serviceItem.operator_details[0]}
-                        alt={op.name}
-                        className={`h-[24px] max-w-full object-contain ${
-                          isSoldOut ? "grayscale" : ""
-                        }`}
-                      />
-                      <span className="text-[11px] truncate max-w-full text-center">
-                        {serviceItem.operator_details[2]}
-                      </span>
-                      <div className="bg-[#FF8F45] text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">
-                        <span>{op?.time}</span>
-                      </div>
-                      <span className="text-[10px] mt-[6px]">
-                        {op?.seatsAvailable}
-                      </span>
-                    </div>
-                  ))}
-                </div>
-                <div className="flex items-center gap-[4px]">
-                  {renderIcon("sheildIcon", "14px")}
-                  <span className="text-[white]">
-                    Tu asiento confirmado al instante.
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div>
-              <div className="mt-[4px] flex flex-col items-center gap-[8px]">
-                <span className="text-[12px] text-[white]">
-                  ¿Cuántos pasajes quieres?
-                </span>
-                <div
-                  className="flex w-full items-center justify-between"
-                  style={{
-                    border: "1px solid #363c48",
-                    backgroundColor: "#1a202e",
-                    padding: "6px 14px",
-                    borderRadius: "14px",
-                  }}
-                >
-                  <button
-                    type="button"
-                    aria-label="Disminuir pasajes"
-                    disabled={!canDecreaseTicketQuantity}
-                    onClick={() => onDecreaseTicketQuantity?.(serviceItem)}
-                    className={`flex h-[34px] w-[34px] items-center justify-center rounded-full border-none text-[25px] leading-none text-[white] ${
-                      canDecreaseTicketQuantity
-                        ? "cursor-pointer bg-[#2d374d]"
-                        : "cursor-not-allowed bg-[#222b3d] opacity-50"
-                    }`}
-                  >
-                    -
-                  </button>
-                  <span className="bold-text text-[20px] text-[white]">
-                    {ticketQuantity}
-                  </span>
-                  <button
-                    type="button"
-                    aria-label="Aumentar pasajes"
-                    onClick={() => onIncreaseTicketQuantity?.(serviceItem)}
-                    className="flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[25px] leading-none text-[white]"
-                  >
-                    +
-                  </button>
-                </div>
-                <button
-                  type="button"
-                  onClick={onBookButtonPress}
-                  className="flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-[white] bold-text text-[13px] mt-[4px]  justify-center border-none cursor-pointer"
-                  style={{
-                    backgroundColor: "#FF5C60",
-                    animation: "pulse-zoom 2s ease-in-out infinite",
-                    whiteSpace: "nowrap",
-                    width: "100%",
-                  }}
-                >
-                  <LottiePlayer
-                    animationData={serviceItem.icons.thunderAnim}
-                    width="18px"
-                    height="18px"
-                  />
-                  <span className="whitespace-nowrap">¡Lo quiero!</span>
-                </button>
-              </div>
-            </div>
-            <div className="flex justify-between items-center">
-              <div className="flex items-center">
-                <LottiePlayer
-                  animationData={serviceItem.icons.dotAnimation}
-                  width="12px"
-                  height="12px"
-                />
-                <span className="ml-[5px]">
-                  <span className="bold-text text-[white]">
-                    {" "}
-                    <span
-                      className="bold-text"
-                      ref={(node) =>
-                        commonService.startViewerCount(node, viewersConfig)
-                      }
-                      style={{
-                        fontVariantNumeric: "tabular-nums",
-                      }}
-                    />{" "}
-                  </span>{" "}
-                  <span className="text-[white]">viendo |</span>{" "}
-                  <span
-                    className="bold-text text-[white]"
-                    ref={(node) =>
-                      commonService.startComprandoCount(node, 4, 16)
-                    }
-                    style={{ fontVariantNumeric: "tabular-nums" }}
-                  />{" "}
-                  <span className="text-[white]">han comprado</span>
-                </span>
-              </div>
-              <div
-                className={`transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`}
-                onClick={onToggleExpand}
-              >
-                <img
-                  src={serviceItem?.icons?.downArrow}
-                  alt="down arrow"
-                  style={{
-                    width: "14px",
-                    height: "8px",
-                    filter: "brightness(0) invert(1)",
-                  }}
-                />
-              </div>
-            </div> */}
-          </div>
-        </div>
-
-        {isItemExpanded && (
-          <div
-            className="flex flex-col gap-[10px]"
-            style={{
-              opacity: isItemExpanded ? 1 : 0,
-              transition: "opacity 250ms ease-in-out",
-            }}
-          >
-            <div
-              className={` text-[12px] ${
-                isItemExpanded ? "pt-[14px] pb-[6px]" : "py-0"
-              }`}
-              style={{ transition: "padding 300ms ease-in-out" }}
-            >
-              <span className="bold-text">¿Cómo funciona?</span>
-
-              <div className="flex flex-col">
-                {HOW_IT_WORKS_STEPS.map((step) => (
-                  <div className="flex items-start gap-[8px] mt-[10px]">
-                    <div>
-                      <FeatureStepIcon icon={step.icon} />
-                    </div>
-                    <div className="flex flex-col">
-                      <span className="bold-text">{step.name}</span>
-                      <span>{step.text}</span>
-                    </div>
-                  </div>
-                  // <div
-                  //   key={step.name}
-                  //   className="flex flex-col items-center text-center text-[#272727]"
-                  // >
-                  //   <FeatureStepIcon icon={step.icon} />
-                  //   <span className="bold-text mt-[10px] text-[12px] leading-[14px]">
-                  //     {step.name}
-                  //   </span>
-                  //   <span className="mt-[2px] max-w-[220px] text-[12px] leading-[14px] text-[#4a4a4a]">
-                  //     {step.text}
-                  //   </span>
-                  // </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-      {/* <div
-        className=""
-        style={{
-          border: "1px solid #c0c0c0",
-          padding: "14px",
-          borderRadius: "14px",
-        }}
-      >
-        <div className="flex justify-between items-center px-[14px] pb-[10px] text-[13.33px]">
-          <div className="flex items-center gap-[10px]">
-            <span>Salida flexible</span>
-            <div
-              className="bold-text font-[9px]"
-              style={{
-                backgroundColor: "#FF5C60",
-                padding: "1px 8px",
-                borderRadius: "4px",
-                color: "#fff",
-                animation: "pulse-zoom 2s ease-in-out infinite",
-                whiteSpace: "nowrap",
-              }}
-            >
-              <span>AHORRAS 60%</span>
-            </div>
-          </div>
-          <div>
-            <span>
-              {renderIcon("fireIcon", "14px")}{" "}
-              <span className="bold-text">Remate</span> términa en{" "}
-              <span
-                className="bold-text text-end"
-                ref={(node) => commonService.startCountdown(node, 599)}
-                style={{
-                  fontVariantNumeric: "tabular-nums",
-                  display: "inline-block",
-                  color: "#FF5C60",
-                  minWidth: "40px",
-                }}
-              />
-            </span>
-          </div>
-        </div>
-        <div
-          id={`service-card-${serviceItem.id}`}
-          className="bg-[#0C1421] text-white mx-auto relative rounded-[14px]  p-[14px] text-[13.33px]"
-        >
-          <div className="grid grid-cols-[23%_50%_27%] items-stretch">
-            <div className="flex flex-col justify-between gap-[20px] my-[14px] pr-[22px]">
-              <div className="flex flex-col gap-[8px]">
-                <div className="flex items-center gap-[8px]">
-                  <img
-                    src={serviceItem.icons?.whiteOrigin}
-                    alt="origin"
-                    className={`w-[14px] h-[14px] shrink-0 ${
-                      isSoldOut ? "grayscale" : ""
-                    }`}
-                  />
-                  <span className="text-[13px] bold-text">
-                    {cityOrigin?.label.split(",")[0]}
-                  </span>
-                </div>
-                <div className="flex items-center gap-[8px]">
-                  <img
-                    src={serviceItem.icons?.whiteDestination}
-                    alt="destination"
-                    className={`w-[14px] h-[14px] shrink-0 ${
-                      isSoldOut ? "grayscale" : ""
-                    }`}
-                    style={{ opacity: isSoldOut ? 0.5 : 1 }}
-                  />
-                  <span className="text-[13px] bold-text">
-                    {cityDestination?.label.split(",")[0]}
-                  </span>
-                </div>
-              </div>
-
-              <div className="flex flex-col gap-[8px]">
-                <div className="text-[12px] bold-text whitespace-nowrap">
-                  Entre 07:00 AM y 10:00 AM
-                </div>
-                <div className="text-[11px] bold-text">Viernes 23 de mayo</div>
-              </div>
-
-              <div className="flex flex-col items-start gap-[10px] text-[12px] ">
-                <div className="flex items-justify gap-[8px]">
-                  <AssuranceIcon type="pending" />
-
-                  <span
-                    className="text-[10px]"
-                    style={{
-                      lineHeight: 1.3,
-                    }}
-                  >
-                    Empresa y hora a confirmar luego del pago.
-                  </span>
-                </div>
-                <div className="flex items-justify gap-[8px]">
-                  <AssuranceIcon type="secured" />
-
-                  <span
-                    className="text-[10px]"
-                    style={{
-                      lineHeight: 1.3,
-                    }}
-                  >
-                    Tu compra está 100% asegurada.
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div className="min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]">
-              <div className="text-center">
-                <div className="bold-text text-[14px]">
-                  3 operadores compitiendo por tu compra
-                </div>
-              </div>
-
-              <div className="grid w-full grid-cols-3 items-stretch gap-[14px] mb-[12px]">
-                {operators.map((op, idx) => (
-                  <div
-                    key={idx}
-                    className="flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]"
-                    style={{
-                      border: "1px solid #363c48",
-                      backgroundColor: "#1a202e",
-                      padding: "14px 10px",
-                    }}
-                  >
-                    <img
-                      src={serviceItem.operator_details[0]}
-                      alt={op.name}
-                      className={`h-[24px] max-w-full object-contain ${
-                        isSoldOut ? "grayscale" : ""
-                      }`}
-                    />
-                    <span className="text-[11px] truncate max-w-full text-center">
-                      {serviceItem.operator_details[2]}
-                    </span>
-                    <div className="bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">
-                      <span>{op?.time}</span>
-                    </div>
-                    <span className="text-[10px] mt-[6px]">
-                      {op?.seatsAvailable}
-                    </span>
-                  </div>
-                ))}
-              </div>
-
-              <div
-                className="flex w-full items-center justify-center gap-[6px] text-[12px]"
-                style={{
-                  border: "1px solid #363c48",
-                  backgroundColor: "#1a202e",
-                  padding: "8px 14px",
-                  borderRadius: "24px",
-                }}
-              >
-                <LottiePlayer
-                  animationData={serviceItem?.icons?.personsAnim}
-                  width="18px"
-                  height="18px"
-                />
-                <span>
-                  <span className="bold-text text-white">
-                    {" "}
-                    <span
-                      className="bold-text"
-                      ref={(node) =>
-                        commonService.startViewerCount(node, viewersConfig)
-                      }
-                      style={{
-                        fontVariantNumeric: "tabular-nums",
-                        color: "#FF5C60",
-                      }}
-                    />{" "}
-                  </span>{" "}
-                  viendo |{" "}
-                  <span
-                    className="bold-text"
-                    ref={(node) =>
-                      commonService.startComprandoCount(node, 4, 16)
-                    }
-                    style={{ fontVariantNumeric: "tabular-nums" }}
-                  />{" "}
-                  han comprado
-                </span>
-              </div>
-            </div>
-
-            <div className="flex flex-col justify-center gap-[12px] py-[2px] pl-[22px] pr-[10px] relative mb-[16px]">
-              <div
-                className="flex flex-col gap-[6px] "
-                style={{
-                  alignItems: "center",
-                }}
-              >
-                <span
-                  className="text-[#FF8F45] bold-text text-[26px] leading-tight"
-                  style={{
-                    animation: "pulse-zoom 2s ease-in-out infinite",
-                    whiteSpace: "nowrap",
-                  }}
-                >
-                  60% OFF
-                </span>
-
-                <span
-                  className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative"
-                  style={{ position: "relative" }}
-                >
-                  $10.000
-                  <span
-                    style={{
-                      position: "absolute",
-                      left: "-2px",
-                      top: "50%",
-                      width: "calc(100% + 4px)",
-                      height: "1px",
-
-                      backgroundColor: "#FF5C60",
-
-                      transform: "rotate(-10deg)",
-                      transformOrigin: "center",
-                    }}
-                  />
-                </span>
-                <span className="text-white bold-text text-[28px] leading-none">
-                  {`$${(4000 * ticketQuantity).toLocaleString()}`}
-                </span>
-              </div>
-
-              <div className="mt-[4px] flex flex-col items-center gap-[8px]">
-                <span className="text-[12px] text-white">
-                  ¿Cuántos pasajes quieres?
-                </span>
-                <div
-                  className="flex w-full items-center justify-between"
-                  style={{
-                    border: "1px solid #363c48",
-                    backgroundColor: "#1a202e",
-                    padding: "6px 14px",
-                    borderRadius: "14px",
-                  }}
-                >
-                  <button
-                    type="button"
-                    aria-label="Disminuir pasajes"
-                    disabled={!canDecreaseTicketQuantity}
-                    onClick={() => onDecreaseTicketQuantity?.(serviceItem)}
-                    className={`flex h-[34px] w-[34px] items-center justify-center rounded-full border-none text-[25px] leading-none text-white ${
-                      canDecreaseTicketQuantity
-                        ? "cursor-pointer bg-[#2d374d]"
-                        : "cursor-not-allowed bg-[#222b3d] opacity-50"
-                    }`}
-                  >
-                    -
-                  </button>
-                  <span className="bold-text text-[20px] text-white">
-                    {ticketQuantity}
-                  </span>
-                  <button
-                    type="button"
-                    aria-label="Aumentar pasajes"
-                    onClick={() => onIncreaseTicketQuantity?.(serviceItem)}
-                    className="flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[25px] leading-none text-white"
-                  >
-                    +
-                  </button>
-                </div>
-              </div>
-
-              <button
-                type="button"
-                onClick={onBookButtonPress}
-                className="flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-white bold-text text-[13px] mt-[4px]  justify-center border-none cursor-pointer"
-                style={{
-                  backgroundColor: "#FF5C60",
-                  animation: "pulse-zoom 2s ease-in-out infinite",
-                  whiteSpace: "nowrap",
-                }}
-              >
-                <LottiePlayer
-                  animationData={serviceItem?.icons?.thunderAnim}
-                  width="18px"
-                  height="18px"
-                />
-                <span className="whitespace-nowrap">¡Lo quiero!</span>
-              </button>
-            </div>
-
-            <div
-              className={`absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`}
-              onClick={onToggleExpand}
-            >
-              <img
-                src={serviceItem.icons?.downArrow}
-                alt="down arrow"
-                style={{
-                  width: "14px",
-                  height: "8px",
-                  filter: "brightness(0) invert(1)",
-                }}
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="grid"
-          style={{
-            gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
-            opacity: isItemExpanded ? 1 : 0,
-            transition:
-              "grid-template-rows 300ms ease-in-out, opacity 250ms ease-in-out",
-          }}
-        >
-          <div
-            className={`min-h-0 overflow-hidden px-[16px] text-[13.33px] ${
-              isItemExpanded ? "pt-[14px] pb-[6px]" : "py-0"
-            }`}
-            style={{ transition: "padding 300ms ease-in-out" }}
-          >
-            <span className="bold-text">¿Cómo funciona?</span>
-
-            <div className="mt-[14px] grid grid-cols-4 gap-[20px] px-[16px] ">
-              {HOW_IT_WORKS_STEPS.map((step) => (
-                <div
-                  key={step.name}
-                  className="flex flex-col items-center text-center text-[#272727]"
-                >
-                  <FeatureStepIcon icon={step.icon} />
-                  <span className="bold-text mt-[10px] text-[12px] leading-[14px]">
-                    {step.name}
-                  </span>
-                  <span className="mt-[2px] max-w-[220px] text-[12px] leading-[14px] text-[#4a4a4a]">
-                    {step.text}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div> */}
-
-      {/* TOP BADGE — "Remate | Termina en 09:55 min" hardcoded, no countdown hook */}
-      {/* {showTopLabel && (
-        <div className="absolute -top-[11px] left-0  w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 ">
-          <div className="flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap">
-            <LottiePlayer
-              animationData={getAnimationIcon("bombAnimation")}
-              width="14px"
-              height="14px"
-            />
-            <span>
-              <strong>Remate</strong> | Termina en{" "}
-              <strong>{HARDCODED_COUNTDOWN}</strong> min
-            </span>
-          </div>
-        </div>
-      )} */}
-    </div>
-  );
-};
-
-export default FeatureServiceUiMobile;