import React from "react";

import Head from "next/head";

import AppContext from "../../particles/contexts/app-context";

import AppTemplate from "../../templates/app";
import Footer from "../../organisms/footer";
import AboutUsHero from "../../organisms/about-us-hero";
import AboutUsCountables from "../../organisms/about-us-countables";

import AboutUs from "../../organisms/about-us";
import SeoMessage from "../../organisms/seo-message";

import styles from "./AboutUs.module.scss";
import QualityStatement from "../../organisms/quality-statement";
import OurVision from "../../organisms/our-vision";
import ContactUs from "../../organisms/contact-us";
import Header from "../../organisms/header";
import OurClients from "../../organisms/our-clients";
import OurPartners from "../../organisms/our-partners";

const AboutUsPage = ({ siteSettings, companies, partners, appData }: any) => {
  return (
    <AppContext.Provider value={appData}>
      <AppTemplate
        header={<Header />}
        hero={
          <div className={styles.hero}>
            <AboutUsHero />
          </div>
        }
        footer={<Footer />}
      >
        <Head>
          <title>BASS</title>
        </Head>

        <main>
          <div className="mt-10 mb-20">
            <AboutUs data={siteSettings.about} />
          </div>

          <div className="flex justify-center mb-20">
            <SeoMessage data={appData.CEO} />
          </div>

          <div className="mb-20">
            <AboutUsCountables
              yearsNumber={appData.years_no}
              projectsNumber={appData.projects_no}
              clientsNumber={appData.clients_no}
              awardsNumber={appData.awards_no}
            />
          </div>

          <div className="mb-20">
            <QualityStatement data={siteSettings.quality} />
          </div>

          <OurVision vision={appData.vision} mission={appData.mission} />

          <ContactUs />
        </main>
      </AppTemplate>
    </AppContext.Provider>
  );
};

export default AboutUsPage;
