import { useRouter } from 'next/router';
import Image from 'next/image';
import { Form } from '../';

const FormSection = () => {
    const { locale } = useRouter();
    return (
        <section className='bg-white pt-20 pb-10'>
            <div className='container flex flex-col items-center justify-center'>
                <h2 className='mb-2 text-center text-2xl font-bold text-vermilion'>
                    ¿Quieres vender online ahora mismo?
                </h2>

                <p className='mb-9 text-center text-shark'>
                    {locale === 'es' ? (
                        <>
                            Completa el siguiente formulario o ponte en contacto
                            vía
                            <a
                                href='https://api.whatsapp.com/send?phone=+34623560796&text=Hola,%20quiero%20conocer%20sobre%20UO%20Solutions.'
                                target='_blank'
                                rel='noreferrer'
                                className='mx-1 inline-block align-middle'
                            >
                                <Image
                                    src='/icons/whatsapp.png'
                                    alt='Whatsapp logo'
                                    className='box-content max-h-[1.875rem]'
                                    width={30}
                                    height={30}
                                />
                            </a>{' '}
                            y te ayudaremos a conseguirlo.
                        </>
                    ) : (
                        <>
                            Completa el formulario para recibir más información.
                        </>
                    )}
                </p>

                <Form from='ecommerce' />
            </div>
        </section>
    );
};

export default FormSection;