import Paper from '@mui/material/Paper'
import Step from '@mui/material/Step'
import StepContent from '@mui/material/StepContent'
import StepLabel from '@mui/material/StepLabel'
import Stepper from '@mui/material/Stepper'
import Typography from '@mui/material/Typography'
import { CheckCircle, ClipboardList, Mail, ShoppingCart, Truck } from 'lucide-react'

const steps = [
  {
    label: 'Выберите товары',
    icon: <ShoppingCart size={20} />,
    text: 'Найдите нужные изделия в каталоге и добавьте их в корзину. Вы можете выбрать несколько товаров от разных мастеров — все они соберутся в одном заказе.',
  },
  {
    label: 'Проверьте корзину',
    icon: <ClipboardList size={20} />,
    text: 'Перейдите в корзину и проверьте состав заказа: названия товаров, количество и итоговую сумму. Здесь же можно изменить количество или удалить позиции.',
  },
  {
    label: 'Укажите контакты и адрес',
    icon: <Mail size={20} />,
    text: 'Заполните имя, телефон и email для связи. Укажите адрес доставки — город, улицу, дом и квартиру. Эти данные нужны для расчёта стоимости и сроков.',
  },
  {
    label: 'Выберите доставку и оплату',
    icon: <Truck size={20} />,
    text: 'Выберите способ доставки: самовывоз, курьер или почта/СДЭК. Затем укажите способ оплаты: картой онлайн или при получении.',
  },
  {
    label: 'Подтвердите заказ',
    icon: <CheckCircle size={20} />,
    text: 'Проверьте все данные ещё раз и нажмите «Оформить заказ». После этого мастер получит уведомление и начнёт подготовку вашего изделия.',
  },
]

export function HowToOrderSection() {
  return (
    <Paper variant="outlined" sx={{ p: 3, borderRadius: 2 }}>
      <Typography variant="h5" gutterBottom>
        Как оформить заказ
      </Typography>
      <Stepper orientation="vertical" activeStep={-1}>
        {steps.map((step) => (
          <Step key={step.label} completed={false}>
            <StepLabel slots={{ stepIcon: () => step.icon }}>{step.label}</StepLabel>
            <StepContent>
              <Typography color="text.secondary">{step.text}</Typography>
            </StepContent>
          </Step>
        ))}
      </Stepper>
    </Paper>
  )
}