import React from 'react';
import { useTranslation } from 'next-i18next';

const OurMission = () => {
    const { t } = useTranslation('ourMission');

    return (
        <section className="wpo-blog-single-section section-padding">
            <div className="container">
                <div className="row">
                    <div className="col-12">
                        <div className="wpo-blog-content">
                            <div className="post format-standard-image">
                                <div
                                    className="entry-media"
                                    style={{ width: "100%", height: "auto", overflow: "hidden" }}
                                >
                                    <img
                                        src="/images/our-mission/section-1.png"
                                        alt=""
                                    />
                                </div>

                                <h2 className="mt-4">{t("ourMission.title")}</h2>

                                <p>{t("ourMission.p1")}</p>
                                <p>{t("ourMission.p2")}</p>

                                <blockquote>{t("ourMission.quote1")}</blockquote>

                                <p>{t("ourMission.p3")}</p>

                                <div className="gallery">
                                    <div>
                                        <img src="/images/our-mission/section-2-1.png" alt="" />
                                    </div>
                                    <div>
                                        <img src="/images/our-mission/section-2-2.png" alt="" />
                                    </div>
                                </div>

                                <p className='mt-4'>{t("ourMission.p4")}</p>
                                <p className='mt-4'>{t("ourMission.p5")}</p>

                                <blockquote>{t("ourMission.quote2")}</blockquote>

                                <p>{t("ourMission.p6")}</p>
                                <p>{t("ourMission.p7")}</p>
                                <p>{t("ourMission.p8")}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default OurMission;