import { useInView } from 'react-intersection-observer';
import { motion } from 'framer-motion';
import { strokeDashOffset } from '@/variants';
import { pathStyles } from './WeAreBuildersTitle';

const SomosCreadoresTitle = () => {
    const [ref, isInView] = useInView({
        threshold: 1,
        triggerOnce: true,
    });
    return (
        <>
            <svg
                version='1.1'
                xmlns='http://www.w3.org/2000/svg'
                xmlnsXlink='http://www.w3.org/1999/xlink'
                x='0px'
                y='0px'
                viewBox='0 0 339 84.5'
                style={{ enableBackground: 'new 0 0 339 84.5' }}
                xmlSpace='preserve'
                title='Somos creadores'
                className='w-[92%] max-w-[22.75rem]'
                ref={ref}
            >
                <g>
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.1)}
                        d='M1.3,34.2l3.8-8.7c3.3,2,7.7,3.2,11.6,3.2c3.4,0,4.6-0.7,4.6-1.9c0-4.4-19.5-0.9-19.5-14C1.8,6.3,7.3,1,18.2,1
                            c4.7,0,9.6,1,13.3,3.1l-3.6,8.6c-3.5-1.8-6.7-2.6-9.8-2.6c-3.5,0-4.6,1-4.6,2.2C13.5,16.5,33,13,33,26c0,6.4-5.5,11.9-16.4,11.9
                            C10.7,37.8,4.8,36.4,1.3,34.2z'
                    ></motion.path>
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.15)}
                        d='M35.1,19.4C35.1,8.8,43.5,1,55,1c11.5,0,19.9,7.8,19.9,18.4S66.5,37.8,55,37.8C43.5,37.8,35.1,30.1,35.1,19.4z
                            M62.9,19.4c0-5.5-3.5-8.8-7.9-8.8c-4.4,0-7.9,3.3-7.9,8.8s3.5,8.8,7.9,8.8C59.4,28.2,62.9,24.9,62.9,19.4z'
                    ></motion.path>
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.2)}
                        d='M110.7,37L110.6,21l-7.6,12.9h-5.2L90,21.5V37H79.2V1.8H89l11.5,18.8l11.2-18.8h9.8l0.1,35.2H110.7z'
                    ></motion.path>
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.25)}
                        d='M125.8,19.4c0-10.7,8.4-18.4,19.9-18.4c11.5,0,19.9,7.8,19.9,18.4s-8.4,18.4-19.9,18.4
                            C134.2,37.8,125.8,30.1,125.8,19.4z M153.6,19.4c0-5.5-3.5-8.8-7.9-8.8c-4.4,0-7.9,3.3-7.9,8.8s3.5,8.8,7.9,8.8
                            C150.1,28.2,153.6,24.9,153.6,19.4z'
                    ></motion.path>
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.3)}
                        d='M167.7,34.2l3.8-8.7c3.3,2,7.7,3.2,11.6,3.2c3.4,0,4.6-0.7,4.6-1.9c0-4.4-19.5-0.9-19.5-14
                            c0-6.5,5.5-11.9,16.4-11.9c4.7,0,9.6,1,13.3,3.1l-3.6,8.6c-3.5-1.8-6.7-2.6-9.8-2.6c-3.5,0-4.6,1-4.6,2.2c0,4.2,19.5,0.7,19.5,13.7
                            c0,6.4-5.5,11.9-16.4,11.9C177.1,37.8,171.2,36.4,167.7,34.2z'
                    ></motion.path>
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.35)}
                        d='M2.1,65.1c0-10.8,8.3-18.4,19.6-18.4c6.9,0,12.3,2.5,15.8,7L30,60.4c-2.1-2.6-4.5-4.1-7.7-4.1
                            c-4.9,0-8.3,3.4-8.3,8.8s3.3,8.8,8.3,8.8c3.2,0,5.6-1.5,7.7-4.1l7.5,6.7c-3.5,4.5-8.9,7-15.8,7C10.4,83.5,2.1,75.9,2.1,65.1z'
                    ></motion.path>
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.4)}
                        d='M56,73.8h-3.2v8.9H40.9V47.4h17c9.8,0,16.1,5.1,16.1,13.3c0,5.1-2.4,8.9-6.6,11.1l7.4,10.9H62L56,73.8z
                            M57.1,56.6h-4.3v8.3h4.3c3.3,0,4.8-1.6,4.8-4.1S60.4,56.6,57.1,56.6z'
                    ></motion.path>
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.45)}
                        d='M107.7,73.7v9H78.4V47.4H107v9h-17v4.1H105v8.6H90.1v4.6H107.7z'
                    ></motion.path>
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.5)}
                        d='M136.3,76.5h-13.4l-2.4,6.1h-12.1l15.4-35.2h11.7l15.4,35.2h-12.3L136.3,76.5z M133,68l-3.4-8.9l-3.4,8.9H133z'
                    ></motion.path>
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.55)}
                        d='M152.8,47.4h17.4c11.8,0,19.9,6.7,19.9,17.6c0,10.9-8.1,17.6-19.9,17.6h-17.4V47.4z M169.7,73.4
                            c5,0,8.4-3,8.4-8.4s-3.4-8.4-8.4-8.4h-5v16.7H169.7z'
                    ></motion.path>
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.6)}
                        d='M193,65.1c0-10.7,8.4-18.4,19.9-18.4s19.9,7.8,19.9,18.4s-8.4,18.4-19.9,18.4S193,75.7,193,65.1z M220.8,65.1
                            c0-5.5-3.5-8.8-7.9-8.8s-7.9,3.3-7.9,8.8s3.5,8.8,7.9,8.8S220.8,70.5,220.8,65.1z'
                    ></motion.path>
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.65)}
                        d='M252.2,73.8h-3.2v8.9h-11.9V47.4h17c9.8,0,16.1,5.1,16.1,13.3c0,5.1-2.4,8.9-6.6,11.1l7.4,10.9h-12.7
                            L252.2,73.8z M253.3,56.6h-4.3v8.3h4.3c3.3,0,4.8-1.6,4.8-4.1S256.5,56.6,253.3,56.6z'
                    ></motion.path>
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.7)}
                        d='M303.8,73.7v9h-29.3V47.4h28.6v9h-17v4.1h14.9v8.6h-14.9v4.6H303.8z'
                    ></motion.path>
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.75)}
                        d='M306.2,79.9l3.8-8.7c3.3,2,7.8,3.2,11.6,3.2c3.4,0,4.6-0.7,4.6-1.9c0-4.4-19.5-0.9-19.5-14
                            c0-6.5,5.5-11.9,16.4-11.9c4.7,0,9.6,1,13.3,3.1l-3.6,8.6c-3.5-1.8-6.7-2.6-9.8-2.6c-3.5,0-4.6,1-4.6,2.2c0,4.2,19.5,0.7,19.5,13.7
                            c0,6.4-5.5,11.9-16.4,11.9C315.7,83.5,309.7,82,306.2,79.9z'
                    ></motion.path>
                </g>
            </svg>
        </>
    );
};

export default SomosCreadoresTitle;