'use client'

import React from 'react'
import {
  Button,
  Column,
  Divider,
  Icon,
  Paragraph,
  Row,
  Text,
  Title
} from '../../atoms'
import { getGlobalStyle } from '../../../helpers'
import Image from 'next/image'
// import image from '../../../public/images/android-chrome-192x192.png'
// import imageSec from '../../../public/Images/DEFAULTBANNER.png'
// import collage from '../../../public/Images/collage.png'
// import imageMoney from '../../../public/Images/money.png'
// import imagePeople from '../../../public/Images/people.png'
// import imageCity from '../../../public/Images/city.png'
import { Card } from './Card'
import { definitions } from './helpers'
import styles from './styles.module.css'

const arrCard = [
  {
    title: 'Centraliza los pagos de tu hogar',
    description: 'Harto de tener que acceder a múltiples páginas para pagar tus deberes?',
    icon: 'imageMoney'
  },
  {
    title: 'Cobra y concilia pagos de manera automática',
    description: 'Dolores de cabeza para conciliar pagos de forma manual?',
    icon: 'imagePeople'
  },
  {
    title: 'Mensajería',
    description: 'Comunícate con los residentes de tu conjunto de forma rápida y segura.',
    icon: 'imageCity'
  }
]

export const Home: React.FC = () => {
  return (
        <div>
            <section className={styles.section}>
                <Row alignItems='center' style={{ gap: '40px' }}>
                    <Column>
                        <Text size='5xl' weight='bold' lineHeight='2xl'>
                            Administración moderna, eficiente y simple
                        </Text>
                        <Divider marginTop={getGlobalStyle('--spacing-xl')} />
                        <Paragraph size='md' >
                            Conoce Admina, una forma más rápida, fácil y transparente para administrar tu hogar.
                        </Paragraph>
                        <Divider marginTop='1.875rem' />
                        <Button
                            width='70%'
                            primary
                            styles={{
                              fontWeight: 'bold'
                            }}>
                            Únete a la lista de lanzamiento
                        </Button>
                    </Column>
                    <Column alignItems='end'>
                        {/** <Image
                            src={image}
                            alt='Home'
                            width={600}
                            height={600}
                            layout='intrinsic'
                        />**/}
                    </Column>
                </Row>
            </section>

            <section className={styles.section} style={{
              display: 'initial',
              width: '100%'
            }}>
                <div style={{
                  backgroundColor: '#f8f3fe',
                  display: 'flex',
                  flexDirection: 'column'
                }}>
                    <Title
                        align='center'
                        size='6xl'
                        weight='medium'
                        lineHeight='2xl'
                        as='h1'
                    >
                        Con Admina puedes
                    </Title>
                    <Paragraph size='md' styles={{
                      textAlign: 'center'
                    }}>
                        Nuestras soluciones simplifican y digitalizan el día a día de tu conjunto.
                    </Paragraph>
                    <Column>
                        <div className={styles.wrapper_cards}>
                            {arrCard.map((card, index) => (
                                <Card
                                    key={index}
                                    title={card.title}
                                    description={card.description}
                                    icon={card.icon}
                                />
                            ))}
                        </div>
                    </Column>
                </div>
            </section>

            <section className={styles.section} style={{
              position: 'relative',
              overflow: 'inherit'
            }}>
                <div style={{
                  margin: 'auto',
                  display: 'flex',
                  justifyContent: 'center',
                  alignContent: 'center',
                  width: '90% !important',
                  height: '90vh',
                  position: 'absolute',
                  padding: '20px',
                  top: '-150px'
                }}>
                    {/* <Image
                        className={styles.image_sec}
                        alt=''
                        objectFit='cover'
                        layout='responsive'
                        src={imageSec}
                    /> */}
                </div>
            </section>

            <section className={styles.section} style={{
              alignContent: 'start',
              height: 'min-content'
            }}>
                <Row>
                    <Column>
                        {definitions.map((definition, index) => {
                          return (
                                <Column key={index}>
                                    <Icon icon='IconCircularCheck' size={30} color={getGlobalStyle('--color-icons-primary')} />
                                    <Title size='2xl' weight='semibold' font='bold'>
                                        {definition.title}
                                    </Title>
                                    <Paragraph>
                                        {definition.description}
                                    </Paragraph>
                                    <Divider marginTop={getGlobalStyle('--spacing-2xl')} />
                                </Column>
                          )
                        })}
                    </Column>
                    <Column alignItems='end'>
                        {/* <Image
                            src={collage}
                            alt='Home'
                            width={600}
                            height={600}
                            layout='intrinsic'
                        /> */}
                    </Column>
                </Row>
            </section>

            <section className={styles.section} style={{
              height: '50vh'
            }}>
                <Column alignItems='center'>
                    <Title align='center' weight='bold' size='md2'>
                        Escoge vivir simple.
                    </Title>
                    <Divider marginTop={getGlobalStyle('--spacing-xl')} />
                    <Title align='center' weight='bold' size='md2'>
                        Escoge Admina.
                    </Title>
                    <Divider marginTop={getGlobalStyle('--spacing-xl')} />
                    <Button primary width='30%' styles={{
                      fontWeight: 'bold'
                    }}>
                        Únete a la lista de lanzamiento
                    </Button>
                </Column>
                {/* <Rate color='red'  rating={1} count={1} size='2' noHover  /> */}
            </section>
        </div>
  )
}