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

const NousSommesDesCreateursTitle = () => {
    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 502.1 99.8'
                style={{ enableBackground: 'new 0 0 502.1 99.8' }}
                xmlSpace='preserve'
                title='Nous sommes des créateurs'
                className='mt-4 w-[92%] max-w-[28.125rem]'
                ref={ref}
            >
                <g>
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.1)}
                        d='M1,1.9h12.8l14.5,18v-18h13.5v40.9H29.7L14.5,23.9v18.9H1V1.9z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.125)}
                        d='M45.6,22.4v-0.1C45.6,10.5,55.4,1,68,1s22.2,9.3,22.2,21.2v0.1c0,11.8-9.7,21.3-22.4,21.3S45.6,34.3,45.6,22.4
		z M76.4,22.4v-0.1c0-4.8-3.3-9.2-8.6-9.2c-5.2,0-8.5,4.3-8.5,9.1v0.1c0,4.8,3.3,9.2,8.6,9.2C73.2,31.5,76.4,27.2,76.4,22.4z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.15)}
                        d='M93.6,24.4V1.9h13.9v22.4c0,5.1,2.6,7.2,6.3,7.2c3.7,0,6.3-2,6.3-6.9V1.9H134v22.2c0,14-8.1,19.4-20.3,19.4
		C101.5,43.6,93.6,37.9,93.6,24.4z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.175)}
                        d='M134.9,36.6l7.3-8.7c4.4,3.4,9.5,4.8,14.3,4.8c2.5,0,3.5-0.6,3.5-1.8v-0.1c0-1.2-1.3-1.8-5.7-2.7
		c-9.2-1.9-17.2-4.5-17.2-13.1v-0.1c0-7.8,6.1-13.8,17.3-13.8c7.9,0,13.7,1.9,18.4,5.6l-6.7,9.2c-3.9-2.8-8.5-4-12.3-4
		c-2,0-3,0.7-3,1.7v0.1c0,1.1,1.1,1.8,5.4,2.6c10.4,1.9,17.5,5,17.5,13.2v0.1c0,8.6-7.1,13.8-18,13.8
		C147.6,43.5,140.1,41.2,134.9,36.6z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.2)}
                        d='M188.5,36.6l7.3-8.7c4.4,3.4,9.5,4.8,14.3,4.8c2.5,0,3.5-0.6,3.5-1.8v-0.1c0-1.2-1.3-1.8-5.7-2.7
		c-9.2-1.9-17.2-4.5-17.2-13.1v-0.1c0-7.8,6.1-13.8,17.3-13.8c7.9,0,13.7,1.9,18.4,5.6l-6.7,9.2c-3.9-2.8-8.5-4-12.3-4
		c-2,0-3,0.7-3,1.7v0.1c0,1.1,1.1,1.8,5.4,2.6c10.4,1.9,17.5,5,17.5,13.2v0.1c0,8.6-7.1,13.8-18,13.8
		C201.2,43.5,193.7,41.2,188.5,36.6z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.225)}
                        d='M229.7,22.4v-0.1c0-11.8,9.7-21.3,22.4-21.3s22.2,9.3,22.2,21.2v0.1c0,11.8-9.7,21.3-22.4,21.3
		S229.7,34.3,229.7,22.4z M260.6,22.4v-0.1c0-4.8-3.3-9.2-8.6-9.2c-5.2,0-8.5,4.3-8.5,9.1v0.1c0,4.8,3.3,9.2,8.6,9.2
		C257.3,31.5,260.6,27.2,260.6,22.4z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.25)}
                        d='M278.1,1.9h14.2l8.8,14.4l8.8-14.4h14.2v40.9h-13.6V22.5L301.1,37h-0.2l-9.4-14.5v20.3h-13.4V1.9z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.275)}
                        d='M328.7,1.9H343l8.8,14.4l8.8-14.4h14.2v40.9h-13.6V22.5L351.7,37h-0.2l-9.4-14.5v20.3h-13.4V1.9z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.3)}
                        d='M379.4,1.9h34.8v11.2h-21.4v4.1h20v9.9h-20v4.4h21.7v11.2h-35.1V1.9z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.325)}
                        d='M414.9,36.6l7.3-8.7c4.4,3.4,9.5,4.8,14.3,4.8c2.5,0,3.5-0.6,3.5-1.8v-0.1c0-1.2-1.3-1.8-5.7-2.7
		c-9.2-1.9-17.2-4.5-17.2-13.1v-0.1c0-7.8,6.1-13.8,17.3-13.8c7.9,0,13.7,1.9,18.4,5.6l-6.7,9.2c-3.9-2.8-8.5-4-12.3-4
		c-2,0-3,0.7-3,1.7v0.1c0,1.1,1.1,1.8,5.4,2.6c10.4,1.9,17.5,5,17.5,13.2v0.1c0,8.6-7.1,13.8-18,13.8
		C427.5,43.5,420,41.2,414.9,36.6z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.35)}
                        d='M1,57h15.6C32.9,57,41,65,41,77.1v0.1c0,12.1-8.3,20.7-24.8,20.7H1V57z M16.9,86c6.2,0,10.3-2.6,10.3-8.5v-0.1
		c0-5.9-4-8.5-10.3-8.5h-2.3v17H16.9z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.375)}
                        d='M44.7,57h34.8v11.2H58.2v4.1h20v9.9h-20v4.4h21.7v11.2H44.7V57z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.4)}
                        d='M80.2,91.8l7.3-8.7c4.4,3.4,9.5,4.8,14.3,4.8c2.5,0,3.5-0.6,3.5-1.8V86c0-1.2-1.3-1.8-5.7-2.7
		c-9.2-1.9-17.2-4.5-17.2-13.1V70c0-7.8,6.1-13.8,17.3-13.8c7.9,0,13.7,1.9,18.4,5.6l-6.7,9.2c-3.9-2.8-8.5-4-12.3-4
		c-2,0-3,0.7-3,1.7v0.1c0,1.1,1.1,1.8,5.4,2.6c10.4,1.9,17.5,5,17.5,13.2v0.1c0,8.6-7.1,13.8-18,13.8C92.8,98.7,85.4,96.3,80.2,91.8
		z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.425)}
                        d='M136.2,77.6v-0.1c0-12.2,9.5-21.3,21.7-21.3c9,0,15.1,4.4,18.5,10.6l-11.3,6.6c-1.5-2.9-3.7-5-7.4-5
		c-4.6,0-7.6,4-7.6,8.9v0.1c0,5.3,3.2,9,7.6,9c3.9,0,6-2.1,7.7-5.1l11.3,6.4c-3.4,6.1-9.2,11-19.3,11
		C146.1,98.8,136.2,90.2,136.2,77.6z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.45)}
                        d='M179.3,57h20c7.2,0,11.8,1.8,14.7,4.7c2.5,2.5,3.7,5.5,3.7,9.7v0.1c0,6-3.1,10.1-8.1,12.5l9.5,13.9h-15.6
		l-7.7-11.7H193v11.7h-13.7V57z M198.9,76.5c3.3,0,5.3-1.5,5.3-4v-0.1c0-2.6-2-3.9-5.2-3.9h-6v8H198.9z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.475)}
                        d='M221.1,57h34.8v11.2h-21.4v4.1h20v9.9h-20v4.4h21.7v11.2h-35.1V57z M239.1,44.9l13.5,3l-9.3,6.7h-9.7
		L239.1,44.9z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.5)}
                        d='M274.2,56.7h13.5l17.2,41.2h-14.8l-2.2-5.5h-14.3l-2.1,5.5h-14.6L274.2,56.7z M284.5,82.7l-3.7-9.9l-3.7,9.9
		H284.5z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.525)}
                        d='M311.8,68.6h-12V57h37.7v11.6h-12v29.3h-13.7V68.6z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.55)}
                        d='M340.6,57h34.8v11.2H354v4.1h20v9.9h-20v4.4h21.7v11.2h-35.1V57z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.575)}
                        d='M379.1,79.6V57H393v22.4c0,5.1,2.6,7.2,6.3,7.2c3.7,0,6.3-2,6.3-6.9V57h13.9v22.2c0,14-8.1,19.4-20.3,19.4
		C386.9,98.7,379.1,93.1,379.1,79.6z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.6)}
                        d='M423.8,57h20c7.2,0,11.8,1.8,14.7,4.7c2.5,2.5,3.7,5.5,3.7,9.7v0.1c0,6-3.1,10.1-8.1,12.5l9.5,13.9h-15.6
		l-7.7-11.7h-2.9v11.7h-13.7V57z M443.3,76.5c3.3,0,5.3-1.5,5.3-4v-0.1c0-2.6-2-3.9-5.2-3.9h-6v8H443.3z'
                    />
                    <motion.path
                        className={pathStyles}
                        {...strokeDashOffset(1000, isInView, 4, 0.625)}
                        d='M462.1,91.8l7.3-8.7c4.4,3.4,9.5,4.8,14.3,4.8c2.5,0,3.5-0.6,3.5-1.8V86c0-1.2-1.3-1.8-5.7-2.7
		c-9.2-1.9-17.2-4.5-17.2-13.1V70c0-7.8,6.1-13.8,17.3-13.8c7.9,0,13.7,1.9,18.4,5.6l-6.7,9.2c-3.9-2.8-8.5-4-12.3-4
		c-2,0-3,0.7-3,1.7v0.1c0,1.1,1.1,1.8,5.4,2.6c10.4,1.9,17.5,5,17.5,13.2v0.1c0,8.6-7.1,13.8-18,13.8
		C474.8,98.7,467.3,96.3,462.1,91.8z'
                    />
                </g>
            </svg>
        </>
    );
};

export default NousSommesDesCreateursTitle;