import React, { Fragment } from 'react';
import Navbar2 from '../../components/Navbar2/Navbar2';
import PageTitle from '../../components/pagetitle/PageTitle'
import About from '../../components/about/about';
import ServiceSection from '../../components/ServiceSection/ServiceSection';
import CampaignSection from '../../components/CampaignSection/CampaignSection';
import Scrollbar from '../../components/scrollbar/scrollbar'
import TeamSection from '../../components/TeamSection/TeamSection';
import Testimonial from '../../components/Testimonial/Testimonial';
import FunFact from '../../components/FunFact/FunFact';
import Donors from '../../components/aboutPage/Donors';
import PartnerSection from '../../components/PartnerSection/PartnerSection';
import Footer from '../../components/footer/Footer';
import abimg from '/public/images/about/our-story.webp'
import abimg2 from '/public/images/about/mission.webp'
import abimg3 from '/public/images/about/racial-justice.webp'
import AboutSection from '../../components/aboutPage/AboutSection';
import ServicesSection from '../../components/aboutPage/SevicesSection';
import TeamsSection from '../../components/aboutPage/TeamSection';
import TestimonialSection from '../../components/aboutPage/TestimonialSection';
import TestimonialSection2 from '../../components/aboutPage/TestimonialSection2';
import bg from '/public/images/about/about-banner.webp'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

const AboutPage = () => {
    const { t } = useTranslation('innerBanner');
    return (
        <Fragment>
            <Navbar2 />
            <PageTitle pageTitle={t('about.pageTitle')}  backgroundImage={bg} pagesub={t('about.pageSub')}  />
            <AboutSection abimg={abimg} abClass={'wpo-about-section-s2'} />
            <ServicesSection />
            {/* <CampaignSection /> */}
            {/* <Testimonial /> */}
            {/* <FunFact /> */}
            <TestimonialSection abimg={abimg2} />
            <TestimonialSection2 abimg={abimg3} />
            {/* <TeamsSection /> */}
            <Donors />
            {/* <PartnerSection/> */}
            <Footer />
            <Scrollbar />
        </Fragment>
    )
};
export default AboutPage;

// ✅ This enables translations (menu, and more if you add other namespaces)
export async function getStaticProps({ locale }) {
    return {
        props: {
            ...(await serverSideTranslations(locale, ['common', 'menu', 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor', 'footer', 'innerBanner', 'contact'])), // Add 'home', 'footer', etc. if needed
        },
    };
}