import { Grid, Card, CardContent, Typography, Box, Container } from '@mui/material';

import SecurityIcon from '@mui/icons-material/Security';
import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
import SearchIcon from '@mui/icons-material/Search';
import UpdateIcon from '@mui/icons-material/Update';

const features = [
  {
    icon: <SecurityIcon fontSize="large" color="primary" />,
    title: 'Прозрачность и надёжность',
    text: 'Все представленные данные основаны на официальных источниках и актуальных предложениях банков.',
  },
  {
    icon: <AutoAwesomeIcon fontSize="large" color="primary" />,
    title: 'Современные технологии',
    text: 'Сайт создан с использованием современных веб-технологий для стабильной и быстрой работы.',
  },
  {
    icon: <SearchIcon fontSize="large" color="primary" />,
    title: 'Удобный поиск услуг',
    text: 'Интерактивный каталог позволяет быстро находить нужные продукты по типу, ставке или сроку.',
  },
  {
    icon: <UpdateIcon fontSize="large" color="primary" />,
    title: 'Актуальная информация',
    text: 'Информация регулярно обновляется, чтобы пользователи всегда получали свежие данные и выгодные предложения.',
  },
];

export const Features = () => {
  return (
    <Container maxWidth="lg">
      <Box sx={{ py: 8 }}>
        <Typography component="h2" variant="h2" gutterBottom sx={{ color: 'text.primary', textAlign: 'center' }}>
          Наши преимущества
        </Typography>
        <Grid container spacing={4} sx={{ pt: 5 }}>
          {features.map((item, i) => (
            <Grid key={i} sx={{ display: 'flex' }} size={6}>
              <Card sx={{ height: '100%', textAlign: 'center', p: 2 }}>
                <Box sx={{ mt: 2 }}>{item.icon}</Box>
                <CardContent>
                  <Typography variant="h6" gutterBottom>
                    {item.title}
                  </Typography>
                  <Typography variant="body2" color="text.secondary">
                    {item.text}
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Box>
    </Container>
  );
};
