import React from 'react'
import styles from '@/components/styles/Roadmap.module.css'
import Grid from '@mui/material/Grid'
import Image from 'next/image'
import { ScreenSizes } from '@/utils/screenSizes'
import useMediaQuey from '@mui/material/useMediaQuery'

const imageStyle = {
  objectFit: 'cover',
  borderRadius: '6px'
}

const Roadmap = () => {
  const matches = useMediaQuey('(min-width: 768px)')

  return (
    <>
        <div className="section">
            <div className="col centered">
                <h2 className={styles.heading}>How it works</h2>
                <p className='subtitle'>See how Squash helps you design and build the best digital experience for your customers</p>
                <Grid container spacing={0.5} className={styles.grid}>
                  <Grid item md={5} xs={12} className={styles.gridItem}>
                    <div>
                       <h6>Consult with us on your brief</h6>
                       <p>Set up a call or meeting to go over your vision and goals for your new website with our designers and developers so that we can build your perfect website.</p>
                    </div>
                    <div>
                      <Image style={imageStyle} src="/development.jpg" alt="" width={333} height={221}/>
                    </div>
                    <div>
                      <h6>Delivery and de-brief</h6>
                      <p>When we hand over your new website, we sit down with you to explain how it works and what to be aware of. Enjoy your brand new site that fits in perfectly with the 21st centurty.</p>
                    </div>
                  </Grid>
                  <Grid item md={2} xs={12} className={styles.gridItem}>
                    <span className={styles.point}>01</span>
                    <span className={styles.point}>02</span>
                    <span className={styles.point}>03</span>
                  </Grid>
                  <Grid item md={5} xs={12} className={styles.gridItem}>
                    <div>
                    <Image style={imageStyle} src="/brief.jpg" alt="" width={333} height={221}/>
                    </div>
                    <div>
                      <h6>We start developing</h6>
                      <p>Our designers and developers will get to work building your vision making the most optimised and aesthetic product to your sepcifications from our brief.</p>
                    </div>
                    <div>
                      <Image style={imageStyle} src="/handover.jpg" alt="" width={333} height={221}/>
                    </div>
                  </Grid>
                </Grid>
            </div>
        </div>
    </>
  )
}

export default Roadmap