import React from "react";

const AboutService = () => {
    return (
        <section className="about-service section-space">
            <div className="container">
                <div className="row align-items-center">
                    <div className="col-lg-6">
                        <div className="about-image-stack p-relative">
                            {/* Experience Box */}
                            {/* <div className="experience-box animate-bounce-y">
                                <h3>37+</h3>
                                <span>Years Experience</span>
                            </div> */}

                            {/* Background Image */}
                            <div className="main-img-wrap">
                                <img src="/assets/img/about/about-img1.png" alt="Office Meeting" />
                            </div>

                            {/* Foreground Curved Image */}
                            <div className="curved-img-wrap">
                                <img src="/assets/img/about/about-img13.png" alt="Collaborative Work" />
                            </div>

                            {/* Decorative Dots */}
                            <div className="dots-shape">
                                <img src="/assets/imgs/shapes/shape-6.png" alt="dots" />
                            </div>
                        </div>
                    </div>

                    <div className="col-lg-6">
                        <div className="content-area pl-60">
                            <div className="sec-title-wrapper mb-30">
                                <div className="sec-title">
                                    <div className="sec-title__shape"></div>
                                    <h6 className="sec-title__tagline">OUR ABOUT US</h6>
                                    <h3 className="sec-title__title">We Provide Professional Advice<br />About This Business.</h3>
                                </div>
                                <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                                <p className="section-desc">
                                    Business tailored design, management &amp; support services Business business agency elit,
                                    sed do eiusmod tempor majority have in some we form, by injected humour solution.
                                </p>
                            </div>

                            <div className="single-format-content mb-40">
                                <div className="format-row d-flex align-items-start gap-4">
                                    {/* <div className="small-feature-img">
                                        <img src="/assets/img/about/about-img10.png" alt="Team" className="rounded-3" />
                                    </div> */}
                                    <div className="feature-bullets">
                                        <div className="bullet-item d-flex align-items-center mb-15">
                                            <i className="fa-solid fa-circle-check maroon-icon"></i>
                                            <span>Great solution for your business growth.</span>
                                        </div>
                                        <div className="bullet-item d-flex align-items-center">
                                            <i className="fa-solid fa-circle-check maroon-icon"></i>
                                            <span>Remind yourself Business know fact.</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className="btn-wrapper">
                                <a href="/about-us" className="about-more-btn">
                                    <span>ABOUT MORE</span>
                                    <div className="icon-circle">
                                        <i className="fa-solid fa-chevron-right"></i>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <style jsx>{`
                .about-service {
                    padding: 80px 0;
                    background: #fff;
                    overflow: hidden;
                }
                @media (max-width: 767px) {
                    .about-service {
                        padding: 60px 0;
                    }
                }
                // .about-image-stack {
                //     padding-top: 50px;
                //     padding-left: 30px;
                // }
                .experience-box {
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: #3779b9;
                    color: #fff;
                    padding: 40px 30px;
                    z-index: 3;
                    text-align: center;
                    border-radius: 4px;
                    box-shadow: 0 10px 30px rgba(60, 114, 252, 0.3);
                }
                .experience-box h3 {
                    font-size: 54px;
                    font-weight: 800;
                    margin: 0;
                    line-height: 1;
                }
                .experience-box span {
                    font-size: 16px;
                    font-weight: 600;
                    display: block;
                    margin-top: 5px;
                    line-height: 1.2;
                }
                .main-img-wrap {
                    width: 100%;
                    max-width: 450px;
                    border-radius: 10px;
                    overflow: hidden;
                    margin-left: auto;
                    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
                }
                .main-img-wrap img {
                    width: 100%;
                    display: block;
                }
                .curved-img-wrap {
                    position: absolute;
                    bottom: -40px;
                    left: -20px;
                    width: 320px;
                    height: 320px;
                    border-radius: 100px 30px 100px 100px;
                    overflow: hidden;
                    border: 8px solid #fff;
                    z-index: 2;
                    box-shadow: 0 15px 45px rgba(0,0,0,0.12);
                }
                .curved-img-wrap img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                .dots-shape {
                    position: absolute;
                    top: 80px;
                    left: -40px;
                    z-index: 1;
                    opacity: 0.4;
                }
                .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: 1.5px;
                }
                .rotate-triangle {
                    font-size: 14px;
                    transform: rotate(-30deg);
                }
                .section-title {
                    font-size: 46px;
                    font-weight: 800;
                    color: #0f172a;
                    line-height: 1.2;
                    margin-bottom: 25px;
                }
                .section-desc {
                    font-size: 16px;
                    color: #64748b;
                    line-height: 1.8;
                    margin-bottom: 35px;
                }
                .small-feature-img {
                    width: 140px;
                    flex-shrink: 0;
                }
                .small-feature-img img {
                    width: 100%;
                }
                .maroon-icon {
                    color: #0f172a;
                    font-size: 18px;
                    margin-right: 12px;
                }
                .bullet-item span {
                    font-size: 16px;
                    font-weight: 600;
                    color: #0f172a;
                }
                .about-more-btn {
                    display: inline-flex;
                    align-items: center;
                    background: #3779b9;
                    color: #fff;
                    padding: 8px 8px 8px 25px;
                    border-radius: 6px;
                    text-decoration: none;
                    font-weight: 700;
                    font-size: 14px;
                    letter-spacing: 1px;
                    transition: all 0.3s ease;
                }
                .about-more-btn:hover {
                    background: #2563eb;
                    transform: translateY(-2px);
                }
                .icon-circle {
                    width: 40px;
                    height: 40px;
                    background: #fff;
                    color: #3779b9;
                    border-radius: 4px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-left: 20px;
                }
                .animate-bounce-y {
                    animation: bounceY 4s infinite ease-in-out;
                }
                @keyframes bounceY {
                    0%, 100% { transform: translateY(0); }
                    50% { transform: translateY(-15px); }
                }
                @media (max-width: 1199px) {
                    .content-area {
                        padding-left: 30px;
                    }
                    .section-title {
                        font-size: 38px;
                    }
                    .curved-img-wrap {
                        width: 260px;
                        height: 260px;
                    }
                }
                @media (max-width: 991px) {
                    .about-image-stack {
                        margin-bottom: 80px;
                        padding-left: 0;
                    }
                    .content-area {
                        padding-left: 0;
                    }
                }
                @media (max-width: 575px) {
                    .curved-img-wrap {
                        width: 200px;
                        height: 200px;
                        bottom: -20px;
                        left: 0;
                    }
                    .experience-box {
                        padding: 25px 20px;
                    }
                    .experience-box h3 {
                        font-size: 40px;
                    }
                }
            `}</style>
        </section>
    );
};

export default AboutService;