import React from "react";
import { Navigation, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import { useTranslations } from "next-intl";
import { useRouter } from "next/router";


const Hero2 = () => {
    const { locale } = useRouter();
    console.log("locale : ", locale);
    const t = useTranslations("the_mission");
    let first_mission = [
        t("first_mission_financial_services_desc_p_1"),
        t("first_mission_financial_services_desc_p_2"),
        t("first_mission_financial_services_desc_p_3"),
        t("first_mission_financial_services_desc_p_4"),
        t("first_mission_financial_services_desc_p_5"),
    ];
    return (
        <>
            <section className={`wpo-practice-section-s3`}>
                <div style={{ border: "1px solid #fff", padding: '1rem' }} className="container">
                    <div className="wpo-section-title-s2">
                        <h2>{t("the_mission_title")}</h2>
                        <span>{t("the_mission_description")}</span>
                    </div>
                    <section className="wpo-hero-slider wpo-hero-style-3">
                        <Swiper
                            // install Swiper modules
                            modules={[Navigation, A11y]}
                            spaceBetween={0}
                            slidesPerView={1}
                            loop={true}
                            speed={1800}
                            parallax={true}
                            navigation
                        >
                            <SwiperSlide>
                                <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'/images/slider/slide-en-1.jpg'})` }}>
                                    <div className="slide-content">
                                        <div style={{ fontSize: '1.2rem', color: "#fff", textAlign: `${locale === "ar" ? "right" : ""}`, marginRight: `${locale === "ar" ? "3.9rem" : ""}` }} data-swiper-parallax="300" className="slide-title">
                                            <h2>{t("first_mission_financial_services_title")}</h2>
                                        </div>
                                        <div data-swiper-parallax="400" className="slide-text">
                                            <ul style={{ fontSize: '1.5rem', fontWeight: 'bold', color: "#fff", textAlign: `${locale === "ar" ? "right" : ""}`, marginRight: `${locale === "ar" ? "2rem" : ""}` }}>
                                                {
                                                    first_mission.map((mission, index) => (
                                                        <li key={index}>- {mission}</li>
                                                    ))
                                                }
                                            </ul>
                                        </div>
                                        <div className="clearfix"></div>
                                    </div>
                                </div>
                            </SwiperSlide>
                        </Swiper>
                    </section>
                </div>
            </section>
        </>
    )
}

export default Hero2;