nvis-fe-cms-libs 1.0.2 → 1.0.3

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

@@ -1,7 +1,38 @@
 (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";var __async = (__this, __arguments, generator) => {
+  "use strict";var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
       try {
@@ -1605,6 +1636,1449 @@
       }
     );
   };
+  /**
+   * @license lucide-react v0.544.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+  const toCamelCase = (string) => string.replace(
+    /^([A-Z])|[\s-_]+(\w)/g,
+    (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+  );
+  const toPascalCase = (string) => {
+    const camelCase = toCamelCase(string);
+    return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+  };
+  const mergeClasses = (...classes) => classes.filter((className, index2, array) => {
+    return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index2;
+  }).join(" ").trim();
+  const hasA11yProp = (props) => {
+    for (const prop in props) {
+      if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+        return true;
+      }
+    }
+  };
+  /**
+   * @license lucide-react v0.544.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  var defaultAttributes = {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  };
+  /**
+   * @license lucide-react v0.544.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const Icon = require$$0.forwardRef(
+    (_a, ref) => {
+      var _b = _a, {
+        color = "currentColor",
+        size = 24,
+        strokeWidth = 2,
+        absoluteStrokeWidth,
+        className = "",
+        children,
+        iconNode
+      } = _b, rest = __objRest(_b, [
+        "color",
+        "size",
+        "strokeWidth",
+        "absoluteStrokeWidth",
+        "className",
+        "children",
+        "iconNode"
+      ]);
+      return require$$0.createElement(
+        "svg",
+        __spreadValues(__spreadValues(__spreadProps(__spreadValues({
+          ref
+        }, defaultAttributes), {
+          width: size,
+          height: size,
+          stroke: color,
+          strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+          className: mergeClasses("lucide", className)
+        }), !children && !hasA11yProp(rest) && { "aria-hidden": "true" }), rest),
+        [
+          ...iconNode.map(([tag, attrs]) => require$$0.createElement(tag, attrs)),
+          ...Array.isArray(children) ? children : [children]
+        ]
+      );
+    }
+  );
+  /**
+   * @license lucide-react v0.544.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const createLucideIcon = (iconName, iconNode) => {
+    const Component = require$$0.forwardRef(
+      (_a, ref) => {
+        var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+        return require$$0.createElement(Icon, __spreadValues({
+          ref,
+          iconNode,
+          className: mergeClasses(
+            `lucide-${toKebabCase(toPascalCase(iconName))}`,
+            `lucide-${iconName}`,
+            className
+          )
+        }, props));
+      }
+    );
+    Component.displayName = toPascalCase(iconName);
+    return Component;
+  };
+  /**
+   * @license lucide-react v0.544.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const __iconNode$9 = [
+    ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+    ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
+    ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
+  ];
+  const CircleAlert = createLucideIcon("circle-alert", __iconNode$9);
+  /**
+   * @license lucide-react v0.544.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const __iconNode$8 = [
+    ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
+    ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
+  ];
+  const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$8);
+  /**
+   * @license lucide-react v0.544.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const __iconNode$7 = [
+    ["path", { d: "M12 6v6l4 2", key: "mmk7yg" }],
+    ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
+  ];
+  const Clock = createLucideIcon("clock", __iconNode$7);
+  /**
+   * @license lucide-react v0.544.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const __iconNode$6 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+  const LoaderCircle = createLucideIcon("loader-circle", __iconNode$6);
+  /**
+   * @license lucide-react v0.544.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const __iconNode$5 = [
+    ["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7", key: "132q7q" }],
+    ["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
+  ];
+  const Mail = createLucideIcon("mail", __iconNode$5);
+  /**
+   * @license lucide-react v0.544.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const __iconNode$4 = [
+    [
+      "path",
+      {
+        d: "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719",
+        key: "1sd12s"
+      }
+    ]
+  ];
+  const MessageCircle = createLucideIcon("message-circle", __iconNode$4);
+  /**
+   * @license lucide-react v0.544.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const __iconNode$3 = [
+    [
+      "path",
+      {
+        d: "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z",
+        key: "18887p"
+      }
+    ]
+  ];
+  const MessageSquare = createLucideIcon("message-square", __iconNode$3);
+  /**
+   * @license lucide-react v0.544.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const __iconNode$2 = [
+    [
+      "path",
+      {
+        d: "M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384",
+        key: "9njp5v"
+      }
+    ]
+  ];
+  const Phone = createLucideIcon("phone", __iconNode$2);
+  /**
+   * @license lucide-react v0.544.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const __iconNode$1 = [
+    [
+      "path",
+      {
+        d: "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z",
+        key: "1ffxy3"
+      }
+    ],
+    ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
+  ];
+  const Send = createLucideIcon("send", __iconNode$1);
+  /**
+   * @license lucide-react v0.544.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const __iconNode = [
+    ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
+    ["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
+  ];
+  const User = createLucideIcon("user", __iconNode);
+  const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService }) => {
+    const [formData, setFormData] = require$$0.useState({
+      fullName: "",
+      workEmail: "",
+      phoneNumber: "",
+      companyName: "",
+      jobTitle: "",
+      businessType: "",
+      expectedBudget: "",
+      expectedTimeline: "",
+      requestTitle: "",
+      requestDescription: ""
+    });
+    const [formErrors, setFormErrors] = require$$0.useState({});
+    const [isSubmitting, setIsSubmitting] = require$$0.useState(false);
+    const [submitStatus, setSubmitStatus] = require$$0.useState(null);
+    const [submitMessage, setSubmitMessage] = require$$0.useState("");
+    const validateField = (name, value) => {
+      const errors = {};
+      switch (name) {
+        case "fullName":
+          if (!(value == null ? void 0 : value.trim())) errors.fullName = "Họ và tên là bắt buộc";
+          else if (value.trim().length < 2) errors.fullName = "Tên phải có ít nhất 2 ký tự";
+          break;
+        case "workEmail":
+          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+          if (!(value == null ? void 0 : value.trim())) errors.workEmail = "Email là bắt buộc";
+          else if (!emailRegex.test(value.trim())) errors.workEmail = "Email không hợp lệ";
+          break;
+        case "phoneNumber":
+          const phoneRegex = /^[0-9\s\-\+\(\)]{10,15}$/;
+          if (value && !phoneRegex.test(value.trim())) errors.phoneNumber = "Số điện thoại không hợp lệ";
+          break;
+        case "requestTitle":
+          if (!(value == null ? void 0 : value.trim())) errors.requestTitle = "Tiêu đề yêu cầu là bắt buộc";
+          else if (value.trim().length < 5) errors.requestTitle = "Tiêu đề phải có ít nhất 5 ký tự";
+          break;
+        case "requestDescription":
+          if (!(value == null ? void 0 : value.trim())) errors.requestDescription = "Mô tả yêu cầu là bắt buộc";
+          else if (value.trim().length < 10) errors.requestDescription = "Mô tả phải có ít nhất 10 ký tự";
+          break;
+        case "companyName":
+          if (value && value.trim().length > 0 && value.trim().length < 2) {
+            errors.companyName = "Tên công ty phải có ít nhất 2 ký tự";
+          }
+          break;
+        case "jobTitle":
+          if (value && value.trim().length > 0 && value.trim().length < 2) {
+            errors.jobTitle = "Chức vụ phải có ít nhất 2 ký tự";
+          }
+          break;
+      }
+      return errors;
+    };
+    const handleInputChange = (e) => {
+      const { name, value } = e.target;
+      setFormData((prev) => __spreadProps(__spreadValues({}, prev), {
+        [name]: value || ""
+      }));
+      if (formErrors[name]) {
+        setFormErrors((prev) => {
+          const newErrors = __spreadValues({}, prev);
+          delete newErrors[name];
+          return newErrors;
+        });
+      }
+    };
+    const handleBlur = (e) => {
+      const { name, value } = e.target;
+      const fieldErrors = validateField(name, value);
+      setFormErrors((prev) => __spreadValues(__spreadValues({}, prev), fieldErrors));
+    };
+    const handleSubmit = (e) => __async(null, null, function* () {
+      e.preventDefault();
+      setIsSubmitting(true);
+      setSubmitStatus(null);
+      setSubmitMessage("");
+      try {
+        const allErrors = {};
+        Object.keys(formData).forEach((key) => {
+          const fieldErrors = validateField(key, formData[key]);
+          Object.assign(allErrors, fieldErrors);
+        });
+        if (Object.keys(allErrors).length > 0) {
+          setFormErrors(allErrors);
+          setIsSubmitting(false);
+          return;
+        }
+        const cleanFormData = Object.keys(formData).reduce((acc, key) => {
+          acc[key] = typeof formData[key] === "string" ? formData[key].trim() : formData[key];
+          return acc;
+        }, {});
+        let result;
+        if (consultationRequestService == null ? void 0 : consultationRequestService.create) {
+          result = yield consultationRequestService.create(cleanFormData);
+        } else {
+          yield new Promise((resolve) => setTimeout(resolve, 2e3));
+          result = { success: true, message: "Đã gửi thông tin thành công!" };
+        }
+        if (result == null ? void 0 : result.success) {
+          setSubmitStatus("success");
+          setSubmitMessage(result.message || "Cảm ơn bạn đã gửi thông tin! Chúng tôi sẽ liên hệ lại trong vòng 24 giờ.");
+          setFormData({
+            fullName: "",
+            workEmail: "",
+            phoneNumber: "",
+            companyName: "",
+            jobTitle: "",
+            businessType: "",
+            expectedBudget: "",
+            expectedTimeline: "",
+            requestTitle: "",
+            requestDescription: ""
+          });
+          setFormErrors({});
+        } else {
+          setSubmitStatus("error");
+          setSubmitMessage((result == null ? void 0 : result.message) || "Có lỗi xảy ra khi gửi thông tin.");
+        }
+      } catch (error) {
+        setSubmitStatus("error");
+        setSubmitMessage((error == null ? void 0 : error.message) || "Có lỗi xảy ra khi gửi thông tin. Vui lòng thử lại sau.");
+      } finally {
+        setIsSubmitting(false);
+      }
+    });
+    const inputBaseClasses = `w-full px-4 py-3 rounded-xl border transition-all duration-200 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none ${isDarkMode ? "bg-gray-700 border-gray-600 text-white placeholder-gray-400 focus:border-indigo-500" : "bg-white border-slate-300 text-slate-900 placeholder-slate-500 focus:border-indigo-500"}`;
+    const labelClasses = `block text-sm font-semibold mb-2 ${isDarkMode ? "text-gray-300" : "text-slate-700"}`;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: `py-16 transition-colors duration-200 ${isDarkMode ? "bg-gray-950" : "bg-white"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid lg:grid-cols-3 gap-12", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `rounded-2xl p-8 shadow-lg border transition-colors duration-200 ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-slate-200"}`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center mb-6", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center mr-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { size: 20, className: "text-white" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: `text-2xl font-bold transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: t("form.title") || "Gửi yêu cầu tư vấn" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: t("form.subtitle") || "Điền thông tin để nhận tư vấn miễn phí từ chuyên gia" })
+          ] })
+        ] }),
+        submitStatus && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mb-6 p-4 rounded-xl border transition-colors duration-200 ${submitStatus === "success" ? isDarkMode ? "bg-emerald-900/50 border-emerald-700 text-emerald-300" : "bg-emerald-50 border-emerald-200 text-emerald-800" : isDarkMode ? "bg-red-900/50 border-red-700 text-red-300" : "bg-red-50 border-red-200 text-red-800"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+          submitStatus === "success" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheckBig, { size: 20, className: "mr-2 flex-shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 20, className: "mr-2 flex-shrink-0" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium", children: submitMessage })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid md:grid-cols-2 gap-6", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: labelClasses, children: [
+                t("form.fields.fullName") || "Họ và tên",
+                " *"
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "input",
+                {
+                  type: "text",
+                  name: "fullName",
+                  value: formData.fullName || "",
+                  onChange: handleInputChange,
+                  onBlur: handleBlur,
+                  className: `${inputBaseClasses} ${formErrors.fullName ? "border-red-500" : ""}`,
+                  placeholder: "Nguyễn Văn A",
+                  required: true
+                }
+              ),
+              formErrors.fullName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
+                formErrors.fullName
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: labelClasses, children: [
+                t("form.fields.workEmail") || "Email",
+                " *"
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "input",
+                {
+                  type: "email",
+                  name: "workEmail",
+                  value: formData.workEmail || "",
+                  onChange: handleInputChange,
+                  onBlur: handleBlur,
+                  className: `${inputBaseClasses} ${formErrors.workEmail ? "border-red-500" : ""}`,
+                  placeholder: "email@company.com",
+                  required: true
+                }
+              ),
+              formErrors.workEmail && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
+                formErrors.workEmail
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid md:grid-cols-2 gap-6", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.phoneNumber") || "Số điện thoại" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "input",
+                {
+                  type: "tel",
+                  name: "phoneNumber",
+                  value: formData.phoneNumber || "",
+                  onChange: handleInputChange,
+                  onBlur: handleBlur,
+                  className: `${inputBaseClasses} ${formErrors.phoneNumber ? "border-red-500" : ""}`,
+                  placeholder: "0901 234 567"
+                }
+              ),
+              formErrors.phoneNumber && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
+                formErrors.phoneNumber
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.companyName") || "Công ty/Tổ chức" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "input",
+                {
+                  type: "text",
+                  name: "companyName",
+                  value: formData.companyName || "",
+                  onChange: handleInputChange,
+                  onBlur: handleBlur,
+                  className: `${inputBaseClasses} ${formErrors.companyName ? "border-red-500" : ""}`,
+                  placeholder: "ABC Company"
+                }
+              ),
+              formErrors.companyName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
+                formErrors.companyName
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid md:grid-cols-2 gap-6", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.jobTitle") || "Chức vụ" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "input",
+                {
+                  type: "text",
+                  name: "jobTitle",
+                  value: formData.jobTitle || "",
+                  onChange: handleInputChange,
+                  onBlur: handleBlur,
+                  className: `${inputBaseClasses} ${formErrors.jobTitle ? "border-red-500" : ""}`,
+                  placeholder: "Giám đốc công nghệ"
+                }
+              ),
+              formErrors.jobTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
+                formErrors.jobTitle
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.businessType") || "Loại hình kinh doanh" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "input",
+                {
+                  type: "text",
+                  name: "businessType",
+                  value: formData.businessType || "",
+                  onChange: handleInputChange,
+                  className: inputBaseClasses,
+                  placeholder: "Công nghệ thông tin"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid md:grid-cols-2 gap-6", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.expectedBudget") || "Ngân sách dự kiến" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "input",
+                {
+                  type: "text",
+                  name: "expectedBudget",
+                  value: formData.expectedBudget || "",
+                  onChange: handleInputChange,
+                  className: inputBaseClasses,
+                  placeholder: "500,000,000 - 1,000,000,000 VNĐ"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.expectedTimeline") || "Thời gian dự kiến" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "input",
+                {
+                  type: "text",
+                  name: "expectedTimeline",
+                  value: formData.expectedTimeline || "",
+                  onChange: handleInputChange,
+                  className: inputBaseClasses,
+                  placeholder: "3-6 tháng"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: labelClasses, children: [
+              t("form.fields.requestTitle") || "Tiêu đề yêu cầu",
+              " *"
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "input",
+              {
+                type: "text",
+                name: "requestTitle",
+                value: formData.requestTitle || "",
+                onChange: handleInputChange,
+                onBlur: handleBlur,
+                className: `${inputBaseClasses} ${formErrors.requestTitle ? "border-red-500" : ""}`,
+                placeholder: "Phát triển hệ thống quản lý bán hàng",
+                required: true
+              }
+            ),
+            formErrors.requestTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
+              formErrors.requestTitle
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: labelClasses, children: [
+              t("form.fields.requestDescription") || "Mô tả yêu cầu",
+              " *"
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "textarea",
+              {
+                name: "requestDescription",
+                value: formData.requestDescription || "",
+                onChange: handleInputChange,
+                onBlur: handleBlur,
+                rows: "5",
+                className: `${inputBaseClasses} resize-none ${formErrors.requestDescription ? "border-red-500" : ""}`,
+                placeholder: "Vui lòng mô tả chi tiết về nhu cầu của bạn...",
+                required: true
+              }
+            ),
+            formErrors.requestDescription && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
+              formErrors.requestDescription
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-4", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "submit",
+                disabled: isSubmitting,
+                className: "flex-1 bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-4 px-6 rounded-xl hover:from-indigo-700 hover:to-purple-700 transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none flex items-center justify-center font-semibold shadow-lg",
+                children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "animate-spin h-5 w-5 mr-2" }),
+                  t("form.submitting") || "Đang gửi..."
+                ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { size: 20, className: "mr-2" }),
+                  t("form.submit") || "Gửi yêu cầu"
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                className: `px-6 py-4 rounded-xl border-2 font-semibold transition-all hover:scale-105 ${isDarkMode ? "border-gray-600 text-gray-300 hover:bg-gray-700" : "border-slate-300 text-slate-700 hover:bg-slate-50"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { size: 20, className: "inline mr-2" }),
+                  t("form.callNow") || "Gọi ngay"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex items-center space-x-2 text-sm transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheckBig, { size: 16, className: "text-emerald-500" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t("form.privacy") || "Cam kết bảo mật thông tin và phản hồi trong 24 giờ" })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `rounded-2xl p-6 shadow-lg text-white transition-colors duration-200 ${isDarkMode ? "bg-gradient-to-br from-indigo-900 to-purple-900" : "bg-gradient-to-br from-indigo-600 to-purple-600"}`, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-bold mb-3", children: t("sidebar.quickContact.title") || "Cần hỗ trợ ngay?" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-indigo-100 text-sm mb-4", children: t("sidebar.quickContact.description") || "Liên hệ trực tiếp để được tư vấn nhanh chóng" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "a",
+              {
+                href: "tel:19005588",
+                className: "flex items-center justify-center w-full bg-white/20 backdrop-blur-sm hover:bg-white/30 py-3 rounded-xl transition-all font-semibold",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { size: 18, className: "mr-2" }),
+                  "1900 5588"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "flex items-center justify-center w-full border border-white/30 hover:bg-white/10 py-3 rounded-xl transition-all font-semibold", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { size: 18, className: "mr-2" }),
+              "Live Chat"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `rounded-2xl p-6 shadow-lg border transition-colors duration-200 ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-slate-200"}`, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: `font-bold mb-4 transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: t("sidebar.contactInfo.title") || "Thông tin liên hệ" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center ${isDarkMode ? "bg-indigo-900/50 text-indigo-400" : "bg-indigo-50 text-indigo-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { size: 18 }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-semibold transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: "1900 5588" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: "Hotline 24/7" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center ${isDarkMode ? "bg-emerald-900/50 text-emerald-400" : "bg-emerald-50 text-emerald-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { size: 18 }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-semibold transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: "support@asasystems.vn" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: "Email hỗ trợ" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center ${isDarkMode ? "bg-purple-900/50 text-purple-400" : "bg-purple-50 text-purple-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MessageCircle, { size: 18 }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-semibold transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: "Live Chat" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: "T2-T6: 8:00-18:00" })
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `rounded-2xl p-6 shadow-lg border transition-colors duration-200 ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-slate-200"}`, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: `font-bold mb-4 transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: t("sidebar.faq.title") || "Câu hỏi thường gặp" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `p-3 rounded-lg transition-colors duration-200 ${isDarkMode ? "bg-gray-700" : "bg-slate-50"}`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-medium text-sm transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: t("sidebar.faq.responseTime.question") || "Thời gian phản hồi?" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm mt-1 transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: t("sidebar.faq.responseTime.answer") || "Trong vòng 24 giờ làm việc" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `p-3 rounded-lg transition-colors duration-200 ${isDarkMode ? "bg-gray-700" : "bg-slate-50"}`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-medium text-sm transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: t("sidebar.faq.consultationFree.question") || "Tư vấn có miễn phí?" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm mt-1 transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: t("sidebar.faq.consultationFree.answer") || "Hoàn toàn miễn phí" })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }) }) });
+  };
+  const ContactInfoSection = ({ data, t, isDarkMode }) => {
+    const contactData = (data == null ? void 0 : data.sectionDataBindingItems) || [];
+    if (!contactData.length) return null;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: `py-16 ${isDarkMode ? "bg-gray-900" : "bg-slate-50"}`, 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-flex items-center px-4 py-2 rounded-full text-sm font-semibold mb-4 ${isDarkMode ? "bg-indigo-900/50 text-indigo-300" : "bg-indigo-50 text-indigo-700"}`, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(User, { size: 16, className: "mr-2" }),
+          t("contact.team.badge") || "Đội ngũ hỗ trợ"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: `text-3xl lg:text-4xl font-bold mb-4 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: [
+          t("contact.team.title") || "Liên hệ với đội ngũ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent", children: t("contact.team.subtitle") || "chuyên nghiệp của chúng tôi" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-lg max-w-3xl mx-auto ${isDarkMode ? "text-gray-300" : "text-slate-600"}`, children: t("contact.team.description") || "Chúng tôi luôn sẵn sàng hỗ trợ bạn với đội ngũ chuyên nghiệp và giàu kinh nghiệm" })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-8", children: contactData.map((contact, index2) => {
+        var _a;
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: `rounded-2xl p-8 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-slate-200"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-6", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-20 h-20 rounded-full mx-auto mb-4 flex items-center justify-center text-2xl font-bold text-white bg-gradient-to-br from-indigo-500 to-purple-600", children: ((_a = contact.data.name) == null ? void 0 : _a.charAt(0)) || "A" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-xl font-bold mb-2 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: contact.data.name }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block px-3 py-1 rounded-full text-sm font-semibold ${isDarkMode ? "bg-indigo-900/50 text-indigo-300" : "bg-indigo-50 text-indigo-700"}`, children: contact.data.position })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "a",
+                  {
+                    href: `tel:${contact.data.phone}`,
+                    className: `flex items-center p-3 rounded-xl transition-all hover:scale-105 ${isDarkMode ? "bg-gray-700 hover:bg-gray-600" : "bg-slate-50 hover:bg-slate-100"} group`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center mr-3 group-hover:scale-110 transition-transform ${isDarkMode ? "bg-green-900/50 text-green-400" : "bg-green-50 text-green-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { size: 18 }) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm font-medium ${isDarkMode ? "text-gray-400" : "text-slate-500"}`, children: t("contact.info.phone") || "Điện thoại" }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-semibold ${isDarkMode ? "text-white" : "text-slate-800"}`, children: contact.data.phone })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "a",
+                  {
+                    href: `mailto:${contact.data.email}`,
+                    className: `flex items-center p-3 rounded-xl transition-all hover:scale-105 ${isDarkMode ? "bg-gray-700 hover:bg-gray-600" : "bg-slate-50 hover:bg-slate-100"} group`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center mr-3 group-hover:scale-110 transition-transform ${isDarkMode ? "bg-indigo-900/50 text-indigo-400" : "bg-indigo-50 text-indigo-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { size: 18 }) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm font-medium ${isDarkMode ? "text-gray-400" : "text-slate-500"}`, children: "Email" }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-semibold ${isDarkMode ? "text-white" : "text-slate-800"}`, children: contact.data.email })
+                      ] })
+                    ]
+                  }
+                ),
+                contact.data.workingHours && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex items-center p-3 rounded-xl ${isDarkMode ? "bg-gray-700" : "bg-slate-50"}`, children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center mr-3 ${isDarkMode ? "bg-purple-900/50 text-purple-400" : "bg-purple-50 text-purple-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { size: 18 }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm font-medium ${isDarkMode ? "text-gray-400" : "text-slate-500"}`, children: t("contact.info.workingHours") || "Giờ làm việc" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-semibold ${isDarkMode ? "text-white" : "text-slate-800"}`, children: contact.data.workingHours || t("contact.info.defaultWorkingHours") || "T2-T6: 8:00-18:00" })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "w-full py-3 px-4 rounded-xl font-semibold transition-all transform hover:scale-105 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white shadow-lg", children: t("contact.buttons.contactNow") || "Liên hệ ngay" }) })
+            ]
+          },
+          contact.id || index2
+        );
+      }) })
+    ] }) });
+  };
+  const ContactListAutoSection = ({ data, t, isDarkMode, getContactList }) => {
+    const [contacts, setContacts] = require$$0.useState([]);
+    const [loading, setLoading] = require$$0.useState(true);
+    const [error, setError] = require$$0.useState(null);
+    require$$0.useEffect(() => {
+      loadContacts();
+    }, []);
+    const loadContacts = () => __async(null, null, function* () {
+      try {
+        setLoading(true);
+        const result = yield getContactList();
+        if (result.success) {
+          setContacts(result.data || []);
+        } else {
+          setError(result.error);
+        }
+      } catch (err) {
+        console.error("Error loading contacts:", err);
+        setError(t("contactList.error.loadData") || "Có lỗi xảy ra khi tải danh sách liên hệ");
+      } finally {
+        setLoading(false);
+      }
+    });
+    if (loading) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `py-16 px-5 text-center ${isDarkMode ? "bg-gray-900" : "bg-gray-50"}`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `inline-block w-10 h-10 border-4 ${isDarkMode ? "border-gray-600 border-t-blue-500" : "border-gray-300 border-t-blue-500"} rounded-full animate-spin` }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `mt-4 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: t("contactList.status.loading") || "Đang tải danh sách liên hệ..." })
+      ] });
+    }
+    if (error) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `py-16 px-5 text-center ${isDarkMode ? "bg-gray-900" : "bg-gray-50"}`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${isDarkMode ? "text-red-400" : "text-red-500"} text-base mb-2`, children: [
+          "⚠️ ",
+          t("contactList.error.title") || "Lỗi tải dữ liệu"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: error })
+      ] });
+    }
+    if (!contacts || contacts.length === 0) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `py-16 px-5 text-center ${isDarkMode ? "bg-gray-900" : "bg-gray-50"}`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-5xl mb-5", children: "📞" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `${isDarkMode ? "text-gray-400" : "text-gray-600"} mb-2`, children: t("contactList.status.noData.title") || "Chưa có thông tin liên hệ" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `${isDarkMode ? "text-gray-500" : "text-gray-500"}`, children: t("contactList.status.noData.description") || "Danh sách liên hệ sẽ hiển thị tại đây" })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: `py-20 ${isDarkMode ? "bg-gray-900" : "bg-gray-50"} transition-colors duration-300`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-6xl mx-auto px-5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-16", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: `text-4xl font-bold ${isDarkMode ? "text-white" : "text-gray-900"} mb-4`, children: t("contactList.header.title") || "Thông Tin Liên Hệ" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-lg ${isDarkMode ? "text-gray-400" : "text-gray-600"} max-w-2xl mx-auto`, children: t("contactList.header.description") || "Đội ngũ chuyên nghiệp của chúng tôi luôn sẵn sàng hỗ trợ bạn" })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-10", children: contacts.map((contact, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(ContactCard, { contact, t, isDarkMode }, contact.id || index2)) })
+    ] }) });
+  };
+  const ContactCard = ({ contact, t, isDarkMode }) => {
+    var _a, _b;
+    const [isHovered, setIsHovered] = require$$0.useState(false);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: `
+        ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"} rounded-2xl p-8 border cursor-pointer transition-all duration-300
+        ${isHovered ? `shadow-xl ${isDarkMode ? "shadow-gray-900/40" : "shadow-gray-500/20"} -translate-y-2` : `shadow-lg ${isDarkMode ? "shadow-gray-900/20" : "shadow-gray-500/10"}`}
+      `,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center mb-6", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-15 h-15 rounded-full ${isDarkMode ? "bg-blue-600" : "bg-blue-500"} flex items-center justify-center text-white text-2xl font-bold mr-4`, children: ((_b = (_a = contact.name) == null ? void 0 : _a.charAt(0)) == null ? void 0 : _b.toUpperCase()) || "?" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-xl font-semibold ${isDarkMode ? "text-white" : "text-gray-900"} mb-1`, children: contact.name || t("contactList.card.noName") || "Không có tên" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-base ${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: contact.position || t("contactList.card.noPosition") || "Chưa có chức vụ" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ContactInfo,
+              {
+                icon: "📧",
+                label: t("contactList.card.email") || "Email",
+                value: contact.email,
+                href: `mailto:${contact.email}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ContactInfo,
+              {
+                icon: "📱",
+                label: t("contactList.card.phone") || "Điện thoại",
+                value: contact.phone,
+                href: `tel:${contact.phone}`
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  };
+  const ContactInfo = ({ icon, label, value, href, isDarkMode }) => {
+    if (!value) return null;
+    const content = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex items-center py-3 border-b ${isDarkMode ? "border-gray-600" : "border-gray-100"} last:border-b-0`, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lg mr-3 w-6 text-center", children: icon }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-sm ${isDarkMode ? "text-gray-400" : "text-gray-600"} mb-0.5`, children: label }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-base font-medium ${href ? `${isDarkMode ? "text-blue-400 hover:text-blue-300" : "text-blue-500 hover:text-blue-600"}` : `${isDarkMode ? "text-white" : "text-gray-900"}`} transition-colors duration-200`, children: value })
+      ] })
+    ] });
+    if (href) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href, className: `no-underline text-inherit block ${isDarkMode ? "hover:bg-gray-700/50" : "hover:bg-gray-50"} rounded-lg -mx-2 px-2 transition-colors duration-200`, children: content });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mx-2 px-2", children: content });
+  };
+  const CustomerFeedbackAutoSection = ({ data, t, isDarkMode, loadCustomerFeedback }) => {
+    const [feedbacks, setFeedbacks] = require$$0.useState([]);
+    const [currentIndex, setCurrentIndex] = require$$0.useState(0);
+    require$$0.useEffect(() => {
+      const fetchData = () => __async(null, null, function* () {
+        const res = yield loadCustomerFeedback();
+        if (res.success) {
+          setFeedbacks(Array.isArray(res.data) ? res.data : []);
+        } else {
+          setFeedbacks([]);
+        }
+      });
+      fetchData();
+    }, []);
+    require$$0.useEffect(() => {
+      if (feedbacks.length > 1) {
+        const interval = setInterval(() => {
+          setCurrentIndex((prev) => (prev + 1) % feedbacks.length);
+        }, 5e3);
+        return () => clearInterval(interval);
+      }
+    }, [feedbacks.length]);
+    require$$0.useEffect(() => {
+      if (currentIndex >= feedbacks.length) {
+        setCurrentIndex(0);
+      }
+    }, [feedbacks.length, currentIndex]);
+    if (!feedbacks.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.jsx(
+              "div",
+              {
+                className: `w-24 h-24 mx-auto mb-6 rounded-full flex items-center justify-center ${isDarkMode ? "bg-gray-800" : "bg-gray-200"}`,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "svg",
+                  {
+                    className: `w-12 h-12 ${isDarkMode ? "text-gray-600" : "text-gray-400"}`,
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "h3",
+              {
+                className: `text-xl font-semibold mb-4 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+                children: t("customerFeedback.emptyTitle") || "Chưa có phản hồi từ khách hàng"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "p",
+              {
+                className: `text-lg ${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
+                children: t("customerFeedback.emptyDescription") || "Các phản hồi từ khách hàng sẽ được hiển thị tại đây."
+              }
+            )
+          ] })
+        }
+      );
+    }
+    const currentFeedback = feedbacks[currentIndex];
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "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("customerFeedback.badge") || "Phản hồi khách hàng"
+                ]
+              }
+            ),
+            /* @__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("customerFeedback.titlelanding") || "Khách hàng nói gì",
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent", children: t("customerFeedback.subtitle") || "về chúng tôi" })
+                ]
+              }
+            ),
+            /* @__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 shadow-lg"}`,
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "blockquote",
+                      {
+                        className: `text-lg lg:text-xl italic mb-6 animate-fadeIn transition-colors duration-200 leading-relaxed ${isDarkMode ? "text-gray-300" : "text-gray-700"}`,
+                        children: [
+                          '"',
+                          currentFeedback.content,
+                          '"'
+                        ]
+                      }
+                    ),
+                    /* @__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: currentFeedback.customerName
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-medium text-sm", children: currentFeedback.customerTitle }),
+                        currentFeedback.customerCompany && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "div",
+                          {
+                            className: `text-xs transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`,
+                            children: currentFeedback.customerCompany
+                          }
+                        )
+                      ] })
+                    ] })
+                  ]
+                },
+                currentIndex
+              ),
+              feedbacks.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2 mt-4", children: feedbacks.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"}`,
+                  "aria-label": t("customerFeedback.switchToFeedback", { number: index2 + 1 }) || `Chuyển đến phản hồi ${index2 + 1}`
+                },
+                index2
+              )) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("style", { jsx: true, children: `
+        .animate-fadeIn {
+          animation: fadeIn 0.5s ease-in-out;
+        }
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+            transform: translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      ` })
+        ]
+      }
+    );
+  };
+  const ProductListSection = ({ data, t, isDarkMode, getProductList }) => {
+    const [products, setProducts] = require$$0.useState([]);
+    const [loading, setLoading] = require$$0.useState(true);
+    const [error, setError] = require$$0.useState(null);
+    require$$0.useEffect(() => {
+      const fetchProducts = () => __async(null, null, function* () {
+        try {
+          setLoading(true);
+          const result = yield getProductList();
+          if (result.success) {
+            setProducts(result.data || []);
+          } else {
+            setError(result.error || t("productList.errors.loadFailed"));
+          }
+        } catch (err) {
+          console.error("Error fetching products:", err);
+          setError(t("productList.errors.loadError"));
+        } finally {
+          setLoading(false);
+        }
+      });
+      fetchProducts();
+    }, [t]);
+    if (loading) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `py-16 px-5 text-center ${isDarkMode ? "bg-gray-900" : "bg-gray-50"}`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `inline-block w-10 h-10 border-4 ${isDarkMode ? "border-gray-600 border-t-blue-400" : "border-gray-300 border-t-blue-500"} rounded-full animate-spin` }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `mt-2.5 text-base ${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: t("productList.loading") })
+      ] });
+    }
+    if (error) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `py-16 px-5 text-center ${isDarkMode ? "bg-gray-900" : "bg-gray-50"}`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-red-500 text-5xl mb-4", children: "⚠️" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500 text-base m-0", children: error })
+      ] });
+    }
+    if (!products || products.length === 0) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `py-16 px-5 text-center ${isDarkMode ? "bg-gray-900" : "bg-gray-50"}`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-5xl mb-4 ${isDarkMode ? "text-gray-400" : "text-gray-500"}`, children: "📦" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-base m-0 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: t("productList.noProducts") })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `py-16 px-5 transition-colors duration-300 ${isDarkMode ? "bg-gray-900" : "bg-gray-50"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-6xl mx-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 items-start", children: products.map((product, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(ProductCard, { product, t, isDarkMode }, product.id || index2)) }) }) });
+  };
+  const ProductCard = ({ product, t, isDarkMode }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const [activeTab, setActiveTab] = require$$0.useState("overview");
+    const [isHovered, setIsHovered] = require$$0.useState(false);
+    const mainImage = ((_b = (_a = product.images) == null ? void 0 : _a.find((img) => img.isMain)) == null ? void 0 : _b.imageUrl) || ((_d = (_c = product.images) == null ? void 0 : _c[0]) == null ? void 0 : _d.imageUrl) || "/placeholder-product.png";
+    const tabs = [
+      { id: "overview", label: t("productCard.tabs.overview"), count: null },
+      { id: "features", label: t("productCard.tabs.features"), count: ((_e = product.features) == null ? void 0 : _e.length) || 0 },
+      { id: "contacts", label: t("productCard.tabs.contacts"), count: ((_f = product.contacts) == null ? void 0 : _f.length) || 0 },
+      { id: "downloads", label: t("productCard.tabs.downloads"), count: ((_g = product.productDownloads) == null ? void 0 : _g.length) || 0 }
+    ];
+    const renderOverview = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-5", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: `text-sm leading-relaxed ${isDarkMode ? "text-gray-300" : "text-gray-700"}`,
+        dangerouslySetInnerHTML: {
+          __html: product.overviewContent || product.description || t("productCard.noOverview")
+        }
+      }
+    ) });
+    const renderFeatures = () => {
+      const features = product.features || [];
+      if (features.length === 0) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `p-5 text-center ${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "m-0", children: t("productCard.noFeatures") }) });
+      }
+      const sortedFeatures = [...features].sort((a, b) => (a.order || 0) - (b.order || 0));
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-5", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-4", children: sortedFeatures.map((feature, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: `p-4 rounded-lg border-l-4 border-blue-500 ${isDarkMode ? "bg-gray-700" : "bg-gray-100"}`,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: `m-0 mb-2 text-sm font-bold ${isDarkMode ? "text-white" : "text-gray-900"}`, children: feature.title }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `m-0 text-xs leading-relaxed ${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: feature.description })
+          ]
+        },
+        index2
+      )) }) });
+    };
+    const renderContacts = () => {
+      const contacts = product.contacts || [];
+      if (contacts.length === 0) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `p-5 text-center ${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "m-0", children: t("productCard.noContacts") }) });
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-5", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-4", children: contacts.map((contact, index2) => {
+        var _a2, _b2;
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: `p-4 rounded-lg border ${isDarkMode ? "bg-gray-700 border-gray-600" : "bg-gray-100 border-gray-200"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center mb-2", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-full flex items-center justify-center mr-3 ${isDarkMode ? "bg-blue-600" : "bg-blue-500"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-base", children: ((_b2 = (_a2 = contact.name) == null ? void 0 : _a2.charAt(0)) == null ? void 0 : _b2.toUpperCase()) || "?" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: `m-0 mb-0.5 text-sm font-bold ${isDarkMode ? "text-white" : "text-gray-900"}`, children: contact.name }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `m-0 text-xs ${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: contact.position })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", children: [
+                contact.phone && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-sm ${isDarkMode ? "text-blue-400" : "text-blue-500"}`, children: "📞" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "a",
+                    {
+                      href: `tel:${contact.phone}`,
+                      className: `text-xs no-underline hover:underline ${isDarkMode ? "text-blue-400" : "text-blue-500"}`,
+                      children: contact.phone
+                    }
+                  )
+                ] }),
+                contact.email && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-sm ${isDarkMode ? "text-blue-400" : "text-blue-500"}`, children: "✉️" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "a",
+                    {
+                      href: `mailto:${contact.email}`,
+                      className: `text-xs no-underline hover:underline ${isDarkMode ? "text-blue-400" : "text-blue-500"}`,
+                      children: contact.email
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          },
+          contact.id || index2
+        );
+      }) }) });
+    };
+    const renderDownloads = () => {
+      const downloads = product.productDownloads || [];
+      if (downloads.length === 0) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `p-5 text-center ${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "m-0", children: t("productCard.noDownloads") }) });
+      }
+      const handleDownload = (fileUrl, title) => {
+        try {
+          const link = document.createElement("a");
+          link.href = fileUrl;
+          link.download = title || "download";
+          link.target = "_blank";
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+        } catch (error) {
+          console.error("Download error:", error);
+        }
+      };
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-5", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-3", children: downloads.map((download, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          onClick: () => handleDownload(download.fileUrl, download.title),
+          className: `p-4 rounded-lg border cursor-pointer flex items-center gap-3 transition-all duration-200 hover:translate-x-1 ${isDarkMode ? "bg-gray-700 border-gray-600 hover:bg-gray-600" : "bg-gray-100 border-gray-200 hover:bg-gray-200"}`,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${isDarkMode ? "bg-blue-600" : "bg-blue-500"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white text-lg", children: "📄" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: `m-0 mb-1 text-sm font-bold overflow-hidden text-ellipsis whitespace-nowrap ${isDarkMode ? "text-white" : "text-gray-900"}`, children: download.title }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `m-0 text-xs ${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: t("productCard.downloadClick") })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-shrink-0 text-base ${isDarkMode ? "text-blue-400" : "text-blue-500"}`, children: "⬇️" })
+          ]
+        },
+        index2
+      )) }) });
+    };
+    const renderTabContent = () => {
+      switch (activeTab) {
+        case "overview":
+          return renderOverview();
+        case "features":
+          return renderFeatures();
+        case "contacts":
+          return renderContacts();
+        case "downloads":
+          return renderDownloads();
+        default:
+          return null;
+      }
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: `
+        rounded-xl overflow-hidden cursor-pointer transition-all duration-300 border
+        ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}
+        ${isHovered ? `shadow-xl -translate-y-2 ${isDarkMode ? "shadow-gray-900/40" : "shadow-gray-500/20"}` : `shadow-lg ${isDarkMode ? "shadow-gray-900/20" : "shadow-gray-500/10"}`}
+      `,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: `relative h-48 bg-cover bg-center ${isDarkMode ? "bg-gray-700" : "bg-gray-200"}`,
+              style: {
+                backgroundImage: `url(${mainImage})`
+              },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent p-5 text-white", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "m-0 mb-2 text-lg font-bold", children: product.name }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "m-0 text-sm opacity-90", children: product.description })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `border-b ${isDarkMode ? "border-gray-600" : "border-gray-200"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex overflow-x-auto", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              onClick: () => setActiveTab(tab.id),
+              className: `
+                flex-1 min-w-[100px] py-4 px-2 border-none text-xs font-medium cursor-pointer transition-all duration-300 flex items-center justify-center gap-1
+                ${activeTab === tab.id ? `${isDarkMode ? "bg-blue-600" : "bg-blue-500"} text-white font-bold` : `bg-transparent ${isDarkMode ? "text-gray-400 hover:bg-gray-700" : "text-gray-600 hover:bg-gray-100"}`}
+              `,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: tab.label }),
+                tab.count !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `
+                  text-xs py-0.5 px-1.5 rounded-full min-w-[18px] text-center
+                  ${activeTab === tab.id ? "bg-white/20 text-white" : `${isDarkMode ? "bg-gray-600 text-gray-400" : "bg-gray-200 text-gray-600"}`}
+                `, children: tab.count })
+              ]
+            },
+            tab.id
+          )) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-[200px] max-h-[300px] overflow-y-auto", children: renderTabContent() })
+        ]
+      }
+    );
+  };
+  const ImageItem = ({ item, index: index2, isDarkMode, t, getObjectUrl: getObjectUrl2 }) => {
+    var _a;
+    const media = (_a = item.medias) == null ? void 0 : _a[0];
+    const getImageUrl = () => {
+      if (!(media == null ? void 0 : media.url)) return null;
+      if (media.url instanceof File) {
+        return URL.createObjectURL(media.url);
+      }
+      if (typeof media.url === "string" && getObjectUrl2) {
+        return getObjectUrl2(media.url);
+      }
+      return media.url;
+    };
+    const imageUrl = getImageUrl();
+    require$$0.useEffect(() => {
+      return () => {
+        if (imageUrl && imageUrl.startsWith("blob:")) {
+          URL.revokeObjectURL(imageUrl);
+        }
+      };
+    }, [imageUrl]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        style: {
+          borderRadius: "8px",
+          overflow: "hidden",
+          boxShadow: isDarkMode ? "0 4px 8px rgba(0,0,0,0.3)" : "0 4px 8px rgba(0,0,0,0.1)"
+        },
+        children: imageUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "img",
+          {
+            src: imageUrl,
+            alt: `Image ${index2 + 1}`,
+            style: {
+              width: "100%",
+              height: "250px",
+              objectFit: "cover"
+            },
+            onError: (e) => {
+              e.currentTarget.parentElement.style.display = "none";
+            }
+          }
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: "250px",
+              backgroundColor: isDarkMode ? "#374151" : "#f3f4f6",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: isDarkMode ? "#9ca3af" : "#6b7280",
+              fontSize: "14px"
+            },
+            children: t("imageSection.noImage") || "No image available"
+          }
+        )
+      },
+      item.id || index2
+    );
+  };
+  const ImageSection = ({ data, t, isDarkMode, getObjectUrl: getObjectUrl2 }) => {
+    const imageItems = require$$0.useMemo(() => (data == null ? void 0 : data.sectionDataBindingItems) || [], [data]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
+      padding: "40px 20px",
+      backgroundColor: isDarkMode ? "#111827" : "white"
+    }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { maxWidth: "1200px", margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+          gap: "20px"
+        },
+        children: imageItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ImageItem,
+          {
+            item,
+            index: index2,
+            isDarkMode,
+            t,
+            getObjectUrl: getObjectUrl2
+          },
+          item.id || index2
+        ))
+      }
+    ) }) });
+  };
+  const SingleImageItem = ({ item, index: index2, isDarkMode }) => {
+    var _a;
+    const media = (_a = item.medias) == null ? void 0 : _a[0];
+    const getImageUrl = () => {
+      if (!(media == null ? void 0 : media.url)) return null;
+      if (media.url instanceof File) {
+        return URL.createObjectURL(media.url);
+      }
+      if (getObjectUrl && typeof media.url === "string") {
+        return getObjectUrl(media.url);
+      }
+      return media.url;
+    };
+    const imageUrl = getImageUrl();
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        style: {
+          borderRadius: "12px",
+          overflow: "hidden",
+          boxShadow: isDarkMode ? "0 8px 24px rgba(0,0,0,0.4)" : "0 8px 24px rgba(0,0,0,0.15)",
+          marginBottom: "30px"
+        },
+        children: imageUrl && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "img",
+          {
+            src: imageUrl,
+            alt: `Single Image ${index2 + 1}`,
+            style: {
+              width: "100%",
+              height: "400px",
+              objectFit: "cover",
+              display: "block"
+            },
+            onError: (e) => {
+              e.currentTarget.style.display = "none";
+            }
+          }
+        )
+      },
+      item.id || index2
+    );
+  };
+  const ImageSingleSection = ({ data, t, isDarkMode, getObjectUrl: getObjectUrl2 }) => {
+    const imageItems = require$$0.useMemo(() => (data == null ? void 0 : data.sectionDataBindingItems) || [], [data]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
+      padding: "40px 20px",
+      backgroundColor: isDarkMode ? "#111827" : "white"
+    }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { maxWidth: "800px", margin: "0 auto" }, children: imageItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SingleImageItem,
+      {
+        item,
+        index: index2,
+        isDarkMode,
+        getObjectUrl: getObjectUrl2
+      },
+      item.id || index2
+    )) }) });
+  };
+  const TextWithTitleSection = ({ section, data, isDarkMode }) => {
+    const textItems = (data == null ? void 0 : data.sectionDataBindingItems) || [];
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
+      padding: "40px 20px",
+      backgroundColor: isDarkMode ? "#1f2937" : "#f8f9fa",
+      textAlign: "center"
+    }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { maxWidth: "800px", margin: "0 auto" }, children: textItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        style: {
+          backgroundColor: isDarkMode ? "#374151" : "white",
+          padding: "30px 20px",
+          marginBottom: "20px",
+          borderRadius: "8px",
+          boxShadow: isDarkMode ? "0 2px 4px rgba(0,0,0,0.3)" : "0 2px 4px rgba(0,0,0,0.1)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { style: {
+            fontSize: "24px",
+            fontWeight: "bold",
+            color: isDarkMode ? "#f9fafb" : "#1f2937",
+            marginBottom: "16px",
+            lineHeight: "1.3"
+          }, children: item.title }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
+            fontSize: "16px",
+            lineHeight: "1.6",
+            color: isDarkMode ? "#d1d5db" : "#4b5563",
+            textAlign: "left"
+          }, children: item.value })
+        ]
+      },
+      item.id || index2
+    )) }) });
+  };
   const index = {
     AboutCompanySection,
     CompanyValues,
@@ -1614,16 +3088,32 @@
     MilestoneSection,
     TestimonialsSection,
     PartnerListCard,
-    PartnerListSection
+    PartnerListSection,
+    ContactFormSection,
+    ContactInfoSection,
+    ContactListAutoSection,
+    CustomerFeedbackAutoSection,
+    ProductListSection,
+    ImageSection,
+    ImageSingleSection,
+    TextWithTitleSection
   };
   exports2.AboutCompanySection = AboutCompanySection;
   exports2.CompanyValues = CompanyValues;
+  exports2.ContactFormSection = ContactFormSection;
+  exports2.ContactInfoSection = ContactInfoSection;
+  exports2.ContactListAutoSection = ContactListAutoSection;
+  exports2.CustomerFeedbackAutoSection = CustomerFeedbackAutoSection;
+  exports2.ImageSection = ImageSection;
+  exports2.ImageSingleSection = ImageSingleSection;
   exports2.MilestoneSection = MilestoneSection;
   exports2.PartnerCard = PartnerCard;
   exports2.PartnerListCard = PartnerListCard;
   exports2.PartnerListSection = PartnerListSection;
   exports2.PartnersSection = PartnersSection;
+  exports2.ProductListSection = ProductListSection;
   exports2.TestimonialsSection = TestimonialsSection;
+  exports2.TextWithTitleSection = TextWithTitleSection;
   exports2.TimelineSection = TimelineSection;
   exports2.default = index;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });