import { Button, Grid, TextField, Typography } from '@mui/material'
import React from 'react'
import EmailCollector from './EmailCollector'
import Link from '@mui/material/Link'

const styles = {
    push: {
        marginRight: '50px'
    },
    input: {

    },
    middle: {
        marginBottom: '60px'
    },
    title: {
        fontSize: '18px',
        fontWeight: '600',
        marginBottom: '15px'
    },
    listItem: {
        marginBottom: '14px'
    }
}

const Footer = () => {
  return (
    <div className='section footer'>
        <div className='flex-rw-cntr just-between bottom-border' style={{ marginBottom: '50px'}}>
            <div >
                <a href='/' className='logo-cont'>
                    <img className='logo-md' src="/squash.webp" alt="" />
                    <span className='logo-txt-md font-bold'>SQUASH</span>
                </a>
            </div>
            <div className='flex-rw-cntr'>
                <Typography variant='h6' style={styles.push}>Ready to get started?</Typography>
                <Link href='contact' underline='none'>
                    <Button variant='contained'>Contact Us</Button>
                </Link>
            </div>
        </div>
        <div style={styles.middle}>
            <Grid container spacing={2}>
                <Grid item xs={6}>
                    <Typography variant='h6' sx={{maxWidth: '152px', fontSize: '20px', marginBottom: '24px'}}>Subscribe to our mailing list</Typography>
                    <EmailCollector />
                </Grid>
                <Grid item xs={2}></Grid>
                <Grid item xs={2}>
                    <ul>
                        <li style={styles.title}>Pages</li>
                        <li style={styles.listItem}><Link href='/' variant='subtitle2'>Home</Link></li>
                        <li style={styles.listItem}><Link href='about' variant='subtitle2'>About Us</Link></li>
                        <li style={styles.listItem}><Link href='contact' variant='subtitle2'>Contact</Link></li>
                    </ul>
                </Grid>
                <Grid item xs={2}></Grid>
            </Grid>
        </div>
        <div>
            <Link href='terms-conditions' variant='h6' underline='hover' sx={{ marginRight: '30px'}}>Terms & Conditions</Link>
            <Link href='privacy-policy' variant='h6' underline='hover'>Privacy Policy</Link>
        </div>
    </div>
  )
}

export default Footer