import Box from '@mui/material/Box'
import Link from '@mui/material/Link'
import Paper from '@mui/material/Paper'
import Stack from '@mui/material/Stack'
import Typography from '@mui/material/Typography'
import { STORE_EMAIL, STORE_PHONE, VK_URL } from '@/shared/config'
import { PICKUP_ADDRESS_FULL, PICKUP_COORDINATES } from '@/shared/constants/pickup-point'
import { usePageTitle } from '@/shared/lib/use-page-title'
import { AboutMap } from './AboutMap'

export function AboutPage() {
  usePageTitle('О нас')
  const { lat, lng } = PICKUP_COORDINATES
  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        О нас
      </Typography>
      <Typography color="text.secondary" sx={{ mb: 3 }}>
        Магазин изделий ручной работы. Мы отвечаем за качество и сроки изготовления всего, что вы видите в каталоге.
      </Typography>

      <Stack spacing={3}>
        <Paper variant="outlined" sx={{ p: 2, borderRadius: 2 }}>
          <Typography variant="h6" gutterBottom>
            Контакты
          </Typography>
          <Typography variant="body2" sx={{ mt: 1 }}>
            Email:{' '}
            <Link href={`mailto:${STORE_EMAIL}`} underline="hover">
              {STORE_EMAIL}
            </Link>
          </Typography>
          <Typography variant="body2">
            Телефон:{' '}
            <Link href={`tel:${STORE_PHONE.replace(/\s/g, '')}`} underline="hover">
              {STORE_PHONE}
            </Link>
          </Typography>
          <Typography variant="body2">
            <Link href={VK_URL} target="_blank" rel="noopener noreferrer" underline="hover">
              ВКонтакте
            </Link>
          </Typography>
          <Typography sx={{ mb: 1, mt: 2 }}>Забрать заказ можно по адресу:</Typography>
          <Typography sx={{ whiteSpace: 'pre-wrap', fontWeight: 600 }}>{PICKUP_ADDRESS_FULL}</Typography>
          <Typography color="text.secondary" variant="body2" sx={{ mt: 1 }}>
            Перед визитом согласуйте время — чтобы заказ точно был готов к выдаче.
          </Typography>
        </Paper>

        <AboutMap lat={lat} lng={lng} />
      </Stack>
    </Box>
  )
}