import {Container, Typography, Box} from '@mui/material'

import HeadLayout from '../components/head-layout'
import Footer from '../components/footer'
import {rezoNou} from '../lib/rezo-lis'
import KatRezoNou from '../components/kat-rezo-nou'

export default function Home() {
  return (
    <HeadLayout tab={0}>
      <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
        <Box sx={{flexGrow: 1, marginTop: 1}}>
          <Container sx={{marginBottom: 3}} align='center'>
            <Typography sx={{fontWeight: 'bold'}} variant='h6' component='h1'>
              #OKi
            </Typography>
            <Typography sx={{fontWeight: 'bold'}} variant='h6' component='h2'>
              Organisation KA Internationale
            </Typography>
            <Typography sx={{fontStyle: 'italic'}} variant='caption' component='h3'>
              Musiques et Actualités
            </Typography>
          </Container>
          <Container align='center'>
            <Typography gutterBottom variant='body' component='h4'>
              ⬇️ Rejoignez-nous ! ⬇️
            </Typography>
            {rezoNou.map(({tit, soutit, ko, lyen}) => <KatRezoNou key={tit} tit={tit} soutit={soutit} ko={ko} lyen={lyen} />)}
          </Container>
        </Box>
        <Footer />
      </Box>
    </HeadLayout>
  )
}