import React from 'react';
import { Box, Button, TextField, InputAdornment, Typography } from '@mui/material';



const NewsLetter = () => {
  return (
    <Box
      sx={{
        position: 'relative',
        width: '100%',
        height: 0,
        paddingTop: '600px', // This sets the height based on top padding
        overflow: 'hidden',
        display: "flex"
      }}
    >
      <Box
        sx={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          display: 'flex',
          backgroundColor: 'rgba(50, 50, 50, 0.5)', // Filter overlay
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#fff', // Text and button color for visibility
        }}
      >

        <Box sx={{ width: {xs:"80%", md:"35%"}, backgroundColor: "rgba(255,255,255, 0.5)", padding: 10, textAlign:"center", color:"black" }}>

          <Typography variant='h3'>
            Let's Stay in touch
          </Typography>
          <Typography variant='body1'>
            Enjoy 15% off your first order when you join our mailing list.
          </Typography>
          <TextField
            label="Enter your email address"
            variant="outlined"
            fullWidth
            sx={{ backgroundColor: "white", my:4 }}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <Button
                    variant="contained"
                    color="primary"
                    sx={{ height: "100%", borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
                  >
                    Send
                  </Button>
                </InputAdornment>
              )
            }}
          />

          <Typography variant='body1'>
            We respect your privacy, so we never share your info.
          </Typography>
        </Box>

      </Box>
    </Box>
  );
};

export default NewsLetter;