'use client'

import { Container, Stack, Title, Text, Grid, ThemeIcon, List, Box } from '@pikku/mantine/core'
import { useI18n } from "@/context/i18n-provider"

const AboutPage: React.FunctionComponent = () => {
  const t = useI18n()

  return (
    <Container size="md" py="xl">
      <Title order={1} size="h1" mb="xl" ta="center">{t('website.about.title')}</Title>

      <Stack gap="xl">
        <Text size="lg" c="dimmed">
          {t('website.about.description')}
        </Text>

        <Stack gap="md">
          <Title order={2} size="h2" mt="xl" mb="md">{t('website.about.mission.title')}</Title>
          <Text c="dimmed">
            {t('website.about.mission.description')}
          </Text>
        </Stack>

        <Stack gap="md">
          <Title order={2} size="h2" mt="xl" mb="md">{t('website.about.howitworks.title')}</Title>
          <Grid mt="md">
            <Grid.Col span={{ base: 12, md: 4 }}>
              <Stack align="center" ta="center" gap="md">
                <ThemeIcon size="xl" radius="xl" variant="light" color="blue">
                  <Text size="xl" fw={700}>{1}</Text>
                </ThemeIcon>
                <Title order={3} size="lg" mb="xs">{t('website.about.howitworks.step1.title')}</Title>
                <Text size="sm" c="dimmed">
                  {t('website.about.howitworks.step1.description')}
                </Text>
              </Stack>
            </Grid.Col>

            <Grid.Col span={{ base: 12, md: 4 }}>
              <Stack align="center" ta="center" gap="md">
                <ThemeIcon size="xl" radius="xl" variant="light" color="blue">
                  <Text size="xl" fw={700}>{2}</Text>
                </ThemeIcon>
                <Title order={3} size="lg" mb="xs">{t('website.about.howitworks.step2.title')}</Title>
                <Text size="sm" c="dimmed">
                  {t('website.about.howitworks.step2.description')}
                </Text>
              </Stack>
            </Grid.Col>

            <Grid.Col span={{ base: 12, md: 4 }}>
              <Stack align="center" ta="center" gap="md">
                <ThemeIcon size="xl" radius="xl" variant="light" color="blue">
                  <Text size="xl" fw={700}>{3}</Text>
                </ThemeIcon>
                <Title order={3} size="lg" mb="xs">{t('website.about.howitworks.step3.title')}</Title>
                <Text size="sm" c="dimmed">
                  {t('website.about.howitworks.step3.description')}
                </Text>
              </Stack>
            </Grid.Col>
          </Grid>
        </Stack>

        <Stack gap="md">
          <Title order={2} size="h2" mt="xl" mb="md">{t('website.about.whychoose.title')}</Title>
          <List spacing="xs" c="dimmed">
            <List.Item>
              {t('website.about.whychoose.fast.summary')}
            </List.Item>
            <List.Item>
              {t('website.about.whychoose.free.summary')}
            </List.Item>
            <List.Item>
              {t('website.about.whychoose.secure.summary')}
            </List.Item>
            <List.Item>
              {t('website.about.whychoose.support.summary')}
            </List.Item>
          </List>
        </Stack>

        <Box bg="blue.0" p="xl" style={{ borderRadius: 'var(--mantine-radius-lg)' }} mt="xl">
          <Title order={3} size="xl" mb="md">{t('website.about.cta.title')}</Title>
          <Text c="dimmed" mb="md">
            {t('website.about.cta.description')}
          </Text>
        </Box>
      </Stack>
    </Container>
  )
}

export default AboutPage