import { Center, Heading, VStack, Wrap, WrapItem } from '@chakra-ui/react'
import AnimatedImage from './AnimatedImage'
import AnimateInView from './AnimateInView'
import parceiro1 from '../public/parceiros/parceiro1.png'
import parceiro2 from '../public/parceiros/parceiro2.png'
import parceiro3 from '../public/parceiros/parceiro3.png'
import parceiro4 from '../public/parceiros/parceiro4.png'
import parceiro5 from '../public/parceiros/parceiro5.png'
import parceiro6 from '../public/parceiros/parceiro6.png'
import parceiro7 from '../public/parceiros/parceiro7.jpg'
import parceiro8 from '../public/parceiros/parceiro8.png'
import parceiro9 from '../public/parceiros/parceiro9.png'
import parceiro10 from '../public/parceiros/parceiro10.png'
import parceiro11 from '../public/parceiros/parceiro11.jpg'
import credenciamento1 from '../public/parceiros/credenciamento1.png'
import credenciamento2 from '../public/parceiros/credenciamento2.png'
import credenciamento3 from '../public/parceiros/credenciamento3.png'

const Parceiros = () => {
  return (
    <Center px={['4', '8', '12']}>
      <VStack maxW='container.lg' py='20' spacing='20' align='stretch' w='100%'>
        <VStack spacing='4' align='stretch' w='100%'>
          <AnimateInView w='100%' delay={0.1}>
            <Heading textAlign='center' fontSize='3xl'>
              Credenciamento
            </Heading>
          </AnimateInView>
          <Wrap justify='center' align='center' spacing='8' w='100%'>
            <AnimateInView delay={0.2}>
              <WrapItem w='32'>
                <AnimatedImage src={credenciamento1} alt='Parceiro 1' />
              </WrapItem>
            </AnimateInView>
            <AnimateInView delay={0.3}>
              <WrapItem w='32'>
                <AnimatedImage src={credenciamento2} alt='Parceiro 2' />
              </WrapItem>
            </AnimateInView>
            <AnimateInView delay={0.4}>
              <WrapItem w='32'>
                <AnimatedImage src={credenciamento3} alt='Parceiro 3' />
              </WrapItem>
            </AnimateInView>
          </Wrap>
        </VStack>
        <VStack spacing='4' align='stretch' w='100%'>
          <AnimateInView w='100%' delay={0.1}>
            <Heading textAlign='center' fontSize='3xl'>
              Parceiros
            </Heading>
          </AnimateInView>
          <Wrap justify='center' align='center' spacing='8' w='100%'>
            <AnimateInView delay={0.2}>
              <WrapItem w='32'>
                <AnimatedImage src={parceiro1} alt='Parceiro 1' />
              </WrapItem>
            </AnimateInView>
            <AnimateInView delay={0.3}>
              <WrapItem w='32'>
                <AnimatedImage src={parceiro2} alt='Parceiro 2' />
              </WrapItem>
            </AnimateInView>
            <AnimateInView delay={0.4}>
              <WrapItem w='32'>
                <AnimatedImage src={parceiro3} alt='Parceiro 3' />
              </WrapItem>
            </AnimateInView>
            <AnimateInView delay={0.5}>
              <WrapItem w='32'>
                <AnimatedImage src={parceiro4} alt='Parceiro 4' />
              </WrapItem>
            </AnimateInView>
            <AnimateInView delay={0.6}>
              <WrapItem w='32'>
                <AnimatedImage src={parceiro5} alt='Parceiro 5' />
              </WrapItem>
            </AnimateInView>
            <AnimateInView delay={0.7}>
              <WrapItem w='32'>
                <AnimatedImage src={parceiro6} alt='Parceiro 6' />
              </WrapItem>
            </AnimateInView>
            <AnimateInView delay={0.8}>
              <WrapItem w='32'>
                <AnimatedImage src={parceiro7} alt='Parceiro 7' />
              </WrapItem>
            </AnimateInView>
            <AnimateInView delay={0.9}>
              <WrapItem w='32'>
                <AnimatedImage src={parceiro8} alt='Parceiro 8' />
              </WrapItem>
            </AnimateInView>
            <AnimateInView delay={1}>
              <WrapItem w='32'>
                <AnimatedImage src={parceiro9} alt='Parceiro 9' />
              </WrapItem>
            </AnimateInView>
            <AnimateInView delay={1.1}>
              <WrapItem w='32'>
                <AnimatedImage src={parceiro10} alt='Parceiro 10' />
              </WrapItem>
            </AnimateInView>
            <AnimateInView delay={1.2}>
              <WrapItem w='32'>
                <AnimatedImage src={parceiro11} alt='Parceiro 10' />
              </WrapItem>
            </AnimateInView>
          </Wrap>
        </VStack>
      </VStack>
    </Center>
  )
}

export default Parceiros