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

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

  return (
    <Box component="section" py="xl" pos="relative" flex={1}>
      <Container size="xl" pt="xl">
        <Grid gutter="xl" align="stretch">

          {/* Who is This For Section */}
          <Grid.Col span={{ base: 12, md: 4 }}>
            <Stack gap="xl">
              <Box>
                <Title order={2} mb="md">{t('jobs.apply.whoisthisfor.title')}</Title>
                <Text size="sm">
                  {t('jobs.apply.whoisthisfor.description')}
                </Text>
              </Box>

              <Box>
                <Title order={2} mb="md">{t('jobs.apply.whatyoullget.title')}</Title>
                <List size="sm" spacing="xs">
                  <List.Item>{t('jobs.apply.whatyoullget.item1')}</List.Item>
                  <List.Item>{t('jobs.apply.whatyoullget.item2')}</List.Item>
                  <List.Item>{t('jobs.apply.whatyoullget.item3')}</List.Item>
                </List>
              </Box>

              <Box>
                <Title order={2} mb="md">{t('jobs.apply.whatyoullneed.title')}</Title>
                <List size="sm" spacing="xs">
                  <List.Item>{t('jobs.apply.whatyoullneed.item1')}</List.Item>
                  <List.Item>{t('jobs.apply.whatyoullneed.item2')}</List.Item>
                  <List.Item>
                    {t('jobs.apply.whatyoullneed.item3.title')}
                    <br />
                    {t('jobs.apply.whatyoullneed.item3.note')}
                  </List.Item>
                  <List.Item>
                    {t('jobs.apply.whatyoullneed.item4.title')}
                    <br />
                    {t('jobs.apply.whatyoullneed.item4.note')}
                  </List.Item>
                </List>
              </Box>
            </Stack>
          </Grid.Col>

          {/* Get Your Results Section */}
          <Grid.Col span={{ base: 12, md: 4 }}>
            <Stack gap="lg">
              <Box>
                <Title order={2} mb="md">{t('jobs.apply.getyourresults.title')}</Title>
                <Text size="sm" mt="md">
                  {t('jobs.apply.getyourresults.description')}
                </Text>
              </Box>
              <StartApplication initializing={false} />
            </Stack>
          </Grid.Col>
        </Grid>
      </Container>
    </Box>
  )
}

export default ApplyPage