import React from 'react'
// import abimg2 from '/public/images/about/about4.jpg'
import abimg2 from '/public/images/about/about44.jpeg'
import Image from 'next/image';
import { useRouter } from 'next/router';
import { useTranslations } from 'next-intl';
import Link from 'next/link';


const About = (props) => {
    const { locale } = useRouter();
    const t = useTranslations("About");
    return (
        <section className={`wpo-about-section-s3 section-padding ${props.abClass}`}>
            <div className="container p-5">
                <div className="wpo-section-title-s2">
                    <span style={{ fontSize: "2rem" }}>{t("about_title")}</span>
                    <h2>{t("about_title_desc")}</h2>
                </div>
                <div style={{ direction: `${locale === "ar" ? 'ltr' : 'ltr'}` }} className="wpo-about-section-wrapper">
                    <div className="row align-items-center">
                        <div style={{ direction: `${locale === "ar" ? "rtl" : "ltr"}` }} className="col-lg-5 col-md-12 col-12">
                            <div className="wpo-about-content">
                                <h2>{t("about_content_title")}</h2>
                                <div className="wpo-about-content-inner">
                                    <div className='my-3'>
                                        <p style={{ fontSize: "1.3rem" }}>{t("about_content_desc_1")}</p>
                                    </div>
                                    <div>
                                        <p style={{ fontSize: "1.3rem" }}>{t("about_content_desc_2")}</p>
                                    </div>
                                    <div style={{ textAlign: "start" }} className='my-3'>
                                        <ul style={{ color: "#fff" }}>
                                            <li style={{ fontSize: "1.1rem" }}>
                                                - {t("about_p_1")}
                                            </li>
                                            <li style={{ fontSize: "1.1rem" }}>
                                                - {t("about_p_2")}
                                            </li>
                                            <li style={{ fontSize: "1.1rem" }}>
                                                - {t("about_p_3")}
                                            </li>
                                            <li style={{ fontSize: "1.1rem" }}>
                                                - {t("about_p_4")}
                                            </li>
                                            <li style={{ fontSize: "1.1rem" }}>
                                                - {t("about_p_5")}
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div style={{ direction: `${locale === "ar" ? "ltr" : "rtl"}` }} data-swiper-parallax="500" className="slide-btns my-5">
                                    <Link href="/about" className="theme-btn-s2">{t("about_more")}</Link>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-7 col-md-12 col-12">
                            <div className="wpo-about-img">
                                <Image src={props.abimg} alt="" />
                                <div className="about-img-inner">
                                    <Image src={abimg2} alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    {
                        locale === "en" &&
                        <div className="visible-text">
                            <h2>About</h2>
                        </div>
                    }
                </div>
            </div>
        </section>
    )
}

export default About;