import { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode, Navigation, Thumbs } from "swiper/modules";

export function DetailBuildpc() {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);

  return (
    <div className="page-buildpc 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="/" itemprop="item" className="nopad-l flex items-center">
                <span itemprop="name">Tạo máy tính riêng của bạn</span>
              </a>{" "}
              <i className="icon_2025 angle-right  ml-[12px]"></i>
              <meta itemprop="position" content="2" />
            </li>
            <li
              itemprop="itemListElement"
              itemscope
              itemtype="http://schema.org/ListItem"
              className="flex items-center pr-[12px]"
            >
              <a href="/" itemprop="item" className="nopad-l flex items-center">
                <span itemprop="name">Tham khảo giá sản phẩm</span>
              </a>
              <meta itemprop="position" content="3" />
            </li>
          </ol>
        </div>

        <h1 className="text-2xl mb-5 block font-bold">
          Tham khảo giá sản phẩm
        </h1>

        <div className="grid grid-cols-3 gap-[20px] mb-[30px]">
          <div className="col-span-1 p-[15px] rounded-[8px] border border-[#d7d7d7]">
            <Swiper
              spaceBetween={10}
              navigation={true}
              thumbs={{ swiper: thumbsSwiper }}
              modules={[FreeMode, Navigation, Thumbs]}
              className="swiper"
              id="js-slider-build-big"
            >
              <SwiperSlide>
                <img
                  src="/assets/images/big-product-detail.png"
                  className="block w-full h-[400px] object-contain"
                  alt=""
                />
              </SwiperSlide>
              <SwiperSlide>
                <img
                  src="/assets/images/big-product-detail.png"
                  className="block w-full h-[400px] object-contain"
                  alt=""
                />
              </SwiperSlide>
              <SwiperSlide>
                <img
                  src="/assets/images/big-product-detail.png"
                  className="block w-full h-[400px] object-contain"
                  alt=""
                />
              </SwiperSlide>
              <SwiperSlide>
                <img
                  src="/assets/images/big-product-detail.png"
                  className="block w-full h-[400px] object-contain"
                  alt=""
                />
              </SwiperSlide>
            </Swiper>
            <div className="relative mt-[12px] w-[80%] mx-[auto]">
              <Swiper
                onSwiper={setThumbsSwiper}
                spaceBetween={10}
                slidesPerView={3}
                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-build-small"
              >
                <SwiperSlide>
                  <img
                    src="/assets/images/small-product-detail.png"
                    className="w-full block h-[80px] object-contain "
                    alt=""
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                    src="/assets/images/small-product-detail.png"
                    className="w-full block h-[80px] object-contain "
                    alt=""
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                    src="/assets/images/small-product-detail.png"
                    className="w-full block h-[80px] object-contain "
                    alt=""
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                    src="/assets/images/small-product-detail.png"
                    className="w-full block h-[80px] object-contain "
                    alt=""
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                    src="/assets/images/small-product-detail.png"
                    className="w-full block h-[80px] object-contain "
                    alt=""
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                    src="/assets/images/small-product-detail.png"
                    className="w-full block h-[80px] object-contain "
                    alt=""
                  />
                </SwiperSlide>
              </Swiper>
              <div className="btn-small" id="btn-slider-small">
                <div className="swiper-button-next right-[-15px] w-[25px]  h-[25px]"></div>
                <div className="swiper-button-prev left-[-15px] w-[25px]  h-[25px] text-sm"></div>
              </div>
            </div>

            <div className="box-review mt-3">
              <div className="flex items-center justify-center">
                <b>Người đánh giá</b>
                <div className="flex items-center ml-[10px]">
                  (40 ratings, 4.9 <i className="icon-star star-small ml-1"></i>
                  )
                </div>
              </div>
              <div className="">
                <div className="flex items-center justify-between gap-[10px] w-full mb-1">
                  <p className="w-[11%] text-[var(--color-hover)] font-bold">
                    5 sao
                  </p>
                  <div className="relative w-[79%]">
                    <div className="block w-full h-[11px] bg-gray-500"></div>
                    <div className="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
                  </div>
                  <p className="text-[var(--color-hover)] w-[9%] font-bold">
                    97%
                  </p>
                </div>
                <div className="flex items-center justify-between gap-[10px] w-full mb-1">
                  <p className="w-[11%] text-[var(--color-hover)] font-bold">
                    4 sao
                  </p>
                  <div className="relative w-[79%]">
                    <div className="block w-full h-[11px] bg-gray-500"></div>
                    <div className="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
                  </div>
                  <p className="text-[var(--color-hover)] w-[9%] font-bold">
                    97%
                  </p>
                </div>
                <div className="flex items-center justify-between gap-[10px] w-full mb-1">
                  <p className="w-[11%] text-[var(--color-hover)] font-bold">
                    3 sao
                  </p>
                  <div className="relative w-[79%]">
                    <div className="block w-full h-[11px] bg-gray-500"></div>
                    <div className="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
                  </div>
                  <p className="text-[var(--color-hover)] w-[9%] font-bold">
                    97%
                  </p>
                </div>
                <div className="flex items-center justify-between gap-[10px] w-full mb-1">
                  <p className="w-[11%] text-[var(--color-hover)] font-bold">
                    2 sao
                  </p>
                  <div className="relative w-[79%]">
                    <div className="block w-full h-[11px] bg-gray-500"></div>
                    <div className="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
                  </div>
                  <p className="text-[var(--color-hover)] w-[9%] font-bold">
                    97%
                  </p>
                </div>
                <div className="flex items-center justify-between gap-[10px] w-full mb-1">
                  <p className="w-[11%] text-[var(--color-hover)] font-bold">
                    1 sao
                  </p>
                  <div className="relative w-[79%]">
                    <div className="block w-full h-[11px] bg-gray-500"></div>
                    <div className="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
                  </div>
                  <p className="text-[var(--color-hover)] w-[9%] font-bold">
                    97%
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div className="col-span-2">
            <div className="grid grid-cols-7 gap-[5px] items-center pb-2.5 border-b-[1px] border-[#ababab]">
              <b>Nhà cung cấp</b>
              <b>Giá gốc</b>
              <b>Khuyến mãi</b>
              <b>Tình trạng</b>
              <b>Giao hàng</b>
              <b className="col-span-2">Thành tiền</b>
            </div>
            <div className="list">
              <div className="item grid grid-cols-7 items-center gap-[5px] py-2.5 border-b-[1px] border-[#ebebeb]">
                <a href="" className="block">
                  <img
                    src="/assets/images/logo-hacom.png"
                    width="100%"
                    height="100%"
                    className="w-full block h-[28px] object-contain"
                    alt=""
                  />
                </a>
                <div className="price font-bold">3.700.000Vnđ</div>
                <div className="saleoff text-center font-bold">20%</div>
                <div className="status text-blue-500 font-bold">Còn hàng</div>
                <div className="ship underline">Liên hệ</div>
                <div className="flex items-center justify-between col-span-2">
                  <div className="total-price font-bold">3.000.000Vnđ</div>
                  <a
                    href=""
                    className="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800"
                  >
                    Mua ngay
                  </a>
                </div>
              </div>
              <div className="item grid grid-cols-7 items-center gap-[5px] py-2.5 border-b-[1px] border-[#ebebeb]">
                <a href="" className="block">
                  <img
                    src="/assets/images/logo-hacom.png"
                    width="100%"
                    height="100%"
                    className="w-full block h-[28px] object-contain"
                    alt=""
                  />
                </a>
                <div className="price font-bold">3.700.000Vnđ</div>
                <div className="saleoff text-center font-bold">20%</div>
                <div className="status text-red-500 font-bold">Còn hàng</div>
                <div className="ship underline text-green-500">free</div>
                <div className="flex items-center justify-between col-span-2">
                  <div className="total-price font-bold">3.000.000Vnđ</div>
                  <a
                    href=""
                    className="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800"
                  >
                    Mua ngay
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-3 gap-[20px]">
          <div className="col-span-1">
            <h3 className="title text-2xl font-bold pb-2.5 border-b-[1px] border-[#ababab]">
              Thông số kỹ thuật
            </h3>
            <div>
              <div className="item py-2 border-b-[1px] border-neutral-200">
                <b>Manufacturer</b>
                <p>AMD</p>
              </div>
              <div className="item py-2 border-b-[1px] border-neutral-200">
                <b>Part #</b>
                <ul>
                  <li>100-1000001084WOF</li>
                  <li>AMD Ryzen 7 9800X3D</li>
                  <li>100-100001084WOF</li>
                </ul>
              </div>
              <div className="item py-2 border-b-[1px] border-neutral-200">
                <b>Series</b>
                <p>AMD Ryzen 7</p>
              </div>
              <div className="item py-2 border-b-[1px] border-neutral-200">
                <b>Microarchitecture</b>
                <p>Zen 5</p>
              </div>
              <div className="item py-2 border-b-[1px] border-neutral-200">
                <b>Core Family</b>
                <p>Granite Ridge</p>
              </div>
              <div className="item py-2 border-b-[1px] border-neutral-200">
                <b>Socket</b>
                <p>AM5</p>
              </div>
              <div className="item py-2 border-b-[1px] border-neutral-200">
                <b>Core</b>
                <p>8</p>
              </div>
              <div className="item py-2 border-b-[1px] border-neutral-200">
                <b>Thread Count</b>
                <p>16</p>
              </div>
              <div className="item py-2 border-b-[1px] border-neutral-200">
                <b>Performance Core Clock</b>
                <p>4.7 GHz</p>
              </div>
              <div className="item py-2 border-b-[1px] border-neutral-200">
                <b>Performance Core Boost Clock</b>
                <p>5.2 GHz</p>
              </div>
              <div className="item py-2 border-b-[1px] border-neutral-200">
                <b>L2 Cache</b>
                <p>8 MB</p>
              </div>
              <div className="item py-2 border-b-[1px] border-neutral-200">
                <b>L3 Cache</b>
                <p>96 MB</p>
              </div>
              <div className="item py-2 border-b-[1px] border-neutral-200">
                <b>TDP</b>
                <p>120 W</p>
              </div>
              <div className="item py-2">
                <b>Integrated Graphics</b>
                <p>Radeon</p>
              </div>
            </div>
          </div>
          <div className="col-span-2">
            <div className="flex items-center justify-between pb-2.5 border-b-[1px] border-[#ababab]">
              <h3 className="title text-2xl font-bold">Đánh giá</h3>
              <a
                href=""
                className="inline-block py-1 px-5 bg-blue-600 text-white font-bold rounded-[4px] hover:bg-blue-800"
              >
                Xem tất cả bình luận
              </a>
            </div>
            <div className="list mt-3">
              <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
                <div className="w-[80px] mr-[20px]">
                  <img
                    src="/assets/images/avartar-review-1.png"
                    width="75px"
                    height="75px"
                    alt="avartar"
                  />
                  <div className="mt-[10px]">
                    <i className="icon-star star5"></i>
                  </div>
                </div>
                <div className="w-[calc(100%-100px)]">
                  <b className="mb-[10px]">Dino</b>
                  <p className="mb-[10px] block text-[#747474]">
                    10:00pm 20/02/2025
                  </p>
                  <p className="content mb-[5px]">
                    Lorem Ipsum is simply dummy text of the printing and
                    typesetting industry. Lorem Ipsum has been the industry's
                    standard dummy text ever since the 1500s, when an unknown
                    printer took a galley of type and scrambled it to make a
                    type specimen book. I
                  </p>
                  <div className="btn flex items-center">
                    <div className="flex items-center mr-[10px]">
                      <b className="mr-[5px]">120</b>
                      <i className="icon_2025 view"></i>
                    </div>
                    <div className="flex items-center">
                      <b className="mr-[5px]">120</b>
                      <i className="icon_2025 comment"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
