import React from "react";

const WhyChooseUs = () => {
    return (
        <section className="why-choose-us section-space">
            <div className="container">
                <div className="row align-items-center">
                    <div className="col-lg-6">
                        <div className="content-area pr-50">
                            <div className="section-title-wrapper mb-30">
                                <span className="section-subtitle">
                                    <i className="fa-solid fa-play rotate-triangle"></i> WHY CHOOSE US
                                </span>
                                <h2 className="section-title">
                                    Consulting Solutions For Your Business Development.
                                </h2>
                                <p className="section-desc">
                                    Business tailored design, management & support services Business business agency elit,
                                    sed do eiusmod tempor majority have in some we form, by injected humour solution.
                                </p>
                            </div>

                            <div className="feature-list mb-40">
                                <div className="feature-item d-flex align-items-center mb-30">
                                    <div className="feature-icon">
                                        <i className="fa-solid fa-handshake-angle"></i>
                                    </div>
                                    <div className="feature-content">
                                        <h4>We Are Improve Choose Business.</h4>
                                        <p>Market research branding of engagement.</p>
                                    </div>
                                </div>

                                <div className="feature-item d-flex align-items-center mb-0 border-top-line">
                                    <div className="feature-icon">
                                        <i className="fa-solid fa-lightbulb"></i>
                                    </div>
                                    <div className="feature-content">
                                        <h4>Business Consulting This Network.</h4>
                                        <p>Business tailored design, management & off support.</p>
                                    </div>
                                </div>
                            </div>

                            <div className="bottom-note">
                                <div className="note-item">
                                    <i className="fa-solid fa-circle-arrow-right"></i>
                                    <span>We are business many variations of passages of this business magical solution.</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="col-lg-6">
                        <div className="image-area-wrapper p-relative">
                            <div className="main-image">
                                <img src="/assets/img/about/about-img8.png" alt="Business Meeting" />
                            </div>
                            <div className="circular-image">
                                <div className="inner-circle">
                                    <img src="/assets/img/about/about-img10.png" alt="Profile" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <style jsx>{`
                .why-choose-us {
                    padding: 80px 0;
                    background: #fff;
                }
                @media (max-width: 767px) {
                    .why-choose-us {
                        padding: 60px 0;
                    }
                }
                .section-subtitle {
                    color: #3779b9;
                    font-weight: 700;
                    margin-bottom: 15px;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    font-size: 15px;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                }
                .rotate-triangle {
                    font-size: 14px;
                    transform: rotate(-30deg);
                    margin-top: -2px;
                }
                .section-title {
                    font-size: 44px;
                    font-weight: 800;
                    color: #1a1a1a;
                    line-height: 1.2;
                    margin-bottom: 25px;
                }
                .section-desc {
                    font-size: 16px;
                    color: #666;
                    line-height: 1.7;
                    margin-bottom: 35px;
                }
                .feature-item {
                    padding: 25px 0;
                }
                .border-top-line {
                    border-top: 1px solid #eee;
                }
                .feature-icon {
                    width: 70px;
                    height: 70px;
                    background: #3779b9;
                    border-radius: 6px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 25px;
                    flex-shrink: 0;
                    color: #fff;
                    font-size: 28px;
                }
                .feature-content h4 {
                    font-size: 22px;
                    font-weight: 700;
                    margin-bottom: 8px;
                    color: #1a1a1a;
                }
                .feature-content p {
                    font-size: 15px;
                    color: #666;
                    margin: 0;
                }
                .bottom-note {
                    padding-top: 30px;
                    border-top: 1px solid #eee;
                }
                .note-item {
                    display: flex;
                    align-items: flex-start;
                    gap: 15px;
                }
                .note-item i {
                    color: #1a1a1a;
                    font-size: 18px;
                    margin-top: 3px;
                }
                .note-item span {
                    font-size: 16px;
                    color: #444;
                    font-weight: 500;
                    line-height: 1.5;
                }
                .image-area-wrapper {
                    padding-left: 20px;
                }
                .main-image {
                    width: 100%;
                    border-radius: 4px;
                    overflow: hidden;
                    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
                }
                .main-image img {
                    width: 100%;
                    display: block;
                }
                .circular-image {
                    position: absolute;
                    top: 50%;
                    left: -80px;
                    transform: translateY(-50%);
                    width: 280px;
                    height: 280px;
                    background: #fff;
                    padding: 10px;
                    border-radius: 50%;
                    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
                    z-index: 2;
                }
                .inner-circle {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    overflow: hidden;
                    border: 2px solid #fff;
                }
                .inner-circle img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                @media (max-width: 1199px) {
                    .circular-image {
                        width: 220px;
                        height: 220px;
                        left: -50px;
                    }
                    .section-title {
                        font-size: 36px;
                    }
                }
                @media (max-width: 991px) {
                    .content-area {
                        padding-right: 0;
                        margin-bottom: 60px;
                    }
                    .image-area-wrapper {
                        padding-left: 0;
                    }
                    .circular-image {
                        width: 200px;
                        height: 200px;
                        left: -30px;
                    }
                }
                @media (max-width: 575px) {
                    .circular-image {
                        position: relative;
                        top: 0;
                        left: 0;
                        transform: none;
                        margin: -60px auto 0;
                    }
                }
            `}</style>
        </section>
    );
};

export default WhyChooseUs;