import React from 'react';

interface WhyChooseTwoProps {
    reverse?: boolean;
}

const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
    return (
        <section className="why-choose-two">
            <img loading="lazy" src="/assets/images/about/3/element-bottom-left.webp" alt="Agency that gets excited about element" className="why-choose-two__shape-three" />
            <div className="container">
                <div className={`row ${reverse ? 'flex-row-reverse' : ''}`}>
                    <div className="col-xl-6">
                        <div className="why-choose-two__content">
                            <div className="sec-title">
                                <div className="sec-title__shape"></div>
                                <h6 className="sec-title__tagline text-white">Watch Us Live</h6>
                                <h3 className="sec-title__title text-white">An Agency That Gets Excited <br /> About Your Mission</h3>
                            </div>
                            <p className='text-white'>
                                Every project we take on is personal. We get excited about your goals, your grit, and the journey you’re on.
                            </p>
                            <p className="why-choose-two__text">
                                Whether you’re launching something new or leveling up an existing brand, we bring fresh energy, deep expertise, and full-stack creativity to your table. We don’t just work for you, we work with you, as committed collaborators invested in your long-term growth.
                            </p>
                            <div className="why-choose-two__box">
                                <ul className="why-choose-two__list">
                                    <li className="why-choose-two__item">
                                        <div className="why-choose-two__count"></div>
                                        <div className="why-choose-two__icon">
                                            <img loading="lazy" src="/assets/images/about/3/icon-1.webp" alt="Urgent development solutions" />
                                        </div>
                                        <div className="why-choose-two__item__content">
                                            <h3 className="why-choose-two__item__title">Urgent development solutions</h3>
                                            {/* <p className="why-choose-two__item__text">
                                                Supporting individuals in overcoming service
                                            </p> */}
                                        </div>
                                    </li>
                                    <li className="why-choose-two__item">
                                        <div className="why-choose-two__count"></div>
                                        <div className="why-choose-two__icon">
                                            <img loading="lazy" src="/assets/images/about/3/icon-2.webp" alt="Top quality services with reasonable price" />
                                        </div>
                                        <div className="why-choose-two__item__content">
                                            <h3 className="why-choose-two__item__title">Top quality services with reasonable price</h3>
                                            {/* <p className="why-choose-two__item__text">
                                                Supporting individuals in overcoming service
                                            </p> */}
                                        </div>
                                    </li>
                                    <li className="why-choose-two__item">
                                        <div className="why-choose-two__count"></div>
                                        <div className="why-choose-two__icon">
                                            <img loading="lazy" src="/assets/images/about/3/icon-3.webp" alt="Professional & experienced team" />
                                        </div>
                                        <div className="why-choose-two__item__content">
                                            <h3 className="why-choose-two__item__title">Professional & experienced team</h3>
                                            {/* <p className="why-choose-two__item__text">
                                                Supporting individuals in overcoming service
                                            </p> */}
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className="col-xl-6">
                        <div className="pelocis-stretch-element-inside-column" style={reverse ? { marginLeft: '-227.812px', marginRight: '0px' } : { marginLeft: '0px', marginRight: '-267.812px' }}>
                            <div className="why-choose-two__shape-one">
                                <img loading="lazy" src="/assets/images/about/3/right-img.webp" alt="Agency that gets excited about" />
                            </div>
                            <div className="why-choose-two__shape-two"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default WhyChooseTwo;