// // components/DownloadApp.tsx
// import React from "react";
// import { Box, Typography, Button } from "@mui/material";
// import Grid from "@mui/material/Grid2";

// const DownloadApp: React.FC = () => {
//   return (
//     <Box
//       sx={{
//         backgroundColor: "#1e3a8a",
//         color: "#fff",
//         padding: "24px",
//         borderRadius: "8px",
//         textAlign: "center",
//         display:'flex',
//         // flexDirection:'column'
//       }}
//     >
//         <Grid>
//       <Typography variant="h5" fontWeight="bold" gutterBottom>
//         Download ffreedom app
//       </Typography>
//       <Typography variant="body1" gutterBottom>
//         Join a community of over 1+ crore registered users on India's No.1 Livelihood Platform
//       </Typography>
//       </Grid>
//       <Grid container spacing={2} alignItems="center" justifyContent="center" mt={2}>
//         <Grid>
//           <Box
//             sx={{
//               backgroundColor: "#fff",
//               padding: "16px",
//               borderRadius: "8px",
//               display: "inline-block",
//             }}
//           >
//             <img
//               src="/qr-code-placeholder.png"
//               alt="QR Code"
//               style={{ width: "120px", height: "120px" }}
//             />
//           </Box>
//           <Typography variant="body2" mt={1}>
//             Scan the QR code to download ffreedom app
//           </Typography>
//         </Grid>
//         <Grid>
//           <Box>
//             <Button
//               variant="contained"
//               sx={{
//                 backgroundColor: "#34a853",
//                 color: "#fff",
//                 marginBottom: "8px",
//                 "&:hover": { backgroundColor: "#2e7d32" },
//               }}
//             >
//               <img
//                 src="/google-play-icon.png"
//                 alt="Google Play"
//                 style={{ width: "20px", marginRight: "8px" }}
//               />
//               Google Play
//             </Button>

//             <Button
//               variant="contained"
//               sx={{
//                 backgroundColor: "#007aff",
//                 color: "#fff",
//                 "&:hover": { backgroundColor: "#0056b3" },
//               }}
//             >
//               <img
//                 src="/apple-store-icon.png"
//                 alt="Apple Store"
//                 style={{ width: "20px", marginRight: "8px" }}
//               />
//               Apple Store
//             </Button>
//           </Box>
//         </Grid>
//       </Grid>
//     </Box>
//   );
// };

// export default DownloadApp;

import React from 'react'
import { Box, Typography, Button, Divider } from '@mui/material'
import Image from 'next/image'
import Grid from '@mui/material/Grid2'
import { Container } from '@mui/system'
const DownloadApp: React.FC = () => {
  return (
    <Container>
    <Box
      sx={{
        display: 'flex',
        padding: { xs: '0px', md: '56px 40px' },
        flexDirection: { xs: 'column', md: 'row' },
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: '16px',
        backgroundColor: 'var(--Brand-2, #2E2E54)',
        gap: {xs:'none',md:'32px'},
        boxSizing:'border-box',
        position: 'relative',
      }}
    >
      <Box
        sx={{
          position: 'absolute',
          left: 0,
          top: 0,
        }}
      >
        <img src="/Isolation_Mode.svg" alt="Logo"/>
      </Box>
      <Box 
        className="download_app_center_div"
        sx={{
        width: { xs: '100%', md: '70%' },
        display: "flex",
      }}
      >
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          // alignItems: 'flex-start',
          alignItems: { xs: 'center', md: 'flex-start' },
          gap: '8px',
          flex: 2,
          borderRight: '1px solid #ccc',
          marginRight: '2rem'
        }}
      >
        <Typography
          sx={{
            fontSize: { xs: '20px', md: '32px' },
            textAlign: { xs: 'center' },
            fontStyle: 'normal',
            fontWeight: { xs: 600, md: 500 },
            lineHeight: '42px',
            color: 'var(--Neutral-White, #FFF)',
          }}
        >
          Download ffreedom app
        </Typography>
        <Typography
          sx={{
            fontSize: { xs: '14px', md: '18px' },
            textAlign: { xs: 'center', md: 'left' },
            fontStyle: 'normal',
            fontWeight: 400,
            lineHeight: '26px',
            color: 'var(--Neutral-White, #FFF)',
          }}
        >
          Join a community of over 1+ crore registered users on India's No.1
          Livelihood Platform
        </Typography>
      </Box>
      {/* <Box
        sx={{
          width: '1px',
          backgroundColor: '#828298',
          height: '104px',
          display: { xs: 'none', md: 'block' },
        }}
      /> */}
      {/* <Divider
        sx={{
          borderColor: 'gray',
          borderWidth: '1px',
          width: '80%',
          margin: '20px auto',
          display: { xs: 'block', md: 'none' },
        }}
      /> */}
      {/* <Box
      sx={{
        display:'flex'}}
      >
        <Box
        sx={{
            width:'137px',
            Height:'40px',
            flexShrink: 0
        }}
        ></Box>
      </Box> */}
      <Box 
      sx={{display:'flex'}}>
       
      </Box>
      <Box
        sx={{
          display: { xs: 'none', md: 'block' },
          flex: 1
        }}
      >
        <Box
          sx={{
            display: 'flex',
            // width: '296px',
            padding: '12px',
            justifyContent: 'center',
            alignItems: 'center',
            gap: '12px',
            flexShrink: 0,
            borderRadius: '8px',
            backgroundColor: 'var(--Neutral-White, #FFF)',
          }}
        >
          <Image src="/qr-code 1.svg" alt="Logo" width={70} height={70} />

          <Typography
            sx={{
              color: 'var(--Neutral-700, #3E3E3E)',
              fontSize: '14px',
              fontStyle: 'normal',
              fontWeight: 400,
              lineHeight: '22px',
              maxWidth: '296px',
            }}
          >
            Scan the QR code to download ffreedom app
          </Typography>
        </Box>
        <Box
          sx={{
            display: 'inline-flex',
            gap: '12px',
          }}
        >
          <Box>
            <Typography
              sx={{
                color: 'var(--Neutral-White, #FFF)',
                fontSize: '10px',
                fontStyle: 'normal',
                fontWeight: 400,
                lineHeight: '14px',
              }}
            >
              Available on
            </Typography>
          </Box>
          <Box sx={{ display: 'flex', gap: '0.2rem' }}>
            <Image
              src="/Googleplaystore.svg"
              alt="Logo"
              width={12}
              height={13.408}
            />
            <Typography
              sx={{
                color: 'var(--Neutral-White, #FFF)',
                fontSize: '10px',
                fontStyle: 'normal',
                fontWeight: 400,
                lineHeight: '14px',
              }}
            >
              Google Play
            </Typography>
          </Box>
          <Box sx={{ display: 'flex', gap: '0.2rem' }}>
            <Image src="/Appleicon.svg" alt="Logo" width={12} height={13.408} />
            <Typography
              sx={{
                color: 'var(--Neutral-White, #FFF)',
                fontSize: '10px',
                fontStyle: 'normal',
                fontWeight: 400,
                lineHeight: '14px',
              }}
            >
              Apple Store
            </Typography>
          </Box>
        </Box>
      </Box>
      </Box>
      <Box
        sx={{
          position: 'absolute',
          bottom: 0,
          right: 0,
        }}
      >
        <img src="/Isolation_Mode.svg" alt="Logo"/>
      </Box>
    </Box>
    </Container>
  )
}

export default DownloadApp