text: /** @jsx jsx */
  import { jsx } from 'theme-ui';
  import { Container, Grid, Box, Heading, Text } from 'theme-ui';
  import SectionHeader from 'components/section-header';
  
  import PatternBG from 'assets/patternBG.png';
  import ArrowOdd from 'assets/arrowOdd.png';
  import ArrowEven from 'assets/arrowEven.png';
  
  const data = [
    {
      id: 1,
      title: 'Setup your current location to see stores in your city',
      text:
        'Enter your location so that we can show you which stores deliver to you. Your address is important to us as our delivery charge is calculated based on your kilometre radius from whichever store you\'re ordering from.',
      //'The DeliveryNow platform offers a ton of options, as you can have deliveries from any store in your city. Restaurants and stores are sorted by location, this makes it easier for you to locate your favourite stores easily.',
    },
    {
      id: 2,
      title: 'Select and add items to your cart',
      text:
        'Pick a store and select items you’d like to order. You can search by store name, dish name or by any keyword relating to your order.',
        //'This is a key offering of the DeliveryNow platform, as any store supported by DeliveryNow displays their entire menu through the app, and this would better help you in selecting and customizing your orders to your needs. With DeliveryNow, you are assured to always get your takeout order right.',
    },
    {
      id: 3,
      title: 'Checkout by securely paying with Paystack',
      text:
        'Enter your card details on our secure payment system, you can add comments or delivery suggestions. Always make sure that you enter the correct phone number at the point of registration to help us contact you regarding your order.',
    },
    {
      id: 4,
      title: 'Track your order',
      text:
        'Now sit back, relax, and we’ll get your food delivered to your doorstep. If needed you can call the agent assigned to your order in case you would like to get order updates on an alternative phone number',
    },
  ];
  
  export default function WorkFlow() {
    return (
      <section sx={styles.workflow}>
        <Container>
          <SectionHeader
            slogan="How does it work?"
            title="Let's make your first order in four easy steps!"
            isWhite={true}
          />
  
          <Grid sx={styles.grid}>
            {data.map((item) => (
              <Box sx={styles.card} key={item.id}>
                <Box sx={styles.iconBox}>{`0${item.id}`}</Box>
                <Box sx={styles.wrapper}>
                  <Heading sx={styles.wrapper.title}>{item.title}</Heading>
                  <Text sx={styles.wrapper.subTitle}>{item.text}</Text>
                </Box>
              </Box>
            ))}
          </Grid>
        </Container>
      </section>
    );
  }
  
  const styles = {
    workflow: {
      backgroundColor: 'primary',
      backgroundImage: `url(${PatternBG})`,
      backgroundRepeat: `no-repeat`,
      backgroundPosition: 'center center',
      backgroundSize: 'cover',
      position: 'relative',
      py: [8, null, 9, null, null, 10],
      '&::before': {
        position: 'absolute',
        content: '""',
        top: 0,
        right: 0,
        background:
          'linear-gradient(-45deg, rgba(42,72,125, 0.3) 25%, transparent 25%, transparent 50%, rgba(42,72,125, 0.3) 50%, rgba(42,72,125, 0.3) 75%, transparent 75%, transparent)',
        width: '100%',
        backgroundSize: '350px 350px',
        height: '100%',
        opacity: 0.3,
        zIndex: 0,
      },
    },
    grid: {
      mb: -1,
      pt: 0,
      gridGap: [
        '35px 0',
        null,
        '45px 50px',
        null,
        '50px 25px',
        null,
        null,
        '50px 65px',
      ],
      gridTemplateColumns: [
        'repeat(1,1fr)',
        null,
        'repeat(2,1fr)',
        null,
        'repeat(4,1fr)',
      ],
    },
    card: {
      display: 'flex',
      flexDirection: 'column',
      position: 'relative',
      textAlign: ['center', null, 'left'],
      width: ['100%', '80%', '100%'],
      mx: 'auto',
      '&::before': {
        position: 'absolute',
        content: '""',
        top: 0,
        left: [0, null, null, null, null, 75, null, 100],
        backgroundRepeat: `no-repeat`,
        backgroundPosition: 'center center',
        width: 215,
        height: 60,
        opacity: 0.3,
        '@media screen and (max-width:1220px)': {
          display: 'none',
        },
      },
      '&:nth-of-type(2n-1)::before': {
        backgroundImage: `url(${ArrowOdd})`,
      },
      '&:nth-of-type(2n)::before': {
        backgroundImage: `url(${ArrowEven})`,
        top: 17,
      },
      '&:last-child::before': {
        display: 'none',
      },
    },
  
    iconBox: {
      width: ['50px', null, '60px', null, null, '70px'],
      height: ['50px', null, '60px', null, null, '70px'],
      flexShrink: 0,
      borderRadius: [15, null, 23, null, null, 30],
      backgroundColor: 'white',
      display: 'flex',
      alignItems: 'center',
      mb: [5, null, null, null, null, 6],
      mx: ['auto', null, 0],
      fontSize: [6, null, 7, null, null, '30px'],
      fontWeight: 700,
      justifyContent: 'center',
      color: '#234582',
    },
    wrapper: {
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
      mt: '-5px',
      title: {
        fontSize: [3, null, 4, null, null, 5],
        color: 'white',
        lineHeight: [1.4, null, null, null, null, 1.55],
        pr: [0, null, null, null, null, 2],
        mb: [2, 3],
      },
  
      subTitle: {
        fontSize: 1,
        fontWeight: 400,
        lineHeight: [1.85, null, null, 1.9, 2],
        color: 'white',
        opacity: 0.65,
        pr: [0, null, null, null, null, 5],
      },
    },
  };
  