import Box from '@mui/material/Box'
import Link from '@mui/material/Link'
import Stack from '@mui/material/Stack'
import Typography from '@mui/material/Typography'
import { Package, Store } from 'lucide-react'
import { Link as RouterLink } from 'react-router-dom'
import { DELIVERY_CARRIER_OPTIONS } from '@/shared/constants/delivery-carrier'
import { PICKUP_ADDRESS_FULL } from '@/shared/constants/pickup-point'

export function DeliverySection() {
  return (
    <Box>
      <Typography
        variant="h5"
        sx={{
          fontWeight: 700,
          letterSpacing: '-0.03em',
          lineHeight: 1.15,
          mb: 3,
        }}
      >
        Доставка
      </Typography>

      <Stack
        direction={{ xs: 'column', sm: 'row' }}
        spacing={3}
        sx={{
          p: 3,
          borderRadius: '14px',
          border: '1px solid',
          borderColor: 'divider',
        }}
      >
        {/* Pickup */}
        <Box sx={{ flex: 1 }}>
          <Stack spacing={2}>
            <Stack direction="row" spacing={1.5} sx={{ alignItems: 'center' }}>
              <Box
                sx={{
                  width: 40,
                  height: 40,
                  borderRadius: '10px',
                  backgroundColor: 'action.hover',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: 'text.secondary',
                }}
              >
                <Store size={20} />
              </Box>
              <Typography
                sx={{
                  fontWeight: 600,
                  fontSize: '0.95rem',
                  letterSpacing: '-0.01em',
                }}
              >
                Самовывоз
              </Typography>
            </Stack>
            <Typography
              sx={{
                fontSize: '0.8rem',
                color: 'text.secondary',
                lineHeight: 1.65,
              }}
            >
              Бесплатно.
            </Typography>
            <Typography
              sx={{
                fontSize: '0.8rem',
                color: 'text.secondary',
                lineHeight: 1.65,
              }}
            >
              {PICKUP_ADDRESS_FULL}
            </Typography>
            <Typography
              sx={{
                fontSize: '0.8rem',
                color: 'text.secondary',
                lineHeight: 1.65,
              }}
            >
              Перед визитом согласуем время — чтобы заказ точно был готов к выдаче.
            </Typography>
            <Link component={RouterLink} to="/about" sx={{ fontSize: '0.8rem', fontWeight: 500, mt: 0.5 }}>
              Посмотреть на карте
            </Link>
          </Stack>
        </Box>

        <Box
          sx={{
            width: '1px',
            flexShrink: 0,
            display: { xs: 'none', sm: 'block' },
            borderLeft: '1px solid',
            borderColor: 'divider',
          }}
        />

        {/* Delivery */}
        <Box sx={{ flex: 1 }}>
          <Stack spacing={2}>
            <Stack direction="row" spacing={1.5} sx={{ alignItems: 'center' }}>
              <Box
                sx={{
                  width: 40,
                  height: 40,
                  borderRadius: '10px',
                  backgroundColor: 'action.hover',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: 'text.secondary',
                }}
              >
                <Package size={20} />
              </Box>
              <Typography
                sx={{
                  fontWeight: 600,
                  fontSize: '0.95rem',
                  letterSpacing: '-0.01em',
                }}
              >
                Доставка по России
              </Typography>
            </Stack>
            <Typography
              sx={{
                fontSize: '0.8rem',
                color: 'text.secondary',
                lineHeight: 1.65,
              }}
            >
              Доступные службы доставки:
            </Typography>
            <Stack component="ul" spacing={0.75} sx={{ pl: 2, m: 0, listStyle: 'disc' }}>
              {DELIVERY_CARRIER_OPTIONS.map((c) => (
                <Typography
                  key={c.code}
                  component="li"
                  sx={{
                    fontSize: '0.8rem',
                    color: 'text.secondary',
                    lineHeight: 1.5,
                  }}
                >
                  {c.label}
                </Typography>
              ))}
            </Stack>
            <Typography
              sx={{
                fontSize: '0.8rem',
                color: 'text.secondary',
                lineHeight: 1.65,
              }}
            >
              Стоимость рассчитывается по тарифу перевозчика. Админ скорректирует цену после оформления заказа.
            </Typography>
          </Stack>
        </Box>
      </Stack>
    </Box>
  )
}
