export default function SendCart() {
    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>


    )
}