import { useState, useEffect, useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { SupplierListBox } from "../../components/product/SupplierListBox";
import { ProductDescription } from "../../components/product/ProductDescription";
import { MemberReview } from "../../components/product/MemberReview";

import { FreeMode, Navigation, Thumbs } from "swiper/modules";

export function ProductDetail() {
  // const [activeImage, setActiveImage] = useState(
  //   "/src/assets/images/big-product-detail.png"
  // );

  const [thumbsSwiper, setThumbsSwiper] = useState(null);

  return (
    <>
      <div className="box-product-detail bg-[#F4F4F4] pb-[100px]">
        <div className="container">
          <div className="breadcrumb p-[12px_0]">
            <ol
              itemscope
              itemtype="http://schema.org/BreadcrumbList"
              className="ul flex flex-wrap items-center"
            >
              <li
                itemprop="itemListElement"
                itemscope
                itemtype="http://schema.org/ListItem"
                className="flex items-center pr-[12px]"
              >
                <a
                  href="/template/homepage/homepage.html"
                  itemprop="item"
                  className="nopad-l flex items-center text-[#637381]"
                >
                  <span itemprop="name">
                    <span style="font-size: 0; display: none;">Trang chủ</span>
                    <i className="icon_2025 home mr-[5px] mb-[5px]" />
                  </span>
                </a>{" "}
                <i className="icon_2025 angle-right ml-[12px]" />
                <meta itemprop="position" content="1" />
              </li>
              <li
                itemprop="itemListElement"
                itemscope
                itemtype="http://schema.org/ListItem"
                className="flex items-center pr-[12px]"
              >
                <a
                  href="/man-hinh.html"
                  itemprop="item"
                  className="nopad-l flex items-center"
                >
                  <span itemprop="name">Màn hình máy tính</span>
                  <i className="icon_2025 angle-right text-[#637381] ml-[12px]" />
                </a>
                <meta itemprop="position" content="2" />
              </li>
              <li
                itemprop="itemListElement"
                itemscope
                itemtype="http://schema.org/ListItem"
                className="flex items-center pr-[12px]"
              >
                <a
                  href="/aivision.html"
                  itemprop="item"
                  className="nopad-l flex items-center"
                >
                  <span itemprop="name">AIVISION</span>
                </a>
                <meta itemprop="position" content="3" />
              </li>
            </ol>
          </div>

          <div className="p-[15px] grid grid-cols-2 gap-[15px] rounded-[8px] bg-white">
            <div className="left">
              <div className="relative">
                <Swiper
                  spaceBetween={10}
                  navigation={true}
                  thumbs={{ swiper: thumbsSwiper }}
                  modules={[FreeMode, Navigation, Thumbs]}
                  className="swiper border border-[#B1B1B1 rounded-[12px]"
                  id="js-slider-big"
                >
                  <SwiperSlide>
                    <img src="/assets/images/big-product-detail.png" alt="" />
                  </SwiperSlide>

                  <SwiperSlide>
                    <img src="/assets/images/big-product-detail.jpg" alt="" />
                  </SwiperSlide>

                  <SwiperSlide>
                    <img src="/assets/images/big-product-detail-2.jpg" alt="" />
                  </SwiperSlide>

                  <SwiperSlide>
                    <img src="/assets/images/big-product-detail-3.jpg" alt="" />
                  </SwiperSlide>
                  <SwiperSlide>
                    <img src="/assets/images/big-product-detail-4.jpg" alt="" />
                  </SwiperSlide>
                </Swiper>
              </div>
              <div className="relative mt-[12px]">
                <Swiper
                  onSwiper={setThumbsSwiper}
                  spaceBetween={15}
                  slidesPerView={5}
                  navigation={{
                    prevEl: "#btn-slider-small .swiper-button-prev", // Link to the 'prev' button
                    nextEl: "#btn-slider-small .swiper-button-next", // Link to the 'next' button
                  }}
                  freeMode={true}
                  watchSlidesProgress={true}
                  modules={[FreeMode, Navigation, Thumbs]}
                  className="swiper"
                  id="js-slider-small"
                >
                  <SwiperSlide>
                    <img src="/assets/images/small-product-detail.png" alt="" />
                  </SwiperSlide>
                  <SwiperSlide>
                    <img src="/assets/images/small-product-detail.png" alt="" />
                  </SwiperSlide>
                  <SwiperSlide>
                    <img src="/assets/images/small-product-detail.png" alt="" />
                  </SwiperSlide>
                  <SwiperSlide>
                    <img src="/assets/images/small-product-detail.png" alt="" />
                  </SwiperSlide>
                  <SwiperSlide>
                    <img src="/assets/images/small-product-detail.png" alt="" />
                  </SwiperSlide>
                  <SwiperSlide>
                    <img src="/assets/images/small-product-detail.png" alt="" />
                  </SwiperSlide>
                  <SwiperSlide>
                    <img src="/assets/images/small-product-detail.png" alt="" />
                  </SwiperSlide>
                  <SwiperSlide>
                    <img src="/assets/images/small-product-detail.png" alt="" />
                  </SwiperSlide>
                </Swiper>
                <div className="btn-small" id="btn-slider-small">
                  <div className="swiper-button-next right-[-15px] w-[30px] h-[30px]"></div>
                  <div className="swiper-button-prev left-[-15px] w-[30px] h-[30px]"></div>
                </div>
              </div>
            </div>

            <div className="right">
              <h1 className="text-[24px] text-black mb-[5px]">
                Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10(15.6"
                FHD) - Hàng Chính Hãng
              </h1>
              <div className="flex items-center text-base">
                <div className="info-review flex items-center mr-[15px]">
                  <i className="icon-star star-small" />
                  <span className="ml-[5px] mt-[2px]">5/5</span>
                </div>
                <div className="info-view flex items-center mr-[15px]">
                  <i className="icon_2025 view" />
                  <span className="text-[#1877F2] ml-[5px]">120</span>
                </div>
                <div className="info-date flex items-center mr-[15px]">
                  <i className="icon_2025 time-big" />
                  <span className="text-[#1877F2] ml-[5px]">12/03/2025</span>
                </div>
                <a href="" className="info-share flex items-center">
                  <i className="icon_2025 share" />
                  <span className="ml-[5px] mt-[2px]">Chia sẻ</span>
                </a>
              </div>
              <div className="flex items-center mt-[5px] text-base">
                <div className="source-review flex items-centermr-[10px]">
                  <span>Reviews trên:</span>
                  <a href="" className="ml-[5px] text-[#1877F2]">
                    Internet
                  </a>
                  <p className="ml-[5px]">1233 đánh giá</p>
                </div>
                <div className="pl-[10px] ml-[10px] flex items-center border-l-[1.5px] border-[#000]">
                  <a href="" className="mr-[5px] text-[#462F91]">
                    BestPC
                  </a>
                  <p>12003 đánh giá</p>
                </div>
              </div>
              <div className="box-price flex items-center my-[10px]">
                <span className="mr-[10px]">Giá:</span>
                <b className="text-[#D80A00] text-[28px]">
                  9.000.000đ - 12.000.000đ
                </b>
              </div>

              <div className="total-shop flex items-center">
                <div className="box-shop">
                  <i className="icon_2025 shop" />
                </div>
                <p className="ml-[7px]">Có 12 cửa hàng bán</p>
              </div>

              <div className="box-summary mt-[15px]">
                <ul>
                  <li>
                    CPU: Intel Core i7-8750H ( 2.2 GHz - 4.1 GHz / 9MB / 6 nhân,
                    12 luồng )
                  </li>
                  <li>Màn hình: 15.6" ( 1920 x 1080 ) , không cảm ứng</li>
                  <li>RAM: 1 x 8GB DDR4 2666MHz</li>
                  <li>
                    Đồ họa: Intel UHD Graphics 630 / NVIDIA GeForce GTX 1050Ti
                    4GB GDDR5
                  </li>
                  <li>Lưu trữ: 128GB SSD M.2 NVMe / 1TB HDD 5400RPM</li>
                  <li>Hệ điều hành: Windows 10 Home SL 64-bit</li>
                  <li>Pin: 4 cell 64 Wh Pin liền</li>
                  <li>khối lượng: 2.5 kg</li>
                  <li>Cổng giao tiếp: 1x USB 2.0,</li>
                </ul>
              </div>

              <a
                href=""
                className="group mt-4 flex items-center justify-center w-ful py-[10px] border border-[#D3D3D3] rounded-[4px] text-center hover:bg-[var(--color-global)] hover:text-white"
              >
                <img
                  src="/assets/images/icon-file-save.png"
                  className="w-[18px] h-[24px] block group-hover:brightness-[0] group-hover:invert-[1]"
                  alt="save"
                />
                <b className="ml-[10px] text-base">Lưu sản phẩm lại xem sau</b>
              </a>
            </div>
          </div>
          {/* end thông tin sản phẩm */}

          <SupplierListBox />
          {/* end nhà cung cấp */}

          <MemberReview />
          {/* đánh giá thành viên bestpc */}

          <ProductReview />
          {/* <ProductReview /> */}
          {/*  đánh giá trên internet  */}
          <ProductDescription />
          {/* thông tin sản phẩm */}

          <div className="mt-5 bg-white rounded-[8px] p-[15px]">
            <div className="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
              <h3 className="text-xl font-bold">Sản phẩm tương tự</h3>
              <a
                href="javascript:void(0)"
                className="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group"
              >
                <span>Xem tất cả</span>
                <i className="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i>
              </a>
            </div>
            <div className="relative mt-[15px]">
              <Swiper
                slidesPerView={5}
                spaceBetween={15}
                navigation={{
                  prevEl: "#js-product-similar-btn .swiper-button-prev", // Link to the 'prev' button
                  nextEl: "#js-product-similar-btn .swiper-button-next", // Link to the 'next' button
                }}
                freeMode={true}
                watchSlidesProgress={true}
                modules={[FreeMode, Navigation, Thumbs]}
                className="product-list swiper relative"
              >
                <SwiperSlide>
                  <div className="product-item">
                    <a href="" className="product-image">
                      <img
                        src="/assets/images/box-image.png"
                        alt="Laptop Dell"
                      />
                    </a>
                    <div className="info-product">
                      <a href="" className="name-product line-clamp-2">
                        Laptop văn phòng Dell RAM 8G Core i7
                      </a>
                      <div className="summary line-clamp-1">
                        Intel Core i5 / 8GB / 256GB / SSD
                      </div>
                      <div className="locahost-pro flex items-center mb-[5px]">
                        <i className="icon_2025 map-3"></i>
                        <span className="text-[#595959] ml-[5px] mt-[3px]">
                          Quận Thanh Xuân
                        </span>
                      </div>
                      <div className="time-pro flex items-center mb-[5px]">
                        <i className="icon_2025 time-gray"></i>
                        <div className="flex items-center mt-[1px]">
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            11/04/2025
                          </span>
                          <span className="ml-[5px]">|</span>
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            Còn 01 ngày
                          </span>
                        </div>
                      </div>
                      <div className="price">15.000.000đ</div>
                      <div className="user-pro flex items-center">
                        <img
                          src="/assets/images/avartar.png"
                          className="w-[24px] h-[24px] block rounded-[50%]"
                          width="24px"
                          height="24px"
                          alt="avartar"
                        />
                        <b className="ml-[7px]">Thanh Mai</b>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="product-item">
                    <a href="" className="product-image">
                      <img
                        src="/assets/images/box-image.png"
                        alt="Laptop Dell"
                      />
                    </a>
                    <div className="info-product">
                      <a href="" className="name-product line-clamp-2">
                        Laptop văn phòng Dell RAM 8G Core i7
                      </a>
                      <div className="summary line-clamp-1">
                        Intel Core i5 / 8GB / 256GB / SSD
                      </div>
                      <div className="locahost-pro flex items-center mb-[5px]">
                        <i className="icon_2025 map-3"></i>
                        <span className="text-[#595959] ml-[5px] mt-[3px]">
                          Quận Thanh Xuân
                        </span>
                      </div>
                      <div className="time-pro flex items-center mb-[5px]">
                        <i className="icon_2025 time-gray"></i>
                        <div className="flex items-center mt-[1px]">
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            11/04/2025
                          </span>
                          <span className="ml-[5px]">|</span>
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            Còn 01 ngày
                          </span>
                        </div>
                      </div>
                      <div className="price">15.000.000đ</div>
                      <div className="user-pro flex items-center">
                        <img
                          src="/assets/images/avartar.png"
                          className="w-[24px] h-[24px] block rounded-[50%]"
                          width="24px"
                          height="24px"
                          alt="avartar"
                        />
                        <b className="ml-[7px]">Thanh Mai</b>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="product-item">
                    <a href="" className="product-image">
                      <img
                        src="/assets/images/box-image.png"
                        alt="Laptop Dell"
                      />
                    </a>
                    <div className="info-product">
                      <a href="" className="name-product line-clamp-2">
                        Laptop văn phòng Dell RAM 8G Core i7
                      </a>
                      <div className="summary line-clamp-1">
                        Intel Core i5 / 8GB / 256GB / SSD
                      </div>
                      <div className="locahost-pro flex items-center mb-[5px]">
                        <i className="icon_2025 map-3"></i>
                        <span className="text-[#595959] ml-[5px] mt-[3px]">
                          Quận Thanh Xuân
                        </span>
                      </div>
                      <div className="time-pro flex items-center mb-[5px]">
                        <i className="icon_2025 time-gray"></i>
                        <div className="flex items-center mt-[1px]">
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            11/04/2025
                          </span>
                          <span className="ml-[5px]">|</span>
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            Còn 01 ngày
                          </span>
                        </div>
                      </div>
                      <div className="price">15.000.000đ</div>
                      <div className="user-pro flex items-center">
                        <img
                          src="/assets/images/avartar.png"
                          className="w-[24px] h-[24px] block rounded-[50%]"
                          width="24px"
                          height="24px"
                          alt="avartar"
                        />
                        <b className="ml-[7px]">Thanh Mai</b>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="product-item">
                    <a href="" className="product-image">
                      <img
                        src="/assets/images/box-image.png"
                        alt="Laptop Dell"
                      />
                    </a>
                    <div className="info-product">
                      <a href="" className="name-product line-clamp-2">
                        Laptop văn phòng Dell RAM 8G Core i7
                      </a>
                      <div className="summary line-clamp-1">
                        Intel Core i5 / 8GB / 256GB / SSD
                      </div>
                      <div className="locahost-pro flex items-center mb-[5px]">
                        <i className="icon_2025 map-3"></i>
                        <span className="text-[#595959] ml-[5px] mt-[3px]">
                          Quận Thanh Xuân
                        </span>
                      </div>
                      <div className="time-pro flex items-center mb-[5px]">
                        <i className="icon_2025 time-gray"></i>
                        <div className="flex items-center mt-[1px]">
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            11/04/2025
                          </span>
                          <span className="ml-[5px]">|</span>
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            Còn 01 ngày
                          </span>
                        </div>
                      </div>
                      <div className="price">15.000.000đ</div>
                      <div className="user-pro flex items-center">
                        <img
                          src="/assets/images/avartar.png"
                          className="w-[24px] h-[24px] block rounded-[50%]"
                          width="24px"
                          height="24px"
                          alt="avartar"
                        />
                        <b className="ml-[7px]">Thanh Mai</b>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="product-item">
                    <a href="" className="product-image">
                      <img
                        src="/assets/images/box-image.png"
                        alt="Laptop Dell"
                      />
                    </a>
                    <div className="info-product">
                      <a href="" className="name-product line-clamp-2">
                        Laptop văn phòng Dell RAM 8G Core i7
                      </a>
                      <div className="summary line-clamp-1">
                        Intel Core i5 / 8GB / 256GB / SSD
                      </div>
                      <div className="locahost-pro flex items-center mb-[5px]">
                        <i className="icon_2025 map-3"></i>
                        <span className="text-[#595959] ml-[5px] mt-[3px]">
                          Quận Thanh Xuân
                        </span>
                      </div>
                      <div className="time-pro flex items-center mb-[5px]">
                        <i className="icon_2025 time-gray"></i>
                        <div className="flex items-center mt-[1px]">
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            11/04/2025
                          </span>
                          <span className="ml-[5px]">|</span>
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            Còn 01 ngày
                          </span>
                        </div>
                      </div>
                      <div className="price">15.000.000đ</div>
                      <div className="user-pro flex items-center">
                        <img
                          src="/assets/images/avartar.png"
                          className="w-[24px] h-[24px] block rounded-[50%]"
                          width="24px"
                          height="24px"
                          alt="avartar"
                        />
                        <b className="ml-[7px]">Thanh Mai</b>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="product-item">
                    <a href="" className="product-image">
                      <img
                        src="/assets/images/box-image.png"
                        alt="Laptop Dell"
                      />
                    </a>
                    <div className="info-product">
                      <a href="" className="name-product line-clamp-2">
                        Laptop văn phòng Dell RAM 8G Core i7
                      </a>
                      <div className="summary line-clamp-1">
                        Intel Core i5 / 8GB / 256GB / SSD
                      </div>
                      <div className="locahost-pro flex items-center mb-[5px]">
                        <i className="icon_2025 map-3"></i>
                        <span className="text-[#595959] ml-[5px] mt-[3px]">
                          Quận Thanh Xuân
                        </span>
                      </div>
                      <div className="time-pro flex items-center mb-[5px]">
                        <i className="icon_2025 time-gray"></i>
                        <div className="flex items-center mt-[1px]">
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            11/04/2025
                          </span>
                          <span className="ml-[5px]">|</span>
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            Còn 01 ngày
                          </span>
                        </div>
                      </div>
                      <div className="price">15.000.000đ</div>
                      <div className="user-pro flex items-center">
                        <img
                          src="/assets/images/avartar.png"
                          className="w-[24px] h-[24px] block rounded-[50%]"
                          width="24px"
                          height="24px"
                          alt="avartar"
                        />
                        <b className="ml-[7px]">Thanh Mai</b>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
              </Swiper>
              <div className="btn-slider" id="js-product-similar-btn">
                <div className="swiper-button-next right-[-15px]"></div>
                <div className="swiper-button-prev left-[-15px]"></div>
              </div>
            </div>
          </div>
          {/* sản phẩm tương tự */}

          <div className="mt-5 bg-white rounded-[8px] p-[15px]">
            <div className="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
              <h3 className="text-xl font-bold">Sản phẩm bạn có thể thích</h3>
              <a
                href="javascript:void(0)"
                className="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group"
              >
                <span>Xem tất cả</span>
                <i className="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i>
              </a>
            </div>
            <div className="relative mt-[15px]">
              <Swiper
                slidesPerView={5}
                spaceBetween={15}
                navigation={{
                  prevEl: "#js-product-like-btn .swiper-button-prev", // Link to the 'prev' button
                  nextEl: "#js-product-like-btn .swiper-button-next", // Link to the 'next' button
                }}
                freeMode={true}
                watchSlidesProgress={true}
                modules={[FreeMode, Navigation, Thumbs]}
                className="product-list swiper relative"
              >
                <SwiperSlide>
                  <div className="product-item">
                    <a href="" className="product-image">
                      <img
                        src="/assets/images/box-image.png"
                        alt="Laptop Dell"
                      />
                    </a>
                    <div className="info-product">
                      <a href="" className="name-product line-clamp-2">
                        Laptop văn phòng Dell RAM 8G Core i7
                      </a>
                      <div className="summary line-clamp-1">
                        Intel Core i5 / 8GB / 256GB / SSD
                      </div>
                      <div className="locahost-pro flex items-center mb-[5px]">
                        <i className="icon_2025 map-3"></i>
                        <span className="text-[#595959] ml-[5px] mt-[3px]">
                          Quận Thanh Xuân
                        </span>
                      </div>
                      <div className="time-pro flex items-center mb-[5px]">
                        <i className="icon_2025 time-gray"></i>
                        <div className="flex items-center mt-[1px]">
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            11/04/2025
                          </span>
                          <span className="ml-[5px]">|</span>
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            Còn 01 ngày
                          </span>
                        </div>
                      </div>
                      <div className="price">15.000.000đ</div>
                      <div className="user-pro flex items-center">
                        <img
                          src="/assets/images/avartar.png"
                          className="w-[24px] h-[24px] block rounded-[50%]"
                          width="24px"
                          height="24px"
                          alt="avartar"
                        />
                        <b className="ml-[7px]">Thanh Mai</b>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="product-item">
                    <a href="" className="product-image">
                      <img
                        src="/assets/images/box-image.png"
                        alt="Laptop Dell"
                      />
                    </a>
                    <div className="info-product">
                      <a href="" className="name-product line-clamp-2">
                        Laptop văn phòng Dell RAM 8G Core i7
                      </a>
                      <div className="summary line-clamp-1">
                        Intel Core i5 / 8GB / 256GB / SSD
                      </div>
                      <div className="locahost-pro flex items-center mb-[5px]">
                        <i className="icon_2025 map-3"></i>
                        <span className="text-[#595959] ml-[5px] mt-[3px]">
                          Quận Thanh Xuân
                        </span>
                      </div>
                      <div className="time-pro flex items-center mb-[5px]">
                        <i className="icon_2025 time-gray"></i>
                        <div className="flex items-center mt-[1px]">
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            11/04/2025
                          </span>
                          <span className="ml-[5px]">|</span>
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            Còn 01 ngày
                          </span>
                        </div>
                      </div>
                      <div className="price">15.000.000đ</div>
                      <div className="user-pro flex items-center">
                        <img
                          src="/assets/images/avartar.png"
                          className="w-[24px] h-[24px] block rounded-[50%]"
                          width="24px"
                          height="24px"
                          alt="avartar"
                        />
                        <b className="ml-[7px]">Thanh Mai</b>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="product-item">
                    <a href="" className="product-image">
                      <img
                        src="/assets/images/box-image.png"
                        alt="Laptop Dell"
                      />
                    </a>
                    <div className="info-product">
                      <a href="" className="name-product line-clamp-2">
                        Laptop văn phòng Dell RAM 8G Core i7
                      </a>
                      <div className="summary line-clamp-1">
                        Intel Core i5 / 8GB / 256GB / SSD
                      </div>
                      <div className="locahost-pro flex items-center mb-[5px]">
                        <i className="icon_2025 map-3"></i>
                        <span className="text-[#595959] ml-[5px] mt-[3px]">
                          Quận Thanh Xuân
                        </span>
                      </div>
                      <div className="time-pro flex items-center mb-[5px]">
                        <i className="icon_2025 time-gray"></i>
                        <div className="flex items-center mt-[1px]">
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            11/04/2025
                          </span>
                          <span className="ml-[5px]">|</span>
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            Còn 01 ngày
                          </span>
                        </div>
                      </div>
                      <div className="price">15.000.000đ</div>
                      <div className="user-pro flex items-center">
                        <img
                          src="/assets/images/avartar.png"
                          className="w-[24px] h-[24px] block rounded-[50%]"
                          width="24px"
                          height="24px"
                          alt="avartar"
                        />
                        <b className="ml-[7px]">Thanh Mai</b>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="product-item">
                    <a href="" className="product-image">
                      <img
                        src="/assets/images/box-image.png"
                        alt="Laptop Dell"
                      />
                    </a>
                    <div className="info-product">
                      <a href="" className="name-product line-clamp-2">
                        Laptop văn phòng Dell RAM 8G Core i7
                      </a>
                      <div className="summary line-clamp-1">
                        Intel Core i5 / 8GB / 256GB / SSD
                      </div>
                      <div className="locahost-pro flex items-center mb-[5px]">
                        <i className="icon_2025 map-3"></i>
                        <span className="text-[#595959] ml-[5px] mt-[3px]">
                          Quận Thanh Xuân
                        </span>
                      </div>
                      <div className="time-pro flex items-center mb-[5px]">
                        <i className="icon_2025 time-gray"></i>
                        <div className="flex items-center mt-[1px]">
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            11/04/2025
                          </span>
                          <span className="ml-[5px]">|</span>
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            Còn 01 ngày
                          </span>
                        </div>
                      </div>
                      <div className="price">15.000.000đ</div>
                      <div className="user-pro flex items-center">
                        <img
                          src="/assets/images/avartar.png"
                          className="w-[24px] h-[24px] block rounded-[50%]"
                          width="24px"
                          height="24px"
                          alt="avartar"
                        />
                        <b className="ml-[7px]">Thanh Mai</b>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="product-item">
                    <a href="" className="product-image">
                      <img
                        src="/assets/images/box-image.png"
                        alt="Laptop Dell"
                      />
                    </a>
                    <div className="info-product">
                      <a href="" className="name-product line-clamp-2">
                        Laptop văn phòng Dell RAM 8G Core i7
                      </a>
                      <div className="summary line-clamp-1">
                        Intel Core i5 / 8GB / 256GB / SSD
                      </div>
                      <div className="locahost-pro flex items-center mb-[5px]">
                        <i className="icon_2025 map-3"></i>
                        <span className="text-[#595959] ml-[5px] mt-[3px]">
                          Quận Thanh Xuân
                        </span>
                      </div>
                      <div className="time-pro flex items-center mb-[5px]">
                        <i className="icon_2025 time-gray"></i>
                        <div className="flex items-center mt-[1px]">
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            11/04/2025
                          </span>
                          <span className="ml-[5px]">|</span>
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            Còn 01 ngày
                          </span>
                        </div>
                      </div>
                      <div className="price">15.000.000đ</div>
                      <div className="user-pro flex items-center">
                        <img
                          src="/assets/images/avartar.png"
                          className="w-[24px] h-[24px] block rounded-[50%]"
                          width="24px"
                          height="24px"
                          alt="avartar"
                        />
                        <b className="ml-[7px]">Thanh Mai</b>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="product-item">
                    <a href="" className="product-image">
                      <img
                        src="/assets/images/box-image.png"
                        alt="Laptop Dell"
                      />
                    </a>
                    <div className="info-product">
                      <a href="" className="name-product line-clamp-2">
                        Laptop văn phòng Dell RAM 8G Core i7
                      </a>
                      <div className="summary line-clamp-1">
                        Intel Core i5 / 8GB / 256GB / SSD
                      </div>
                      <div className="locahost-pro flex items-center mb-[5px]">
                        <i className="icon_2025 map-3"></i>
                        <span className="text-[#595959] ml-[5px] mt-[3px]">
                          Quận Thanh Xuân
                        </span>
                      </div>
                      <div className="time-pro flex items-center mb-[5px]">
                        <i className="icon_2025 time-gray"></i>
                        <div className="flex items-center mt-[1px]">
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            11/04/2025
                          </span>
                          <span className="ml-[5px]">|</span>
                          <span className="text-[#595959] ml-[5px] mt-[3px]">
                            Còn 01 ngày
                          </span>
                        </div>
                      </div>
                      <div className="price">15.000.000đ</div>
                      <div className="user-pro flex items-center">
                        <img
                          src="/assets/images/avartar.png"
                          className="w-[24px] h-[24px] block rounded-[50%]"
                          width="24px"
                          height="24px"
                          alt="avartar"
                        />
                        <b className="ml-[7px]">Thanh Mai</b>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
              </Swiper>
              <div className="btn-slider" id="js-product-like-btn">
                <div className="swiper-button-next right-[-15px]"></div>
                <div className="swiper-button-prev left-[-15px]"></div>
              </div>
            </div>
          </div>
          {/* sản phẩm yêu thích */}
        </div>
      </div>
    </>
  );
}