export default function Home() {
    return (
        <div className="cart-page container">
            <div className="text-center px-3">
                <div className="mb-4">
                    <img src="images/cart-empty.png" className="block m-auto" />
                </div>
                <p className="mt-10 mb-6 text-20 font-600">
                    {" "}
                    Không có sản phẩm nào trong giỏ hàng của bạn !
                </p>
                <a
                    href="/"
                    className="inline-flex items-center bg-btn text-white leading-[52px] font-500 text-18 rounded-[50px] px-6"
                >
                    {" "}
                    VỀ TRANG CHỦ <i className="bx bx-arrow-up-right-stroke text-30" />{" "}
                </a>
            </div>
            <h1 className="text-[#004BA4] leading-10 text-[32px] font-600 mb-6">
                {" "}
                Giỏ hàng của tôi{" "}
            </h1>
            <div className="lg:flex flex-wrap items-start justify-between gap-6">
                <div className="col-left w-[calc(100%-464px)]">
                    <div className="hidden lg:flex flex-wrap items-center justify-between gap-4 bg-white rounded-[12px] mb-3 py-3 px-4 lg:text-[16px] font-500 leading-10">
                        <p className="m-0 text-16 lg:text-[18px]"> 5 sản phẩm </p>
                        <button
                            type="button"
                            className="h-10 border border-[#0678DB] bg-white rounded-[40px] text-[#0678DB] px-6 transition-all duration-100 hover:bg-[#0678DB] hover:text-white"
                            aria-label="Xóa sản phẩm"
                        >
                            {" "}
                            LÀM TRỐNG GIỎ HÀNG{" "}
                        </button>
                    </div>
                    <div className="bg-white rounded-[16px] lg:rounded-[12px] mb-3 p-4">
                        <div className="cart-item mb-5 last:mb-0">
                            <a href="" className="item-img">
                                {" "}
                                <img src="images/product-5.jpg" />{" "}
                            </a>
                            <div className="item-text">
                                <div className="item-name">
                                    <a
                                        href=""
                                        className="table uppercase font-500 lg:text-[16px] text-12"
                                    >
                                        HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB
                                    </a>
                                    <div className="group mt-2 table">
                                        <p className="m-0 text-[#0678DB] font-500 cursor-pointer">
                                            <span> Chi tiết khuyến mại </span>
                                            <i className="bx bx-chevron-down text-[#A0A5AC] text-16 align-middle transition-all group-hover:rotate-[-180deg]" />
                                        </p>
                                        <div className="item-offer group-hover:opacity-100 group-hover:z-[5] group-hover:visible">
                                            <div className="item">
                                                <p>
                                                    <span style={{ fontSize: "12pt", color: "#ff0000" }}>
                                                        <strong>⭐ Tặng Balo Laptop Hoàng Hà PC</strong>
                                                    </span>
                                                </p>
                                            </div>
                                            <div className="item">
                                                <p>
                                                    <span style={{ fontSize: "12pt", color: "#ff0000" }}>
                                                        <strong>⭐ Tặng Chuột không dây</strong>
                                                    </span>
                                                </p>
                                            </div>
                                            <div className="item">
                                                <p>
                                                    <span style={{ fontSize: "12pt", color: "#ff0000" }}>
                                                        <strong>⭐ Tặng Bàn di chuột</strong>
                                                    </span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="item-quantiy">
                                    <button
                                        type="button"
                                        className="js-quantity-change bx bx-minus"
                                    />
                                    <input
                                        type="number"
                                        defaultValue={1}
                                        min={1}
                                        data-stock={998}
                                        pattern="[0-9]*"
                                        inputMode="numeric"
                                        className="js-buy-quantity js-quantity-change text-center"
                                    />
                                    <button type="button" className="js-quantity-change bx bx-plus" />
                                </div>
                                <div className="item-price text-right lg:text-left">
                                    <p className="text-[#FF4E2A] font-bold mb-0 lg:mb-1 lg:text-[16px] lg:leading-5 text-13 leading-4">
                                        {" "}
                                        42.000.000 đ{" "}
                                    </p>
                                    <del className="block text-[#A0A5AC] lg:text-[13px] lg:leading-4 text-10 leading-3">
                                        {" "}
                                        52.000.000 đ{" "}
                                    </del>
                                </div>
                                <button
                                    type="button"
                                    className="item-delete bx bx-trash w-8 h-8 lg:w-10 lg:h-10 rounded-full border border-[#E7D9D9] bg-[#F8F3F3] text-[#BE1F2D] text-16 lg:text-[20px] hover:text-white hover:bg-[#BE1F2D] hover:border-transparent"
                                />
                            </div>
                        </div>
                    </div>
                    <div className="bg-white p-4 lg:pt-5 rounded-[16px] lg:rounded-[12px]">
                        <p className="font-600 text-16 lg:text-[18px] mb-2 lg:mb-4 leading-5 lg:leading-6">
                            {" "}
                            Thông tin đơn hàng{" "}
                        </p>
                        <div className="flex items-center justify-between gap-3 border-b border-[#D2DAE3] border-dashed pb-4 mb-3 lg:mb-5 leading-5 lg:leading-6 lg:text-[16px]">
                            <p className="m-0"> Tổng tiền </p>
                            <p className="m-0 font-500 text-15 lg:text-[18px]"> 50.000.000 đ </p>
                        </div>
                        <div className="flex items-center justify-between gap-3 leading-5 lg:leading-6">
                            <p className="m-0 flex items-center gap-2">
                                <i className="bx bxs-credit-card-alt text-20 text-[#B5BAC1]" />
                                <span> Tổng thanh toán </span>
                            </p>
                            <p className="m-0 text-16 text-[#FF4E2A] font-bold lg:text-[20px]">
                                {" "}
                                41.450.000 <u>đ</u>{" "}
                            </p>
                        </div>
                    </div>
                </div>
                <form className="col-right w-[440px] bg-white rounded-[16px] px-5 py-6 sticky top-[90px] z-[1] shadow-[0px_4px_20px_0px_#0615070D] lg:shadow-[none]">
                    <p className="font-600 text-18 text-[#004BA4] leading-6 mb-1">
                        {" "}
                        Thông tin nhận hàng{" "}
                    </p>
                    <div className="leading-[18px] text-[#474747] mb-4">
                        Để tiếp tục đặt hàng, quý khách xin vui lòng
                        <button
                            type="button"
                            aria-label="Đăng nhập"
                            className="font-500 text-[#0678DB]"
                        >
                            {" "}
                            đăng nhập{" "}
                        </button>
                        hoặc nhập thông tin bên dưới. Tư vấn viên sẽ liên hệ theo thông tin bạn
                        cung cấp để xác nhận, không mua không sao
                    </div>
                    <div>
                        <input
                            type="text"
                            id=""
                            className="block w-full h-[50px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
                            placeholder="Họ và tên"
                        />
                        <input
                            type="tel"
                            id=""
                            className="block w-full h-[50px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
                            inputMode="numeric"
                            pattern="[0-9]{10,11}"
                            maxLength={11}
                            placeholder="Số điện thoại"
                        />
                        <input
                            type="email"
                            id=""
                            className="block w-full h-[50px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
                            maxLength={254}
                            placeholder="Nhập email"
                        />
                        <input
                            type="text"
                            id=""
                            className="block w-full h-[50px] mb-2 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
                            placeholder="Địa chỉ nhận hàng"
                        />
                        <p className="text-[#757575] mb-4">
                            {" "}
                            <i className="bx bx-info-circle text-16 text-[#0678DB] mr-1 align-text-top" />{" "}
                            <span> Nhập Số nhà, Đường, Phường/xã, Quận, Tỉnh </span>{" "}
                        </p>
                        <textarea
                            id=""
                            className="block w-full h-[112px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4 pt-[12px] resize-none outline-none"
                            placeholder="Ghi chú"
                            defaultValue={""}
                        />
                    </div>
                    <div className="red font-600 my-4"> </div>
                    <div className="mt-5">
                        <button
                            type="submit"
                            className="block w-full bg-btn text-white h-[52px] rounded-[50px] font-500 text-18"
                        >
                            {" "}
                            ĐẶT HÀNG{" "}
                        </button>
                    </div>
                </form>
            </div>
        </div>


    )
}