import { motion } from 'framer-motion';
import { useState } from 'react';

export const Increase = () => {
    const [colors, setColors] = useState({
        fill: '#1c1c1b',
        stroke: '#FB451E',
    });
    const [colorsSvg1, setColorsSvg1] = useState({
        fill: '#1c1c1b',
        stroke: '#FFFFFF',
    });

    return (
        <>
            <motion.svg
                viewBox='0 0 279.1 77.8'
                preserveAspectRatio='none'
                className='stroke-pomegranate w-[100%] fill-none '
                id='formVignetteImg'
            >
                <motion.path
                    d='M2.5,38.6V0.8h9.9v37.8H2.5z M19.1,38.6V0.8h10.1l13.1,23.3h0.1V0.8h9.3v37.8H41.6L28.5,15.1h-0.1v23.6H19.1z
        M93.5,14.3h-9.9c-0.2-1.9-1.1-3.3-2.4-4.3c-1.3-1-3.1-1.5-5.2-1.5c-3,0-5.2,1.2-6.8,3.5c-1.3,2-2,4.6-2,7.7c0,3.1,0.7,5.7,2,7.7
        C70.8,29.8,73,31,76,31c4.7,0,7.2-2.3,7.6-7h9.9c-0.2,4.8-2,8.6-5.2,11.3c-3.2,2.8-7.2,4.1-12.1,4.1c-5.6,0-10.2-1.9-13.7-5.7
        c-3.4-3.7-5.1-8.4-5.1-14s1.7-10.3,5.2-14C66,1.9,70.6,0,76.2,0c4.4,0,8.3,1.2,11.6,3.7C91.5,6.5,93.3,10,93.5,14.3z M98.7,38.6V0.8
        H118c3.7,0,6.7,0.8,9.1,2.4c2.8,1.9,4.1,4.6,4.1,8.2c0,2.1-0.5,4-1.5,5.7c-1.1,1.8-2.5,3.1-4.5,3.8V21c3.2,0.8,5.1,3.8,5.5,9.1
        c0.1,1.4,0.2,2.9,0.4,4.3c0.2,2.2,0.7,3.6,1.2,4.2h-9.8c-0.5-0.7-0.9-2.8-1.1-6c-0.2-2.4-0.5-4.2-1.1-5.3c-0.9-1.6-2.3-2.4-4.4-2.4
        h-7.5v13.8H98.7z M108.6,8.7v8.5h8.3c3,0,4.6-1.5,4.6-4.5c0-2.7-1.7-4.1-5-4.1H108.6z M137,38.6V0.8h30.2v7.9h-20.3v6.6h18.6v7.6
        h-18.6v7.2h20.8v8.5H137z M188.5,11.3l-4.3,13.2h8.6l-4.2-13.2H188.5z M169.4,38.6l14.2-37.8h10l14.2,37.8h-10.3l-2.3-6.8h-13.2
        l-2.4,6.8H169.4z M208.4,25.9h9.9c0.2,3.9,2.6,5.9,7.2,5.9c1.7,0,3-0.3,4.1-0.9c1.3-0.7,1.9-1.7,1.9-3c0-1.4-1.1-2.6-3.4-3.4
        c-2.5-0.7-5-1.4-7.5-2.1c-3.4-1-5.9-2.1-7.6-3.4c-2.3-1.9-3.5-4.4-3.5-7.5c0-3.8,1.7-6.8,5-8.9c2.9-1.8,6.3-2.7,10.4-2.7
        c4.2,0,7.6,1,10.4,2.9c3.1,2.2,4.7,5.3,4.8,9.3h-9.9c0.1-1.6-0.5-2.8-1.9-3.6c-1.1-0.7-2.5-1-4.2-1c-3.2,0-4.8,1.1-4.8,3.2
        c0,1.2,1.1,2.2,3.4,3c2.5,0.6,5,1.3,7.5,2c3.3,0.9,5.8,2.1,7.5,3.4c2.3,1.9,3.4,4.4,3.4,7.5c0,4.5-1.7,7.8-5.1,9.9
        c-2.8,1.8-6.6,2.8-11.3,2.8c-4.7,0-8.6-1-11.4-3.1C210.1,33.9,208.4,30.5,208.4,25.9z M245.9,38.6V0.8h30.2v7.9h-20.3v6.6h18.5v7.6
        h-18.5v7.2h20.8v8.5H245.9z'
                    strokeDasharray='1511'
                    strokeDashoffset='0'
                    stroke={colorsSvg1.stroke}
                    fill={'none'}
                    initial={{
                        strokeDashoffset: 1511,
                        fill: colorsSvg1.fill,
                    }}
                    animate={{
                        strokeDashoffset: 0,
                    }}
                    transition={{ duration: 6, delay: 3 }}
                />
                <motion.path
                    d='M2.5,38.6V0.8h9.9v37.8H2.5z M19.1,38.6V0.8h10.1l13.1,23.3h0.1V0.8h9.3v37.8H41.6L28.5,15.1h-0.1v23.6H19.1z
        M93.5,14.3h-9.9c-0.2-1.9-1.1-3.3-2.4-4.3c-1.3-1-3.1-1.5-5.2-1.5c-3,0-5.2,1.2-6.8,3.5c-1.3,2-2,4.6-2,7.7c0,3.1,0.7,5.7,2,7.7
        C70.8,29.8,73,31,76,31c4.7,0,7.2-2.3,7.6-7h9.9c-0.2,4.8-2,8.6-5.2,11.3c-3.2,2.8-7.2,4.1-12.1,4.1c-5.6,0-10.2-1.9-13.7-5.7
        c-3.4-3.7-5.1-8.4-5.1-14s1.7-10.3,5.2-14C66,1.9,70.6,0,76.2,0c4.4,0,8.3,1.2,11.6,3.7C91.5,6.5,93.3,10,93.5,14.3z M98.7,38.6V0.8
        H118c3.7,0,6.7,0.8,9.1,2.4c2.8,1.9,4.1,4.6,4.1,8.2c0,2.1-0.5,4-1.5,5.7c-1.1,1.8-2.5,3.1-4.5,3.8V21c3.2,0.8,5.1,3.8,5.5,9.1
        c0.1,1.4,0.2,2.9,0.4,4.3c0.2,2.2,0.7,3.6,1.2,4.2h-9.8c-0.5-0.7-0.9-2.8-1.1-6c-0.2-2.4-0.5-4.2-1.1-5.3c-0.9-1.6-2.3-2.4-4.4-2.4
        h-7.5v13.8H98.7z M108.6,8.7v8.5h8.3c3,0,4.6-1.5,4.6-4.5c0-2.7-1.7-4.1-5-4.1H108.6z M137,38.6V0.8h30.2v7.9h-20.3v6.6h18.6v7.6
        h-18.6v7.2h20.8v8.5H137z M188.5,11.3l-4.3,13.2h8.6l-4.2-13.2H188.5z M169.4,38.6l14.2-37.8h10l14.2,37.8h-10.3l-2.3-6.8h-13.2
        l-2.4,6.8H169.4z M208.4,25.9h9.9c0.2,3.9,2.6,5.9,7.2,5.9c1.7,0,3-0.3,4.1-0.9c1.3-0.7,1.9-1.7,1.9-3c0-1.4-1.1-2.6-3.4-3.4
        c-2.5-0.7-5-1.4-7.5-2.1c-3.4-1-5.9-2.1-7.6-3.4c-2.3-1.9-3.5-4.4-3.5-7.5c0-3.8,1.7-6.8,5-8.9c2.9-1.8,6.3-2.7,10.4-2.7
        c4.2,0,7.6,1,10.4,2.9c3.1,2.2,4.7,5.3,4.8,9.3h-9.9c0.1-1.6-0.5-2.8-1.9-3.6c-1.1-0.7-2.5-1-4.2-1c-3.2,0-4.8,1.1-4.8,3.2
        c0,1.2,1.1,2.2,3.4,3c2.5,0.6,5,1.3,7.5,2c3.3,0.9,5.8,2.1,7.5,3.4c2.3,1.9,3.4,4.4,3.4,7.5c0,4.5-1.7,7.8-5.1,9.9
        c-2.8,1.8-6.6,2.8-11.3,2.8c-4.7,0-8.6-1-11.4-3.1C210.1,33.9,208.4,30.5,208.4,25.9z M245.9,38.6V0.8h30.2v7.9h-20.3v6.6h18.5v7.6
        h-18.5v7.2h20.8v8.5H245.9z'
                    stroke={'none'}
                    fill={colorsSvg1.fill}
                    initial={{
                        fill: colorsSvg1.fill,
                    }}
                    animate={{
                        fill: '#ffffff',
                    }}
                    transition={{
                        delay: 3.5, // Espera 3.5 segundos antes de iniciar la animación
                        duration: 2, // La animación dura 2 segundos
                    }}
                />

                <motion.path
                    d='M29.7,47.1L18.7,66v11.2h-7.8V66L0,47.1h8.9l6,12.2l6-12.2H29.7z M30.4,62.1c0-4.5,1.3-8.2,3.9-11.1
        c2.7-3,6.3-4.5,10.9-4.5S53.4,48,56.1,51c2.6,2.9,3.9,6.6,3.9,11.1s-1.3,8.2-3.9,11.1c-2.7,3-6.3,4.5-10.9,4.5s-8.2-1.5-10.9-4.5
        C31.7,70.3,30.4,66.6,30.4,62.1z M38.2,62.1c0,2.5,0.5,4.5,1.6,6.1c1.2,1.8,3,2.8,5.4,2.8s4.1-0.9,5.4-2.8c1.1-1.6,1.6-3.6,1.6-6.1
        s-0.5-4.5-1.6-6.1c-1.2-1.8-3-2.8-5.4-2.8S41,54.2,39.8,56C38.7,57.6,38.2,59.6,38.2,62.1z M90.1,47.1v17.6c0,4.4-1,7.7-3.1,9.8
        c-2.2,2.2-5.5,3.2-10,3.2c-4.5,0-7.8-1.1-9.9-3.2C65,72.4,64,69.1,64,64.7V47.1h7.8v18.1c0,3.9,1.8,5.8,5.2,5.8s5.2-1.9,5.2-5.8
        V47.1H90.1z M95.3,77.1v-30h15.3c2.9,0,5.3,0.6,7.2,1.9c2.2,1.5,3.3,3.7,3.3,6.5c0,1.7-0.4,3.2-1.2,4.5c-0.8,1.4-2,2.4-3.5,3v0.1
        c2.6,0.6,4,3,4.4,7.2c0.1,1.1,0.2,2.3,0.3,3.4c0.2,1.8,0.5,2.9,1,3.3h-7.7c-0.4-0.6-0.7-2.2-0.9-4.8c-0.1-1.9-0.4-3.3-0.9-4.2
        c-0.7-1.3-1.9-1.9-3.5-1.9h-5.9v10.9H95.3z M103.1,53.4v6.8h6.6c2.4,0,3.6-1.2,3.6-3.5c0-2.2-1.3-3.2-3.9-3.2H103.1z M138.9,77.1
        v-30h7.8v23.3h14v6.7H138.9z M164.6,77.1v-30h23.9v6.3h-16.1v5.2h14.7v6h-14.7v5.7h16.5v6.7H164.6z M205.4,55.5L202,66h6.8
        L205.4,55.5L205.4,55.5z M190.2,77.1l11.2-30h7.9l11.2,30h-8.1l-1.8-5.4h-10.5l-1.9,5.4H190.2z M222.9,77.1v-30h12.9
        c4.6,0,8.2,1.3,10.8,3.9s3.9,6.3,3.9,10.9c0,4.9-1.3,8.6-3.9,11.2c-2.6,2.6-6.2,3.9-10.8,3.9H222.9z M230.7,53.9v16.5h3.7
        c3,0,5.1-0.7,6.3-2c1.3-1.3,1.9-3.5,1.9-6.5c0-5.4-2.8-8.1-8.3-8.1H230.7z M253,67.1h7.8c0.1,3.1,2,4.7,5.7,4.7
        c1.3,0,2.4-0.2,3.3-0.7c1-0.5,1.5-1.3,1.5-2.4c0-1.1-0.9-2.1-2.7-2.7c-2-0.5-3.9-1.1-5.9-1.6c-2.7-0.8-4.7-1.7-6-2.7
        c-1.8-1.5-2.8-3.5-2.8-5.9c0-3,1.3-5.4,4-7c2.3-1.4,5-2.1,8.2-2.1c3.3,0,6,0.8,8.2,2.3c2.5,1.7,3.8,4.2,3.8,7.4h-7.8
        c0.1-1.3-0.4-2.2-1.5-2.8c-0.9-0.5-2-0.8-3.4-0.8c-2.5,0-3.8,0.9-3.8,2.6c0,1,0.9,1.8,2.7,2.4c2,0.5,4,1,6,1.6
        c2.6,0.7,4.6,1.6,6,2.7c1.8,1.5,2.7,3.5,2.7,5.9c0,3.5-1.4,6.1-4.1,7.9c-2.2,1.5-5.2,2.2-9,2.2c-3.8,0-6.8-0.8-9.1-2.5
        C254.4,73.4,253.1,70.7,253,67.1z'
                    strokeDasharray='1307'
                    strokeDashoffset='0'
                    stroke={colors.stroke}
                    fill='none'
                    initial={{
                        strokeDashoffset: 1307,
                        fill: colors.fill,
                    }}
                    animate={{
                        strokeDashoffset: 0,
                    }}
                    transition={{ duration: 6, delay: 3 }}
                />
                <motion.path
                    d='M29.7,47.1L18.7,66v11.2h-7.8V66L0,47.1h8.9l6,12.2l6-12.2H29.7z M30.4,62.1c0-4.5,1.3-8.2,3.9-11.1
                c2.7-3,6.3-4.5,10.9-4.5S53.4,48,56.1,51c2.6,2.9,3.9,6.6,3.9,11.1s-1.3,8.2-3.9,11.1c-2.7,3-6.3,4.5-10.9,4.5s-8.2-1.5-10.9-4.5
                C31.7,70.3,30.4,66.6,30.4,62.1z M38.2,62.1c0,2.5,0.5,4.5,1.6,6.1c1.2,1.8,3,2.8,5.4,2.8s4.1-0.9,5.4-2.8c1.1-1.6,1.6-3.6,1.6-6.1
                s-0.5-4.5-1.6-6.1c-1.2-1.8-3-2.8-5.4-2.8S41,54.2,39.8,56C38.7,57.6,38.2,59.6,38.2,62.1z M90.1,47.1v17.6c0,4.4-1,7.7-3.1,9.8
                c-2.2,2.2-5.5,3.2-10,3.2c-4.5,0-7.8-1.1-9.9-3.2C65,72.4,64,69.1,64,64.7V47.1h7.8v18.1c0,3.9,1.8,5.8,5.2,5.8s5.2-1.9,5.2-5.8
                V47.1H90.1z M95.3,77.1v-30h15.3c2.9,0,5.3,0.6,7.2,1.9c2.2,1.5,3.3,3.7,3.3,6.5c0,1.7-0.4,3.2-1.2,4.5c-0.8,1.4-2,2.4-3.5,3v0.1
                c2.6,0.6,4,3,4.4,7.2c0.1,1.1,0.2,2.3,0.3,3.4c0.2,1.8,0.5,2.9,1,3.3h-7.7c-0.4-0.6-0.7-2.2-0.9-4.8c-0.1-1.9-0.4-3.3-0.9-4.2
                c-0.7-1.3-1.9-1.9-3.5-1.9h-5.9v10.9H95.3z M103.1,53.4v6.8h6.6c2.4,0,3.6-1.2,3.6-3.5c0-2.2-1.3-3.2-3.9-3.2H103.1z M138.9,77.1
                v-30h7.8v23.3h14v6.7H138.9z M164.6,77.1v-30h23.9v6.3h-16.1v5.2h14.7v6h-14.7v5.7h16.5v6.7H164.6z M205.4,55.5L202,66h6.8
                L205.4,55.5L205.4,55.5z M190.2,77.1l11.2-30h7.9l11.2,30h-8.1l-1.8-5.4h-10.5l-1.9,5.4H190.2z M222.9,77.1v-30h12.9
                c4.6,0,8.2,1.3,10.8,3.9s3.9,6.3,3.9,10.9c0,4.9-1.3,8.6-3.9,11.2c-2.6,2.6-6.2,3.9-10.8,3.9H222.9z M230.7,53.9v16.5h3.7
                c3,0,5.1-0.7,6.3-2c1.3-1.3,1.9-3.5,1.9-6.5c0-5.4-2.8-8.1-8.3-8.1H230.7z M253,67.1h7.8c0.1,3.1,2,4.7,5.7,4.7
                c1.3,0,2.4-0.2,3.3-0.7c1-0.5,1.5-1.3,1.5-2.4c0-1.1-0.9-2.1-2.7-2.7c-2-0.5-3.9-1.1-5.9-1.6c-2.7-0.8-4.7-1.7-6-2.7
                c-1.8-1.5-2.8-3.5-2.8-5.9c0-3,1.3-5.4,4-7c2.3-1.4,5-2.1,8.2-2.1c3.3,0,6,0.8,8.2,2.3c2.5,1.7,3.8,4.2,3.8,7.4h-7.8
                c0.1-1.3-0.4-2.2-1.5-2.8c-0.9-0.5-2-0.8-3.4-0.8c-2.5,0-3.8,0.9-3.8,2.6c0,1,0.9,1.8,2.7,2.4c2,0.5,4,1,6,1.6
                c2.6,0.7,4.6,1.6,6,2.7c1.8,1.5,2.7,3.5,2.7,5.9c0,3.5-1.4,6.1-4.1,7.9c-2.2,1.5-5.2,2.2-9,2.2c-3.8,0-6.8-0.8-9.1-2.5
                C254.4,73.4,253.1,70.7,253,67.1z'
                    fill={colors.fill}
                    stroke={'none'}
                    initial={{
                        fill: colors.fill,
                    }}
                    animate={{
                        fill: '#FB451E',
                    }}
                    transition={{
                        delay: 3.5, // Espera 3.5 segundos antes de iniciar la animación
                        duration: 2, // La animación dura 2 segundos
                    }}
                />
            </motion.svg>
        </>
    );
};