nvis-fe-cms-libs 1.0.1 → 1.0.2

package/dist/nvis-fe-cms-libs.umd.js

@@ -1,7 +1,27 @@
 (function(global, factory) {
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react")) : typeof define === "function" && define.amd ? define(["exports", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.AsaCmsSections = {}, global.React));
 })(this, (function(exports2, require$$0) {
-  "use strict";
+  "use strict";var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
   var jsxRuntime = { exports: {} };
   var reactJsxRuntime_production = {};
   /**
@@ -906,7 +926,7 @@
       }
     );
   };
-  function useWindowSize() {
+  function useWindowSize$1() {
     const [width, setWidth] = require$$0.useState(
       typeof window !== "undefined" ? window.innerWidth : 1200
     );
@@ -924,7 +944,7 @@
     const [currentPartnerSlide, setCurrentPartnerSlide] = require$$0.useState(0);
     const [partnersVisible, setPartnersVisible] = require$$0.useState(false);
     const partnersRef = require$$0.useRef(null);
-    const windowWidth = useWindowSize();
+    const windowWidth = useWindowSize$1();
     const getLogoUrl = (logoUrl) => {
       if (!logoUrl) return null;
       if (logoUrl.startsWith("http")) return logoUrl;
@@ -1032,17 +1052,578 @@
       }
     );
   };
+  const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline }) => {
+    const [milestones, setMilestones] = require$$0.useState([]);
+    const [loading, setLoading] = require$$0.useState(true);
+    const [timelineVisible, setTimelineVisible] = require$$0.useState([]);
+    const timelineRefs = require$$0.useRef([]);
+    require$$0.useEffect(() => {
+      const fetchMilestones = () => __async(null, null, function* () {
+        var _a;
+        if (getMilestoneTimeline) {
+          try {
+            setLoading(true);
+            const res = yield getMilestoneTimeline();
+            if (res.success) {
+              setMilestones(res.data || []);
+            } else {
+              setMilestones([]);
+            }
+          } catch (error) {
+            setMilestones([]);
+          } finally {
+            setLoading(false);
+          }
+        } else {
+          const milestonesData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => item.data)) || [];
+          setMilestones(milestonesData);
+          setLoading(false);
+        }
+      });
+      fetchMilestones();
+    }, []);
+    require$$0.useEffect(() => {
+      setTimelineVisible(new Array(milestones.length).fill(false));
+    }, [milestones.length]);
+    require$$0.useEffect(() => {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              const index2 = timelineRefs.current.findIndex(
+                (el) => el === entry.target
+              );
+              if (index2 !== -1) {
+                setTimelineVisible((prev) => {
+                  const newVisible = [...prev];
+                  newVisible[index2] = true;
+                  return newVisible;
+                });
+              }
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.1 }
+      );
+      timelineRefs.current.forEach((el) => el && observer.observe(el));
+      return () => {
+        timelineRefs.current.forEach((el) => el && observer.unobserve(el));
+      };
+    }, [milestones.length]);
+    if (loading) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: isDarkMode ? "text-white" : "text-gray-800", children: t("milestone.status.loadingData") }) });
+    }
+    if (!milestones.length) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "section",
+        {
+          className: `py-20 ${isDarkMode ? "bg-gray-900/50" : "bg-white"}`,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 text-center", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "h3",
+              {
+                className: `text-lg font-semibold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+                children: t("milestone.status.noData")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "p",
+              {
+                className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
+                children: t("milestone.noDataDescription")
+              }
+            )
+          ] })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "section",
+      {
+        className: `py-20 ${isDarkMode ? "bg-gray-800" : "bg-white"}`,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                className: `relative inline-block px-4 py-2 rounded-full text-sm font-semibold mb-4 border transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg overflow-hidden ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 text-emerald-300 border-blue-800" : "bg-white text-emerald-800 border-gray-200"}`,
+                children: [
+                  "📈 ",
+                  t("milestone.header.badge")
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "h2",
+              {
+                className: `text-3xl lg:text-4xl font-bold mb-4 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+                children: [
+                  t("milestone.header.title"),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent", children: t("milestone.header.subtitle") })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-blue-500 to-purple-600 rounded-full" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-8", children: milestones.map((milestone, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                ref: (el) => timelineRefs.current[index2] = el,
+                className: `flex items-center transition-all duration-700 ease-out ${index2 % 2 === 0 ? "flex-row" : "flex-row-reverse"} ${timelineVisible[index2] ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
+                style: { transitionDelay: `${index2 * 200}ms` },
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "div",
+                    {
+                      className: `relative p-5 rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl overflow-hidden ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 border border-blue-800 hover:border-blue-600" : "bg-gray-50 hover:shadow-2xl"}`,
+                      children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-bold text-xl mb-2", children: milestone.time }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "h3",
+                          {
+                            className: `text-lg font-bold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+                            children: milestone.title
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "p",
+                          {
+                            className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
+                            children: milestone.description
+                          }
+                        )
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "div",
+                    {
+                      className: `w-6 h-6 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full border-4 ${isDarkMode ? "border-gray-800" : "border-white"} shadow-[0_0_10px_5px_rgba(59,130,246,0.5)] flex-shrink-0 z-10 animate-pulse`
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" })
+                ]
+              },
+              milestone.id
+            )) })
+          ] })
+        ] })
+      }
+    );
+  };
+  const TestimonialsSection = ({ data, t, isDarkMode }) => {
+    var _a;
+    const [currentIndex, setCurrentIndex] = require$$0.useState(0);
+    const testimonials = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => ({
+      quote: item.data.content,
+      author: item.data.customerName,
+      position: item.data.customerTitle || t("testimonials.fallback.defaultPosition"),
+      company: item.data.customerCompany || ""
+    }))) || [];
+    const fallbackTestimonials = [
+      {
+        quote: t("testimonials.fallback.testimonial1.quote"),
+        author: t("testimonials.fallback.testimonial1.author"),
+        position: t("testimonials.fallback.testimonial1.position"),
+        company: t("testimonials.fallback.testimonial1.company")
+      },
+      {
+        quote: t("testimonials.fallback.testimonial2.quote"),
+        author: t("testimonials.fallback.testimonial2.author"),
+        position: t("testimonials.fallback.testimonial2.position"),
+        company: t("testimonials.fallback.testimonial2.company")
+      },
+      {
+        quote: t("testimonials.fallback.testimonial3.quote"),
+        author: t("testimonials.fallback.testimonial3.author"),
+        position: t("testimonials.fallback.testimonial3.position"),
+        company: t("testimonials.fallback.testimonial3.company")
+      }
+    ];
+    const displayTestimonials = testimonials.length > 0 ? testimonials : fallbackTestimonials;
+    require$$0.useEffect(() => {
+      if (displayTestimonials.length > 1) {
+        const interval = setInterval(() => {
+          setCurrentIndex((prev) => (prev + 1) % displayTestimonials.length);
+        }, 5e3);
+        return () => clearInterval(interval);
+      }
+    }, [displayTestimonials.length]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "section",
+      {
+        className: `py-20 transition-colors duration-200 ${isDarkMode ? "bg-gray-700" : "bg-gray-50"}`,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: `inline-block px-4 py-2 rounded-full text-sm font-semibold mb-4 ${isDarkMode ? "bg-indigo-900/50 text-indigo-300 border border-indigo-800" : "bg-indigo-100 text-indigo-800"}`,
+              children: [
+                "💬 ",
+                t("testimonials.header.badge")
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "h2",
+            {
+              className: `text-3xl lg:text-4xl font-bold mb-8 transition-colors duration-200 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+              children: [
+                t("testimonials.header.title"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent", children: t("testimonials.header.subtitle") })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                className: `p-6 rounded-2xl transition-all duration-500 transform ${isDarkMode ? "bg-gray-800/80 backdrop-blur-sm border border-gray-700" : "bg-white"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "blockquote",
+                    {
+                      className: `text-lg lg:text-xl italic mb-6 animate-fadeIn transition-colors duration-200 ${isDarkMode ? "text-gray-300" : "text-gray-700"}`,
+                      children: [
+                        '"',
+                        displayTestimonials[currentIndex].quote,
+                        '"'
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-4 animate-fadeIn", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-3xl", children: "👤" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-left", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "div",
+                        {
+                          className: `font-bold text-base transition-colors duration-200 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+                          children: displayTestimonials[currentIndex].author
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-medium text-sm", children: displayTestimonials[currentIndex].position }),
+                      displayTestimonials[currentIndex].company && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "div",
+                        {
+                          className: `text-xs transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`,
+                          children: displayTestimonials[currentIndex].company
+                        }
+                      )
+                    ] })
+                  ] })
+                ]
+              },
+              currentIndex
+            ),
+            displayTestimonials.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2 mt-4", children: displayTestimonials.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                onClick: () => setCurrentIndex(index2),
+                className: `w-2.5 h-2.5 rounded-full transition-all duration-300 ${index2 === currentIndex ? "bg-blue-600" : isDarkMode ? "bg-gray-600 hover:bg-gray-500" : "bg-gray-300 hover:bg-gray-400"}`
+              },
+              index2
+            )) })
+          ] })
+        ] })
+      }
+    );
+  };
+  const PartnerListCard = ({ partner, idx = 0, t, isDarkMode, getLogoUrl }) => {
+    const itemRef = require$$0.useRef(null);
+    const [visible, setVisible] = require$$0.useState(false);
+    const [isHovered, setIsHovered] = require$$0.useState(false);
+    if (!partner) return null;
+    require$$0.useEffect(() => {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              setVisible(true);
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.2 }
+      );
+      if (itemRef.current) observer.observe(itemRef.current);
+      return () => itemRef.current && observer.unobserve(itemRef.current);
+    }, []);
+    const logoSrc = getLogoUrl ? getLogoUrl(partner.logoUrl) : null;
+    const handleImageError = (e) => {
+      e.target.style.display = "none";
+      e.target.nextSibling.style.display = "flex";
+    };
+    const handleClick = () => {
+      if (partner.websiteUrl) {
+        window.open(partner.websiteUrl, "_blank", "noopener,noreferrer");
+      }
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        ref: itemRef,
+        className: `relative flex flex-col items-center justify-center p-4 rounded-xl shadow-sm transition-all duration-700 ease-out cursor-pointer overflow-hidden min-h-[180px]
+        ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 border border-blue-800" : "bg-white border border-gray-200"}
+        ${visible ? "opacity-100 scale-100" : "opacity-0 scale-75"}
+        ${isHovered ? isDarkMode ? "border-blue-500 shadow-lg shadow-blue-500/20 -translate-y-1" : "border-blue-300 shadow-lg shadow-blue-500/20 -translate-y-1" : ""}`,
+        style: {
+          transitionDelay: `${idx * 150}ms`,
+          transform: `translateY(${isHovered ? "-4px" : "0px"}) scale(${visible ? "1" : "0.75"})`
+        },
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        onClick: handleClick,
+        children: [
+          isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute w-12 h-12 bg-white/5 rounded-full", style: { left: "10%", top: "20%" } }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute w-10 h-10 bg-white/5 rounded-full", style: { right: "30%", bottom: "10%" } }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute w-14 h-14 bg-white/5 rounded-md", style: { left: "20%", bottom: "30%" } }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 opacity-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                style: {
+                  backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+                  backgroundSize: "60px 60px"
+                },
+                className: "w-full h-full"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: `w-20 h-14 flex items-center justify-center mb-4 rounded-lg overflow-hidden border transition-all duration-300
+          ${isDarkMode ? "border-gray-600" : "border-gray-200"}
+          ${isHovered ? "border-blue-500" : ""}
+        `,
+              style: {
+                background: isDarkMode ? isHovered ? "linear-gradient(135deg, #4b5563 0%, #374151 100%)" : "linear-gradient(135deg, #374151 0%, #1f2937 100%)" : isHovered ? "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)" : "linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)"
+              },
+              children: logoSrc ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "img",
+                  {
+                    src: logoSrc,
+                    alt: partner.name || t("partners.logoAlt") || "Partner logo",
+                    className: "max-w-full max-h-full object-contain transition-all duration-300",
+                    style: {
+                      filter: isDarkMode ? isHovered ? "grayscale(0) opacity(1)" : "grayscale(0.3) opacity(0.8)" : isHovered ? "grayscale(0) opacity(1)" : "grayscale(0.2) opacity(0.9)",
+                      transform: isHovered ? "scale(1.05)" : "scale(1)"
+                    },
+                    onError: handleImageError,
+                    loading: "lazy"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center", style: { display: "none" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-center text-sm px-1", children: partner.name }) })
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-center text-sm px-1", children: partner.name }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: `font-bold text-center mb-2 text-sm leading-tight ${isDarkMode ? "text-white" : "text-gray-900"}`, children: partner.name }),
+          partner.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs text-center mb-3 line-clamp-2 px-1 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`, children: partner.description }),
+          partner.websiteUrl && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "transition-all duration-300",
+              style: {
+                opacity: isHovered ? 1 : 0,
+                transform: `translateY(${isHovered ? "0px" : "4px"})`
+              },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-blue-600 font-medium", children: [
+                t("partners.viewDetails") || "Xem chi tiết",
+                " →"
+              ] })
+            }
+          )
+        ]
+      }
+    );
+  };
+  function useWindowSize() {
+    const [width, setWidth] = require$$0.useState(
+      typeof window !== "undefined" ? window.innerWidth : 1200
+    );
+    require$$0.useEffect(() => {
+      const handleResize = () => setWidth(window.innerWidth);
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return width;
+  }
+  const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "" }) => {
+    const [partnersData, setPartnersData] = require$$0.useState([]);
+    const [error, setError] = require$$0.useState(null);
+    const [loading, setLoading] = require$$0.useState(true);
+    const [currentPartnerSlide, setCurrentPartnerSlide] = require$$0.useState(0);
+    const [partnersVisible, setPartnersVisible] = require$$0.useState(false);
+    const partnersRef = require$$0.useRef(null);
+    const windowWidth = useWindowSize();
+    const getLogoUrl = (logoUrl) => {
+      if (!logoUrl) return null;
+      if (logoUrl.startsWith("http")) return logoUrl;
+      return `${imageBaseUrl}${logoUrl}`;
+    };
+    require$$0.useEffect(() => {
+      const fetchData = () => __async(null, null, function* () {
+        try {
+          const res = yield getPartnerList();
+          if (res.success) {
+            setPartnersData(res.data || []);
+          } else {
+            setError(res.error || "Error fetching partners");
+          }
+        } catch (err) {
+          setError(err.message);
+        } finally {
+          setLoading(false);
+        }
+      });
+      fetchData();
+    }, []);
+    const partners = require$$0.useMemo(() => {
+      const getPerSlide = () => {
+        if (windowWidth < 640) return 2;
+        if (windowWidth < 1024) return 3;
+        return 4;
+      };
+      const grouped = [];
+      const perSlide = getPerSlide();
+      for (let i = 0; i < partnersData.length; i += perSlide) {
+        grouped.push(partnersData.slice(i, i + perSlide));
+      }
+      return grouped;
+    }, [partnersData, windowWidth]);
+    require$$0.useEffect(() => {
+      if (partners.length > 1) {
+        const interval = setInterval(() => {
+          setCurrentPartnerSlide((prev) => (prev + 1) % partners.length);
+        }, 5e3);
+        return () => clearInterval(interval);
+      }
+    }, [partners.length]);
+    require$$0.useEffect(() => {
+      const fallbackTimer = setTimeout(() => {
+        setPartnersVisible(true);
+      }, 500);
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              clearTimeout(fallbackTimer);
+              setPartnersVisible(true);
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.1, rootMargin: "50px" }
+      );
+      if (partnersRef.current) {
+        observer.observe(partnersRef.current);
+      } else {
+        clearTimeout(fallbackTimer);
+        setPartnersVisible(true);
+      }
+      return () => {
+        clearTimeout(fallbackTimer);
+        if (partnersRef.current) {
+          observer.unobserve(partnersRef.current);
+        }
+      };
+    }, []);
+    if (loading) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: isDarkMode ? "text-white" : "text-gray-800", children: t("partners.loading") || "Đang tải danh sách đối tác..." }) });
+    }
+    if (error) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500", children: t("partners.error") || error }) });
+    }
+    if (!partnersData.length) return null;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "section",
+      {
+        className: `py-12 lg:py-20 transition-colors duration-300 ${isDarkMode ? "bg-gradient-to-b from-gray-950 via-gray-900 to-gray-800" : "bg-gradient-to-b from-white via-gray-50 to-gray-100"}`,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                className: `inline-block px-4 py-2 rounded-full text-sm font-semibold mb-4 border shadow-sm ${isDarkMode ? "bg-blue-900/30 text-blue-300 border-blue-800" : "bg-blue-100 text-blue-800 border-blue-200"}`,
+                children: [
+                  "🤝 ",
+                  t("partners.badge") || "ĐỐI TÁC CHIẾN LƯỢC"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "h2",
+              {
+                className: `text-3xl lg:text-5xl font-bold leading-tight ${isDarkMode ? "text-white" : "text-gray-800"}`,
+                children: [
+                  t("partners.title.part1") || "Đồng hành cùng",
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent mt-2", children: t("partners.title.part2") || "Những thương hiệu hàng đầu" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: `transition-all duration-1000 ease-out ${partnersVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative overflow-hidden mb-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-[220px]", children: partners.map((group, slideIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    className: `absolute inset-0 w-full transition-all duration-1000 ease-in-out ${slideIndex === currentPartnerSlide ? "opacity-100 translate-x-0" : slideIndex < currentPartnerSlide ? "opacity-0 -translate-x-full" : "opacity-0 translate-x-full"}`,
+                    style: { zIndex: slideIndex === currentPartnerSlide ? 10 : 1 },
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6 px-2", children: group.map((partner, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      PartnerListCard,
+                      {
+                        partner,
+                        idx,
+                        t,
+                        isDarkMode,
+                        getLogoUrl
+                      },
+                      partner.id || `${slideIndex}-${idx}`
+                    )) })
+                  },
+                  slideIndex
+                )) }) }),
+                partners.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2", style: { zIndex: 50 }, children: partners.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    onClick: () => setCurrentPartnerSlide(index2),
+                    className: `w-3 h-3 rounded-full transition-all duration-300 ${index2 === currentPartnerSlide ? "bg-blue-500 scale-125 shadow-lg" : isDarkMode ? "bg-gray-600 hover:bg-blue-400" : "bg-gray-300 hover:bg-blue-500"}`,
+                    "aria-label": `Slide ${index2 + 1}`
+                  },
+                  index2
+                )) })
+              ]
+            }
+          ) })
+        ] })
+      }
+    );
+  };
   const index = {
     AboutCompanySection,
     CompanyValues,
     TimelineSection,
     PartnerCard,
-    PartnersSection
+    PartnersSection,
+    MilestoneSection,
+    TestimonialsSection,
+    PartnerListCard,
+    PartnerListSection
   };
   exports2.AboutCompanySection = AboutCompanySection;
   exports2.CompanyValues = CompanyValues;
+  exports2.MilestoneSection = MilestoneSection;
   exports2.PartnerCard = PartnerCard;
+  exports2.PartnerListCard = PartnerListCard;
+  exports2.PartnerListSection = PartnerListSection;
   exports2.PartnersSection = PartnersSection;
+  exports2.TestimonialsSection = TestimonialsSection;
   exports2.TimelineSection = TimelineSection;
   exports2.default = index;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });