import React from 'react'
import { Box, Button, Typography } from '@mui/material'
import Grid from '@mui/material/Grid2';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import CarouselContainer from '../components/CarouselContainer'
import ProductSelected from '../components/ProductSelected'
// import SocialMedia from '../components/SocialMedia'
// import Feature from '../components/Feature'
// import { Link } from '@mui/material'
import VideoAds from '../components/VideoAds'
import ProductType from '../components/ProductType';
// import NewsLetter from '../components/NewsLetter';
import ProductService from "../services/ProductService"
import AmberHomeWallpaper from "../assets/images/amberHomeWallpaper.webp";
import AmberBeautyWallpaper from "../assets/images/amberBeautyWallpaper.webp";
import AmberClothing from "../assets/images/MAINHEADER-13.webp"

const stores = [
  {
    // name: "AMBER IOI STORE",
    // address: "IOI City Mall",
    name: "IOI CITY MALL",
    address: "G-67 IOI CITY MALL, PUTRAJAYA",
    image: "/AMBERIOISTORE.jpeg",
    directionUrl: "https://www.google.com/maps/search/?api=1&query=IOI%20City%20Mall%20Putrajaya"
  },
  {
    // name: "AMBER SWM STORE",
    // address: "Wangsa Walk Mall",
    name: "WANGSA WALK MALL",
    address: "LOT G-77, WANGSA WALK MALL, KUALA LUMPUR",
    image: "/AMBERSWMSTORE.jpeg",
    directionUrl: "https://www.google.com/maps/search/?api=1&query=AMBER%20Wangsa%20Walk%20Mall"
  }
]

const Home = () => {

  React.useEffect(()=>{
    ProductService.getProducts();
  },[])

  return (
    <>
      <CarouselContainer />
      <Box sx={{
        px: {
          xs: 2,
          md: 5,
          lg: 5
        }
      }}>

        <ProductSelected />
        
      </Box>

      <VideoAds />

      <Box sx={{
        px: {
          xs: 2,
          md: 5,
          lg: 5
        },
        mb: {
          xs: 2,
          md: 5,
          lg: 10
        }
      }}>

        <Box sx={{ flexGrow: 1, mt: 5 }}>
          <Grid container spacing={2}>
            <Grid size={12}>
              <ProductType title={'Apparel'} img_url={AmberClothing}/>
            </Grid>
            <Grid size={{xs:12, md:6}}>
              {/* <ProductType title={'BEAUTY'} img_url={AmberBeautyWallpaper}/> */}
              <ProductType title={'Essentials'} img_url={AmberBeautyWallpaper}/>
            </Grid>
            <Grid size={{xs:12, md:6}}>
              {/* <ProductType title={'HOME'} img_url={AmberHomeWallpaper} /> */}
              <ProductType title={'Essentials'} img_url={AmberHomeWallpaper} />
            </Grid>
          </Grid>
        </Box>

      </Box>

      {/*
      <NewsLetter />
      */}

      <Box sx={{ px:{
        xs: 2,
        md: 5,
        lg: 5
      }, mb: 10 }}>

        {/*
        <Feature />
        */}

        <Box id="find-us" sx={{ textAlign: "center", mt: 6 }}>
          <Typography
            component="a"
            href="#find-us"
            variant="body1"
            sx={{
              color: "inherit",
              display: "inline-block",
              fontWeight: "400",
              fontSize: {
                xs: "1.8rem",
                md: "2rem"
              },
              mb: 4,
              letterSpacing: 0,
              textDecoration: "none",
              textTransform: "uppercase"
            }}
          >
            FIND US
          </Typography>

          <Grid
            container
            spacing={2}
            sx={{
              maxWidth: 1200,
              mx: "auto"
            }}
          >
            {stores.map(({ name, address, image, directionUrl }) => (
              <Grid key={name} size={{ xs: 12, md: 6 }}>
                <Box
                  sx={{
                    position: "relative",
                    height: {
                      xs: 280,
                      sm: 360,
                      md: 400
                    },
                    overflow: "hidden",
                    borderRadius: "4px",
                    textAlign: "left",
                    "&:hover .store-image": {
                      transform: "scale(1.06)"
                    }
                  }}
                >
                  <Box
                    className="store-image"
                    sx={{
                      position: "absolute",
                      inset: 0,
                      backgroundImage: `url("${image}")`,
                      backgroundSize: "cover",
                      backgroundPosition: "center",
                      transition: "transform 550ms ease",
                      transform: "scale(1)"
                    }}
                  />
                  <Box
                    sx={{
                      position: "absolute",
                      inset: 0,
                      background: "linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.62) 100%)"
                    }}
                  />
                  <Box
                    sx={{
                      position: "absolute",
                      left: {
                        xs: 8,
                        md: 9
                      },
                      right: {
                        xs: 3,
                        md: 4
                      },
                      bottom: {
                        xs: 8,
                        md: 9
                      },
                      color: "#FFF"
                    }}
                  >
                    <Typography
                      variant="h4"
                      sx={{
                        fontWeight: "700",
                        mb: 0.5,
                        textTransform: "uppercase",
                        fontSize: {
                          xs: "1.45rem",
                          md: "1.65rem"
                        },
                        lineHeight: 1.1,
                        textShadow: "0 1px 8px rgba(0,0,0,0.55)"
                      }}
                    >
                      {name}
                    </Typography>
                    <Typography
                      variant="body2"
                      sx={{
                        fontWeight: "400",
                        mb: 2,
                        textTransform: "uppercase",
                        fontSize: {
                          xs: "0.8rem",
                          md: "0.9rem"
                        },
                        textShadow: "0 1px 8px rgba(0,0,0,0.55)"
                      }}
                    >
                      {address}
                    </Typography>
                    <Button
                      href={directionUrl}
                      target="_blank"
                      rel="noreferrer"
                      variant="contained"
                      sx={{
                        backgroundColor: "#000",
                        color: "#FFF",
                        textTransform: "none",
                        borderRadius: "4px",
                        minHeight: 38,
                        px: 2,
                        fontWeight: "700",
                        fontSize: "0.875rem",
                        "&:hover": {
                          backgroundColor: "#222"
                        }
                      }}
                      startIcon={<LocationOnIcon />}
                    >
                      Directions
                    </Button>
                  </Box>
                </Box>
              </Grid>
            ))}
          </Grid>
        </Box>
      </Box>


    </>
  )
}

export default Home