import React from "react";
import "./Banner_Btn_Component.css";
import { FaHeadset, FaShieldAlt, FaGlobe, FaTruck } from "react-icons/fa";

const Banner_Btn_Component = () => {
  return (
    <section className="Banner_Btn_Component">
      <div className="service_cards_main">
        <div className="service_card">
          <div className="service_icon_holder">
            <FaHeadset className="service_icon" />
          </div>

          <div className="service_content">
            <h4 className="service_title">Customer Support</h4>
            <p className="service_description">
              We're here to help whenever you need us
            </p>
          </div>
        </div>

        <div className="service_card">
          <div className="service_icon_holder">
            <FaShieldAlt className="service_icon" />
          </div>

          <div className="service_content">
            <h4 className="service_title">Secure Payments</h4>
            <p className="service_description">
              Safe and secure payment options
            </p>
          </div>
        </div>

        <div className="service_card">
          <div className="service_icon_holder">
            <FaGlobe className="service_icon" />
          </div>

          <div className="service_content">
            <h4 className="service_title">Pan India Delivery</h4>
            <p className="service_description">Fast delivery across India</p>
          </div>
        </div>

        <div className="service_card">
          <div className="service_icon_holder">
            <FaTruck className="service_icon" />
          </div>

          <div className="service_content">
            <h4 className="service_title">Easy Returns</h4>
            <p className="service_description">
              Hassle-free returns and exchanges
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Banner_Btn_Component;
