import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons
import Chat from "@material-ui/icons/Chat";
import VerifiedUser from "@material-ui/icons/VerifiedUser";
import Fingerprint from "@material-ui/icons/Fingerprint";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import InfoArea from "components/InfoArea/InfoArea.js";
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

import styles from "assets/jss/nextjs-material-kit/pages/landingPageSections/productStyle.js";

import core1 from "assets/img/core/core1.png";
import core2 from "assets/img/core/core2.png";
import core3 from "assets/img/core/core3.png";
import core4 from "assets/img/core/core4.png";
import core5 from "assets/img/core/core5.png";

const useStyles = makeStyles(styles);

export default function ProductSection() {
  const classes = useStyles();
  return (
    <div className={classes.section}>
      <h2 className={classes.title}>Thamrin Group Core Value</h2>
      <div>
          <GridItem xs={12}>
            <br/>
            <div align="center">
              <img src={core1}/>
              <InfoArea
                title="TRUST"
                description="Mampu bertindak secara konsisten terhadap Nilai-nilai, aturan, standar kerja dan kebijakan yang berlaku Walaupun dalam keadaan yang sulit untuk melakukannya."
                icon={VerifiedUser}
                iconColor="success"
                vertical
              />
            </div>
          </GridItem>
          <GridItem xs={12}>
            <br/>
            <div align="center">
              <img src={core2}/>
              <InfoArea
                title="CUSTOMER FOCUS"
                description="Secara proaktif membangun hubungan dengan pelanggan ( internal/ekternal ) Dengan berupaya untuk memahami kebutuhanya, mengantisipasi dan mengatasi Permasalahan demi kepuasan pelanggan. "
                icon={VerifiedUser}
                iconColor="success"
                vertical
              />
            </div>
          </GridItem>
          <GridItem xs={12}>
            <br/>
            <div align="center">
              <img src={core3}/>
              <InfoArea
                title="COMMUNICATION"
                description="Menyampaikan secara jelas informasi dan ide-ide baik secara lisan maupun secara tertulis kepada pihak lain secara baik dan dapat menarik perhatian agar mereka dapat memahami pesan yang di sampaikan."
                icon={VerifiedUser}
                iconColor="success"
                vertical
              />
            </div>
          </GridItem>
          <GridItem xs={12}>
            <br/>
            <div align="center">
              <img src={core4}/>
              <InfoArea
                title="CONTINUOUS IMPROVEMENT"
                description="Mendorong upaya perbaikan dan peningkatan kwalitas proses Dan hasil kerja secara berkesinambungan, dengan menggunakan metode yang Efektif dan mengukur dampak perubahan yg dihasilkan."
                icon={VerifiedUser}
                iconColor="success"
                vertical
              />
            </div>
          </GridItem>
          <GridItem xs={12}>
            <br/>
            <div align="center">
              <img src={core5}/>
              <InfoArea
                title="TEAMWORK"
                description="Bekerja secara kolaboratif dengan sekelompok orang untuk mencapai sasaran."
                icon={VerifiedUser}
                iconColor="success"
                vertical
              />
            </div>
          </GridItem>
      </div>
    </div>
  );
}