import React from 'react';
import sign from '/public/images/signeture.png';
import Image from 'next/image';

const AboutSection = (props) => {
    return (
        <section className={`wpo-about-section section-padding2 ${props.abClass}`}>
            <div className="container">
                <div className="wpo-about-wrap">
                    <div className="row align-items-center">

                        {/* Text Column — Show first on mobile, second on desktop */}
                        <div className="col-lg-6 col-md-12 col-12 order-1 order-lg-2 mb-5">
                            <div className="wpo-about-text">
                                <div className="wpo-section-title">
                                    <span>Our Story</span>
                                    <h2>Building Your American Dream.</h2>
                                </div>
                                <p>
                                    For many years, Janhanlaw has been more than just a law office - we’ve served as a guiding light for families pursuing their dreams. Founded on the principle that every person deserves expert legal representation regardless of their background, we've dedicated our careers to navigating the complex world of immigration law.
                                </p>
                                <p>
                                    Our team combines deep legal expertise with genuine compassion, understanding that behind every case is a real person with real dreams. We've successfully helped families reunite, professionals advance their careers, and individuals find safety and protection in America.
                                </p>
                                <div className="quote">
                                    <p>
                                        “More than a law office, we are a guiding light for families pursuing their dreams.”
                                    </p>
                                </div>
                                {/* <div className="wpo-about-left-info">
                                    <div className="wpo-about-left-inner">
                                        <div className="wpo-about-left-text">
                                            <h5>John Janhan</h5>
                                            <span>Lead Immigration Attorney & Founder</span>
                                        </div>
                                    </div>
                                    <div className="signeture">
                                        <Image src={sign} alt="Signature" />
                                    </div>
                                </div> */}
                            </div>
                        </div>

                        {/* Image Column — Show second on mobile, first on desktop */}
                        <div className="col-lg-6 col-md-12 col-12 order-2 order-lg-1">
                            <div className="wpo-about-img">
                                <Image src={props.abimg} alt="About Image" />
                                {/* <div className="wpo-about-img-text">
                                    <h4>1998</h4>
                                    <div className="rotate-text">
                                        {Array.from("WeAreWorkingForYouSince").map((letter, index) => (
                                            <span key={index}>{letter}</span>
                                        ))}
                                    </div>
                                    <div className="dots">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </div>
                                    <div className="border-shape-1"></div>
                                    <div className="border-shape-2"></div>
                                    <div className="border-shape-3"></div>
                                </div> */}
                                <div className="about-shape">
                                    <div className="shape-1"></div>
                                    <div className="shape-2"></div>
                                    <div className="shape-3"></div>
                                    <div className="shape-4"></div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>
    );
};

export default AboutSection;