import { formatPrice } from "@/lib/utils";
import ProductImage from "./images";
import Static from "./static";
import ProductDescription from "./description"
import Comment from "./comments";
import Review from "./reviews";
import ProductSpec from "./specifications";
import Article from "./articles";
import ProductPrice from "./price";
import ProductOffer from "./offer";
import Buttons from "./buttons";
import ProductSummary from "./summary";

import { ReviewData } from "@/data/reviews";

export default async function ProductDetail({ slug }: any) {

    const imageList = {
        productImage    : slug.productImage, 
        imageCollection : slug.imageCollection
    }

    const priceData = {
        price       : slug.price,
        marketPrice : slug.marketPrice,
        deal_list   : slug.deal_list,
        price_off   : slug.price_off,
        sale_rules  : slug.sale_rules,
        hasVAT      : slug.hasVAT,
        warranty    : slug.warranty,
        quantity    : slug.quantity
    }
    
    console.log(slug)

    return (
        <>
            <div className="product-detail-page container">
                <div className="pd-info-container static bg-white rounded-[24px] p-6 mb-6">
                    <h1 className="leading-8 text-[#004BA4] text-24 mb-6 font-600">
                        {slug.productName}
                    </h1>

                    <div className="gap-6 flex flex-wrap items-start leading-[18px]">
                        <div className="col-left-group w-[424px] sticky top-[90px]">
                            <ProductImage data={imageList} />
                        </div>

                        <div className="col-middle-group w-[464px]">

                            <div className="pb-3 mb-3 border-b border-[#DEE4EC] flex flex-wrap items-center gap-2">
                                <button type="button" className="m-0 flex items-center gap-1">
                                    <i className={`star star-${ReviewData.summary.avgRate}`} />
                                    <span className="font-500"> ({ReviewData.summary.total}) </span>
                                </button>

                                <i className="w-[1px] h-4 bg-[#DEE4EC]" />

                                <p className="m-0">
                                    Lượt xem: 
                                    <span className="text-[#004BA4] font-500">{formatPrice(slug.visit)}</span>
                                </p>

                                <i className="w-[1px] h-4 bg-[#DEE4EC]" />

                                <p className="m-0">
                                    Tình trạng: 
                                    <span
                                        dangerouslySetInnerHTML={{
                                            __html: slug.quantity > 0
                                            ? '<span class="font-500 text-[#00AD4F]">Còn hàng</span>'
                                            : '<span class="font-500 red">Liên hệ</span>'
                                        }}
                                    />
                                </p>
                            </div>
                            
                            { slug.productSummary &&
                                <ProductSummary item={slug.productSummary} />
                            }

                            <ProductPrice item={priceData} />
                            
                            <ProductOffer item={slug.specialOffer}/>                            

                            <Buttons item={slug.productId} />

                            <p className="m-0 flex items-center gap-3 text-16 leading-[22px]">
                                <i className="icons icon-truck-2 !w-6" />
                                <span> Miễn phí giao hàng trên toàn quốc </span>
                            </p>
                        </div>

                        <div className="col-right-group w-[264px] sticky top-[90px]">
                            <Static />
                        </div>
                    </div>
                </div>

                <div className="pd-content-container flex flex-wrap items-baseline gap-6">
                    <div className="col-left w-[784px]">
                        { slug.productDescription && 
                            <ProductDescription 
                                name={slug.productName} 
                                description={slug.productDescription} 
                            />
                        }
                        
                        <div className="pd-comment-container bg-white mb-6 p-8 pt-6 rounded-[24px] text-16 leading-[22px]">
                            <p className="leading-[31px] font-600 text-24 mb-4 pb-4">
                                Đánh giá và bình luận
                            </p>

                            <Review item={ReviewData}/>

                            <Comment />
                        </div>
                    </div>
                    
                    <div className="col-right w-[440px]">
                        {slug.productSpec && 
                            <ProductSpec item={slug.productSpec} />
                        }
                        
                        { slug.related['article-article'].length > 0 && 
                            <Article item={ slug.related['article-article'] } />
                        }
                    </div>
                </div>

                {/* Sản phẩm tương tự + Sản phẩm đã xem */}
                <div className="pd-product-container bg-white px-6 py-8 rounded-[24px]">
                    <div className="pd-tab-group relative flex mb-8 border-b border-[#DEE4EC] font-600 text-24 gap-10 leading-[31px] pb-5">
                        <button type="button" aria-label="tab" className="js-pd-tab">
                            Sản phẩm tương tự
                        </button>

                        <button type="button" aria-label="tab" className="js-pd-tab">
                            Sản phẩm đã xem
                        </button>
                    </div>
                    
                    <div className="relative z-[1] bg-white relative min-h-[300px] js-product-holder">
                        <div className="swiper overflow-hidden">
                            <div className="swiper-wrapper">
                                <div className="swiper-slide">
                                    <div className="p-item">
                                        <a href="" className="p-img">
                                            <img
                                                src="images/product-1.jpg"
                                                alt=""
                                                width={250}
                                                height={250}
                                            />
                                        </a>
                                        <div className="p-text">
                                            <div className="p-price-group">
                                                <del>52.000.000 đ</del>
                                                <span className="p-discount">-10%</span>
                                                <p className="p-price">22.000.000 đ</p>
                                            </div>
                                            <a href="" className="p-name">
                                                <h3>
                                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                                    Suscipit quos obcaecati totam, atque vel
                                                </h3>
                                            </a>
                                            <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
                                                <div>
                                                    <p className="m-0 text-[#00AD4F] flex items-center gap-1">
                                                        <i className="bx bx-check-circle text-18 w-[18px]" />
                                                        <span>Sẵn hàng</span>
                                                    </p>
                                                    <p className="m-0 text-[#E16B10] flex items-center gap-1">
                                                        <i className="bx bx-gift text-18 w-[18px]" />
                                                        <span>Quà tặng</span>
                                                    </p>
                                                </div>
                                                <button
                                                    type="button"
                                                    className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
                                                    aria-label="Mua"
                                                />
                                            </div>
                                        </div>
                                        <div className="p-tooltip hidden">
                                            <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
                                                <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
                                                    [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
                                                    3060 12GB
                                                </p>
                                                <div className="p-4 tooltip-content">
                                                    <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
                                                        <p className="m-0 flex items-center flex-wrap gap-1">
                                                            <b className="font-600">Giá bán:</b>
                                                            <b className="font-600 text-[#FF4E2A] text-18">
                                                                48.990.000 đ
                                                            </b>
                                                            <del className="text-[#A0A5AC] font-300">
                                                                52.000.000 đ
                                                            </del>
                                                            <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
                                                                -6%
                                                            </span>
                                                        </p>
                                                        <p className="m-0">
                                                            <b className="font-600">Bảo hành:</b>
                                                            <span>Theo từng linh kiện</span>
                                                        </p>
                                                    </div>
                                                    <div className="last:mb-0 mb-6 px-1">
                                                        <p className="text-16 font-600 flex items-center leading-6 mb-2">
                                                            <i className="icons icon-screen" />
                                                            <span>Thông số sản phẩm</span>
                                                        </p>
                                                        <div className="tooltip-spec">
                                                            <div className="item">
                                                                CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
                                                                THREAD
                                                            </div>
                                                            <div className="item">
                                                                RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
                                                            </div>
                                                            <div className="item">
                                                                VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
                                                        <p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
                                                            <i className="icons icon-gift" />
                                                            <span>Khuyến mại hấp dẫn</span>
                                                        </p>
                                                        <div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
                                                            <div className="item">
                                                                <p>
                                                                    <span style={{ color: "red", fontSize: "12pt" }}>
                                                                        <strong>
                                                                            ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành
                                                                            Hà Nội và Hồ Chí Minh)
                                                                        </strong>
                                                                    </span>
                                                                </p>
                                                            </div>
                                                            <div className="item">
                                                                <p>
                                                                    <span style={{ color: "red", fontSize: "12pt" }}>
                                                                        <strong>
                                                                            ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
                                                                        </strong>
                                                                    </span>
                                                                </p>
                                                            </div>
                                                            <div className="item">
                                                                <p>
                                                                    <span style={{ color: "red", fontSize: "12pt" }}>
                                                                        <strong>
                                                                            ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
                                                                        </strong>
                                                                    </span>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="swiper-slide">
                                    <div className="p-item">
                                        <a href="" className="p-img">
                                            <img
                                                src="images/product-2.jpg"
                                                alt=""
                                                width={250}
                                                height={250}
                                            />
                                        </a>
                                        <div className="p-text">
                                            <div className="p-price-group">
                                                <p className="p-price">22.000.000 đ</p>
                                            </div>
                                            <a href="" className="p-name">
                                                <h3>
                                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                                    Suscipit quos obcaecati totam, atque vel
                                                </h3>
                                            </a>
                                            <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
                                                <div>
                                                    <p className="m-0 red flex items-center gap-1">
                                                        <i className="bx bxs-phone text-18 w-[18px]" />
                                                        <span>Liên hệ</span>
                                                    </p>
                                                </div>
                                                <button
                                                    type="button"
                                                    className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
                                                    aria-label="Mua"
                                                />
                                            </div>
                                        </div>
                                        <div className="p-tooltip hidden">
                                            <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
                                                <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
                                                    [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
                                                    3060 12GB
                                                </p>
                                                <div className="p-4 tooltip-content">
                                                    <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
                                                        <p className="m-0 flex items-center flex-wrap gap-1">
                                                            <b className="font-600">Giá bán:</b>
                                                            <b className="font-600 text-[#FF4E2A] text-18">
                                                                48.990.000 đ
                                                            </b>
                                                            <del className="text-[#A0A5AC] font-300">
                                                                52.000.000 đ
                                                            </del>
                                                            <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
                                                                -6%
                                                            </span>
                                                        </p>
                                                        <p className="m-0">
                                                            <b className="font-600">Bảo hành:</b>
                                                            <span>Theo từng linh kiện</span>
                                                        </p>
                                                    </div>
                                                    <div className="last:mb-0 mb-6 px-1">
                                                        <p className="text-16 font-600 flex items-center leading-6 mb-2">
                                                            <i className="icons icon-screen" />
                                                            <span>Thông số sản phẩm</span>
                                                        </p>
                                                        <div className="tooltip-spec">
                                                            <div className="item">
                                                                CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
                                                                THREAD
                                                            </div>
                                                            <div className="item">
                                                                RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
                                                            </div>
                                                            <div className="item">
                                                                VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="swiper-slide">
                                    <div className="p-item">
                                        <a href="" className="p-img">
                                            <img
                                                src="images/product-3.jpg"
                                                alt=""
                                                width={250}
                                                height={250}
                                            />
                                        </a>
                                        <div className="p-text">
                                            <div className="p-price-group">
                                                <del>52.000.000 đ</del>
                                                <span className="p-discount">-10%</span>
                                                <p className="p-price">22.000.000 đ</p>
                                            </div>
                                            <a href="" className="p-name">
                                                <h3>
                                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                                    Suscipit quos obcaecati totam, atque vel
                                                </h3>
                                            </a>
                                            <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
                                                <div>
                                                    <p className="m-0 red flex items-center gap-1">
                                                        <i className="bx bxs-phone text-18 w-[18px]" />
                                                        <span>Liên hệ</span>
                                                    </p>
                                                    <p className="m-0 text-[#E16B10] flex items-center gap-1">
                                                        <i className="bx bx-gift text-18 w-[18px]" />
                                                        <span>Quà tặng</span>
                                                    </p>
                                                </div>
                                                <button
                                                    type="button"
                                                    className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
                                                    aria-label="Mua"
                                                />
                                            </div>
                                        </div>
                                        <div className="p-tooltip hidden">
                                            <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
                                                <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
                                                    [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
                                                    3060 12GB
                                                </p>
                                                <div className="p-4 tooltip-content">
                                                    <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
                                                        <p className="m-0 flex items-center flex-wrap gap-1">
                                                            <b className="font-600">Giá bán:</b>
                                                            <b className="font-600 text-[#FF4E2A] text-18">
                                                                48.990.000 đ
                                                            </b>
                                                            <del className="text-[#A0A5AC] font-300">
                                                                52.000.000 đ
                                                            </del>
                                                            <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
                                                                -6%
                                                            </span>
                                                        </p>
                                                        <p className="m-0">
                                                            <b className="font-600">Bảo hành:</b>
                                                            <span>Theo từng linh kiện</span>
                                                        </p>
                                                    </div>
                                                    <div className="last:mb-0 mb-6 px-1">
                                                        <p className="text-16 font-600 flex items-center leading-6 mb-2">
                                                            <i className="icons icon-screen" />
                                                            <span>Thông số sản phẩm</span>
                                                        </p>
                                                        <div className="tooltip-spec">
                                                            <div className="item">
                                                                CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
                                                                THREAD
                                                            </div>
                                                            <div className="item">
                                                                RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
                                                            </div>
                                                            <div className="item">
                                                                VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
                                                        <p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
                                                            <i className="icons icon-gift" />
                                                            <span>Khuyến mại hấp dẫn</span>
                                                        </p>
                                                        <div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
                                                            <div className="item">
                                                                <p>
                                                                    <span style={{ color: "red", fontSize: "12pt" }}>
                                                                        <strong>
                                                                            ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành
                                                                            Hà Nội và Hồ Chí Minh)
                                                                        </strong>
                                                                    </span>
                                                                </p>
                                                            </div>
                                                            <div className="item">
                                                                <p>
                                                                    <span style={{ color: "red", fontSize: "12pt" }}>
                                                                        <strong>
                                                                            ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
                                                                        </strong>
                                                                    </span>
                                                                </p>
                                                            </div>
                                                            <div className="item">
                                                                <p>
                                                                    <span style={{ color: "red", fontSize: "12pt" }}>
                                                                        <strong>
                                                                            ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
                                                                        </strong>
                                                                    </span>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="swiper-slide">
                                    <div className="p-item">
                                        <a href="" className="p-img">
                                            <img
                                                src="images/product-4.jpg"
                                                alt=""
                                                width={250}
                                                height={250}
                                            />
                                        </a>
                                        <div className="p-text">
                                            <div className="p-price-group">
                                                <del>52.000.000 đ</del>
                                                <span className="p-discount">-10%</span>
                                                <p className="p-price">22.000.000 đ</p>
                                            </div>
                                            <a href="" className="p-name">
                                                <h3>
                                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                                    Suscipit quos obcaecati totam, atque vel
                                                </h3>
                                            </a>
                                            <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
                                                <div>
                                                    <p className="m-0 text-[#00AD4F] flex items-center gap-1">
                                                        <i className="bx bx-check-circle text-18 w-[18px]" />
                                                        <span>Sẵn hàng</span>
                                                    </p>
                                                </div>
                                                <button
                                                    type="button"
                                                    className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
                                                    aria-label="Mua"
                                                />
                                            </div>
                                        </div>
                                        <div className="p-tooltip hidden">
                                            <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
                                                <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
                                                    [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
                                                    3060 12GB
                                                </p>
                                                <div className="p-4 tooltip-content">
                                                    <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
                                                        <p className="m-0 flex items-center flex-wrap gap-1">
                                                            <b className="font-600">Giá bán:</b>
                                                            <b className="font-600 text-[#FF4E2A] text-18">
                                                                48.990.000 đ
                                                            </b>
                                                            <del className="text-[#A0A5AC] font-300">
                                                                52.000.000 đ
                                                            </del>
                                                            <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
                                                                -6%
                                                            </span>
                                                        </p>
                                                        <p className="m-0">
                                                            <b className="font-600">Bảo hành:</b>
                                                            <span>Theo từng linh kiện</span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="swiper-slide">
                                    <div className="p-item">
                                        <a href="" className="p-img">
                                            <img
                                                src="images/product-5.jpg"
                                                alt=""
                                                width={250}
                                                height={250}
                                            />
                                        </a>
                                        <div className="p-text">
                                            <div className="p-price-group">
                                                <p className="p-price">22.000.000 đ</p>
                                            </div>
                                            <a href="" className="p-name">
                                                <h3>
                                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                                    Suscipit quos obcaecati totam, atque vel
                                                </h3>
                                            </a>
                                            <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
                                                <div>
                                                    <p className="m-0 text-[#00AD4F] flex items-center gap-1">
                                                        <i className="bx bx-check-circle text-18 w-[18px]" />
                                                        <span>Sẵn hàng</span>
                                                    </p>
                                                    <p />
                                                </div>
                                                <button
                                                    type="button"
                                                    className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
                                                    aria-label="Mua"
                                                />
                                            </div>
                                        </div>
                                        <div className="p-tooltip hidden">
                                            <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
                                                <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
                                                    [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
                                                    3060 12GB
                                                </p>
                                                <div className="p-4 tooltip-content">
                                                    <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
                                                        <p className="m-0 flex items-center flex-wrap gap-1">
                                                            <b className="font-600">Giá bán:</b>
                                                            <b className="font-600 text-[#FF4E2A] text-18">
                                                                48.990.000 đ
                                                            </b>
                                                        </p>
                                                        <p className="m-0">
                                                            <b className="font-600">Bảo hành:</b>
                                                            <span>Theo từng linh kiện</span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="swiper-slide">
                                    <div className="p-item">
                                        <a href="" className="p-img">
                                            <img
                                                src="images/product-7.jpg"
                                                alt=""
                                                width={250}
                                                height={250}
                                            />
                                        </a>
                                        <div className="p-text">
                                            <div className="p-price-group">
                                                <del>52.000.000 đ</del>
                                                <span className="p-discount">-10%</span>
                                                <p className="p-price">22.000.000 đ</p>
                                            </div>
                                            <a href="" className="p-name">
                                                <h3>
                                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                                    Suscipit quos obcaecati totam, atque vel
                                                </h3>
                                            </a>
                                            <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
                                                <div>
                                                    <p className="m-0 red flex items-center gap-1">
                                                        <i className="bx bxs-phone text-18 w-[18px]" />
                                                        <span>Liên hệ</span>
                                                    </p>
                                                    <p className="m-0 text-[#E16B10] flex items-center gap-1">
                                                        <i className="bx bx-gift text-18 w-[18px]" />
                                                        <span>Quà tặng</span>
                                                    </p>
                                                </div>
                                                <button
                                                    type="button"
                                                    className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
                                                    aria-label="Mua"
                                                />
                                            </div>
                                        </div>
                                        <div className="p-tooltip hidden">
                                            <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
                                                <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
                                                    [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
                                                    3060 12GB
                                                </p>
                                                <div className="p-4 tooltip-content">
                                                    <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
                                                        <p className="m-0 flex items-center flex-wrap gap-1">
                                                            <b className="font-600">Giá bán:</b>
                                                            <b className="font-600 text-[#FF4E2A] text-18">
                                                                48.990.000 đ
                                                            </b>
                                                            <del className="text-[#A0A5AC] font-300">
                                                                52.000.000 đ
                                                            </del>
                                                            <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
                                                                -6%
                                                            </span>
                                                        </p>
                                                        <p className="m-0">
                                                            <b className="font-600">Bảo hành:</b>
                                                            <span>Theo từng linh kiện</span>
                                                        </p>
                                                    </div>
                                                    <div className="last:mb-0 mb-6 px-1">
                                                        <p className="text-16 font-600 flex items-center leading-6 mb-2">
                                                            <i className="icons icon-screen" />
                                                            <span>Thông số sản phẩm</span>
                                                        </p>
                                                        <div className="tooltip-spec">
                                                            <div className="item">
                                                                CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
                                                                THREAD
                                                            </div>
                                                            <div className="item">
                                                                RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
                                                            </div>
                                                            <div className="item">
                                                                VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
                                                        <p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
                                                            <i className="icons icon-gift" />
                                                            <span>Khuyến mại hấp dẫn</span>
                                                        </p>
                                                        <div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
                                                            <div className="item">
                                                                <p>
                                                                    <span style={{ color: "red", fontSize: "12pt" }}>
                                                                        <strong>
                                                                            ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành
                                                                            Hà Nội và Hồ Chí Minh)
                                                                        </strong>
                                                                    </span>
                                                                </p>
                                                            </div>
                                                            <div className="item">
                                                                <p>
                                                                    <span style={{ color: "red", fontSize: "12pt" }}>
                                                                        <strong>
                                                                            ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
                                                                        </strong>
                                                                    </span>
                                                                </p>
                                                            </div>
                                                            <div className="item">
                                                                <p>
                                                                    <span style={{ color: "red", fontSize: "12pt" }}>
                                                                        <strong>
                                                                            ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
                                                                        </strong>
                                                                    </span>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="swiper-slide">
                                    <div className="p-item">
                                        <a href="" className="p-img">
                                            <img
                                                src="images/product-6.jpg"
                                                alt=""
                                                width={250}
                                                height={250}
                                            />
                                        </a>
                                        <div className="p-text">
                                            <div className="p-price-group">
                                                <del>52.000.000 đ</del>
                                                <span className="p-discount">-10%</span>
                                                <p className="p-price">22.000.000 đ</p>
                                            </div>
                                            <a href="" className="p-name">
                                                <h3>
                                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                                    Suscipit quos obcaecati totam, atque vel
                                                </h3>
                                            </a>
                                            <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
                                                <div>
                                                    <p className="m-0 text-[#00AD4F] flex items-center gap-1">
                                                        <i className="bx bx-check-circle text-18 w-[18px]" />
                                                        <span>Sẵn hàng</span>
                                                    </p>
                                                    <p className="m-0 text-[#E16B10] flex items-center gap-1">
                                                        <i className="bx bx-gift text-18 w-[18px]" />
                                                        <span>Quà tặng</span>
                                                    </p>
                                                </div>
                                                <button
                                                    type="button"
                                                    className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
                                                    aria-label="Mua"
                                                />
                                            </div>
                                        </div>
                                        <div className="p-tooltip hidden">
                                            <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
                                                <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
                                                    [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
                                                    3060 12GB
                                                </p>
                                                <div className="p-4 tooltip-content">
                                                    <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
                                                        <p className="m-0 flex items-center flex-wrap gap-1">
                                                            <b className="font-600">Giá bán:</b>
                                                            <b className="font-600 text-[#FF4E2A] text-18">
                                                                48.990.000 đ
                                                            </b>
                                                            <del className="text-[#A0A5AC] font-300">
                                                                52.000.000 đ
                                                            </del>
                                                            <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
                                                                -6%
                                                            </span>
                                                        </p>
                                                        <p className="m-0">
                                                            <b className="font-600">Bảo hành:</b>
                                                            <span>Theo từng linh kiện</span>
                                                        </p>
                                                    </div>
                                                    <div className="last:mb-0 mb-6 px-1">
                                                        <p className="text-16 font-600 flex items-center leading-6 mb-2">
                                                            <i className="icons icon-screen" />
                                                            <span>Thông số sản phẩm</span>
                                                        </p>
                                                        <div className="tooltip-spec">
                                                            <div className="item">
                                                                CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
                                                                THREAD
                                                            </div>
                                                            <div className="item">
                                                                RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
                                                            </div>
                                                            <div className="item">
                                                                VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
                                                        <p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
                                                            <i className="icons icon-gift" />
                                                            <span>Khuyến mại hấp dẫn</span>
                                                        </p>
                                                        <div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
                                                            <div className="item">
                                                                <p>
                                                                    <span style={{ color: "red", fontSize: "12pt" }}>
                                                                        <strong>
                                                                            ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành
                                                                            Hà Nội và Hồ Chí Minh)
                                                                        </strong>
                                                                    </span>
                                                                </p>
                                                            </div>
                                                            <div className="item">
                                                                <p>
                                                                    <span style={{ color: "red", fontSize: "12pt" }}>
                                                                        <strong>
                                                                            ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
                                                                        </strong>
                                                                    </span>
                                                                </p>
                                                            </div>
                                                            <div className="item">
                                                                <p>
                                                                    <span style={{ color: "red", fontSize: "12pt" }}>
                                                                        <strong>
                                                                            ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
                                                                        </strong>
                                                                    </span>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </>
    );
}