import React from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui/icons
import Email from "@material-ui/icons/Email";
import Phone from "@material-ui/icons/Phone";
// core components
import Header from "components/Header/Header.js";
import FooterHome from "components/Footer/FooterHome.js";
import Button from "components/CustomButtons/Button.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import HeaderLinks from "components/Header/HeaderLinks.js";
import NavPills from "components/NavPills/NavPills.js";
import Parallax from "components/Parallax/Parallax.js";

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

import profile from "assets/img/faces/christian.jpg";
import QR from "assets/img/sales/qr_steven.jpg";

import stylecss from "../pages/home.css";

const useStyles = makeStyles(styles);

export default function ProfilePage(props) {
    const classes = useStyles();
    const { ...rest } = props;
    const imageClasses = classNames(
        classes.imgRaised,
        classes.imgRoundedCircle,
        classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    return (
        <div>
            <Parallax image={require("assets/img/merci.png")} height="50px" />
            <div className={classNames(classes.main, classes.mainRaised)}>
                <div>
                    <div className={classes.container}>
                        <GridContainer justify="center">
                            <GridItem xs={12} sm={12} md={6}>
                                <div className={classes.profile}>
                                    <div>
                                        <img
                                            src={profile}
                                            alt="..."
                                            className={imageClasses}
                                        />
                                    </div>
                                    <div className={classes.name}>
                                        <div><h1><strong>Steven</strong></h1></div>
                                        <div><h4><strong>Sales Consultant</strong></h4></div>
                                        <div align="center">
                                            <h5><strong>PT. Thamrin Citra Abadi</strong></h5>
                                            <h5><strong>Authorized Mercedes-Benz Dealer</strong></h5>
                                        </div>
                                    </div>
                                    <Button color="primary" round href="tel:087797315685" target="_blank">
                                        <Phone className={classes.icons} /> Call Us
                                    </Button>
                                    <Button color="primary" round href="mailto:yyusmar2@gmail.com" target="_blank">
                                        <Email className={classes.icons} /> Email Us
                                    </Button>
                                </div>
                            </GridItem>
                        </GridContainer><br /><br />
                        <div align="center">
                            <h5><strong>Please scan the QR Code below to get my contant or for further assistance</strong></h5>
                        </div>
                        <div align="center"><img src={QR} /></div>
                        <GridContainer justify="center">
                            <GridItem xs={12} sm={12} md={8} className={classes.navWrapper}>
                            </GridItem>
                        </GridContainer>
                    </div>
                </div>
            </div><br />
            <FooterHome />
        </div>
    );
}