import Box from '@mui/material/Box'
import Container from '@mui/material/Container'
import Divider from '@mui/material/Divider'
import Stack from '@mui/material/Stack'
import Typography from '@mui/material/Typography'
import { usePageTitle } from '@/shared/lib/use-page-title'
import { DeliverySection } from './sections/DeliverySection'
import { HowToOrderSection } from './sections/HowToOrderSection'
import { OrderStatusesSection } from './sections/OrderStatusesSection'
import { PaymentSection } from './sections/PaymentSection'
import { ReturnsSection } from './sections/ReturnsSection'

export function InfoPage() {
  usePageTitle('Информация для покупателей')
  return (
    <Container maxWidth="lg" sx={{ py: { xs: 4 } }}>
      {/* Hero */}
      <Box sx={{ mb: 8 }}>
        <Typography
          variant="h3"
          sx={{
            fontWeight: 700,
            fontSize: { xs: '2rem', md: '2.75rem' },
            letterSpacing: '-0.035em',
            lineHeight: 1.1,
            mb: 2,
            textWrap: 'balance',
          }}
        >
          Информация для покупателей
        </Typography>
        <Typography
          sx={{
            fontSize: '1rem',
            color: 'text.secondary',
            lineHeight: 1.7,
            maxWidth: '58ch',
          }}
        >
          Как оформить заказ, как проходит доставка, оплата и другие важные детали.
        </Typography>
      </Box>

      {/* Main content grid */}
      <Box
        sx={{
          display: 'grid',
          gridTemplateColumns: { xs: '1fr', lg: '1fr 1fr' },
          gap: { xs: 6, md: 8 },
        }}
      >
        {/* Left column */}
        <Stack spacing={6}>
          <HowToOrderSection />
          <Divider />
          <DeliverySection />
        </Stack>

        {/* Right column */}
        <Stack spacing={6}>
          <PaymentSection />
          <Divider />
          <OrderStatusesSection />
          <Divider />
          <ReturnsSection />
        </Stack>
      </Box>
    </Container>
  )
}
