import MainLayout from '@/layouts/main-layout'
import React from 'react'
import { Typography, Box, Stack, Grid, Divider, Button } from '@mui/material'
import Image from 'next/image'
import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
import { programsData } from '@/data/programs'
import PinkTextBox from '@/components/app/pink-text-box'
import ProgramsHero from '@/components/programs/hero'
import Link from 'next/link';

const Programs = () => {
  return (
    <MainLayout>
      <Box sx={{px: '10px'}}>
        <ProgramsHero />
        <Stack 
          direction={{xs: 'column', md: 'row',}} 
          spacing={1} 
          sx={{ 
            backgroundImage: 'url(/charlee/charlee_6.jpg)', 
            backgroundSize: { xs: 'cover', md: 'contain' }, 
            backgroundPositionX: { xs: 'center', md: '-350px' }, 
            backgroundRepeat: 'no-repeat',
            py: '100px',
          }}
        >
          <Box
            sx={{
              width: { xs: '100%', md: '40%'},
              position: 'relative',
            }}
          >
          </Box>
          <Stack sx={{width: {xs: '100%', md: '60%'}}} direction={'column'}>
            {programsData.map((item, index) => (
              <Box 
                key={index} 
                sx={{ 
                  backgroundColor: '#fff',
                  mb: '50px',
                  p: {xs: '18px', md: '50px'},
                }}
              >
                <Stack key={index} spacing={3} sx={{height: {xs: '300px', md: '200px'}}} justifyContent={{xs: 'space-between', md: 'space-between'}}>
                  <Typography variant="h2">{item.title}</Typography>
                  <Typography variant='body2' sx={{ mt: {xs: '0px!important', md: 'initial'}, fontSize: {xs: '14px', md: 'initial'}}}>{item.text}</Typography>
                  <Stack direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
                    {item.points.map((item, index) => (
                      <PinkTextBox key={index} text={item} index={index} />
                    ))}
                    <Link style={{height: '100%', maxWidth: '75px'}} target='_blank' href={item.externalLink}>
                      <Button 
                        variant='basic'
                        sx={{
                          fontSize: {xs: '14px', md: 'initial'},
                          height: '100%',
                          '&:hover': {
                            '& svg': {
                              transform: 'translateX(5px)',
                              opacity: '1',
                              transition: 'all 0.3s ease-in-out',
                            },
                          },
                        }}
                      >
                        Join Now 
                        <KeyboardDoubleArrowRightIcon sx={{mr: '-25.5px', transition: 'transform 0.3s ease-in-out ', opacity: '0'}} />
                      </Button>
                    </Link>
                  </Stack>
                </Stack>
              </Box>
            ))}
          </Stack>
        </Stack>
      </Box>
    </MainLayout>
  )
}

export default Programs