import { getWithExpiry } from "../../logic/loigicUtils";
import { contentApi } from "../../apis/contentApi";
import { startLoading, stopLoading } from "../../features/loading/loadingSlice";
import { DataCacheKey, staleTime } from "../../global/constants";
import { Faq, FaqCategory } from "../../services/content/types";
import { useQuery } from "@tanstack/react-query";
import React, { useState, useEffect, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useDispatch } from "react-redux";
import { Link } from "react-router-dom";
import { text } from "stream/consumers";

const SupportView: React.FC = () => {
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const faqs = getWithExpiry<Faq[] | []>(DataCacheKey.FAQS_HEADER);

  const [activeItem, setActiveItem] = useState(1.1);

  const categories = [
    {
      id: 1,
      title: "1.  GIỚI THIỆU CƠ BẢN VỀ ESIM ",
      count: 3,
      icon: (
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 00-3 3z"
          />
        </svg>
      ),
      items: [
        {
          childId: 1.1,
          title: "eSIM là gì?",
          content: `<p><strong>eSIM</strong> (viết tắt của <em>embedded SIM</em>) l&agrave; một loại <strong>SIM điện tử được t&iacute;ch hợp trực tiếp v&agrave;o bảng mạch của thiết bị di động, </strong>cho ph&eacute;p người d&ugrave;ng k&iacute;ch hoạt g&oacute;i cước di động m&agrave; kh&ocirc;ng cần sử dụng SIM vật l&yacute; truyền thống.</p>
<p>Kh&aacute;c với SIM vật l&yacute; truyền thống (phải th&aacute;o lắp bằng tay), eSIM <strong>kh&ocirc;ng cần khe cắm</strong>, kh&ocirc;ng cần lắp đặt thủ c&ocirc;ng m&agrave; c&oacute; thể được <strong>k&iacute;ch hoạt từ xa th&ocirc;ng qua m&atilde; QR</strong> do nh&agrave; mạng cung cấp.</p>
<p><strong>eSIM l&agrave; xu hướng c&ocirc;ng nghệ viễn th&ocirc;ng của hiện tại v&agrave; tương lai</strong>, đặc biệt ph&ugrave; hợp với người d&ugrave;ng hiện đại cần sự nhanh gọn, linh hoạt v&agrave; tối ưu trải nghiệm số.</p>`,
        },
        {
          childId: 1.2,
          title: "Lý do nên sử dụng eSIM và khi nào nên dùng?",
          content: `<h3><strong><em>1.2.1. eSIM ng&agrave;y c&agrave;ng được nhiều người d&ugrave;ng lựa chọn</em></strong><em> v&igrave; những ưu điểm vượt trội về tiện &iacute;ch, t&iacute;nh linh hoạt v&agrave; sự ph&ugrave; hợp với lối sống hiện đại:</em></h3>
<ul>
<li><strong>K&iacute;ch hoạt nhanh, kh&ocirc;ng cần đến cửa h&agrave;ng:</strong> Người d&ugrave;ng c&oacute; thể đăng k&yacute; v&agrave; k&iacute;ch hoạt eSIM ngay tr&ecirc;n điện thoại trong v&agrave;i ph&uacute;t th&ocirc;ng qua m&atilde; QR do nh&agrave; mạng cung cấp.</li>
<li><strong>Kh&ocirc;ng lo mất hoặc hỏng SIM:</strong> V&igrave; được h&agrave;n trực tiếp v&agrave;o thiết bị, eSIM loại bỏ nguy cơ rơi, g&atilde;y, cong hoặc hư ch&acirc;n tiếp x&uacute;c như SIM vật l&yacute;.</li>
<li><strong>Tiết kiệm kh&ocirc;ng gian thiết bị:</strong> Kh&ocirc;ng cần khe SIM vật l&yacute; gi&uacute;p thiết bị nhỏ gọn hơn, dễ thiết kế chống nước v&agrave; chống bụi tốt hơn.</li>
<li><strong>Hỗ trợ nhiều số tr&ecirc;n một thiết bị:</strong> Một số d&ograve;ng m&aacute;y cho ph&eacute;p lưu trữ nhiều eSIM, gi&uacute;p người d&ugrave;ng sử dụng song song số c&aacute; nh&acirc;n v&agrave; số c&ocirc;ng việc m&agrave; kh&ocirc;ng cần d&ugrave;ng hai m&aacute;y.</li>
<li><strong>Dễ d&agrave;ng chuyển đổi giữa c&aacute;c nh&agrave; mạng:</strong> Người d&ugrave;ng c&oacute; thể chuyển đổi số hoặc đổi nh&agrave; mạng chỉ bằng v&agrave;i thao t&aacute;c đơn giản &ndash; kh&ocirc;ng cần thay SIM, kh&ocirc;ng phải th&aacute;o m&aacute;y.</li>
<li><strong>Linh hoạt khi đi nước ngo&agrave;i:</strong> Với eSIM, bạn c&oacute; thể mua g&oacute;i cước quốc tế online v&agrave; k&iacute;ch hoạt tức th&igrave; m&agrave; kh&ocirc;ng cần th&aacute;o SIM ch&iacute;nh &ndash; rất ph&ugrave; hợp cho người thường xuy&ecirc;n c&ocirc;ng t&aacute;c hoặc du lịch.</li>
</ul>
<h3><strong><em>1.2.2. N&ecirc;n d&ugrave;ng eSIM trong c&aacute;c trường hợp sau:</em></strong></h3>
<ul>
<li>Sở hữu thiết bị c&oacute; hỗ trợ eSIM như iPhone XS trở l&ecirc;n, Samsung d&ograve;ng Galaxy S hoặc Fold mới, Pixel, Apple Watch, iPad Cellular...</li>
<li>Thường xuy&ecirc;n di chuyển hoặc đi c&ocirc;ng t&aacute;c quốc tế v&agrave; cần d&ugrave;ng eSIM du lịch ngắn hạn.</li>
<li>Cần sử dụng song song 2 số điện thoại (v&iacute; dụ: một số c&ocirc;ng việc, một số c&aacute; nh&acirc;n).</li>
<li>Muốn tiết kiệm thời gian, hạn chế thao t&aacute;c thủ c&ocirc;ng với SIM vật l&yacute;.</li>
<li>Thiết bị kh&ocirc;ng c&oacute; khe cắm SIM (v&iacute; dụ: đồng hồ th&ocirc;ng minh).</li>
</ul>
 <div class="w-full overflow-x-auto">
      <table class="w-full border border-gray-300 border-collapse text-sm md:text-base">
        <thead>
          <tr class="bg-gray-100">
            <th class="border border-gray-300 px-4 py-3 text-left font-semibold">
              Tiêu chí
            </th>
            <th class="border border-gray-300 px-4 py-3 text-center font-semibold">
              eSIM
            </th>
            <th class="border border-gray-300 px-4 py-3 text-center font-semibold">
              SIM vật lý
            </th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td class="border px-4 py-3 font-medium">
              Kích hoạt, đăng ký
            </td>
            <td class="border px-4 py-3">
              Từ xa qua mã QR, thao tác nhanh chóng
            </td>
            <td class="border px-4 py-3">
              Cần đến cửa hàng hoặc đợi giao SIM
            </td>
          </tr>

          <tr class="bg-gray-50">
            <td class="border px-4 py-3 font-medium">
              Thay đổi nhà mạng / số
            </td>
            <td class="border px-4 py-3">
              Dễ dàng, không cần tháo lắp
            </td>
            <td class="border px-4 py-3">
              Phải tháo SIM, đổi SIM mới
            </td>
          </tr>

          <tr>
            <td class="border px-4 py-3 font-medium">
              Dùng nhiều số cùng lúc
            </td>
            <td class="border px-4 py-3">
              Lưu trữ nhiều eSIM trên máy, dễ chuyển đổi
            </td>
            <td class="border px-4 py-3">
              Giới hạn khe SIM (thường 1–2 SIM vật lý)
            </td>
          </tr>

          <tr class="bg-gray-50">
            <td class="border px-4 py-3 font-medium">
              Độ an toàn và bền bỉ
            </td>
            <td class="border px-4 py-3">
              Không rơi, không hỏng vật lý
            </td>
            <td class="border px-4 py-3">
              Dễ mất, dễ gãy hoặc lỗi tiếp xúc
            </td>
          </tr>

          <tr>
            <td class="border px-4 py-3 font-medium">
              Khả năng tương thích
            </td>
            <td class="border px-4 py-3">
              Phù hợp cho thiết bị hiện đại, nhỏ gọn
            </td>
            <td class="border px-4 py-3">
              Không phù hợp với thiết bị không có khe SIM
            </td>
          </tr>

          <tr class="bg-gray-50">
            <td class="border px-4 py-3 font-medium">
              Khi đi nước ngoài
            </td>
            <td class="border px-4 py-3">
              Mua eSIM du lịch online, dùng ngay
            </td>
            <td class="border px-4 py-3">
              Phải mua SIM mới, đổi thủ công
            </td>
          </tr>

          <tr>
            <td class="border px-4 py-3 font-medium">
              Hỗ trợ chống nước, chống bụi
            </td>
            <td class="border px-4 py-3">
              Tăng độ kín thiết bị (vì không cần khe SIM)
            </td>
            <td class="border px-4 py-3">
              Có khe hở, dễ bụi, kém chống nước
            </td>
          </tr>
        </tbody>
      </table>
    </div>
`,
        },
        {
          childId: 1.3,
          title: "Tiện ích nổi bật của eSIM so với SIM vật lý",
          content: "",
        },
      ],
      color: "bg-red-500",
    },
    {
      title: "2.  HƯỚNG DẪN CÀI ĐẶT eSIM TRÊN CÁC THIẾT BỊ",
      count: 3,
      icon: (
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
          />
        </svg>
      ),
      items: [
        {
          childId: 2.1,
          title: "Hướng dẫn cài đặt eSIM trên các thiết bị",
          content: `<p>C&agrave;i đặt eSIM tr&ecirc;n c&aacute;c thiết bị tương th&iacute;ch (iPhone, Samsung, Google Pixel,&hellip;) rất đơn giản v&agrave; nhanh ch&oacute;ng. Sau khi thanh to&aacute;n, bạn sẽ nhận được email từ nh&agrave; cung cấp (như Skysim) chứa th&ocirc;ng tin g&oacute;i eSIM v&agrave; m&atilde; QR để k&iacute;ch hoạt.</p>
<p>To&agrave;n bộ qu&aacute; tr&igrave;nh c&agrave;i đặt v&agrave; k&iacute;ch hoạt eSIM được thực hiện <strong>ho&agrave;n to&agrave;n trực tuyến</strong>, chỉ mất khoảng <strong>3&ndash;5 ph&uacute;t</strong>.</p>`,
        },
        {
          childId: 2.2,
          title: "Chuẩn bị trước khi cài đặt eSIM",
          content: `<p>Trước khi c&agrave;i đặt, bạn cần đảm bảo:</p>
<h3><strong>2.1.1. Thiết bị hỗ trợ eSIM</strong></h3>
<p>V&agrave;o <strong>C&agrave;i đặt &rarr; Th&ocirc;ng tin thiết bị (hoặc Giới thiệu về điện thoại)</strong> để kiểm tra.</p>
<p>Một số d&ograve;ng m&aacute;y phổ biến hỗ trợ eSIM:</p>
<ul>
<li><strong>iPhone</strong>: Từ iPhone XS, XR trở l&ecirc;n<br /> </li>
<li><strong>Samsung</strong>: Galaxy S20 trở l&ecirc;n, Z Fold/Flip, Note 20 Ultra, A54, A73...<br /> </li>
<li><strong>Google Pixel</strong>: Từ Pixel 3 trở l&ecirc;n<br /> </li>
<li><strong>Apple Watch</strong>, <strong>iPad Pro</strong> (bản Cellular)<br /> </li>
</ul>
<p><em>Lưu &yacute;</em>: Lưu &yacute;: Một số d&ograve;ng m&aacute;y x&aacute;ch tay c&oacute; thể kh&ocirc;ng bật được eSim. Tham khảo <a href="https://gigago.vn/thiet-bi-ho-tro-esim/">danh s&aacute;ch thiết bị hỗ trợ eSIM</a> của ch&uacute;ng t&ocirc;i để xem liệu thiết bị của bạn c&oacute; d&ugrave;ng được eSIM kh&ocirc;ng.</p>
<p>&nbsp;</p>
<h3><strong>2.1.2. Email v&agrave; m&atilde; QR eSIM</strong></h3>
<ul>
<li>Kiểm tra email để nhận <strong>m&atilde; QR</strong>, <strong>địa chỉ SM-DP+</strong>, v&agrave; <strong>m&atilde; k&iacute;ch hoạt</strong> từ nh&agrave; cung cấp.</li>
<li>M&atilde; n&agrave;y c&oacute; thể được in ra, chụp lại hoặc qu&eacute;t từ thiết bị kh&aacute;c.</li>
</ul>
<p><em>M&atilde; QR c&oacute; thời hạn k&iacute;ch hoạt 30 ng&agrave;y kể từ khi nhận được email.</em></p>
<h3><strong>2.1.3. Kết nối Wi-Fi ổn định</strong></h3>
<ul>
<li>Thiết bị cần c&oacute; kết nối Internet (qua WiFi hoặc 3G/4G) trong suốt qu&aacute; tr&igrave;nh c&agrave;i đặt.</li>
</ul>
<p><strong><em>Mẹo</em></strong>: iOS 17 v&agrave; Samsung S20 trở l&ecirc;n đ&atilde; hỗ trợ <strong>qu&eacute;t m&atilde; QR từ thư viện ảnh</strong>.</p>`,
        },
        {
          childId: 2.3,
          title: "Hướng dẫn cài đặt trên từng dòng thiết bị",
          content: `<h3><strong>2.2.1. iPhone (iOS)</strong></h3>
<h4><strong>2.2.1.1. C&aacute;ch 1: Qu&eacute;t m&atilde; QR</strong></h4>
<ol>
<li>Mở thiết bị iOS của bạn, v&agrave;o <strong>Settings</strong>/C&agrave;i đặt &gt; <strong>Cellular/</strong>Di động &gt; Add eSIM/Th&ecirc;m g&oacute;i cước di động &gt; Use QR code/D&ugrave;ng m&atilde; QR <em>(hoặc mở Camera v&agrave; qu&eacute;t m&atilde; QR)</em></li>
<li>Qu&eacute;t m&atilde; QR nhận từ email.</li>
<li>Tại m&agrave;n<strong> Activate eSIM/K&iacute;ch hoạt eSIM</strong>, chọn<strong> Tiếp tục</strong>/<strong>Continue</strong>.</li>
<li>Tại m&agrave;n <strong>Cellular Setup Complete</strong>/<strong>Ho&agrave;n th&agrave;nh c&agrave;i đặt di động</strong>, chọn <strong>Done</strong>.
<img src="https://skysimhub.vn/assets/guide/2_1.png" alt="Activate eSIM on iOS"/></li>
</ol>
<h4><strong>2.2.1.2. C&aacute;ch 2: Nhập th&ocirc;ng tin thủ c&ocirc;ng</strong></h4>
<ol>
<li>V&agrave;o <strong>Settings</strong>/<strong>C&agrave;i đặt</strong><strong> &gt; Cellular</strong>/<strong>Di động</strong><strong> &gt; Add eSIM/Th&ecirc;m eSIM </strong>(hoặc <strong>Set Up Cellular </strong>nếu kh&ocirc;ng c&oacute; <strong>Add eSIM</strong>)<strong>&gt; </strong>chọn <strong>Enter Details Manually</strong>.</li>
<li>Nhập địa chỉ <strong>SM-DP+</strong> v&agrave; <strong>m&atilde; k&iacute;ch hoạt</strong>.</li>
<li>Tại m&agrave;n Activate eSIM/K&iacute;ch hoạt eSIM, chọn Continue/Tiếp tục.</li>
<li>Tại m&agrave;n <strong>Cellular Setup Complete/Ho&agrave;n th&agrave;nh c&agrave;i đặt di động</strong>, chọn &nbsp;Tại m&agrave;n Activate eSIM/K&iacute;ch hoạt eSIM, chọn<strong> Continue</strong>/<strong>Tiếp tục.</strong></li>
<li>7. Tại m&agrave;n<strong> Cellular Setup Complete</strong>/<strong>Ho&agrave;n th&agrave;nh c&agrave;i đặt di động,</strong> chọn <strong>Done.</strong>
<img src="https://skysimhub.vn/assets/guide/2_2.png" alt="Activate eSIM on iOS"/></li>
</ol>
<h4><strong>2.2.1.3. C&aacute;ch 3: Sử dụng n&uacute;t &ldquo;Install Now/C&agrave;i đặt ngay&rdquo; tr&ecirc;n m&agrave;n h&igrave;nh My eSIM tr&ecirc;n app hoặc email Skysim gửi.</strong></h4>
<ol>
<li>Truy cập app Skysim &gt; My eSIM hoặc mở email eSIM đ&atilde; được Skysim gửi.</li>
<li>Bấm n&uacute;t Instal Now/C&agrave;i đặt ngay trong m&agrave;n h&igrave;nh hiển thị chi tiết</li>
<li>Tại m&agrave;n<strong> Activate eSIM/K&iacute;ch hoạt eSIM</strong>, chọn<strong> Tiếp tục</strong>/<strong>Continue</strong>.</li>
<li>Tại m&agrave;n <strong>Cellular Setup Complete</strong>/<strong>Ho&agrave;n th&agrave;nh c&agrave;i đặt di động</strong>, chọn <strong>Done</strong>.</li>
</ol>
<h4><strong>2.2.1.4. K&iacute;ch hoạt eSIM du lịch tr&ecirc;n iPhone</strong></h4>
<ol>
<li>Sau khi đến quốc gia sử dụng eSIM, v&agrave;o <strong>Settings</strong>/<strong>C&agrave;i đặt</strong> &gt; <strong>Cellular</strong>/<strong>Di động</strong>.</li>
<li>Bật <strong>Turn on this line </strong>/ <strong>Bật d&ograve;ng n&agrave;y </strong>v&agrave; <strong>Data roaming </strong>/ <strong>Chuyển v&ugrave;ng dữ liệu</strong> cho d&ograve;ng eSIM Skysim.</li>
<li>V&agrave;o <strong>Cellular</strong>/<strong>Di động</strong>, chọn <strong>Cellular Data</strong>/<strong>Dữ liệu di động</strong> &gt; chọn <strong>Skysim eSIM</strong> l&agrave; k&ecirc;nh sử dụng dữ liệu di động ch&iacute;nh.</li>
</ol>
<p>&nbsp;<em>Bạn đ&atilde; c&oacute; thể sử dụng eSIM để truy cập Internet.<br /> </em></p>
<h4><strong>2.2.1.5. X&oacute;a eSIM tr&ecirc;n iPhone</strong></h4>
<ol>
<li>V&agrave;o<strong> Settings</strong>/C&agrave;i đặt <strong>&gt; Cellular/Di động.</strong></li>
<li>Chọn g&oacute;i eSIM cần x&oacute;a &rarr; nhấn <strong>Remove Cellular Plan/X&oacute;a g&oacute;i di động</strong>. &nbsp;Sau đ&oacute;, x&aacute;c nhận lựa chọn của bạn.</li>
</ol>
<p><em>Lưu &yacute;</em>: Một số eSIM chỉ k&iacute;ch hoạt được <strong>1 lần duy nhất</strong>. Nếu x&oacute;a, m&atilde; QR sẽ kh&ocirc;ng d&ugrave;ng lại được. Bạn cần <strong>li&ecirc;n hệ lại nh&agrave; cung cấp để được cấp lại m&atilde; mới</strong> (ph&iacute;: 25.000đ/lần).</p>
<h3><strong>2.2.2. Android (Samsung, Google Pixel&hellip;)</strong></h3>
<h4><strong>2.2.2.1. C&aacute;ch 1: Qu&eacute;t m&atilde; QR</strong></h4>
<ol>
<li>V&agrave;o <strong>C&agrave;i đặt/Setting&gt; Quản l&yacute; SIM/SIM Manager</strong></li>
<li>Chọn <strong>Th&ecirc;m eSIM/Add eSIM &gt; Qu&eacute;t m&atilde; QR</strong></li>
<li>Đưa m&atilde; QR v&agrave;o khung qu&eacute;t, sau đ&oacute; nhấn <strong>Th&ecirc;m (Add) </strong>v&agrave; đợi v&agrave;i ph&uacute;t để eSIM được th&ecirc;m v&agrave;o thiết bị.</li>
</ol>
<p><strong><em>Lưu &yacute;</em></strong>: <em>T&iacute;nh năng tải l&ecirc;n ảnh m&atilde; QR chỉ &aacute;p dụng cho Samsung Galaxy S20, c&aacute;c d&ograve;ng mới hơn của Samsung v&agrave; một số d&ograve;ng điện thoại Android kh&aacute;c.</em></p>
<img src="https://skysimhub.vn/assets/guide/2_3.png" alt="Activate eSIM on Android"/>
<h4><strong>2.2.2.2. C&aacute;ch 2: Nhập th&ocirc;ng tin thủ c&ocirc;ng</strong></h4>
<ol>
<li>Mở điện thoại, v&agrave;o mục <strong>C&agrave;i đặt/Setting</strong></li>
<li>Chọn Quản l&yacute; <strong>SIM/SIM Manage</strong></li>
<li>Chọn Th&ecirc;m <strong>eSIM/Add eSIM</strong></li>
<li>Tại khung qu&eacute;t m&atilde; QR, chọn <strong>Enter activation code/Nhập m&atilde; k&iacute;ch hoạt</strong></li>
<li>Nhập th&ocirc;ng tin eSIM được gửi từ nh&agrave; cung cấp v&agrave;o &ocirc; &gt; bấm <strong>Connect/Kết nối</strong>.</li>
<li>Khi được hỏi <strong>Add eSIM</strong>/<strong>Th&ecirc;m eSIM</strong> kh&ocirc;ng, bạn bấm <strong>Add</strong>/<strong>Th&ecirc;m</strong> v&agrave; đợi v&agrave;i ph&uacute;t để điện thoại th&ecirc;m eSIM v&agrave;o m&aacute;y để ho&agrave;n tất c&agrave;i đặt.
<img src="https://skysimhub.vn/assets/guide/2_4.png" alt="Activate eSIM on Android"/></li>
</ol>
<h4><strong>2.2.2.3. K&iacute;ch hoạt eSIM du lịch tr&ecirc;n Samsung</strong></h4>
<ol>
<li>Sau khi đến nơi, v&agrave;o <strong>Settings</strong>/<strong>C&agrave;i đặt</strong> &gt; <strong>Connections/Kết nối</strong>&gt;<strong> Mạng di động</strong>&gt; bật <strong>Chuyển v&ugrave;ng dữ liệu/Data Roaming</strong></li>
<li>Quay trở lại m&agrave;n <strong>Connection/Kết nối</strong>&gt; V&agrave;o <strong>SIM Manager/Quản l&yacute; SIM&gt; </strong>&nbsp;bật <strong>eSIM Skysim</strong></li>
<li>V&agrave;o <strong>Mobile Data/Dữ liệu di dộng</strong>, chọn <strong>Skysim eSIM</strong> l&agrave; mạng ch&iacute;nh</li>
</ol>
<p><em>eSIM sẵn s&agrave;ng để d&ugrave;ng Internet.</em></p>
<h4><strong>2.2.2.4. X&oacute;a eSIM tr&ecirc;n Android</strong></h4>
<ol>
<li>V&agrave;o <strong>C&agrave;i đặt &gt; Connections/Kết nối &gt; SIM manager</strong>/<strong>Tr&igrave;nh quản l&yacute; SIM</strong></li>
<li>Chọn eSIM cần x&oacute;a &rarr; Gạt sang <strong>&ldquo;OFF&rdquo;</strong> &rarr; nhấn <strong>X&oacute;a (Remove) </strong>v&agrave; x&aacute;c nhận lựa chọn của bạn.</li>
</ol>
<p><strong><em>Lưu &yacute;: </em></strong><em>Mỗi eSIM chỉ k&iacute;ch hoạt được 1 lần. Nếu cần d&ugrave;ng lại, bạn phải li&ecirc;n hệ nh&agrave; cung cấp để cấp lại m&atilde; QR. Ph&iacute; cấp lại eSIM l&agrave; 25.000đ/lần.</em></p>`,
        },
      ],
      color: "bg-red-600",
    },
    {
      title: "3.  HƯỚNG DẪN BẬT CHUYỂN VÙNG DỮ LIỆU (Roaming)",
      count: 1,
      icon: (
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
          />
        </svg>
      ),
      items: [
        {
          childId: 3.1,
          title: "Hướng dẫn bật chuyển vùng dữ liệu (Roaming)",
          content: `<p><em>*Vui l&ograve;ng đảm bảo rằng bạn đang ở quốc gia đến để c&oacute; thể sử dụng eSIM.</em></p>
<ul>
<li><strong>iOS</strong>: C&agrave;i đặt &gt; Di động &gt; Chọn eSIM &gt; Bật &ldquo;Chuyển v&ugrave;ng dữ liệu&rdquo;</li>
<img src="https://skysimhub.vn/assets/guide/3_1.png" alt="Enable Data Roaming on iOS"/>
</ul>
<ul>
<li><strong>Android</strong>: C&agrave;i đặt &gt; Kết nối &gt; Mạng di động &gt; Bật &ldquo;Chuyển v&ugrave;ng dữ liệu&rdquo;</li>
<img src="https://skysimhub.vn/assets/guide/3_2.png" alt="Enable Data Roaming on Android"/>
</ul>`,
        },
      ],
      color: "bg-red-600",
    },
    {
      title: "4. CÁCH KIỂM TRA DUNG LƯỢNG ĐÃ DÙNG",
      count: 1,
      icon: (
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
          />
        </svg>
      ),
      items: [
        {
          childId: 4.1,
          title: "Cách kiểm tra dung lượng đã dùng",
          content: `<p>Lưu &yacute;: Chuyển v&ugrave;ng thế giới hiện tại l&agrave; tổng dung lượng một chu kỳ. Để biết ch&iacute;nh x&aacute;c dung lượng mỗi ng&agrave;y đ&atilde; d&ugrave;ng, bạn c&oacute; thể l&agrave;m mới bộ đếm mỗi cuối ng&agrave;y bằng c&aacute;ch:</p>
<p>V&agrave;o C&agrave;i đặt &gt; Chọn Di động &gt; K&eacute;o đến cuối trang v&agrave; chọn Reset Statistics</p>
<p><strong>iOS:</strong></p>
<p>V&agrave;o C&agrave;i đặt &gt; Chọn Di động &gt; Chọn Dữ liệu di động &gt; Chọn eSIM cần kiểm tra &gt; Quay lại m&agrave;n h&igrave;nh Di động &gt; Xem dung lượng đ&atilde; d&ugrave;ng tại Chuyển v&ugrave;ng thế giới hiện tại</p>
<img src="https://skysimhub.vn/assets/guide/4_1.png" alt="Check Data Usage on iOS"/>
<p><strong>Android:</strong></p>
<p>V&agrave;o C&agrave;i đặt &gt; Chọn Kết nối &gt; Chọn Quản l&yacute; SIM &gt; Bật eSIM cần kiểm tra &gt; Quay lại m&agrave;n h&igrave;nh Kết nối &gt; Chọn Sử dụng dữ liệu &gt; Xem dung lượng đ&atilde; d&ugrave;ng tại mục chứa t&ecirc;n eSIM</p>
<img src="https://skysimhub.vn/assets/guide/4_2.png" alt="Check Data Usage on Android"/>`,
        },
      ],
      color: "bg-red-600",
    },
    {
      title: "5. CÁCH KIỂM TRA ESIM ĐANG SỬ DỤNG DỮ LIỆU",
      count: 1,
      icon: (
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
          />
        </svg>
      ),
      items: [
        {
          childId: 5.1,
          title: "Cách kiểm tra eSIM đang sử dụng dữ liệu",
          content: `<p><strong>IOS:</strong></p>
<p>V&agrave;o <strong>C&agrave;i đặt</strong> &gt; Chọn <strong>Di động</strong> &gt; Đảm bảo bạn đ&atilde; bật eSIM &gt; Chọn <strong>Dữ liệu di động</strong> &gt; eSIM đ&aacute;nh dấu tick ✓ l&agrave; eSIM đang d&ugrave;ng dữ liệu</p>
<img src="https://skysimhub.vn/assets/guide/5_1.png" alt="Check eSIM using data on iOS"/>
<p><strong>ANDROID:</strong></p>
<p>V&agrave;o <strong>C&agrave;i đặt</strong> &gt; Chọn <strong>Kết nối</strong> &gt; Chọn <strong>Quản l&yacute; SIM</strong> &gt; Đảm bảo bạn đ&atilde; bật eSIM &gt; K&eacute;o xuống v&agrave; kiểm tra eSIM đang d&ugrave;ng dữ liệu tại <strong>Dữ liệu di động</strong></p>
<img src="https://skysimhub.vn/assets/guide/5_2.png" alt="Check eSIM using data on Android"/>`,
        },
      ],
      color: "bg-red-600",
    },
    {
      title: "6. CÁCH ƯỚC TÍNH DUNG LƯỢNG",
      count: 1,
      icon: (
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
          />
        </svg>
      ),
      items: [
        {
          childId: 6.1,
          title: "Cách ước tính dung lượng",
          content: `<img src="https://skysimhub.vn/assets/guide/6_1.png" alt="Data Usage Estimation"/>`,
        },
      ],
      color: "bg-red-600",
    },
    {
      title: "7. CÁC SỰ CỐ ESIM PHỔ BIẾN",
      count: 1,
      icon: (
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
          />
        </svg>
      ),
      items: [
        {
          childId: 7.1,
          title: "Các sự cố eSIM phổ biến",
          content: `<h3><strong><em>2.7.1. T&ocirc;i kh&ocirc;ng nhận được email chứa m&atilde; eSIM?</em></strong></h3>
<ul>
<li>Email chứa th&ocirc;ng tin eSIM, bao gồm m&atilde; QR v&agrave; c&aacute;c th&ocirc;ng tin của g&oacute;i sẽ được gửi <strong>trong v&ograve;ng 5&ndash;10 ph&uacute;t sau thanh to&aacute;n</strong>.<br /> </li>
<li>Nếu kh&ocirc;ng c&oacute;, h&atilde;y li&ecirc;n hệ:
<ul>
<li>Zalo/Hotline/Whatsapp: +84336548007</li>
<li>Email: klinhnguyen@viettech.asia<br /> </li>
</ul>
</li>
</ul>
<h3><strong><em>2.7.2. T&ocirc;i kh&ocirc;ng thể qu&eacute;t m&atilde; QR?</em></strong></h3>
<p>C&oacute; nhiều l&yacute; do khiến bạn kh&ocirc;ng thể qu&eacute;t (scan) m&atilde; QR th&agrave;nh c&ocirc;ng:</p>
<ul>
<li><strong>Kh&ocirc;ng c&oacute; kết nối Internet:</strong> để qu&eacute;t m&atilde; QR eSIM, bạn cần c&oacute; kết nối Internet (qua WiFi hoặc dữ liệu di động). Vui l&ograve;ng đảm bảo chất lượng Internet trong qu&aacute; tr&igrave;nh c&agrave;i đặt eSIM.</li>
<li><strong>Điện thoại kh&ocirc;ng tương th&iacute;ch eSIM:</strong> Khi đ&oacute; h&atilde;y kiểm tra lại C&agrave;i đặt (Settings) để chắc chắn rằng điện thoại của bạn c&oacute; hỗ trợ eSIM.</li>
<li><strong>Kh&ocirc;ng qu&eacute;t m&atilde; QR bằng phần c&agrave;i đặt eSIM:</strong> eSIM chỉ c&oacute; thể c&agrave;i đặt th&agrave;nh c&ocirc;ng bằng việc qu&eacute;t m&atilde; QR trong phần c&agrave;i đặt eSIM, chứ kh&ocirc;ng phải v&agrave;o ứng dụng Camera của điện thoại hay ứng dụng kh&aacute;c để qu&eacute;t.</li>
<li><strong>M&atilde; QR hết hạn:</strong> ở một số trường hợp, m&atilde; QR c&oacute; thể đ&atilde; bị sử dụng rồi cũng l&agrave; l&yacute; do khiến bạn kh&ocirc;ng qu&eacute;t m&atilde;.</li>
<li><strong>M&atilde; QR kh&ocirc;ng nằm trọn trong khung camera:</strong> vui l&ograve;ng đặt điện thoại sao cho m&atilde; QR nằm trọn trong khung qu&eacute;t trước khi tiến h&agrave;nh qu&eacute;t m&atilde;.</li>
</ul>
<h3><strong><em>2.7.3 T&ocirc;i cần l&agrave;m g&igrave; khi lỡ x&oacute;a eSIM?</em></strong></h3>
<ul>
<li>Th&ocirc;ng thường, mỗi eSIM chỉ được c&agrave;i đặt một lần duy nhất tr&ecirc;n một thiết bị v&agrave; bạn sẽ kh&ocirc;ng thể qu&eacute;t lại m&atilde; QR của eSIM đ&oacute;. Tuy nhi&ecirc;n, trong trường hợp cần thiết, bạn h&atilde;y li&ecirc;n hệ với bộ phận chăm s&oacute;c kh&aacute;ch h&agrave;ng của nh&agrave; cung cấp eSIM để được hỗ trợ nh&eacute;.</li>
</ul>
<h3><strong><em>2.7.4. eSIM đ&atilde; c&agrave;i nhưng kh&ocirc;ng c&oacute; s&oacute;ng?</em></strong></h3>
<p>*Vui l&ograve;ng đảm bảo rằng bạn đang ở quốc gia đến để c&oacute; thể sử dụng eSIM.</p>
<p><strong>C&aacute;ch 1:</strong> Vui l&ograve;ng kiểm tra xem bạn đ&atilde; bật chế độ Chuyển v&ugrave;ng dữ liệu v&agrave; chế độ Dữ liệu di động tr&ecirc;n điện thoại chưa.</p>
<ul>
<li><strong>iOS:</strong>
<img src="https://skysimhub.vn/assets/guide/7_1.png" alt="Activate eSIM on Android"/></li>
<li><strong>Android:</strong>
<img src="https://skysimhub.vn/assets/guide/7_2.png" alt="Activate eSIM on Android"/>
</li>
</ul>
<p><strong>C&aacute;ch 2: Bạn thử Reset lại điện thoại hoặc chờ khoảng 5-10 ph&uacute;t v&igrave; một số mạng k&iacute;ch hoạt hơi l&acirc;u.</strong></p>
<p><strong>Nếu bạn vẫn kh&ocirc;ng thể khắc phục được sự cố, vui l&ograve;ng li&ecirc;n hệ với ch&uacute;ng t&ocirc;i c&agrave;ng sớm c&agrave;ng tốt qua<em> Zalo +84336548007</em> để được hỗ trợ</strong></p>`,
        },
      ],
      color: "bg-red-600",
    },
  ];

  const [content, setContent] = useState<{ title: string; content: string }>({
    title: categories[0].items[0].title,
    content: categories[0].items[0].content,
  });

  return (
    <div className="bg-white min-h-screen">
      <div className="max-w-7xl mx-auto px-4 py-6">
        <nav className="flex items-center space-x-2 text-sm text-slate-500 font-medium">
          <Link to="/" className="hover:text-[#EE0434] text-[18px]">
            {t("home")}
          </Link>
          <svg
            className="w-4 h-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              d="M9 5l7 7-7 7"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
          <span className="text-slate-900 font-bold text-[18px]">
            {t("support")}
          </span>
        </nav>
      </div>

      <div className="max-w-7xl mx-auto px-4 pb-20">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
          <aside className="lg:col-span-4 space-y-8">
            {categories.map((cat, idx) => (
              <div key={idx} className="space-y-4">
                <div className="flex items-center space-x-4">
                  <div
                    className={`w-10 h-10 rounded-xl ${cat.color} flex items-center justify-center text-white shadow-md`}
                  >
                    {cat.icon}
                  </div>
                  <h3 className="text-[17px] font-black leading-tight">
                    {cat.title}
                  </h3>
                </div>
                <div className="pl-5 border-l-2 border-slate-50 space-y-4 ml-5">
                  {cat.items.map((item, i) => (
                    <button
                      key={i}
                      onClick={() => {
                        setActiveItem(item.childId);
                        setContent({
                          title: item.title,
                          content: item.content,
                        });
                      }}
                      className="group flex items-center justify-between w-full text-left relative"
                    >
                      <div
                        className={`absolute -left-[22px] w-2 h-2 rounded-full border-2 border-white ${
                          activeItem === item.childId
                            ? "bg-[#EE0434] scale-125"
                            : "bg-slate-200"
                        }`}
                      ></div>
                      <span
                        className={`text-[14px] font-bold transition-colors pl-4 ${
                          activeItem === item.childId
                            ? "text-[#EE0434]"
                            : "text-slate-500 group-hover:text-[#EE0434]"
                        }`}
                      >
                        {item.title}
                      </span>
                    </button>
                  ))}
                </div>
              </div>
            ))}
          </aside>
          <main className="lg:col-span-8">
            <h1 className="text-4xl md:text-5xl font-black text-[#EE0434] mb-10">
              {content.title}
            </h1>
            <div
              className="prose max-w-none text-gray-800"
              style={{ lineHeight: "40px" }}
              dangerouslySetInnerHTML={{ __html: content.content }}
            />
          </main>
        </div>
      </div>
    </div>
  );
};

export default SupportView;
