import { useInView } from 'react-intersection-observer';
import { motion } from 'framer-motion';
import useMediaQuery from '@/hooks/useMediaQuery';
import { strokeDashOffset } from '@/variants';

export const pathStyles =
    'fill-none stroke-vermilion stroke-[1.5] stroke-dasharray-[1000]';

const WeAreBuildersTitle = () => {
    const lg = useMediaQuery('lg');
    const values = !lg ? '295.3 90' : '477.6 41';
    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 ${values}`}
                style={{ enableBackground: `new 0 0 ${values}` }}
                xmlSpace='preserve'
                title='We are builders'
                className='w-[70%] max-w-[18.75rem] lg:w-[90%] lg:max-w-[29.375rem]'
                ref={ref}
            >
                <g>
                    {!lg ? (
                        <>
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.1)}
                                d='M0.8,20.5C0.8,8.9,9.7,0.8,21.8,0.8c7.4,0,13.2,2.7,17,7.6l-8,7.2c-2.2-2.8-4.9-4.4-8.3-4.4
		c-5.3,0-8.9,3.7-8.9,9.5c0,5.8,3.6,9.5,8.9,9.5c3.4,0,6-1.6,8.3-4.4l8,7.2c-3.7,4.9-9.6,7.6-17,7.6C9.7,40.3,0.8,32.1,0.8,20.5z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.15)}
                                d='M40.1,20.5c0-11.4,9-19.8,21.3-19.8s21.3,8.3,21.3,19.8s-9,19.8-21.3,19.8S40.1,32,40.1,20.5z M69.9,20.5
		c0-5.9-3.8-9.5-8.5-9.5S53,14.6,53,20.5s3.8,9.5,8.5,9.5S69.9,26.4,69.9,20.5z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.2)}
                                d='M87.4,1.6H106c12.6,0,21.3,7.2,21.3,18.9s-8.7,18.9-21.3,18.9H87.4V1.6z M105.5,29.5c5.3,0,9-3.2,9-9
		c0-5.8-3.7-9-9-9h-5.3v17.9H105.5z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.25)}
                                d='M163.5,29.8v9.6H132V1.6h30.7v9.6h-18.2v4.4h16v9.2h-16v5H163.5z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.3)}
                                d='M37.7,64.9c0,8.7-6.7,14.3-17.2,14.3H15v9.3H2.3V50.6h18.2C31,50.6,37.7,56.1,37.7,64.9z M24.8,64.9
		c0-2.8-1.7-4.4-5.2-4.4H15v8.9h4.6C23.2,69.3,24.8,67.6,24.8,64.9z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.35)}
                                d='M41.8,50.6h12.7v37.8H41.8V50.6z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.4)}
                                d='M59.2,69.5c0-11.4,9-19.8,21.3-19.8s21.3,8.3,21.3,19.8c0,11.4-9,19.8-21.3,19.8S59.2,81,59.2,69.5z M89,69.5
		c0-5.9-3.8-9.5-8.5-9.5s-8.5,3.6-8.5,9.5c0,5.9,3.8,9.4,8.5,9.4S89,75.4,89,69.5z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.45)}
                                d='M143.8,50.6v37.8h-10.5L119,71.2v17.2h-12.4V50.6H117l14.4,17.2V50.6H143.8z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.5)}
                                d='M181.4,78.8v9.6H150V50.6h30.7v9.6h-18.2v4.4h16v9.2h-16v5H181.4z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.55)}
                                d='M217.7,78.8v9.6h-31.4V50.6H217v9.6h-18.2v4.4h16v9.2h-16v5H217.7z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.6)}
                                d='M238.8,78.9h-3.5v9.5h-12.7V50.6h18.2c10.5,0,17.2,5.5,17.2,14.3c0,5.5-2.6,9.6-7.1,11.9l7.9,11.7h-13.6
		L238.8,78.9z M240,60.4h-4.6v8.9h4.6c3.5,0,5.2-1.7,5.2-4.4S243.5,60.4,240,60.4z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.65)}
                                d='M260.5,85.4l4.1-9.3c3.6,2.1,8.3,3.5,12.5,3.5c3.6,0,4.9-0.8,4.9-2.1c0-4.8-20.9-0.9-20.9-15
		c0-7,5.9-12.7,17.6-12.7c5.1,0,10.3,1.1,14.3,3.3l-3.8,9.2c-3.7-1.9-7.2-2.8-10.5-2.8c-3.7,0-4.9,1.1-4.9,2.4
		c0,4.5,20.9,0.8,20.9,14.7c0,6.9-5.9,12.7-17.6,12.7C270.6,89.3,264.3,87.7,260.5,85.4z'
                            />
                        </>
                    ) : (
                        <>
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.1)}
                                d='M0.8,20.5C0.8,8.9,9.7,0.8,21.8,0.8c7.4,0,13.2,2.7,17,7.6l-8,7.2c-2.2-2.8-4.9-4.4-8.3-4.4
		c-5.3,0-8.9,3.7-8.9,9.5c0,5.8,3.6,9.5,8.9,9.5c3.4,0,6-1.6,8.3-4.4l8,7.2c-3.7,4.9-9.6,7.6-17,7.6C9.7,40.3,0.8,32.1,0.8,20.5z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.15)}
                                d='M40.1,20.5c0-11.4,9-19.8,21.3-19.8s21.3,8.3,21.3,19.8s-9,19.8-21.3,19.8S40.1,32,40.1,20.5z M69.9,20.5
		c0-5.9-3.8-9.5-8.5-9.5S53,14.6,53,20.5s3.8,9.5,8.5,9.5S69.9,26.4,69.9,20.5z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.2)}
                                d='M87.4,1.6H106c12.6,0,21.3,7.2,21.3,18.9s-8.7,18.9-21.3,18.9H87.4V1.6z M105.5,29.5c5.3,0,9-3.2,9-9
		c0-5.8-3.7-9-9-9h-5.3v17.9H105.5z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.25)}
                                d='M163.5,29.8v9.6H132V1.6h30.7v9.6h-18.2v4.4h16v9.2h-16v5H163.5z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.3)}
                                d='M220,15.9c0,8.7-6.7,14.3-17.2,14.3h-5.5v9.3h-12.7V1.6h18.2C213.3,1.6,220,7.1,220,15.9z M207.1,15.9
		c0-2.8-1.7-4.4-5.2-4.4h-4.6v8.9h4.6C205.5,20.3,207.1,18.6,207.1,15.9z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.35)}
                                d='M224.1,1.6h12.7v37.8h-12.7V1.6z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.4)}
                                d='M241.5,20.5c0-11.4,9-19.8,21.3-19.8s21.3,8.3,21.3,19.8s-9,19.8-21.3,19.8S241.5,32,241.5,20.5z M271.3,20.5
		c0-5.9-3.8-9.5-8.5-9.5s-8.5,3.6-8.5,9.5s3.8,9.5,8.5,9.5S271.3,26.4,271.3,20.5z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.45)}
                                d='M326.1,1.6v37.8h-10.5l-14.4-17.2v17.2h-12.4V1.6h10.5l14.4,17.2V1.6H326.1z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.5)}
                                d='M363.7,29.8v9.6h-31.4V1.6H363v9.6h-18.2v4.4h16v9.2h-16v5H363.7z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.55)}
                                d='M400,29.8v9.6h-31.4V1.6h30.7v9.6h-18.2v4.4h16v9.2h-16v5H400z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.6)}
                                d='M421.1,29.9h-3.5v9.5h-12.7V1.6h18.2c10.5,0,17.2,5.5,17.2,14.3c0,5.5-2.6,9.6-7.1,11.9l7.9,11.7h-13.6
		L421.1,29.9z M422.3,11.4h-4.6v8.9h4.6c3.5,0,5.2-1.7,5.2-4.4S425.8,11.4,422.3,11.4z'
                            />
                            <motion.path
                                className={pathStyles}
                                {...strokeDashOffset(1000, isInView, 4, 0.65)}
                                d='M442.8,36.4l4.1-9.3c3.6,2.1,8.3,3.5,12.5,3.5c3.6,0,4.9-0.8,4.9-2.1c0-4.8-20.9-0.9-20.9-15
		c0-7,5.9-12.7,17.6-12.7c5.1,0,10.3,1.1,14.3,3.3l-3.8,9.2c-3.7-1.9-7.2-2.8-10.5-2.8c-3.7,0-4.9,1.1-4.9,2.4
		c0,4.5,20.9,0.8,20.9,14.7c0,6.9-5.9,12.7-17.6,12.7C452.9,40.3,446.6,38.7,442.8,36.4z'
                            />
                        </>
                    )}
                </g>
            </svg>
        </>
    );
};

export default WeAreBuildersTitle;