import Box from '@mui/material/Box'
import { useTheme } from '@mui/material/styles'
import { IS_DEMO_MODE } from '@/shared/config'

export function DemoOverlay() {
  const theme = useTheme()
  const isDark = theme.palette.mode === 'dark'

  if (!IS_DEMO_MODE) return null

  return (
    <>
      <Box
        aria-hidden="true"
        sx={{
          position: 'fixed',
          inset: 0,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          pointerEvents: 'none',
          zIndex: 9990,
          fontSize: '10vw',
          fontWeight: 900,
          color: isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.04)',
          transform: 'rotate(-30deg)',
          userSelect: 'none',
        }}
      >
        ДЕМО
      </Box>

      <Box
        aria-hidden="true"
        sx={{
          position: 'fixed',
          bottom: 16,
          right: 16,
          pointerEvents: 'none',
          zIndex: 9991,
          px: 2,
          py: 0.75,
          borderRadius: 1,
          fontSize: 12,
          fontWeight: 600,
          letterSpacing: '0.04em',
          color: isDark ? 'rgba(255,255,255,0.6)' : '#fff',
          bgcolor: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.6)',
          userSelect: 'none',
        }}
      >
        ДЕМО-РЕЖИМ
      </Box>
    </>
  )
}