"use client";
import React from "react";

export default function ReasonsToChoose() {
  return (
    <section
      className="content-section bg_op_4 theme_alter-bg"
      style={{ backgroundImage: "url(assets/images/wave-pat-1.png)" }}
    >
      <div className="pd_top_90" />
      <div className="container">
        <div className="row g-4">
          <div className="col-lg-4 col-md-6 col-sm-12 d-flex">
            <div className="w-100">
              <div className="pd_bottom_60 d_md_none" />
              <div className="section_title medium type_one">
                {/* Removed "Special Deals" since you mentioned earlier */}
                <div className="title_whole">
                  <h2 className="title text-white">Reasons to Choose Zip Van</h2>
                </div>
              </div>
              <div className="pd_bottom_40" />
            </div>
          </div>

          {/* Upfront Pricing */}
          <div className="col-lg-4 col-md-6 col-sm-12 d-flex">
            <div className="icon_box_only type_eight h-100 w-100 d-flex flex-column">
              <div className="icon_image">
                <img
                  src="/assets/images/BookNow/icons/upfront-pricing.webp"
                  className="img-fluid"
                  alt="Upfront Pricing"
                />
              </div>
              <div className="section_title type_one">
                <div className="title_whole">
                  <h2 className="title">Upfront Pricing</h2>
                </div>
                <p>The price you see here is the price you pay. No hidden fees, no insurance add-ons.</p>
              </div>
            </div>
          </div>

          {/* Insurance Included */}
          <div className="col-lg-4 col-md-6 col-sm-12 d-flex">
            <div className="icon_box_only type_eight h-100 w-100 d-flex flex-column">
              <div className="icon_image">
                <img
                  src="/assets/images/BookNow/icons/insurance-included.webp"
                  className="img-fluid"
                  alt="Insurance Included"
                />
              </div>
              <div className="section_title type_one">
                <div className="title_whole">
                  <h2 className="title">Insurance Included</h2>
                </div>
                <p>Unlike U-Haul, we don’t charge you extra for coverage. Your items are fully protected.</p>
              </div>
            </div>
          </div>

          {/* Right-Sized Vans */}
          <div className="col-lg-4 col-md-6 col-sm-12 d-flex">
            <div className="icon_box_only type_eight h-100 w-100 d-flex flex-column">
              <div className="icon_image">
                <img
                  src="/assets/images/BookNow/icons/right-sized-vans.webp"
                  className="img-fluid"
                  alt="Right-Sized Vans"
                />
              </div>
              <div className="section_title type_one">
                <div className="title_whole">
                  <h2 className="title">Right-Sized Vans</h2>
                </div>
                <p>Big enough for couches, beds, appliances & furniture. Easy to load, easy to move.</p>
              </div>
            </div>
          </div>

          {/* We Drive For You */}
          <div className="col-lg-4 col-md-6 col-sm-12 d-flex">
            <div className="icon_box_only type_eight h-100 w-100 d-flex flex-column">
              <div className="icon_image">
                <img
                  src="/assets/images/BookNow/icons/we-drive-for-you.webp"
                  className="img-fluid"
                  alt="We Drive For You"
                />
              </div>
              <div className="section_title type_one">
                <div className="title_whole">
                  <h2 className="title">We Drive For You</h2>
                </div>
                <p>No wrestling with oversized vans in traffic. Sit back, we’ve got the wheel.</p>
              </div>
            </div>
          </div>

          {/* Quick & Simple */}
          <div className="col-lg-4 col-md-6 col-sm-12 d-flex">
            <div className="icon_box_only type_eight h-100 w-100 d-flex flex-column">
              <div className="icon_image">
                <img
                  src="/assets/images/BookNow/icons/quick-simple.webp"
                  className="img-fluid"
                  alt="Quick & Simple"
                />
              </div>
              <div className="section_title type_one">
                <div className="title_whole">
                  <h2 className="title">Quick & Simple</h2>
                </div>
                <p>Book in 2 minutes. Move stress-free.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="pd_bottom_90" />
    </section>
  );
}