import { useState, useEffect, useRef } from "react";
import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

export function ProductDescription() {
  const [isContentExpanded, setContentExpanded] = useState(false);
  const contentRef = useRef(null);
  const moreAllRef = useRef(null);

  useEffect(() => {
    const content = contentRef.current;
    if (content && content.scrollHeight >= 580) {
      moreAllRef.current.style.display = "flex";
      content.style.height = "580px";
    }

    Fancybox.bind('[data-fancybox="gallery"]');
  }, []);

  const toggleContent = () => {
    setContentExpanded((prevState) => !prevState);
    const content = contentRef.current;
    content.classList.toggle("active");

    if (isContentExpanded) {
      window.scrollTo({
        top: content.getBoundingClientRect().top + window.scrollY - 200,
        behavior: "smooth",
      });
    }
  };

  return (
    <div className="product-information mt-5">
      <div className="flex gap-[15px]">
        <div className="left w-[60%]">
          <div className="box-desc bg-white p-[12px] rounded-[8px]">
            <h3 className="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold">
              Thông tin sản phẩm
            </h3>
            <div id="content-desciption">
              <div className="content nd" ref={contentRef}>
                <p style="text-align: justify;">
                  <strong>Laptop HP Victus 16 R0376TX AY8Z2PA</strong> sở hữu
                  chip xử lý Intel Core i7 13700HX cùng VGA RTX 3050 6GB để có
                  được trải nghiệm chơi game, làm việc hiệu quả. Mẫu{" "}
                  <a
                    href="https://cellphones.com.vn/laptop/hp/victus.html"
                    title="HP Victus"
                    target="_blank"
                  >
                    <strong>HP Victus</strong>
                  </a>{" "}
                  này còn được trang bị màn hình 16 inch FHD 165Hz giúp tái tạo
                  hình ảnh sắc nét, mượt mà. Kèm theo đó là thiết kế bền bỉ,
                  hiện đại để có thể sử dụng ở nhiều không gian.
                </p>

                <h2
                  style="scroll-margin : 154px;"
                  id="laptop-hp-victus-16-r0376tx-ay8z2pa-hieu-nang-manh-me-hien-thi-an-tuong"
                >
                  <strong>
                    Laptop HP Victus 16 R0376TX AY8Z2PA - Hiệu năng mạnh mẽ,
                    hiển thị ấn tượng
                  </strong>
                </h2>
                <p style="text-align: justify;">
                  HP Victus 16 R0376TX AY8Z2PA với bộ vi xử lý và card đồ họa
                  rời mạnh mẽ sẽ mang tới trải nghiệm chơi game, làm việc mượt
                  mà, hiệu quả. Hãy cùng tìm hiểu thêm những điểm nổi bật mà mẫu
                  laptop gaming của
                  <strong> HP Victus </strong> này sở hữu trong bài viết sau.
                </p>
                <h3
                  style="scroll-margin : 154px;"
                  id="nang-cao-hieu-suat-xu-ly-voi-chip-core-i7-13700hx"
                >
                  <strong>
                    {" "}
                    Nâng cao hiệu suất xử lý với chip&nbsp;Core i7 13700HX
                  </strong>
                </h3>
                <p style="text-align: justify;">
                  Laptop HP Victus 16 R0376TX AY8Z2PA được trang bị con chip xử
                  lý Core i7 13700HX của Intel. Con chip Core i7 16 lõi, 24
                  luồng này sở hữu khả năng ép xung cực đại lên tới 5GHz để luôn
                  có thể xử lý dữ liệu trong thời gian ngắn. Với bộ nhớ đệm
                  30MB, hiệu suất xử lý các tác vụ phức tạp của laptop sẽ được
                  giảm đi đáng kể.
                </p>
                <p style="text-align: justify;">
                  <img
                    src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-1.jpg"
                    alt="Cấu hình laptop HP Victus 16 R0376TX AY8Z2PA"
                    loading="lazy"
                  />
                </p>
                <p style="text-align: justify;">
                  Để nâng cao khả năng xử lý đồ hoạ, HP còn trang bị cho phiên
                  bản{" "}
                  <a
                    href="https://cellphones.com.vn/laptop/hp/victus/victus-16.html"
                    title="laptop Victus 16"
                    target="_blank"
                  >
                    <strong>laptop Victus 16</strong>
                  </a>
                  này card đồ hoạ rời NVIDIA GeForce RTX 3050 6GB GDDR6. Nhờ vậy
                  mà người dùng có thể tự tin trải nghiệm các tựa game với mức
                  cấu hình cao. Không dừng ở đó, các nhu cầu chỉnh sửa hình ảnh,
                  dựng phim, tạo hình 3D,...chuyên nghiệp cũng được thực hiện
                  mượt mà.
                </p>
                <h3
                  style="scroll-margin : 154px;"
                  id="tich-hop-o-cung-toc-do-cao-cung-dung-luong-ram-lon"
                >
                  <strong>
                    {" "}
                    Tích hợp ổ cứng tốc độ cao cùng dung lượng RAM lớn{" "}
                  </strong>
                </h3>
                <p style="text-align: justify;">
                  HP Victus 16 R0376TX AY8Z2PA được trang bị sẵn 2 thanh RAM
                  chuẩn DDR5 có tốc độ bus lên tới 4800MT/s. Với tổng dung lượng
                  RAM 16GB, mẫu laptop gaming HP này sẽ đáp ứng tốt nhu cầu đa
                  nhiệm. Không chỉ các tác vụ cơ bản mà nhu cầu đa nhiệm nâng
                  cao trong công việc cũng sẽ được thực hiện mượt mà mà không
                  cần phải nâng cấp cấu hình. Ngoài ra, laptop HP Victus 16
                  R0376TX AY8Z2PA còn sở hữu một ổ cứng SSD tốc độ cao có dung
                  lượng 512GB.&nbsp;
                </p>
                <p style="text-align: justify;">
                  <img
                    src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-2.jpg"
                    alt="Cấu hình laptop HP Victus 16 R0376TX AY8Z2PA"
                    loading="lazy"
                  />
                </p>
                <h3
                  style="scroll-margin : 154px;"
                  id="thiet-ke-hien-dai-ben-bi"
                >
                  <strong> Thiết kế hiện đại, bền bỉ </strong>
                </h3>
                <p style="text-align: justify;">
                  Laptop Victus 16 R0376TX AY8Z2PA được HP thiết kế hướng tới
                  phong cách hiện đại, tối giản. Tuy vậy nhưng sản phẩm vẫn mang
                  đậm dấu ấn gaming với tông màu đen thu hút và mạnh mẽ. Kèm
                  theo đó là một tổng thể chắc chắn, bền bỉ cùng phần bản lề
                  kích thước lớn.
                </p>
                <p style="text-align: justify;">
                  Với trọng lượng khoảng 2.31kg, người dùng vẫn có thể tiện lợi
                  mang theo phiên bản laptop HP Victus này mà không gặp bất
                  tiện. So với các mẫu laptop gaming khác, đây được coi là một
                  điểm cộng giúp sản phẩm đáp ứng nhu cầu chơi game ở nhiều
                  không gian của người dùng.
                </p>
                <p style="text-align: justify;">
                  <img
                    src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-3.jpg"
                    alt="Thiết kế laptop HP Victus 16 R0376TX AY8Z2PA"
                    loading="lazy"
                  />
                </p>
                <p style="text-align: justify;">
                  Để hỗ trợ tốt cả nhu cầu chơi game và làm việc, HP đã trang bị
                  cho laptop Victus 16 R0376TX AY8Z2PA bộ bàn phím Full-size.
                  Với phần bàn phím số riêng biệt, người dùng sẽ cải thiện được
                  tốc độ nhập liệu trong khi làm việc. Bàn phím của laptop còn
                  được tích hợp hệ thống đèn nền RGB 1 để hỗ trợ việc gõ phím
                  trong điều kiện thiếu sáng.
                </p>
                <h3
                  style="scroll-margin : 154px;"
                  id="hien-thi-sac-net-va-muot-ma"
                >
                  <strong> Hiển thị sắc nét và mượt mà </strong>
                </h3>
                <p style="text-align: justify;">
                  Laptop HP Victus 16 R0376TX AY8Z2PA sở hữu không giản hiển thị
                  cực lớn khi được trang bị màn hình có kích thước 16.1 inch.
                  Kèm theo đó là độ phân giải FHD (1920 x 1080p) giúp nội dung
                  hiển thị luôn có được độ rõ nét. Nhờ việc sử dụng tấm nền IPS,
                  người dùng còn có thể điều chỉnh góc nghiêng linh hoạt mà
                  không gây ảnh hưởng tới chất lượng hình ảnh.
                </p>
                <p style="text-align: justify;">
                  <img
                    src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-4.jpg"
                    alt="Hiển thị sắc nét và mượt mà"
                    loading="lazy"
                  />
                </p>
                <p style="text-align: justify;">
                  Điểm nổi bật có trên màn hình HP Victus 16 R0376TX AY8Z2PA
                  chính là tần số quét và độ phủ màu. Với độ phủ màu 100% sRGB,
                  mẫu laptop gaming HP này sẽ hỗ trợ người dùng làm các công
                  việc liên quan tới sáng tạo hiệu quả. Tần số quét ở mức 165Hz
                  sẽ giúp màn hình tái hiện các chuyển động một cách uyển
                  chuyển, mượt mà.
                </p>
                <p style="text-align: justify;">
                  Ngoài ra, màn hình HP Victus 16 R0376TX AY8Z2PA còn được phủ
                  lớp chống chói và có độ sáng 300 nits để thoải mái sử dụng ở
                  những nơi có ánh sáng mạnh. Với chuẩn Low Blue Light, màn hình
                  còn giảm thiểu lượng ánh sáng xanh phát ra để hạn chế tình
                  trạng mỏi mắt khi sử dụng laptop trong thời gian dài.
                </p>
                <h3
                  style="scroll-margin : 154px;"
                  id="thoi-luong-pin-dai-ket-noi-phong-phu-va-on-dinh"
                >
                  <strong>
                    {" "}
                    Thời lượng pin dài, kết nối phong phú và ổn định{" "}
                  </strong>
                </h3>
                <p style="text-align: justify;">
                  Laptop HP Victus 16 R0376TX AY8Z2PA được trang bị viên pin
                  Li-ion Polymer 4-cell có dung lượng ở mức 70Wh. Với dung lượng
                  này, viên pin có thể duy trì trạng thái hoạt động cho laptop
                  lên tới nhiều giờ với các tác vụ hỗn hợp. Laptop còn được
                  trang bị bộ nguồn 200W Smart AC power adapter để hỗ trợ sạc
                  pin nhanh 50% trong khoảng 30 phút.
                </p>
                <p style="text-align: justify;">
                  <img
                    src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-5.jpg"
                    alt="Thời lượng pin dài, kết nối phong phú và ổn định"
                    loading="lazy"
                  />
                </p>
                <p style="text-align: justify;">
                  Để hỗ trợ việc liên kết có dây và chia sẻ dữ liệu, HP còn
                  trang bị cho mẫu laptop Victus của hàng đầy đủ các cổng kết
                  nối thông dụng. Hai cạnh bên laptop được tích hợp các cổng USB
                  Type-A, USB Type-C, RJ-45, HDMI 2.1, jack audio 3.5mm và bộ
                  chuyển đổi điện xoay chiều thông minh.
                </p>
                <p style="text-align: justify;">
                  Laptop Victus 16 R0376TX AY8Z2PA còn được trang bị card
                  wireless Bluetooth 5.3 và Intel Wi-Fi 6E AX211 (2x2). Điều này
                  sẽ đảm bảo được khả năng kết nối với các thiết bị ngoại vi,
                  kết nối mạng ổn định, nhanh chóng cho laptop.
                </p>
                <h2
                  style="scroll-margin : 154px;"
                  id="mua-laptop-hp-victus-16-r0376tx-ay8z2pa-gia-tot-tai-cellphones"
                >
                  <strong>
                    {" "}
                    Mua laptop HP Victus 16 R0376TX AY8Z2PA giá tốt tại
                    CellphoneS{" "}
                  </strong>
                </h2>

                <ul>
                  <li>
                    Hãy tới ngay các cửa hàng CellphoneS trên cả nước để trải
                    nghiệm và đặt mua{" "}
                    <strong>Laptop HP Victus 16 R0376TX AY8Z2PA </strong> . Mẫu
                    laptop gaming HP này còn có mức giá cực kỳ hấp dẫn khi đi
                    kèm nhiều chương trình ưu đãi, hỗ trợ thu cũ - đổi mới,...
                  </li>
                  <li>
                    Với chính sách hỗ trợ trả góp lãi suất thấp, khách hàng sẽ
                    còn dễ dàng sở hữu và trải nghiệm chiếc laptop này. Ngoài
                    ra, CellphoneS còn hỗ trợ giao hàng toàn quốc để khách hàng
                    tiện lợi đặt mua dù ở nơi đâu.
                  </li>
                </ul>
              </div>
            </div>
            <a
              href="javascript:void(0)"
              ref={moreAllRef}
              className="more-all js-viewmore-content item-btn flex items-center"
              onClick={toggleContent}
            >
              {isContentExpanded ? (
                <>
                  <span>Thu gọn</span>{" "}
                  <i className="icon_2025 angle-top mt-[10px]"></i>
                </>
              ) : (
                <>
                  <span>Xem thêm </span>
                  <i className="icon_2025 angle-bottom"></i>
                </>
              )}
            </a>
          </div>
          {/* <!-- end box desc --> */}
        </div>
        <div className="right w-[40%]">
          <div className="box-spec bg-white p-[12px] rounded-[8px]">
            <h3 className="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold">
              Thông tin chi tiết
            </h3>

            <div className="content table">
              <table width="638">
                <tbody>
                  <tr>
                    <td>Mã sản phẩm</td>
                    <td>VA3416WC</td>
                  </tr>
                  <tr>
                    <td>Màu sắc</td>
                    <td>Đen</td>
                  </tr>
                  <tr>
                    <td>Độ sáng</td>
                    <td>Max 300cd/m²</td>
                  </tr>
                  <tr>
                    <td>Độ tương phản</td>
                    <td>3000:1</td>
                  </tr>
                  <tr>
                    <td>Màu sắc hiển thị</td>
                    <td>16.7M</td>
                  </tr>
                  <tr>
                    <td>Màu sắc hỗ trợ</td>
                    <td>6500K</td>
                  </tr>
                  <tr>
                    <td>Loại màn hình</td>
                    <td>Cong R1500</td>
                  </tr>
                  <tr>
                    <td>Kích cỡ màn hình</td>
                    <td>34"</td>
                  </tr>
                  <tr>
                    <td>Tấm nền</td>
                    <td>VA</td>
                  </tr>
                  <tr>
                    <td>Góc nhìn</td>
                    <td>89°/89° (H/V)</td>
                  </tr>
                  <tr>
                    <td>Tính năng đặc biệt</td>
                    <td>
                      <br />
                      1. Flicker-Free Backlight adjustment
                      <br />
                      2. Dynamic Contrast Ratio: DCR
                      <br />
                      3. Adaptive Sync
                      <br />
                      4.FPS/RTS
                      <br />
                      5.PIP/PBP
                      <br />
                      6. PQ
                      <br />
                      7. GAME PLUS
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div id="content-specification" className="hidden table">
              <table width="638">
                <tbody>
                  <tr>
                    <td>Mã sản phẩm</td>
                    <td>VA3416WC</td>
                  </tr>
                  <tr>
                    <td>Màu sắc</td>
                    <td>Đen</td>
                  </tr>
                  <tr>
                    <td>Độ sáng</td>
                    <td>Max 300cd/m²</td>
                  </tr>
                  <tr>
                    <td>Độ tương phản</td>
                    <td>3000:1</td>
                  </tr>
                  <tr>
                    <td>Màu sắc hiển thị</td>
                    <td>16.7M</td>
                  </tr>
                  <tr>
                    <td>Màu sắc hỗ trợ</td>
                    <td>6500K</td>
                  </tr>
                  <tr>
                    <td>Loại màn hình</td>
                    <td>Cong R1500</td>
                  </tr>
                  <tr>
                    <td>Kích cỡ màn hình</td>
                    <td>34"</td>
                  </tr>
                  <tr>
                    <td>Tấm nền</td>
                    <td>VA</td>
                  </tr>
                  <tr>
                    <td>Góc nhìn</td>
                    <td>89°/89° (H/V)</td>
                  </tr>
                  <tr>
                    <td>Tính năng đặc biệt</td>
                    <td>
                      <br />
                      1. Flicker-Free Backlight adjustment
                      <br />
                      2. Dynamic Contrast Ratio: DCR
                      <br />
                      3. Adaptive Sync
                      <br />
                      4.FPS/RTS
                      <br />
                      5.PIP/PBP
                      <br />
                      6. PQ
                      <br />
                      7. GAME PLUS
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <a
              href="#content-specification"
              data-fancybox
              className="more-all  flex items-center justify-center"
            >
              Xem thêm thông số <i className="icon_2025 angle-bottom"></i>
            </a>
          </div>
          {/* <!-- box spec --> */}
        </div>
      </div>
    </div>
  );
}
