import {
    createStyles,
    Title,
    SimpleGrid,
    Text,
    Button,
    ThemeIcon,
    Grid,
    Col,
    rem,
    Container,
  } from '@mantine/core';
  import { IconReceiptOff, IconFlame, IconCircleDotted, IconFileCode } from '@tabler/icons-react';
  
  const useStyles = createStyles((theme) => ({
    wrapper: {
      padding: `calc(${theme.spacing.xl} * 2) ${theme.spacing.xl}`,
      minHeight: '58vh',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      overflowX: 'hidden'
    },
  
    title: {
      fontFamily: `Greycliff CF, ${theme.fontFamily}`,
      fontSize: rem(36),
      fontWeight: 900,
      lineHeight: 1.1,
      marginBottom: theme.spacing.md,
      color: theme.colorScheme === 'dark' ? theme.white : theme.black,
    },
  }));
  
  const features = [
    {
      icon: IconReceiptOff,
      title: 'Открывает',
      description: 'All packages are published under MIT license, you can use Mantine in any project',
    },
    {
      icon: IconFileCode,
      title: 'Сохраняет',
      description: 'Build type safe applications, all components and hooks export types',
    },
    {
      icon: IconCircleDotted,
      title: 'Объединяет',
      description:
        'With new :focus-visible selector focus ring will appear only when user navigates with keyboard',
    },
    {
      icon: IconFlame,
      title: 'Помогает',
      description:
        'Customize colors, spacing, shadows, fonts and many other settings with global theme object',
    },
  ];
  
  export function Landing() {
    const { classes } = useStyles();
  
    const items = features.map((feature) => (
      <div key={feature.title}>
        <ThemeIcon
          size={44}
          radius="md"
          variant="gradient"
          gradient={{ deg: 133, from: 'blue', to: 'cyan' }}
        >
          <feature.icon size={rem(26)} stroke={1.5} />
        </ThemeIcon>
        <Text fz="lg" mt="sm" fw={500}>
          {feature.title}
        </Text>
        <Text c="dimmed" fz="sm">
          {feature.description}
        </Text>
      </div>
    ));
  
    return (
      <Container size={'xl'} className={classes.wrapper}>
        <Grid gutter={80}>
          <Col span={12} md={5}>
            <Title className={classes.title} order={2}>
              Литкарта
            </Title>
            <Text c="dimmed">
              Пространство для русской литературы
            </Text>
  
            <Button
              variant='outline'
              size="lg"
              radius="md"
              mt="xl"
              mr={'md'}
            >
              Подробнее
            </Button>
            <Button
              component='a'
              href="/"
              variant="gradient"
              gradient={{ deg: 133, from: 'blue', to: 'cyan' }}
              size="lg"
              radius="md"
              mt="xl"
            >
              К карте
            </Button>
          </Col>
          <Col span={12} md={7}>
            <SimpleGrid cols={2} spacing={30} breakpoints={[{ maxWidth: 'md', cols: 1 }]}>
              {items}
            </SimpleGrid>
          </Col>
        </Grid>
      </Container>
    );
  }