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 more than 25 years, Janhan law has been more than just a law office - we've been a beacon of hope for thousands of families seeking to build their American dream. 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>
                                        “For over 25 years, we’ve turned complex immigration challenges into real success stories.”
                                    </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;