'use client'

import { Stack, Text, Divider, Anchor, Title, Card } from '@pikku/mantine/core'
import { useI18n } from '@/context/i18n-provider'
import { asI18n } from '@pikku/react'

export default function HowToApply() {
  const t = useI18n()

  return (
    <Stack gap="md" mt="md">
      <Text lineBreaks>{t('jobs.howtoapply.intro1')}</Text>

      <Text>
        {asI18n(`${t('jobs.howtoapply.applicationform')} `)}
        <Anchor
          href="/pdf/Application_Form_Nurse.pdf"
          target="_blank"
          rel="noopener noreferrer"
          c="primary"
          td="underline"
          fw={700}
        >
          {asI18n('here')}
        </Anchor>
      </Text>

      <Text lineBreaks>{t('jobs.howtoapply.reminder')}</Text>

      <Text lineBreaks>{t('jobs.howtoapply.submission')}</Text>

      <Divider />
      <Title order={4}>{t('jobs.howtoapply.contacttitle')}</Title>
      <Text lineBreaks>{t('jobs.howtoapply.contact.address')}</Text>
      <Text>
        {asI18n('Email: ')}
        <Anchor
          href={`mailto:${t('jobs.howtoapply.contact.email')}`}
          c="primary"
          fw={700}
        >
          {t('jobs.howtoapply.contact.email')}
        </Anchor>
      </Text>
      <Text>{asI18n(`Phone: ${t('jobs.howtoapply.contact.phone')}`)}</Text>
      <Text lineBreaks>{t('jobs.howtoapply.contact.hours')}</Text>

      <Card withBorder padding="md" radius="sm" mt="md">
        <Text lineBreaks>{t('jobs.howtoapply.tip')}</Text>
      </Card>

      <Text lineBreaks>{t('jobs.howtoapply.waiver')}</Text>

      <Divider />
      <Text lineBreaks>{t('jobs.howtoapply.counseling')}</Text>
    </Stack>
  )
}