import { Box, Container, Typography, Button, Stack } from '@mui/material';
import { useNavigate } from 'react-router-dom';

const CallToAction = () => {
  const navigate = useNavigate();

  return (
    <Box 
      sx={{ 
        bgcolor: 'primary.main', 
        color: 'white', 
        py: 10,
        textAlign: 'center'
      }}
    >
      <Container maxWidth="md">
        <Typography variant="h2" gutterBottom sx={{ fontWeight: 800, mb: 3 }}>
                  UMP Restricted Access
        </Typography>
        <Typography variant="h5" sx={{ mb: 5, opacity: 0.9, maxWidth: 600, mx: 'auto' }}>
This platform is exclusively reserved for students and teachers of Mohammed First University. Your login credentials are provided by the university administration.        </Typography>
        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} justifyContent="center">
          <Button 
            variant="contained" 
            color="secondary" 
            size="large"
            onClick={() => navigate("/login")}
            sx={{ px: 4, py: 1.5, fontSize: '1.1rem', fontWeight: 700, color: 'primary.main', borderRadius: 0 }}
          >
            Se connecter
          </Button>
          <Button 
            variant="outlined" 
            color="inherit" 
            size="large"
            sx={{ px: 4, py: 1.5, fontSize: '1.1rem', borderWidth: 2, borderRadius: 0, '&:hover': { borderWidth: 2 } }}
          >
                      Administration Support
          </Button>
        </Stack>
      </Container>
    </Box>
  );
};

export default CallToAction;
