/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx, Box, Container, Image, Text } from 'theme-ui';
import SectionHeading from 'components/section-heading';
import { rgba } from 'polished';
import quote from 'assets/images/icons/quote.png';
import yamaha from 'assets/images/logos/yamaha.png';
import suzuki from 'assets/images/logos/suzuki.png';
import mercedes from 'assets/images/logos/mercedes.png';
import hino from 'assets/images/logos/hino.png';
import honda from 'assets/images/logos/honda.png';
import pim from 'assets/images/logos/pim.png';
import emilia from 'assets/images/logos/emilia.png';
import bpr from 'assets/images/logos/bpr.png';
import snapy from 'assets/images/logos/snapy.png';
import homes from 'assets/images/logos/homes.png';
import regis from 'assets/images/logos/regis.png';
import citra from 'assets/images/logos/cmas.png';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles({
  root: {
    maxWidth: 600,
    flexGrow: 1,
  },
});

const Testimonials = () => {
  const classes = useStyles();
  return (
    <Box as="section" id="testimonials" sx={styles.section}>
      <Container>
        <SectionHeading
          sx={styles.heading}
          title="Thamrin Group Business Partner"
        />
        <Grid container spacing={3}>
          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
            <div align="center"><br></br><br></br>
              <Image src={yamaha}/>
            </div>
          </Grid>
          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
            <div align="center">
              <Image src={suzuki} style={{height:"200px"}}/>
            </div>
          </Grid>
          <Grid container spacing={3}>
            <Grid item xs={12} sm={6}>
              <div align="center">
                <Button
                  variant="contained"
                  color="primary"
                  size="large"
                  className={classes.button}
                  href="https://yamaha.thamrin.co.id/"
                  target="_blank"
                >
                  Open For More Information
                </Button>
              </div>
            </Grid>
            <Grid item xs={12} sm={6}>
              <div align="center">
                <Button
                  variant="contained"
                  color="primary"
                  size="large"
                  className={classes.button}
                  href="https://yamaha.thamrin.co.id/"
                  target="_blank"
                >
                  Open For More Information
                </Button>
              </div>
            </Grid>
          </Grid>
          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
            <div align="center"><br></br><br></br>
              <Image src={mercedes}/>
            </div>
          </Grid>
          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
            <div align="center">
              <Image src={hino} style={{height:"200px"}}/>
            </div>
          </Grid>
          <Grid container spacing={3}>
            <Grid item xs={12} sm={6}>
              <div align="center">
                <Button
                  variant="contained"
                  color="primary"
                  size="large"
                  className={classes.button}
                  href="https://www.thamrin.mercedes-benz.co.id/en/desktop/passenger-cars.html"
                  target="_blank"
                >
                  Open For More Information
                </Button>
              </div>
            </Grid>
            <Grid item xs={12} sm={6}>
              <div align="center">
                <Button
                  variant="contained"
                  color="primary"
                  size="large"
                  className={classes.button}
                  href="https://www.instagram.com/hinoclm/"
                  target="_blank"
                >
                  Open For More Information
                </Button>
              </div>
            </Grid>
          </Grid>
          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
            <div align="center"><br></br><br></br>
              <Image src={homes}/>
            </div>
          </Grid>
          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
            <div align="center">
              <Image src={honda} style={{height:"200px"}}/>
            </div>
          </Grid>
          <Grid container spacing={3}>
            <Grid item xs={12} sm={6}>
              <div align="center">
                <Button
                  variant="contained"
                  color="primary"
                  size="large"
                  className={classes.button}
                  href="http://homes.thamrin.xyz/"
                  target="_blank"
                >
                  Open For More Information
                </Button>
              </div>
            </Grid>
            <Grid item xs={12} sm={6}>
              <div align="center">
                <Button
                  variant="contained"
                  color="primary"
                  size="large"
                  className={classes.button}
                  href="https://www.instagram.com/jambi.honda/"
                  target="_blank"
                >
                  Open For More Information
                </Button>
              </div>
            </Grid>
          </Grid>
          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
            <div align="center"><br></br><br></br>
              <Image src={pim}/>
            </div>
          </Grid>
          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
            <div align="center"><br></br><br></br>
              <Image src={emilia}/>
            </div>
          </Grid>
          <Grid container spacing={3}>
            <Grid item xs={12} sm={6}>
              <div align="center">
                <Button
                  variant="contained"
                  color="primary"
                  size="large"
                  className={classes.button}
                  href="https://www.instagram.com/palembangindahmall/"
                  target="_blank"
                >
                  Open For More Information
                </Button>
              </div>
            </Grid>
            <Grid item xs={12} sm={6}>
              <div align="center">
                <Button
                  variant="contained"
                  color="primary"
                  size="large"
                  className={classes.button}
                  href="http://www.emilia-hotel.com/"
                  target="_blank"
                >
                  Open For More Information
                </Button>
              </div>
            </Grid>
          </Grid>
          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
            <div align="center"><br></br><br></br>
              <Image src={bpr}/>
            </div>
          </Grid>
          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
            <div align="center"><br></br>
              <Image src={snapy}/>
            </div>
          </Grid>
          <Grid container spacing={3}>
            <Grid item xs={12} sm={6}>
              <div align="center">
                <Button
                  variant="contained"
                  color="primary"
                  size="large"
                  className={classes.button}
                  href="http://bprberkatsejati.com/"
                  target="_blank"
                >
                  Open For More Information
                </Button>
              </div>
            </Grid>
            <Grid item xs={12} sm={6}>
              <div align="center">
                <Button
                  variant="contained"
                  color="primary"
                  size="large"
                  className={classes.button}
                  href="https://yamaha.thamrin.co.id/"
                  target="_blank"
                >
                  Open For More Information
                </Button>
              </div>
            </Grid>
          </Grid>
          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
            <div align="center"><br></br>
              <Image src={regis}/>
            </div>
          </Grid>
          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
            <div align="center"><br></br><br></br><br></br><br></br>
              <Image src={citra}/>
            </div>
          </Grid>
          <Grid container spacing={3}>
            <Grid item xs={12} sm={6}>
              <div align="center">
                <Button
                  variant="contained"
                  color="primary"
                  size="large"
                  className={classes.button}
                  href="https://yamaha.thamrin.co.id/"
                  target="_blank"
                >
                  Open For More Information
                </Button>
              </div>
            </Grid>
            <Grid item xs={12} sm={6}>
              <div align="center">
                <Button
                  variant="contained"
                  color="primary"
                  size="large"
                  className={classes.button}
                  href="https://yamaha.thamrin.co.id/"
                  target="_blank"
                >
                  Open For More Information
                </Button>
              </div>
            </Grid>
          </Grid>
        </Grid>
      </Container>
    </Box>
  );
};

export default Testimonials;
const styles = {
  section: {
    backgroundColor: rgba('#FFF5ED', 0.5),
    pt: [7, null, null, 9, null, 10, 11],
    pb: [9, null, null, 10, 11],
  },
  tabs: {
    border: 0,
    flexDirection: ['column-reverse', null, null, null, null, 'column'],
    '.rc-tabs-nav': {
      mt: [8, null, null, 9, 11],
    },
    '.rc-tabs-nav-wrap': {
      borderTop: `1px solid ${rgba('#01070D', 0.1)}`,
      justifyContent: 'center',
    },
    '.rc-tabs-tab': {
      backgroundColor: 'transparent',
      // m: ['0 45px'],
    },
    '.rc-tabs-tab-btn': {
      display: 'flex',
      alignItems: 'center',
      lineHeight: 1,
      outline: 0,
      img: {
        outline: 0,
        maxWidth: [50, 65, null, 110, '80%', '100%'],
        m: ['0 auto'],
      },
    },
    '.rc-tabs-nav-list': {
      flexGrow: 1,
      justifyContent: 'space-evenly',
      pt: [4, null, null, 7, 9],
    },
    '.rc-tabs-tabpane': {
      outline: 0,
      blockquote: {
        fontFamily: 'heading',
        fontWeight: 400,
        fontSize: [2, null, null, 3, 4, 6],
        lineHeight: [1.87, null, null, 2.08],
        position: 'relative',
        maxWidth: 846,
        margin: '0px auto',
        pt: ['12px', null, null, '17px', '13px'],
        pl: [35, 35, 35, 10, 11],
        ':before': {
          background: `url(${quote}) no-repeat`,
          content: `''`,
          position: 'absolute',
          width: 128,
          height: 43,
          left: ['-31px', null, null, '-16px', '-7px', 0],
          top: ['1px', '1px', '1px', 0],
          backgroundSize: ['75%', null, null, '100%'],
        },
      },
      span: {
        color: '#7E8896',
        fontFamily: 'body',
        display: 'flex',
        fontWeight: 500,
        fontSize: [0, 1, 1, 2],
        lineHeight: 2.5,
        mt: [1, null, null, 3],
      },
    },
    '.rc-tabs-ink-bar': {
      top: 0,
      height: 2,
      backgroundColor: '#A17857',
      borderRadius: 5,
    },
  },
};