nvis-fe-cms-libs 1.1.15 → 1.1.16

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

@@ -1744,60 +1744,283 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [
+const __iconNode$z = [
+  ["path", { d: "M2 4v16", key: "vw9hq8" }],
+  ["path", { d: "M2 8h18a2 2 0 0 1 2 2v10", key: "1dgv2r" }],
+  ["path", { d: "M2 17h20", key: "18nfp3" }],
+  ["path", { d: "M6 8v9", key: "1yriud" }]
+];
+const Bed = createLucideIcon("bed", __iconNode$z);
+/**
+ * @license lucide-react v0.536.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$y = [
+  ["path", { d: "M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16", key: "jecpp" }],
+  ["rect", { width: "20", height: "14", x: "2", y: "6", rx: "2", key: "i6l2r4" }]
+];
+const Briefcase = createLucideIcon("briefcase", __iconNode$y);
+/**
+ * @license lucide-react v0.536.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$x = [
+  ["path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z", key: "1b4qmf" }],
+  ["path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2", key: "i71pzd" }],
+  ["path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2", key: "10jefs" }],
+  ["path", { d: "M10 6h4", key: "1itunk" }],
+  ["path", { d: "M10 10h4", key: "tcdvrf" }],
+  ["path", { d: "M10 14h4", key: "kelpxr" }],
+  ["path", { d: "M10 18h4", key: "1ulq68" }]
+];
+const Building2 = createLucideIcon("building-2", __iconNode$x);
+/**
+ * @license lucide-react v0.536.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$w = [
+  ["rect", { width: "16", height: "20", x: "4", y: "2", rx: "2", ry: "2", key: "76otgf" }],
+  ["path", { d: "M9 22v-4h6v4", key: "r93iot" }],
+  ["path", { d: "M8 6h.01", key: "1dz90k" }],
+  ["path", { d: "M16 6h.01", key: "1x0f13" }],
+  ["path", { d: "M12 6h.01", key: "1vi96p" }],
+  ["path", { d: "M12 10h.01", key: "1nrarc" }],
+  ["path", { d: "M12 14h.01", key: "1etili" }],
+  ["path", { d: "M16 10h.01", key: "1m94wz" }],
+  ["path", { d: "M16 14h.01", key: "1gbofw" }],
+  ["path", { d: "M8 10h.01", key: "19clt8" }],
+  ["path", { d: "M8 14h.01", key: "6423bh" }]
+];
+const Building = createLucideIcon("building", __iconNode$w);
+/**
+ * @license lucide-react v0.536.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$v = [
+  ["rect", { width: "16", height: "20", x: "4", y: "2", rx: "2", key: "1nb95v" }],
+  ["line", { x1: "8", x2: "16", y1: "6", y2: "6", key: "x4nwl0" }],
+  ["line", { x1: "16", x2: "16", y1: "14", y2: "18", key: "wjye3r" }],
+  ["path", { d: "M16 10h.01", key: "1m94wz" }],
+  ["path", { d: "M12 10h.01", key: "1nrarc" }],
+  ["path", { d: "M8 10h.01", key: "19clt8" }],
+  ["path", { d: "M12 14h.01", key: "1etili" }],
+  ["path", { d: "M8 14h.01", key: "6423bh" }],
+  ["path", { d: "M12 18h.01", key: "mhygvu" }],
+  ["path", { d: "M8 18h.01", key: "lrp35t" }]
+];
+const Calculator = createLucideIcon("calculator", __iconNode$v);
+/**
+ * @license lucide-react v0.536.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$u = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$u);
+/**
+ * @license lucide-react v0.536.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$t = [
   ["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);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$t);
 /**
  * @license lucide-react v0.536.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 = [
+const __iconNode$s = [
   ["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);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$s);
 /**
  * @license lucide-react v0.536.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 = [
+const __iconNode$r = [
   ["path", { d: "M12 6v6l4 2", key: "mmk7yg" }],
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
 ];
-const Clock = createLucideIcon("clock", __iconNode$7);
+const Clock = createLucideIcon("clock", __iconNode$r);
 /**
  * @license lucide-react v0.536.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);
+const __iconNode$q = [
+  ["path", { d: "M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z", key: "p7xjir" }]
+];
+const Cloud = createLucideIcon("cloud", __iconNode$q);
 /**
  * @license lucide-react v0.536.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 = [
+const __iconNode$p = [
+  ["ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", key: "msslwz" }],
+  ["path", { d: "M3 5V19A9 3 0 0 0 21 19V5", key: "1wlel7" }],
+  ["path", { d: "M3 12A9 3 0 0 0 21 12", key: "mv7ke4" }]
+];
+const Database = createLucideIcon("database", __iconNode$p);
+/**
+ * @license lucide-react v0.536.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$o = [
+  ["path", { d: "M12 16h.01", key: "1drbdi" }],
+  ["path", { d: "M16 16h.01", key: "1f9h7w" }],
+  [
+    "path",
+    {
+      d: "M3 19a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.5a.5.5 0 0 0-.769-.422l-4.462 2.844A.5.5 0 0 1 15 10.5v-2a.5.5 0 0 0-.769-.422L9.77 10.922A.5.5 0 0 1 9 10.5V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z",
+      key: "1iv0i2"
+    }
+  ],
+  ["path", { d: "M8 16h.01", key: "18s6g9" }]
+];
+const Factory = createLucideIcon("factory", __iconNode$o);
+/**
+ * @license lucide-react v0.536.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$n = [
+  ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
+  ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
+  ["path", { d: "M10 9H8", key: "b1mrlr" }],
+  ["path", { d: "M16 13H8", key: "t4e002" }],
+  ["path", { d: "M16 17H8", key: "z1uh3a" }]
+];
+const FileText = createLucideIcon("file-text", __iconNode$n);
+/**
+ * @license lucide-react v0.536.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$m = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", key: "13o1zl" }],
+  ["path", { d: "M2 12h20", key: "9i4pu4" }]
+];
+const Globe = createLucideIcon("globe", __iconNode$m);
+/**
+ * @license lucide-react v0.536.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$l = [
+  [
+    "path",
+    {
+      d: "M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z",
+      key: "j76jl0"
+    }
+  ],
+  ["path", { d: "M22 10v6", key: "1lu8f3" }],
+  ["path", { d: "M6 12.5V16a6 3 0 0 0 12 0v-3.5", key: "1r8lef" }]
+];
+const GraduationCap = createLucideIcon("graduation-cap", __iconNode$l);
+/**
+ * @license lucide-react v0.536.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$k = [
+  [
+    "path",
+    {
+      d: "M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5",
+      key: "mvr1a0"
+    }
+  ]
+];
+const Heart = createLucideIcon("heart", __iconNode$k);
+/**
+ * @license lucide-react v0.536.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$j = [
+  ["path", { d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8", key: "5wwlr5" }],
+  [
+    "path",
+    {
+      d: "M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z",
+      key: "1d0kgt"
+    }
+  ]
+];
+const House = createLucideIcon("house", __iconNode$j);
+/**
+ * @license lucide-react v0.536.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$i = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$i);
+/**
+ * @license lucide-react v0.536.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$h = [
   ["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);
+const Mail = createLucideIcon("mail", __iconNode$h);
 /**
  * @license lucide-react v0.536.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 = [
+const __iconNode$g = [
+  [
+    "path",
+    {
+      d: "M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z",
+      key: "q8bfy3"
+    }
+  ],
+  ["path", { d: "M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14", key: "1853fq" }],
+  ["path", { d: "M8 6v8", key: "15ugcq" }]
+];
+const Megaphone = createLucideIcon("megaphone", __iconNode$g);
+/**
+ * @license lucide-react v0.536.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$f = [
   [
     "path",
     {
@@ -1806,14 +2029,14 @@ const __iconNode$4 = [
     }
   ]
 ];
-const MessageCircle = createLucideIcon("message-circle", __iconNode$4);
+const MessageCircle = createLucideIcon("message-circle", __iconNode$f);
 /**
  * @license lucide-react v0.536.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 = [
+const __iconNode$e = [
   [
     "path",
     {
@@ -1822,14 +2045,33 @@ const __iconNode$3 = [
     }
   ]
 ];
-const MessageSquare = createLucideIcon("message-square", __iconNode$3);
+const MessageSquare = createLucideIcon("message-square", __iconNode$e);
 /**
  * @license lucide-react v0.536.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 = [
+const __iconNode$d = [
+  [
+    "path",
+    {
+      d: "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z",
+      key: "1a0edw"
+    }
+  ],
+  ["path", { d: "M12 22V12", key: "d0xqtd" }],
+  ["polyline", { points: "3.29 7 12 12 20.71 7", key: "ousv84" }],
+  ["path", { d: "m7.5 4.27 9 5.15", key: "1c824w" }]
+];
+const Package = createLucideIcon("package", __iconNode$d);
+/**
+ * @license lucide-react v0.536.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$c = [
   [
     "path",
     {
@@ -1838,14 +2080,30 @@ const __iconNode$2 = [
     }
   ]
 ];
-const Phone = createLucideIcon("phone", __iconNode$2);
+const Phone = createLucideIcon("phone", __iconNode$c);
 /**
  * @license lucide-react v0.536.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 = [
+const __iconNode$b = [
+  [
+    "path",
+    {
+      d: "M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z",
+      key: "1v9wt8"
+    }
+  ]
+];
+const Plane = createLucideIcon("plane", __iconNode$b);
+/**
+ * @license lucide-react v0.536.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$a = [
   [
     "path",
     {
@@ -1855,43 +2113,181 @@ const __iconNode$1 = [
   ],
   ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
 ];
-const Send = createLucideIcon("send", __iconNode$1);
+const Send = createLucideIcon("send", __iconNode$a);
 /**
  * @license lucide-react v0.536.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 = [
+const __iconNode$9 = [
+  [
+    "path",
+    {
+      d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915",
+      key: "1i5ecw"
+    }
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+];
+const Settings = createLucideIcon("settings", __iconNode$9);
+/**
+ * @license lucide-react v0.536.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: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z",
+      key: "oel41y"
+    }
+  ]
+];
+const Shield = createLucideIcon("shield", __iconNode$8);
+/**
+ * @license lucide-react v0.536.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 = [
+  ["circle", { cx: "8", cy: "21", r: "1", key: "jimo8o" }],
+  ["circle", { cx: "19", cy: "21", r: "1", key: "13723u" }],
+  [
+    "path",
+    {
+      d: "M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12",
+      key: "9zh506"
+    }
+  ]
+];
+const ShoppingCart = createLucideIcon("shopping-cart", __iconNode$7);
+/**
+ * @license lucide-react v0.536.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 = [
+  ["rect", { width: "14", height: "20", x: "5", y: "2", rx: "2", ry: "2", key: "1yt0o3" }],
+  ["path", { d: "M12 18h.01", key: "mhygvu" }]
+];
+const Smartphone = createLucideIcon("smartphone", __iconNode$6);
+/**
+ * @license lucide-react v0.536.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: "M16 7h6v6", key: "box55l" }],
+  ["path", { d: "m22 7-8.5 8.5-5-5L2 17", key: "1t1m79" }]
+];
+const TrendingUp = createLucideIcon("trending-up", __iconNode$5);
+/**
+ * @license lucide-react v0.536.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: "M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2", key: "wrbu53" }],
+  ["path", { d: "M15 18H9", key: "1lyqi6" }],
+  [
+    "path",
+    {
+      d: "M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14",
+      key: "lysw3i"
+    }
+  ],
+  ["circle", { cx: "17", cy: "18", r: "2", key: "332jqn" }],
+  ["circle", { cx: "7", cy: "18", r: "2", key: "19iecd" }]
+];
+const Truck = createLucideIcon("truck", __iconNode$4);
+/**
+ * @license lucide-react v0.536.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: "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] = useState({
-    fullName: "",
-    workEmail: "",
-    phoneNumber: "",
-    companyName: "",
-    jobTitle: "",
-    businessType: "",
-    expectedBudget: "",
-    expectedTimeline: "",
-    requestTitle: "",
-    requestDescription: ""
-  });
-  const [formErrors, setFormErrors] = useState({});
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitStatus, setSubmitStatus] = useState(null);
-  const [submitMessage, setSubmitMessage] = 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 User = createLucideIcon("user", __iconNode$3);
+/**
+ * @license lucide-react v0.536.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: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", key: "1yyitq" }],
+  ["path", { d: "M16 3.128a4 4 0 0 1 0 7.744", key: "16gr8j" }],
+  ["path", { d: "M22 21v-2a4 4 0 0 0-3-3.87", key: "kshegd" }],
+  ["circle", { cx: "9", cy: "7", r: "4", key: "nufk8" }]
+];
+const Users = createLucideIcon("users", __iconNode$2);
+/**
+ * @license lucide-react v0.536.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.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z",
+      key: "1ngwbx"
+    }
+  ]
+];
+const Wrench = createLucideIcon("wrench", __iconNode$1);
+/**
+ * @license lucide-react v0.536.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: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z",
+      key: "1xq2db"
+    }
+  ]
+];
+const Zap = createLucideIcon("zap", __iconNode);
+const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService }) => {
+  const [formData, setFormData] = useState({
+    fullName: "",
+    workEmail: "",
+    phoneNumber: "",
+    companyName: "",
+    jobTitle: "",
+    businessType: "",
+    expectedBudget: "",
+    expectedTimeline: "",
+    requestTitle: "",
+    requestDescription: ""
+  });
+  const [formErrors, setFormErrors] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitStatus, setSubmitStatus] = useState(null);
+  const [submitMessage, setSubmitMessage] = 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ệ";
@@ -3107,6 +3503,1030 @@ const TextSection = ({ data, isDarkMode }) => {
     }
   );
 };
+const DiagramSection = ({ data, t, isDarkMode }) => {
+  var _a, _b;
+  const [mounted, setMounted] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const safeT = typeof t === "function" ? t : (key, options) => {
+    console.warn(`Translation function not provided for key: ${key}`);
+    return key;
+  };
+  useEffect(() => {
+    setMounted(true);
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  const diagramData = (_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a[0]) == null ? void 0 : _b.data;
+  if (!diagramData) {
+    return null;
+  }
+  const diagramName = diagramData.name || safeT("diagram.defaults.name");
+  const diagramDescription = diagramData.description || safeT("diagram.defaults.description");
+  const modules = diagramData.diagramChildrenDTOs || [];
+  const getIconComponent = (iconName) => {
+    const icons = {
+      Calculator,
+      TrendingUp,
+      FileText,
+      Cloud,
+      ShoppingCart,
+      Truck,
+      Bed,
+      Users,
+      Package,
+      Database,
+      Settings,
+      Globe
+    };
+    return icons[iconName] || Settings;
+  };
+  const getColorClasses = (index2) => {
+    const isCyan = index2 % 2 === 0;
+    if (isCyan) {
+      return {
+        border: "border-cyan-400/40",
+        bg: "bg-gradient-to-r from-blue-900/90 to-cyan-900/90",
+        glow: "shadow-cyan-500/20",
+        hoverGlow: "hover:shadow-cyan-400/50",
+        line: "#22d3ee",
+        iconBg: "bg-cyan-500/20"
+      };
+    }
+    return {
+      border: "border-purple-400/40",
+      bg: "bg-gradient-to-r from-purple-900/90 to-pink-900/90",
+      glow: "shadow-purple-500/20",
+      hoverGlow: "hover:shadow-purple-400/50",
+      line: "#c084fc",
+      iconBg: "bg-purple-500/20"
+    };
+  };
+  const calculateAngles = (count) => {
+    return modules.map((_, index2) => {
+      return 360 / count * index2 - 90;
+    });
+  };
+  const angles = calculateAngles(modules.length);
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `w-full ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-950 to-purple-950" : "bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50"} p-4 relative overflow-hidden`, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 overflow-hidden pointer-events-none opacity-20", children: [...Array(50)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: `absolute ${isDarkMode ? "bg-blue-400" : "bg-blue-600"} rounded-full opacity-20`,
+          style: {
+            width: Math.random() * 3 + 1 + "px",
+            height: Math.random() * 3 + 1 + "px",
+            top: Math.random() * 100 + "%",
+            left: Math.random() * 100 + "%",
+            animation: `twinkle ${Math.random() * 3 + 2}s ease-in-out infinite`,
+            animationDelay: Math.random() * 3 + "s"
+          }
+        },
+        i
+      )) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("style", { children: `
+          @keyframes twinkle {
+            0%, 100% { opacity: 0.1; transform: scale(1); }
+            50% { opacity: 0.3; transform: scale(1.5); }
+          }
+          @keyframes slideUp {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+          }
+        ` }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `mb-6 ${isDarkMode ? "bg-gradient-to-br from-blue-900/90 via-blue-700/90 to-cyan-600/90" : "bg-gradient-to-br from-blue-600 via-indigo-600 to-cyan-500"} backdrop-blur-md rounded-2xl border-2 ${isDarkMode ? "border-cyan-400/40" : "border-white/40"} p-6 shadow-2xl text-center`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold text-white mb-1 tracking-wide", children: diagramName }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg text-white/90", children: diagramDescription })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: modules.map((module, index2) => {
+        const Icon2 = getIconComponent(module.icon);
+        const colors = getColorClasses(index2);
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "a",
+          {
+            href: module.url || "#",
+            className: `block ${colors.bg} backdrop-blur-md rounded-2xl border-2 ${colors.border} p-4 flex items-center gap-3 shadow-lg active:scale-95 transition-all duration-200`,
+            style: {
+              animation: `slideUp 0.5s ease-out ${index2 * 0.1}s both`
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-shrink-0 ${colors.iconBg} p-3 rounded-xl ${colors.border} border`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-6 h-6 text-white", strokeWidth: 2 }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-white font-semibold text-sm tracking-wide mb-1", children: module.name }),
+                module.description && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-white/70 text-xs", children: module.description })
+              ] })
+            ]
+          },
+          module.id
+        );
+      }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `w-full ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-950 to-purple-950" : "bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50"} py-12 px-4 sm:px-8 relative overflow-hidden transition-colors duration-300`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [...Array(100)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: `absolute ${isDarkMode ? "bg-blue-400" : "bg-blue-600"} rounded-full ${isDarkMode ? "opacity-20" : "opacity-10"}`,
+        style: {
+          width: Math.random() * 4 + 1 + "px",
+          height: Math.random() * 4 + 1 + "px",
+          top: Math.random() * 100 + "%",
+          left: Math.random() * 100 + "%",
+          animation: `twinkle ${Math.random() * 3 + 2}s ease-in-out infinite`,
+          animationDelay: Math.random() * 3 + "s"
+        }
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 ${isDarkMode ? "opacity-10" : "opacity-5"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("pattern", { id: "grid", width: "40", height: "40", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M 40 0 L 0 0 0 40", fill: "none", stroke: isDarkMode ? "cyan" : "blue", strokeWidth: "0.5" }) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "100%", height: "100%", fill: "url(#grid)" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: `absolute inset-0 w-full h-full pointer-events-none ${isDarkMode ? "opacity-30" : "opacity-20"}`, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "0", y1: "20%", x2: "100%", y2: "20%", stroke: "url(#grad1)", strokeWidth: "1", strokeDasharray: "10 5", className: "animate-pulse" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "0", y1: "40%", x2: "100%", y2: "40%", stroke: "url(#grad2)", strokeWidth: "1", strokeDasharray: "15 8", className: "animate-pulse", style: { animationDelay: "0.5s" } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "0", y1: "60%", x2: "100%", y2: "60%", stroke: "url(#grad1)", strokeWidth: "1", strokeDasharray: "12 6", className: "animate-pulse", style: { animationDelay: "1s" } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "0", y1: "80%", x2: "100%", y2: "80%", stroke: "url(#grad2)", strokeWidth: "1", strokeDasharray: "8 4", className: "animate-pulse", style: { animationDelay: "1.5s" } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "15%", y1: "0", x2: "15%", y2: "100%", stroke: "url(#grad1)", strokeWidth: "1", strokeDasharray: "10 5", className: "animate-pulse", style: { animationDelay: "0.3s" } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "35%", y1: "0", x2: "35%", y2: "100%", stroke: "url(#grad2)", strokeWidth: "1", strokeDasharray: "15 8", className: "animate-pulse", style: { animationDelay: "0.8s" } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "65%", y1: "0", x2: "65%", y2: "100%", stroke: "url(#grad1)", strokeWidth: "1", strokeDasharray: "12 6", className: "animate-pulse", style: { animationDelay: "1.3s" } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "85%", y1: "0", x2: "85%", y2: "100%", stroke: "url(#grad2)", strokeWidth: "1", strokeDasharray: "8 4", className: "animate-pulse", style: { animationDelay: "1.8s" } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "15%", cy: "20%", r: "3", fill: "#22d3ee", opacity: "0.6", className: "animate-pulse" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "35%", cy: "40%", r: "3", fill: "#c084fc", opacity: "0.6", className: "animate-pulse", style: { animationDelay: "0.5s" } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "65%", cy: "60%", r: "3", fill: "#22d3ee", opacity: "0.6", className: "animate-pulse", style: { animationDelay: "1s" } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "85%", cy: "80%", r: "3", fill: "#c084fc", opacity: "0.6", className: "animate-pulse", style: { animationDelay: "1.5s" } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("defs", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "grad1", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "#22d3ee", stopOpacity: 0 } }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "#22d3ee", stopOpacity: 1 } }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "#22d3ee", stopOpacity: 0 } })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "grad2", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "#c084fc", stopOpacity: 0 } }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "#c084fc", stopOpacity: 1 } }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "#c084fc", stopOpacity: 0 } })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("style", { children: `
+        @keyframes twinkle {
+          0%, 100% { opacity: 0.1; transform: scale(1); }
+          50% { opacity: 0.3; transform: scale(1.5); }
+        }
+        
+        @keyframes float {
+          0%, 100% { transform: translateY(0px); }
+          50% { transform: translateY(-10px); }
+        }
+        
+        @keyframes rotate {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        
+        @keyframes pulse-ring {
+          0% { transform: scale(0.95); opacity: 1; }
+          50% { transform: scale(1); opacity: 0.8; }
+          100% { transform: scale(0.95); opacity: 1; }
+        }
+        
+        @keyframes slideIn {
+          from { 
+            opacity: 0;
+            transform: translate(-50%, -50%) scale(0.5);
+          }
+          to { 
+            opacity: 1;
+            transform: translate(-50%, -50%) scale(1);
+          }
+        }
+        
+        .animate-float {
+          animation: float 3s ease-in-out infinite;
+        }
+        
+        .animate-pulse-ring {
+          animation: pulse-ring 2s ease-in-out infinite;
+        }
+        
+        .module-card {
+          animation: slideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+        }
+
+        @media (max-width: 1200px) {
+          .diagram-container {
+            transform: scale(0.75);
+          }
+        }
+
+        @media (max-width: 900px) {
+          .diagram-container {
+            transform: scale(0.6);
+          }
+        }
+      ` }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "diagram-container relative w-full max-w-5xl mx-auto h-[700px] flex items-center justify-center transition-transform duration-300", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 w-[320px] h-[320px] -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 rounded-full border-2 border-cyan-500/30 animate-pulse-ring" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-4 rounded-full border-2 border-purple-500/30 animate-pulse-ring", style: { animationDelay: "0.5s" } })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative animate-float", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `w-64 h-64 rounded-full border-8 ${isDarkMode ? "border-slate-600/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50" : "border-gray-300/50 bg-gradient-to-br from-white/50 to-gray-100/50"} flex items-center justify-center backdrop-blur-sm shadow-2xl`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 rounded-full", style: { animation: "rotate 20s linear infinite" }, children: [0, 90, 180, 270].map((angle) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "absolute w-3 h-3 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50",
+                style: {
+                  top: "50%",
+                  left: "50%",
+                  transform: `translate(-50%, -50%) rotate(${angle}deg) translateY(-125px)`
+                }
+              },
+              angle
+            )) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `w-52 h-52 rounded-full ${isDarkMode ? "bg-gradient-to-br from-blue-900/90 via-blue-700/90 to-cyan-600/90 border-cyan-400/40" : "bg-gradient-to-br from-blue-600 via-indigo-600 to-cyan-500 border-white/40"} flex items-center justify-center shadow-2xl relative overflow-hidden border-2 backdrop-blur-md`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-white/10 to-transparent" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center relative z-10 px-4", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold text-white mb-2 tracking-wide", children: diagramName }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-white/90", children: diagramDescription })
+              ] })
+            ] })
+          ] }),
+          modules.map((module, i) => {
+            const angle = angles[i];
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: `absolute w-4 h-4 ${isDarkMode ? "bg-slate-400 border-slate-600" : "bg-gray-400 border-gray-600"} rounded-full border-2 shadow-lg animate-pulse`,
+                style: {
+                  top: "50%",
+                  left: "50%",
+                  transform: `translate(-50%, -50%) rotate(${angle}deg) translateY(-132px)`,
+                  animationDelay: `${i * 0.1}s`
+                }
+              },
+              `dot-${module.id}`
+            );
+          })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", width: "1000", height: "900", style: { overflow: "visible" }, children: modules.map((module, index2) => {
+        const colors = getColorClasses(index2);
+        const angle = angles[index2] * Math.PI / 180;
+        const circleRadius = 132;
+        const moduleRadius = 360;
+        const startX = Math.cos(angle) * circleRadius;
+        const startY = Math.sin(angle) * circleRadius;
+        const endX = Math.cos(angle) * moduleRadius;
+        const endY = Math.sin(angle) * moduleRadius;
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "line",
+            {
+              x1: 500 + startX,
+              y1: 450 + startY,
+              x2: 500 + endX,
+              y2: 450 + endY,
+              stroke: colors.line,
+              strokeWidth: "2",
+              strokeDasharray: "8 4",
+              opacity: "0.5",
+              className: "animate-pulse",
+              style: { animationDelay: `${index2 * 0.1}s` }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "line",
+            {
+              x1: 500 + startX,
+              y1: 450 + startY,
+              x2: 500 + endX,
+              y2: 450 + endY,
+              stroke: colors.line,
+              strokeWidth: "1",
+              opacity: "0.8",
+              filter: "blur(2px)"
+            }
+          )
+        ] }, `line-${module.id}`);
+      }) }),
+      modules.map((module, index2) => {
+        const Icon2 = getIconComponent(module.icon);
+        const colors = getColorClasses(index2);
+        const angle = angles[index2] * Math.PI / 180;
+        const radius = 360;
+        const x = Math.cos(angle) * radius;
+        const y = Math.sin(angle) * radius;
+        const normalizedAngle = (angles[index2] % 360 + 360) % 360;
+        const isRightSide = normalizedAngle > 270 || normalizedAngle < 90;
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "a",
+          {
+            href: module.url || "#",
+            className: `absolute module-card group ${mounted ? "opacity-100" : "opacity-0"}`,
+            style: {
+              left: `calc(50% + ${x}px)`,
+              top: `calc(50% + ${y}px)`,
+              transform: "translate(-50%, -50%)",
+              animationDelay: `${index2 * 0.1}s`,
+              animationFillMode: "both"
+            },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                className: `
+                ${colors.bg} backdrop-blur-md rounded-full 
+                border-2 ${colors.border} ${colors.glow}
+                px-5 py-3 flex items-center gap-3
+                shadow-xl ${colors.hoverGlow}
+                transition-all duration-300
+                group-hover:scale-110 group-hover:-translate-y-3 group-hover:shadow-2xl
+                cursor-pointer
+                relative
+                ${isRightSide ? "flex-row-reverse" : "flex-row"}
+              `,
+                style: {
+                  boxShadow: "0 10px 40px rgba(0, 0, 0, 0.3)",
+                  width: "240px",
+                  height: "56px",
+                  minWidth: "240px",
+                  maxWidth: "240px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 rounded-full bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 rounded-full border-2 ${colors.border} opacity-0 group-hover:opacity-100 transition-all duration-300 scale-110 blur-sm` }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-shrink-0 ${colors.iconBg} p-2.5 rounded-lg ${colors.border} border transition-all duration-300 group-hover:rotate-12 group-hover:scale-125 relative z-10`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-5 h-5 text-white", strokeWidth: 2 }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `flex-1 text-white font-semibold text-sm tracking-wide overflow-hidden text-ellipsis whitespace-nowrap ${isRightSide ? "text-right" : "text-left"} relative z-10 min-w-0`, children: module.name }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 ${isDarkMode ? "bg-slate-800 border-slate-600" : "bg-white border-gray-300"} ${isDarkMode ? "text-white" : "text-gray-800"} text-sm rounded-lg shadow-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50 border max-w-xs`, children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: module.name }),
+                    module.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-xs mt-1 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`, children: module.description }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent ${isDarkMode ? "border-t-slate-800" : "border-t-white"}` })
+                  ] })
+                ]
+              }
+            )
+          },
+          module.id
+        );
+      }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-12 right-12 sm:bottom-16 sm:right-20", style: { animation: "rotate 10s linear infinite" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "80", height: "80", viewBox: "0 0 60 60", className: `${isDarkMode ? "text-purple-300" : "text-purple-400"} opacity-40`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M30 0 L35 25 L60 30 L35 35 L30 60 L25 35 L0 30 L25 25 Z", fill: "currentColor" }) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-12 left-12 w-16 h-16 border-2 border-cyan-400/30 rounded-lg animate-pulse", style: { animation: "rotate 8s linear infinite reverse" } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-20 right-16 w-12 h-12 border-2 border-purple-400/30 rounded-full animate-pulse" })
+    ] })
+  ] });
+};
+const MindMapNode = ({ id, icon: Icon2, text, color, position, delay = 0, onDragStart, isDragging, onClick, description }) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const [dragStartPos, setDragStartPos] = useState(null);
+  const [hasMoved, setHasMoved] = useState(false);
+  const colorClasses = {
+    blue: "bg-gradient-to-br from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 border-blue-400/50 shadow-blue-500/30",
+    teal: "bg-gradient-to-br from-teal-600 to-teal-700 hover:from-teal-500 hover:to-teal-600 border-teal-400/50 shadow-teal-500/30",
+    purple: "bg-gradient-to-br from-purple-600 to-purple-700 hover:from-purple-500 hover:to-purple-600 border-purple-400/50 shadow-purple-500/30",
+    orange: "bg-gradient-to-br from-orange-500 to-orange-600 hover:from-orange-400 hover:to-orange-500 border-orange-300/50 shadow-orange-500/30",
+    cyan: "bg-gradient-to-br from-cyan-600 to-cyan-700 hover:from-cyan-500 hover:to-cyan-600 border-cyan-400/50 shadow-cyan-500/30",
+    indigo: "bg-gradient-to-br from-indigo-600 to-indigo-700 hover:from-indigo-500 hover:to-indigo-600 border-indigo-400/50 shadow-indigo-500/30"
+  };
+  const handleMouseDown = (e) => {
+    setDragStartPos({ x: e.clientX, y: e.clientY });
+    setHasMoved(false);
+    onDragStart(id);
+    e.stopPropagation();
+  };
+  const handleMouseMove = (e) => {
+    if (dragStartPos) {
+      const distance = Math.sqrt(
+        Math.pow(e.clientX - dragStartPos.x, 2) + Math.pow(e.clientY - dragStartPos.y, 2)
+      );
+      if (distance > 5) {
+        setHasMoved(true);
+      }
+    }
+  };
+  const handleMouseUp = (e) => {
+    if (dragStartPos && !hasMoved) {
+      if (onClick) {
+        onClick(id, text);
+      }
+    }
+    setDragStartPos(null);
+    setHasMoved(false);
+  };
+  const handleTouchStart = (e) => {
+    const touch = e.touches[0];
+    setDragStartPos({ x: touch.clientX, y: touch.clientY });
+    setHasMoved(false);
+    onDragStart(id);
+    e.stopPropagation();
+  };
+  const handleTouchMove = (e) => {
+    if (dragStartPos) {
+      const touch = e.touches[0];
+      const distance = Math.sqrt(
+        Math.pow(touch.clientX - dragStartPos.x, 2) + Math.pow(touch.clientY - dragStartPos.y, 2)
+      );
+      if (distance > 5) {
+        setHasMoved(true);
+      }
+    }
+  };
+  const handleTouchEnd = (e) => {
+    if (dragStartPos && !hasMoved) {
+      if (onClick) {
+        onClick(id, text);
+      }
+    }
+    setDragStartPos(null);
+    setHasMoved(false);
+  };
+  useEffect(() => {
+    if (dragStartPos) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+  }, [dragStartPos, hasMoved]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      id: `node-${id}`,
+      className: "absolute animate-fadeIn node-element",
+      style: {
+        left: `${position.x}%`,
+        top: `${position.y}%`,
+        animationDelay: `${delay}ms`,
+        zIndex: isDragging ? 50 : 10,
+        transform: "translate(-50%, -50%)",
+        transition: isDragging ? "none" : "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onMouseDown: handleMouseDown,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${colorClasses[color]} backdrop-blur-md px-4 py-2.5 rounded-2xl shadow-2xl border-2 flex items-center gap-2.5 cursor-pointer transform transition-all duration-300 ${isHovered || isDragging ? "scale-110 shadow-2xl brightness-110" : ""} ${isDragging ? "rotate-2" : ""}`, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-4 h-4 text-white flex-shrink-0" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-medium whitespace-nowrap text-xs sm:text-sm", children: text })
+        ] }),
+        isDragging && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-white/10 rounded-2xl blur-xl animate-pulse", style: { transform: "scale(1.5)" } }),
+        (isHovered || isDragging) && description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 mt-2 px-3 py-2 bg-slate-900/95 text-white text-xs rounded-lg shadow-xl border border-slate-700 whitespace-nowrap z-50 max-w-xs", children: description })
+      ]
+    }
+  );
+};
+const DiagramSection2 = ({ data, t, isDarkMode }) => {
+  var _a, _b;
+  const [centerPosition, setCenterPosition] = useState({ x: 50, y: 50 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [draggingNodeId, setDraggingNodeId] = useState(null);
+  const [lines, setLines] = useState([]);
+  const [nodes, setNodes] = useState([]);
+  const containerRef = useRef(null);
+  const centerRef = useRef(null);
+  const rafRef = useRef(null);
+  const nodePositionsCache = useRef({});
+  const safeT = typeof t === "function" ? t : (key, options) => {
+    console.warn(`Translation function not provided for key: ${key}`);
+    return key;
+  };
+  const diagramData = (_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a[0]) == null ? void 0 : _b.data;
+  const getIconComponent = (iconName) => {
+    const icons = {
+      Calculator,
+      Shield,
+      Wrench,
+      Factory,
+      Smartphone,
+      Building2,
+      Megaphone,
+      ShoppingCart,
+      Briefcase,
+      Users,
+      Building,
+      GraduationCap,
+      Heart,
+      Zap,
+      Plane,
+      Package,
+      Bed,
+      Home: House,
+      TrendingUp,
+      FileText,
+      Cloud,
+      Truck,
+      Database,
+      Settings,
+      Globe
+    };
+    return icons[iconName] || Settings;
+  };
+  const getColor = (index2) => {
+    const colors = ["blue", "teal", "purple", "orange", "cyan", "indigo"];
+    return colors[index2 % colors.length];
+  };
+  useEffect(() => {
+    if (!(diagramData == null ? void 0 : diagramData.diagramChildrenDTOs)) return;
+    const children = diagramData.diagramChildrenDTOs;
+    const totalNodes = children.length;
+    const generatedNodes = children.map((child, index2) => {
+      const angle = 360 / totalNodes * index2;
+      const radiusVariation = 30 + Math.random() * 20;
+      const angleRad = angle * Math.PI / 180;
+      let x = 50 + Math.cos(angleRad) * radiusVariation;
+      let y = 50 + Math.sin(angleRad) * radiusVariation;
+      x += (Math.random() - 0.5) * 10;
+      y += (Math.random() - 0.5) * 10;
+      x = Math.max(10, Math.min(90, x));
+      y = Math.max(10, Math.min(90, y));
+      return {
+        id: child.id,
+        x,
+        y,
+        icon: getIconComponent(child.icon),
+        text: child.name,
+        description: child.description,
+        url: child.url,
+        color: getColor(index2),
+        delay: index2 * 100
+      };
+    });
+    setNodes(generatedNodes);
+  }, [diagramData]);
+  const calculatePositions = () => {
+    if (!containerRef.current || !centerRef.current) return;
+    const container = containerRef.current;
+    const containerRect = container.getBoundingClientRect();
+    const centerElement = centerRef.current;
+    const centerRect = centerElement.getBoundingClientRect();
+    const centerX = centerRect.left + centerRect.width / 2 - containerRect.left;
+    const centerY = centerRect.top + centerRect.height / 2 - containerRect.top;
+    const newLines = [];
+    nodes.forEach((node) => {
+      const nodeElement = document.getElementById(`node-${node.id}`);
+      if (!nodeElement) return;
+      const nodeRect = nodeElement.getBoundingClientRect();
+      const nodeX = nodeRect.left + nodeRect.width / 2 - containerRect.left;
+      const nodeY = nodeRect.top + nodeRect.height / 2 - containerRect.top;
+      const cachedPos = nodePositionsCache.current[node.id] || { x: nodeX, y: nodeY };
+      const smoothX = cachedPos.x + (nodeX - cachedPos.x) * 0.15;
+      const smoothY = cachedPos.y + (nodeY - cachedPos.y) * 0.15;
+      nodePositionsCache.current[node.id] = { x: smoothX, y: smoothY };
+      const dx = centerX - smoothX;
+      const controlX1 = smoothX + dx * 0.4;
+      const controlY1 = smoothY;
+      const controlX2 = smoothX + dx * 0.6;
+      const controlY2 = centerY;
+      const path = `M ${smoothX} ${smoothY} C ${controlX1} ${controlY1}, ${controlX2} ${controlY2}, ${centerX} ${centerY}`;
+      newLines.push({ id: node.id, path });
+    });
+    setLines(newLines);
+  };
+  useEffect(() => {
+    let isRunning = true;
+    const updateLoop = () => {
+      if (isRunning) {
+        calculatePositions();
+        rafRef.current = requestAnimationFrame(updateLoop);
+      }
+    };
+    updateLoop();
+    return () => {
+      isRunning = false;
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [nodes, centerPosition, isDragging, draggingNodeId]);
+  useEffect(() => {
+    const handleResize = () => {
+      nodePositionsCache.current = {};
+      calculatePositions();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [nodes]);
+  const handleNodeClick = (nodeId, nodeName) => {
+    const node = nodes.find((n) => n.id === nodeId);
+    if (node == null ? void 0 : node.url) {
+      window.location.href = node.url;
+    }
+  };
+  const handleNodeDragStart = (nodeId) => setDraggingNodeId(nodeId);
+  const handleNodeDragEnd = () => setDraggingNodeId(null);
+  const handleNodeDrag = (nodeId, newX, newY) => {
+    setNodes(
+      (prevNodes) => prevNodes.map(
+        (node) => node.id === nodeId ? __spreadProps(__spreadValues({}, node), { x: newX, y: newY }) : node
+      )
+    );
+  };
+  const handleMouseDown = (e) => {
+    setIsDragging(true);
+    e.preventDefault();
+  };
+  const handleMouseMove = (e) => {
+    if (!isDragging || !containerRef.current) return;
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const x = (e.clientX - containerRect.left) / containerRect.width * 100;
+    const y = (e.clientY - containerRect.top) / containerRect.height * 100;
+    setCenterPosition({
+      x: Math.max(20, Math.min(80, x)),
+      y: Math.max(20, Math.min(80, y))
+    });
+  };
+  const handleMouseUp = () => setIsDragging(false);
+  useEffect(() => {
+    if (isDragging) {
+      document.body.style.cursor = "grabbing";
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        document.body.style.cursor = "";
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+  }, [isDragging]);
+  useEffect(() => {
+    if (draggingNodeId === null) return;
+    const handleNodeMouseMove = (e) => {
+      if (!containerRef.current) return;
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const x = (e.clientX - containerRect.left) / containerRect.width * 100;
+      const y = (e.clientY - containerRect.top) / containerRect.height * 100;
+      handleNodeDrag(
+        draggingNodeId,
+        Math.max(5, Math.min(95, x)),
+        Math.max(5, Math.min(95, y))
+      );
+    };
+    const handleNodeTouchMove = (e) => {
+      if (!containerRef.current) return;
+      const touch = e.touches[0];
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const x = (touch.clientX - containerRect.left) / containerRect.width * 100;
+      const y = (touch.clientY - containerRect.top) / containerRect.height * 100;
+      handleNodeDrag(
+        draggingNodeId,
+        Math.max(5, Math.min(95, x)),
+        Math.max(5, Math.min(95, y))
+      );
+    };
+    window.addEventListener("mousemove", handleNodeMouseMove);
+    window.addEventListener("mouseup", handleNodeDragEnd);
+    window.addEventListener("touchmove", handleNodeTouchMove);
+    window.addEventListener("touchend", handleNodeDragEnd);
+    return () => {
+      window.removeEventListener("mousemove", handleNodeMouseMove);
+      window.removeEventListener("mouseup", handleNodeDragEnd);
+      window.removeEventListener("touchmove", handleNodeTouchMove);
+      window.removeEventListener("touchend", handleNodeDragEnd);
+    };
+  }, [draggingNodeId]);
+  if (!diagramData) {
+    return null;
+  }
+  const diagramName = diagramData.name || safeT("diagram.defaults.name");
+  const diagramDescription = diagramData.description || safeT("diagram.defaults.description");
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `mind-map-container relative w-full h-screen ${isDarkMode ? "bg-gradient-to-br from-slate-950 via-indigo-950 to-purple-950" : "bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50"} overflow-hidden transition-colors duration-300`,
+      style: { touchAction: "none" },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `absolute inset-0 ${isDarkMode ? "opacity-30" : "opacity-20"}`, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 ${isDarkMode ? "bg-gradient-to-tr from-blue-600/20 via-purple-600/20 to-pink-600/20" : "bg-gradient-to-tr from-blue-400/20 via-purple-400/20 to-pink-400/20"}` }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-cyan-500/10 via-transparent to-transparent" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-purple-500/10 via-transparent to-transparent" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 pointer-events-none ${isDarkMode ? "opacity-60" : "opacity-40"}`, children: [...Array(150)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "absolute rounded-full animate-twinkle",
+            style: {
+              left: `${Math.random() * 100}%`,
+              top: `${Math.random() * 100}%`,
+              width: `${Math.random() * 3 + 1}px`,
+              height: `${Math.random() * 3 + 1}px`,
+              background: isDarkMode ? ["#60a5fa", "#818cf8", "#a78bfa", "#c084fc", "#e879f9"][Math.floor(Math.random() * 5)] : ["#3b82f6", "#6366f1", "#8b5cf6", "#a855f7", "#d946ef"][Math.floor(Math.random() * 5)],
+              animationDelay: `${Math.random() * 5}s`,
+              animationDuration: `${4 + Math.random() * 6}s`
+            }
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 ${isDarkMode ? "opacity-10" : "opacity-5"} pointer-events-none`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0", style: {
+          backgroundImage: `radial-gradient(circle at 1px 1px, ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.1)"} 1px, transparent 0)`,
+          backgroundSize: "40px 40px"
+        } }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-4 sm:right-16 bottom-4 sm:bottom-16 z-0 pointer-events-none", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 blur-3xl w-20 h-20 sm:w-32 sm:h-32" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "60", height: "60", viewBox: "0 0 80 80", className: "relative sm:w-24 sm:h-24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M40 0 L45 35 L80 40 L45 45 L40 80 L35 45 L0 40 L35 35 Z", fill: "url(#sparkle-gradient)", opacity: "0.4" }) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "absolute inset-0 w-full h-full pointer-events-none", style: { zIndex: 1 }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("defs", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "circuit-gradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", stopColor: "#60a5fa", stopOpacity: "0.6" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", stopColor: "#a78bfa", stopOpacity: "0.9" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", stopColor: "#c084fc", stopOpacity: "0.6" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "sparkle-gradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", stopColor: "#60a5fa" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", stopColor: "#a78bfa" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", stopColor: "#c084fc" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("filter", { id: "glow", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("feGaussianBlur", { stdDeviation: "4", result: "coloredBlur" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("feMerge", { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("feMergeNode", { in: "coloredBlur" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("feMergeNode", { in: "SourceGraphic" })
+              ] })
+            ] })
+          ] }),
+          lines.map((line) => /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "path",
+              {
+                d: line.path,
+                stroke: "rgba(167, 139, 250, 0.2)",
+                strokeWidth: "6",
+                fill: "none",
+                className: "transition-all duration-200",
+                style: { filter: "blur(8px)" }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "path",
+              {
+                d: line.path,
+                stroke: "url(#circuit-gradient)",
+                strokeWidth: "2.5",
+                fill: "none",
+                filter: "url(#glow)",
+                className: "transition-all duration-200",
+                style: {
+                  strokeDasharray: draggingNodeId === line.id ? "10 5" : "none",
+                  animation: draggingNodeId === line.id ? "dash-flow 1s linear infinite" : "none"
+                }
+              }
+            )
+          ] }, line.id))
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-full h-full", style: { zIndex: 10 }, children: nodes.map((node) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          MindMapNode,
+          {
+            id: node.id,
+            icon: node.icon,
+            text: node.text,
+            description: node.description,
+            color: node.color,
+            position: { x: node.x, y: node.y },
+            delay: node.delay,
+            onDragStart: handleNodeDragStart,
+            isDragging: draggingNodeId === node.id,
+            onClick: handleNodeClick
+          },
+          node.id
+        )) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            ref: centerRef,
+            className: "absolute cursor-grab active:cursor-grabbing",
+            style: {
+              left: `${centerPosition.x}%`,
+              top: `${centerPosition.y}%`,
+              zIndex: 30,
+              transform: "translate(-50%, -50%)",
+              transition: isDragging ? "none" : "all 0.3s ease-out"
+            },
+            onMouseDown: handleMouseDown,
+            onTouchStart: (e) => {
+              setIsDragging(true);
+              e.preventDefault();
+            },
+            onTouchMove: (e) => {
+              if (!isDragging || !containerRef.current) return;
+              const touch = e.touches[0];
+              const containerRect = containerRef.current.getBoundingClientRect();
+              const x = (touch.clientX - containerRect.left) / containerRect.width * 100;
+              const y = (touch.clientY - containerRect.top) / containerRect.height * 100;
+              setCenterPosition({
+                x: Math.max(20, Math.min(80, x)),
+                y: Math.max(20, Math.min(80, y))
+              });
+            },
+            onTouchEnd: () => setIsDragging(false),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-indigo-400/30 rounded-full blur-2xl", style: { transform: "scale(1.5)" } }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `relative bg-gradient-to-br from-indigo-500 via-blue-500 to-cyan-500 px-6 sm:px-10 py-3 sm:py-5 rounded-3xl shadow-2xl border-4 border-indigo-300/50 flex items-center gap-3 sm:gap-4 transition-transform backdrop-blur-md ${isDragging ? "scale-110" : ""}`, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white/25 p-2 sm:p-3 rounded-xl backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Briefcase, { className: "w-5 h-5 sm:w-7 sm:h-7 text-white" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-white font-bold text-sm sm:text-xl leading-tight tracking-wide", children: diagramName }),
+                  diagramDescription && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-white/90 font-medium text-xs sm:text-base leading-tight", children: diagramDescription })
+                ] })
+              ] }),
+              !isDragging && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute -bottom-8 left-1/2 transform -translate-x-1/2 ${isDarkMode ? "text-indigo-300/60" : "text-indigo-600/60"} text-xs whitespace-nowrap`, children: safeT("diagram.dragToMove") })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("style", { jsx: true, children: `
+        @keyframes fadeIn {
+          from { opacity: 0; transform: scale(0.9) translateY(10px); }
+          to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+        @keyframes twinkle {
+          0%, 100% { opacity: 0.2; transform: scale(1); }
+          50% { opacity: 0.5; transform: scale(1); }
+        }
+        @keyframes dash-flow {
+          to { stroke-dashoffset: -30; }
+        }
+        .animate-fadeIn {
+          animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+          opacity: 0;
+        }
+        .animate-twinkle { animation: twinkle 5s ease-in-out infinite; }
+      ` })
+      ]
+    }
+  );
+};
+const FaqItem = ({ faq, index: index2, isActive, onToggle, isDarkMode, t }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      style: {
+        animationDelay: `${index2 * 100}ms`,
+        animationFillMode: "both"
+      },
+      className: "animate-slide-up",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: `
+          rounded-xl border transition-all duration-500 ease-out transform
+          ${isDarkMode ? "bg-gradient-to-br from-gray-800 to-gray-800/50 border-gray-700/50" : "bg-white border-gray-200"}
+          ${isActive ? `scale-[1.02] ${isDarkMode ? "shadow-2xl shadow-blue-500/20 border-blue-500/30" : "shadow-xl shadow-blue-100 border-blue-200"}` : "shadow-md hover:shadow-lg"}
+          hover:scale-[1.01]
+        `,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                onClick: onToggle,
+                className: `
+            w-full px-6 py-5 text-left flex items-start justify-between gap-4
+            transition-all duration-300
+            ${isDarkMode ? "hover:bg-gray-700/30" : "hover:bg-gray-50/50"}
+            rounded-xl
+            group
+          `,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `
+            text-lg font-semibold flex-1 transition-colors duration-300
+            ${isActive ? isDarkMode ? "text-blue-400" : "text-blue-600" : isDarkMode ? "text-white group-hover:text-blue-300" : "text-gray-900 group-hover:text-blue-600"}
+          `, children: faq.question }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `
+            flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center
+            transition-all duration-500 transform
+            ${isActive ? `bg-gradient-to-br from-blue-500 to-purple-600 text-white shadow-lg ${isDarkMode ? "shadow-blue-500/50" : "shadow-blue-300"} rotate-180 scale-110` : `${isDarkMode ? "bg-gray-700/50 text-gray-400 group-hover:bg-gray-600" : "bg-gray-100 text-gray-500 group-hover:bg-gray-200"} group-hover:scale-110`}
+          `, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: `w-5 h-5 transition-transform duration-500 ${isActive ? "rotate-180" : ""}` }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: `
+            overflow-hidden transition-all duration-500 ease-in-out
+            ${isActive ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"}
+          `,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `
+            px-6 pb-6 pt-2
+            ${isDarkMode ? "text-gray-300" : "text-gray-600"}
+            transition-all duration-500
+            ${isActive ? "translate-y-0" : "-translate-y-4"}
+          `, children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `h-px w-full mb-4 ${isDarkMode ? "bg-gradient-to-r from-transparent via-gray-700 to-transparent" : "bg-gradient-to-r from-transparent via-gray-200 to-transparent"}` }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `prose prose-sm max-w-none leading-relaxed ${isDarkMode ? "prose-invert" : ""}`, children: faq.answer }),
+                  faq.url && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "a",
+                    {
+                      href: faq.url,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: `
+                  inline-flex items-center gap-2 mt-5 px-4 py-2 rounded-lg text-sm font-medium
+                  transition-all duration-300 transform hover:scale-105
+                  ${isDarkMode ? "text-blue-400 hover:text-blue-300 bg-blue-500/10 hover:bg-blue-500/20" : "text-blue-600 hover:text-blue-700 bg-blue-50 hover:bg-blue-100"}
+                  group/link
+                `,
+                      children: [
+                        (t == null ? void 0 : t("faq.learn_more")) || "Learn more",
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-4 h-4 transition-transform duration-300 group-hover/link:translate-x-1", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+                      ]
+                    }
+                  )
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const FaqSection = ({ data, t, isDarkMode }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const faqs = useMemo(() => {
+    if ((data == null ? void 0 : data.sectionDataBindingItems) && Array.isArray(data.sectionDataBindingItems)) {
+      return data.sectionDataBindingItems.map((item) => item.data).filter(Boolean);
+    }
+    return [];
+  }, [data]);
+  useEffect(() => {
+    if (faqs.length > 0) {
+      setActiveIndex(0);
+    }
+  }, [faqs]);
+  const toggleFaq = (index2) => {
+    setActiveIndex(activeIndex === index2 ? -1 : index2);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `py-16 px-4 ${isDarkMode ? "bg-gradient-to-b from-gray-900 via-gray-900 to-gray-800" : "bg-gradient-to-b from-gray-50 to-white"}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center mb-6 animate-fade-in", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `
+            w-10 h-10 rounded-lg flex items-center justify-center
+            ${isDarkMode ? "bg-gradient-to-br from-blue-500 to-purple-600 shadow-lg shadow-blue-500/20" : "bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-200"}
+            transform hover:scale-110 transition-all duration-300
+          `, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "svg",
+        {
+          className: "w-6 h-6 text-white",
+          fill: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12 animate-fade-in", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: `text-4xl font-bold mb-3 ${isDarkMode ? "text-white" : "text-gray-900"}`, children: (t == null ? void 0 : t("faq.title")) || "Frequently Asked Questions" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `h-1 w-20 mx-auto rounded-full ${isDarkMode ? "bg-gradient-to-r from-blue-500 to-purple-500" : "bg-gradient-to-r from-blue-600 to-indigo-600"}` })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: faqs.map((faq, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        FaqItem,
+        {
+          faq,
+          index: index2,
+          isActive: activeIndex === index2,
+          onToggle: () => toggleFaq(index2),
+          isDarkMode,
+          t
+        },
+        faq.id || index2
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("style", { jsx: true, children: `
+        @keyframes fade-in {
+          from {
+            opacity: 0;
+            transform: translateY(-20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes slide-up {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .animate-fade-in {
+          animation: fade-in 0.8s ease-out;
+        }
+
+        .animate-slide-up {
+          animation: slide-up 0.6s ease-out;
+        }
+      ` })
+  ] });
+};
 const index = {
   AboutCompanySection,
   CompanyValues,
@@ -3125,7 +4545,10 @@ const index = {
   ImageSection,
   ImageSingleSection,
   TextWithTitleSection,
-  TextSection
+  TextSection,
+  DiagramSection,
+  DiagramSection2,
+  FaqSection
 };
 export {
   AboutCompanySection,
@@ -3134,6 +4557,9 @@ export {
   ContactInfoSection,
   ContactListAutoSection,
   CustomerFeedbackAutoSection,
+  DiagramSection,
+  DiagramSection2,
+  FaqSection,
   ImageSection,
   ImageSingleSection,
   MilestoneSection,