import Box from '@mui/material/Box'
import Stack from '@mui/material/Stack'
import Typography from '@mui/material/Typography'
import { Banknote, CreditCard } from 'lucide-react'

const methods = [
  {
    icon: <CreditCard size={18} />,
    primary: 'Онлайн-оплата через ЮKassa',
    secondary: 'Карты, СБП. Оплата после подтверждения заказа админом. Перенаправление на защищённую платёжную страницу.',
  },
  {
    icon: <Banknote size={18} />,
    primary: 'Оплата при получении',
    secondary: 'Наличными или картой при самовывозе.',
  },
]

export function PaymentSection() {
  return (
    <Box>
      <Typography
        variant="h5"
        sx={{
          fontWeight: 700,
          letterSpacing: '-0.03em',
          lineHeight: 1.15,
          mb: 1,
        }}
      >
        Оплата
      </Typography>
      <Typography
        sx={{
          fontSize: '0.8rem',
          color: 'text.secondary',
          lineHeight: 1.65,
          mb: 3,
          maxWidth: '56ch',
        }}
      >
        Оплата происходит после подтверждения заказа админом. Вы получите уведомление, когда заказ будет подтверждён и готов к оплате.
      </Typography>

      <Stack spacing={2}>
        {methods.map((m) => (
          <Stack
            key={m.primary}
            direction="row"
            spacing={2}
            sx={{
              alignItems: 'flex-start',
              p: 2.5,
              borderRadius: '12px',
              border: '1px solid',
              borderColor: 'divider',
              transition: 'all 0.2s ease',
              '&:hover': {
                borderColor: 'action.disabledBackground',
              },
            }}
          >
            <Box
              sx={{
                width: 36,
                height: 36,
                borderRadius: '8px',
                backgroundColor: 'action.hover',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'text.secondary',
                flexShrink: 0,
              }}
            >
              {m.icon}
            </Box>
            <Stack spacing={0.25}>
              <Typography
                sx={{
                  fontWeight: 600,
                  fontSize: '0.875rem',
                  letterSpacing: '-0.01em',
                }}
              >
                {m.primary}
              </Typography>
              <Typography
                sx={{
                  fontSize: '0.8rem',
                  color: 'text.secondary',
                  lineHeight: 1.6,
                }}
              >
                {m.secondary}
              </Typography>
            </Stack>
          </Stack>
        ))}
      </Stack>
    </Box>
  )
}