export default function Experiences({ ExperiencesData }) {
    
    const exp_year = new Date().getFullYear() - (ExperiencesData?.starting_year || 0);

    return (
        <section className="why_choose_me">
            <div className="container">
                <div className="row">
                    <div className="col-lg-6 col-md-12 col-sm-12 col-12">
                        <div className="why_choose_me_images">
                            <div className="why_choose_me_image-1">
                                <img src={ExperiencesData?.why_choose_us_big_image} alt="big_image" width={545} height={571} />
                            </div>
                            <div className="year-counter">
                                <div className="year-counter_number th-title">
                                    <b style={{ color: '#1b1b1b', fontSize: '18px' }}>{exp_year}+</b>
                                </div>
                                <div className="media-body th-desc">
                                    <span className="year-counter_title">Years Experiences</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-6 col-md-12 col-sm-12 col-12">
                        <div className="why_choose_me_wrap">
                            <span className="small-text">Why Choose me</span>
                            <h2>{ExperiencesData?.why_choose_us_heading}</h2>
                            <p className="choose_me_paragraph">
                                {ExperiencesData?.why_choose_us_description}
                            </p>
                            <div className="choose_me_list">
                                <div className="choose_me_list-1">
                                    <div className="choose_me_list-icon">
                                        <img src="img/choose-list.svg" alt="" />
                                    </div>
                                    <div className="choose_me_list-body">
                                        <h4 className="choose_me_list-body_title">
                                            Flexibility and Convenience
                                        </h4>
                                        <p className="choose_me_list-bodyt_text">
                                            Renting a car provides the flexibility to create your own
                                            itinerary and travel.
                                        </p>
                                    </div>
                                </div>
                                <div className="choose_me_list-1">
                                    <div className="choose_me_list-icon">
                                        <img src="img/choose_list_1.svg" alt="" />
                                    </div>
                                    <div className="choose_me_list-body">
                                        <h4 className="choose_me_list-body_title">
                                            Single rate includes all
                                        </h4>
                                        <p className="choose_me_list-bodyt_text">
                                            The cost of actually renting the vehicle for the mo re
                                            specific duration..
                                        </p>
                                    </div>
                                </div>
                                <div className="choose_me_list-1">
                                    <div className="choose_me_list-icon">
                                        <img src="img/choose_list_2.svg" alt="" />
                                    </div>
                                    <div className="choose_me_list-body">
                                        <h4 className="choose_me_list-body_title">
                                            No Hidden Charges
                                        </h4>
                                        <p className="choose_me_list-bodyt_text">
                                            The cost of actually renting the vehicle for the mo re
                                            specific duration.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div className="about-button-group">
                                <div className="call-btn">
                                    <a href="tel:(+91)9825476243" className="btn-icon ripple">
                                        <i className="fas fa-phone-alt"></i>
                                    </a>
                                    <a href="tel:(+91)9825476243" className="btn-title">
                                        (+91)9825476243
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>



    );
}