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>About Politian</span>
                                    <h2>We Can Work Together For Create a Better Future.</h2>
                                </div>
                                <p>
                                    The leader is eager to listen to the needs of the youth generation and to hear what
                                    solutions they have to the problems they are facing. He hopes to find solutions that
                                    will help them lead meaningful lives and make lasting change in the world.
                                </p>
                                <p>
                                    He believes that the collaboration between the youth and the leaders of society is
                                    necessary to bring about a brighter future. Now, he is ready to take the first step
                                    to making that happen.
                                </p>
                                <div className="quote">
                                    <p>
                                        “We can start by taking small steps and making small changes that can have a big
                                        impact on the world.”
                                    </p>
                                </div>
                                <div className="wpo-about-left-info">
                                    <div className="wpo-about-left-inner">
                                        <div className="wpo-about-left-text">
                                            <h5>Robert Willum</h5>
                                            <span>CEO & Founder of Manit</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;