import Grid from '@mui/material/Grid'
import SvgIcon from '@mui/material/SvgIcon'
import React from 'react'
import CheckIcon from '@mui/icons-material/Check';
import { Button } from '@mui/material';

const pricing = [
    {
       title: 'Starter Website',
       text: 'Get your digital footprint out there quick with a basic website.',
       price: '$5,000',
       points: [
        '2 Pages',
        'Static website',
        'Basic SEO',
        'Templated Website'
       ],
       action: 'Purchase',
       highlight: false
    },
    {
       title: 'General Website',
       text: 'Get the best product with custom UI/ UX design and creative elements built in.',
       price: '$10,000',
       points: [
        '3 Pages',
        'Custom UI/ UX',
        'Basic SEO',
        'Animations'
       ],
       action: 'Purchase',
       highlight: true
    },
    {
       title: 'Website +',
       text: "Consult with us on building a custom website for e-comm and more.",
       price: 'Enquire',
       points: [
        'Web App',
        'Online Store',
        'Admin interfaces',
        'Blockchain'
       ],
       action: 'Enquire',
       highlight: false
    }
]

const Pricing = () => {

    const styles = {
        svgIcon: {
            backgroundColor: 'var(--slate)',
            borderRadius: '50%',
            padding: '5px 4px',
            marginRight: '8.2px'
        },
        icon: {
            width: '6px',
            height: '4px'
        },
        listItem: {
            display: 'flex',
            alignItems: 'center',
            marginBottom: '12px'
        },
        button: {
            width: '100%',
            border: '1px solid var(--grey-90)',
            borderRadius: '6px',
            color: 'var(--grey-90)',
            fontWeight: '600',
            fontSize: '18px',
            fontFamily: 'Manrope'
        },
    }

  return (
    <div className="section dark">
        <div className="col centered">
            <h2>Pricing</h2>
            <p className='subtitle'>Explore pricing options or consult with us on making your custom order.</p>
            <Grid container spacing={3.5}>
                {pricing.map((price) => (
                    <Grid item key={price.title} xs={4}>
                        <div className={`pricing-card ${price.highlight ? 'yellow' : ''}`}>
                            <div>
                                <h6>{price.title}</h6>
                                <p>{price.text}</p>
                                <h2>{price.price}</h2>
                                <Button variant="outlined" style={styles.button}>
                                    {price.action}
                                </Button>
                            </div>
                            <div>
                                <ul>
                                    {price.points.map((point) => (
                                        <li key={point} style={styles.listItem}><CheckIcon style={styles.svgIcon} />{point}</li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                    </Grid>
                ))}
            </Grid>
        </div>
    </div>
  )
}

export default Pricing