amber/src/components/NewsLetter/NewsLetter.jsx

import { useState } from 'react';
import bgImage from "../../assets/images/newsletterwallpaper.webp"
import { Box, Button, TextField, InputAdornment, Typography } from '@mui/material';
import customerService from '../../services/CustomerService';

const NewsLetter = () => {

  const [email, setEmail] = useState("")

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

        <Box sx={{
          width: { xs: "80%", md: "40%" },
          backgroundColor: "rgba(255,255,255, 0.8)",
          px: 14,
          py: 8,
          textAlign: "center",
          color: "black"
        }}>

          <Typography variant='h5' sx={{fontWeight:"500", fontSize:"1.8rem !important", pb:2}}>
            Let's stay in touch
          </Typography>
          <Typography variant='body1' sx={{fontSize:{xs:"0.875rem", sm:"0.875rem", md:"1rem" }}}>
            Enjoy 15% off your first order when you join our mailing list.
          </Typography>
          <TextField
            label="Enter your email address"
            variant="outlined"
            fullWidth
            value={email}
            type='email'
            onChange={(e) => { setEmail(e.target.value) }}
            sx={{
              backgroundColor: "white",
              overflow:"hidden",
              borderRadius:"4px",
              my: 4,
              '& .MuiInputLabel-root': {
                fontSize: {
                  xs: "12px",
                  sm: "12px",
                  md: "16px"
                },
              },
            }}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <Button
                    variant="contained"
                    color="primary"
                    sx={{
                      height: "100%",
                      borderTopLeftRadius: 0,
                      borderBottomLeftRadius: 0,
                      position: "absolute",
                      right: 0
                    }}
                    onClick={() => {

                      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

                      if (!email || email.trim() === "") {
                        alert("Email is required");
                        return;
                      }

                      if (!emailRegex.test(email)) {
                        alert("Invalid Email");
                        return;
                      }

                      if(customerService.createCustomer({
                        "email": email,
                        "firstName": email,
                        "lastName": "customer",
                        "password": "securePassword123"
                      })){

                        alert(`SUCCESS ADD: ${email}`)
                        setEmail('')

                      }else{
                        alert("ALREADY ADDED");
                      }

                    }}
                  >
                    Subscribe
                  </Button>
                </InputAdornment>
              )
            }}
          />

          <Typography variant='body1' sx={{fontSize:{xs:"0.875rem", sm:"0.875rem", md:"1rem" }}}>
            We respect your privacy, so we never share your info.
          </Typography>
        </Box>

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

export default NewsLetter;