import {useState} from 'react'
import {Link, List, ListItem, ListItemIcon, ListItemText, Paper, Typography} from '@mui/material'
import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'

import CGUDialog from '../cgu/cgu-dialog'

const CGU_PDF_LINK = process.env.NEXT_PUBLIC_CGU_DOWNLOAD_LINK

export default function Presantasyon() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <CGUDialog open={open} setOpen={setOpen} />
      <Paper sx={{padding: 1, textAlign: 'justify'}}>
        <Typography paragraph variant='subtitle1' component='div'>
          Tous les services que nous proposons sont <strong>gratuits</strong> et ne contiennent <strong>aucune publicité</strong>. Les réseaux que nous utilisons sont hébergés sur <strong>nos serveurs</strong>. <br />
          Tout ceci est possible grâce aux <strong>dons</strong> et aux <strong>adhésions</strong> ❤️
        </Typography>
        <Typography paragraph variant='subtitle1' component='div'>
          <strong>Toute contribution, aussi modeste soit-elle, nous permet d’augmenter nos capacités</strong>.
        </Typography>
        <Typography paragraph variant='subtitle1' component='div'>
          Concernant les dons, ils peuvent s&apos;effectuer via <Link underline='hover' href='https://www.paypal.com/donate/?hosted_button_id=5Q3KPR79CAZVW' target='_blank' rel='noreferrer'><strong>PayPal</strong></Link>, <Link underline='hover' href='https://liberapay.com/OKi/donate' target='_blank' rel='noreferrer'><strong>Liberapay</strong></Link> ou directement sur notre site par carte bancaire. Pour ce dernier, nous utilisons <Link underline='hover' href='https://stripe.com/fr/about' target='_blank' rel='noreferrer'><strong>Stripe</strong></Link> (une plateforme de paiement 100% sécurisée).
        </Typography>
        <Typography paragraph variant='subtitle1' component='div'>
          Vous pouvez adhérer à notre association en passant par le site <Link underline='hover' href='https://www.helloasso.com/associations/organisation-ka-internationale/adhesions/adhesion-oki' target='_blank' rel='noreferrer'><strong>Helloasso</strong></Link>.
        </Typography>
        <Typography paragraph variant='subtitle1' component='div'>
          Veuillez prendre connaissance des <Link underline='hover' href='#' onClick={() => setOpen(true)}><strong>CGU et de la politique de confidentialité</strong></Link> au chapitre 9 &quot;Les dons&quot;. <Link underline='hover' href={CGU_PDF_LINK}><small>Cliquez ici pour la version pdf</small></Link>.
        </Typography>
        <Typography variant='subtitle1' component='div'>
          Si vous n’avez pas les moyens de contribuer financièrement, vous pouvez effectuer des actions simples, rapides et surtout gratuites 😏 pour nous soutenir au quotidien :
        </Typography>
        <List>
          <ListItem>
            <ListItemIcon>
              <ArrowRightAltIcon />
            </ListItemIcon>
            <ListItemText>
              partager nos contenus sur vos réseaux (Telegram, Twitter etc...)
            </ListItemText>
          </ListItem>
          <ListItem>
            <ListItemIcon>
              <ArrowRightAltIcon />
            </ListItemIcon>
            <ListItemText>
              utiliser nos plateformes (<Link underline='hover' href='https://pale.o-k-i.net/timeline/local' target='_blank' rel='noreferrer'><strong>Palé</strong></Link>, <Link underline='hover' href='https://gade.o-k-i.net' target='_blank' rel='noreferrer'><strong>Gadé</strong></Link>, <Link underline='hover' href='https://mobilize.o-k-i.net' target='_blank' rel='noreferrer'><strong>Mobilizé</strong></Link> et <Link underline='hover' href='https://mizik.o-k-i.net' target='_blank' rel='noreferrer'><strong>Mizik</strong></Link>) en plus de vos réseaux habituels
            </ListItemText>
          </ListItem>
          <ListItem>
            <ListItemIcon>
              <ArrowRightAltIcon />
            </ListItemIcon>
            <ListItemText>
              parlez de nous autour de vous 🗣️
            </ListItemText>
          </ListItem>
        </List>
        <Typography paragraph variant='subtitle1' component='div'>
          Pour toute question, n’hésitez pas à nous contacter à cette adresse : <Link href='mailto:kontak@oki.re'><strong>kontak@oki.re</strong></Link>.
        </Typography>
        <Typography paragraph variant='subtitle1' component='div'>
          <strong>Merci par avance pour votre soutien 🥰</strong>
        </Typography>
      </Paper>
    </>
  )
}