export function ProductReviewWithRatingIcons() {
  return (
    <section className="relative py-24">
      <div className="mx-auto w-full max-w-7xl px-4 md:px-5 lg:px-6">
        <div className="inline-flex w-full flex-col items-start justify-start">
          <div className="inline-flex w-full flex-col items-center justify-start gap-4">
            <h2 className="font-manrope w-full text-center text-4xl leading-normal font-bold text-black">
              Our Customer Reviews
            </h2>
            <p className="text-center text-base leading-relaxed font-normal text-gray-500">
              Customer reviews play a crucial role in influencing purchasing
              decisions, as they provide authentic perspectives <br />
              from real users. Positive reviews can enhance credibility build
              trust.
            </p>
          </div>
          <div className="my-14 flex flex-col gap-6">
            <div className="inline-flex w-full items-start justify-start gap-6 border-b border-gray-200 pb-9">
              <div className="rounded-full">
                <img
                  src="https://pagedone.io/asset/uploads/1714988283.png"
                  alt="Avtar image"
                  className="rounded-full object-cover"
                />
              </div>
              <div className="inline-flex w-full flex-col items-start justify-start gap-4">
                <div className="inline-flex w-full items-start justify-between gap-8">
                  <h5 className="text-lg leading-8 font-medium text-gray-900">
                    Robert Karmazov
                  </h5>
                  <h5 className="text-right text-lg leading-8 font-normal text-gray-400">
                    Nov 01, 2023
                  </h5>
                </div>
                <p className="text-base leading-relaxed font-normal text-gray-400">
                  Facilisis eu malesuada orci commodo. Lectus dictum purus eget
                  auctor ut. Potenti arcu risus laoreet diam. Suspendisse enim
                  eget mi montes. Egestas quam tempor aenean arcu. Mi turpis
                  quis feugiat odio eu quis mauris pellentesque viverra.
                </p>
                <div className="inline-flex w-full items-start justify-between gap-8">
                  <div className="flex w-full items-center justify-start gap-3">
                    <h5 className="text-right text-lg leading-8 font-medium text-black">
                      5.3
                    </h5>
                    <div className="flex items-start justify-start gap-1">
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </div>
                  <div className="flex w-full items-start justify-end gap-2">
                    <div className="flex items-center justify-start gap-2">
                      <a href="#"></a>
                      <h5 className="text-lg leading-8 font-medium text-gray-400">
                        10
                      </h5>
                    </div>
                    <div className="flex items-center justify-start gap-2">
                      <a href="#"></a>
                      <h5 className="text-lg leading-8 font-medium text-gray-400">
                        Reply
                      </h5>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="inline-flex w-full items-start justify-start gap-6 border-b border-gray-200 pb-9">
              <div className="rounded-full">
                <img
                  src="https://pagedone.io/asset/uploads/1714988297.png"
                  alt="Avtar image"
                  className="rounded-full object-cover"
                />
              </div>
              <div className="inline-flex w-full flex-col items-start justify-start gap-4">
                <div className="inline-flex w-full items-start justify-between gap-8">
                  <h5 className="text-lg leading-8 font-medium text-gray-900">
                    Toby Gusikowski
                  </h5>
                  <h5 className="text-right text-lg leading-8 font-normal text-gray-400">
                    Nov 01, 2023
                  </h5>
                </div>
                <p className="text-base leading-relaxed font-normal text-gray-400">
                  Mi est a varius purus. In diam non bibendum lectus eget
                  tristique nisl placerat in. In amet vitae malesuada
                  consectetur ornare. Vulputate ut egestas venenatis vitae metus
                  ut lectus scelerisque habitant. Tortor suspendisse
                  ullamcorper.
                </p>
                <div className="inline-flex w-full items-start justify-between gap-8">
                  <div className="flex w-full items-center justify-start gap-3">
                    <h5 className="text-right text-lg leading-8 font-medium text-black">
                      3.5
                    </h5>
                    <div className="flex items-start justify-start gap-1">
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </div>
                  <div className="flex w-full items-start justify-end gap-2">
                    <div className="flex items-center justify-start gap-2">
                      <a href="#"></a>
                      <h5 className="text-lg leading-8 font-medium text-gray-400">
                        10
                      </h5>
                    </div>
                    <div className="flex items-center justify-start gap-2">
                      <a href="#"></a>
                      <h5 className="text-lg leading-8 font-medium text-gray-400">
                        Reply
                      </h5>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="inline-flex w-full items-start justify-start gap-6 border-b border-gray-200 pb-9">
              <div className="rounded-full">
                <img
                  src="https://pagedone.io/asset/uploads/1714988306.png"
                  alt="Avtar image"
                  className="rounded-full object-cover"
                />
              </div>
              <div className="inline-flex w-full flex-col items-start justify-start gap-4">
                <div className="inline-flex w-full items-start justify-between gap-8">
                  <h5 className="text-lg leading-8 font-medium text-gray-900">
                    Robert Karmazov
                  </h5>
                  <h5 className="text-right text-lg leading-8 font-normal text-gray-400">
                    Nov 01, 2023
                  </h5>
                </div>
                <p className="text-base leading-relaxed font-normal text-gray-400">
                  Amet sit ut vestibulum senectus fringilla est a. Sed duis
                  feugiat sapien nec vel nulla sed morbi. Ullamcorper augue
                  adipiscing sit id enim. Id pharetra porttitor et at in
                  facilisi hendrerit. Curabitur amet duis dictumst sagittis
                  volutpat a enim est nascetur.
                </p>
                <div className="inline-flex w-full items-start justify-between gap-8">
                  <div className="flex w-full items-center justify-start gap-3">
                    <h5 className="text-right text-lg leading-8 font-medium text-black">
                      4.3
                    </h5>
                    <div className="flex items-start justify-start gap-1">
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </div>
                  <div className="flex w-full items-start justify-end gap-2">
                    <div className="flex items-center justify-start gap-2">
                      <a href="#"></a>
                      <h5 className="text-lg leading-8 font-medium text-gray-400">
                        09
                      </h5>
                    </div>
                    <div className="flex items-center justify-start gap-2">
                      <a href="#"></a>
                      <h5 className="text-lg leading-8 font-medium text-gray-400">
                        Reply
                      </h5>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="inline-flex w-full flex-col items-start justify-center gap-8 rounded-2xl border border-gray-200 p-5">
            <h2 className="font-manrope text-3xl leading-normal font-semibold text-gray-900">
              Submit Your Review
            </h2>
            <div className="flex w-full flex-col items-start justify-center gap-6">
              <div className="flex w-full flex-col items-start justify-center gap-1">
                <label className="inline-flex items-center justify-start gap-0.5">
                  <span className="text-xs leading-5 font-medium text-gray-600">
                    Add Your Rating
                  </span>
                  <span className="h-3.5 w-2 text-xs leading-5 font-medium text-red-500">
                    *
                  </span>
                </label>
                <div className="inline-flex items-center justify-start gap-1.5">
                  <a href="#"></a>
                  <a href="#"></a>
                  <a href="#"></a>
                  <a href="#"></a>
                  <a href="#"></a>
                </div>
              </div>
              <div className="flex w-full flex-col items-center justify-start gap-8 sm:flex-row">
                <div className="flex w-full flex-col items-start justify-start gap-1">
                  <label className="inline-flex items-center justify-start gap-0.5">
                    <span className="text-xs leading-5 font-medium text-gray-600">
                      Name
                    </span>
                    <span className="h-3.5 w-2 text-xs leading-5 font-medium text-red-500">
                      *
                    </span>
                  </label>
                  <input
                    type="text"
                    className="w-full rounded-lg border border-gray-300 px-2.5 py-1.5 text-xs leading-normal font-normal text-gray-900 placeholder-gray-400 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] focus:outline-none"
                    placeholder="John Doe"
                  />
                </div>
                <div className="flex w-full flex-col items-start justify-start gap-1">
                  <label className="inline-flex items-center justify-start gap-0.5">
                    <span className="text-xs leading-5 font-medium text-gray-600">
                      Email
                    </span>
                    <span className="h-3.5 w-2 text-xs leading-5 font-medium text-red-500">
                      *
                    </span>
                  </label>
                  <input
                    type="text"
                    className="w-full rounded-lg border border-gray-300 px-2.5 py-1.5 text-xs leading-normal font-normal text-gray-900 placeholder-gray-400 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] focus:outline-none"
                    placeholder="mail@pagedone.com"
                  />
                </div>
              </div>
              <div className="flex w-full flex-col items-start justify-start gap-1">
                <label className="inline-flex items-center justify-start gap-0.5">
                  <span className="text-xs leading-5 font-medium text-gray-600">
                    Write Your Review
                  </span>
                  <span className="h-3.5 w-2 text-xs leading-5 font-medium text-red-500">
                    *
                  </span>
                </label>
                <textarea
                  rows={5}
                  className="w-full resize-none rounded-lg border border-gray-300 px-3 py-2 text-xs leading-normal font-normal text-gray-900 placeholder-gray-400 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] focus:outline-none"
                  placeholder="Write here..."
                />
              </div>
            </div>
            <button className="flex w-full items-center justify-center rounded-xl bg-indigo-600 px-5 py-2.5 shadow transition-all duration-700 ease-in-out hover:bg-indigo-800 sm:w-fit">
              <span className="px-2 py-px text-base leading-relaxed font-semibold text-white">
                Leave Feedback
              </span>
            </button>
          </div>
        </div>
      </div>
    </section>
  )
}