'use client';

import Image from 'next/image';

import { useEffect, useState } from 'react';
import useDownloader from "react-use-downloader";
import { ParallaxBanner, ParallaxProvider } from 'react-scroll-parallax';
import { LuArrowDownToLine } from "react-icons/lu";
import { MdOutlineEmail } from "react-icons/md";

import SectionComponents from './_components/SectionComponents';
import { useWebContext } from '@/app/(site)/providers';

import ra1000 from '../../../../../../public/assets/Images/ImageFosteringLongLife/ra1000.svg';
import scaleUp from '../../../../../../public/assets/Images/ImageFosteringLongLife/scaleUp.svg';
import bee4 from '../../../../../../public/assets/Images/ImageFosteringLongLife/bee4.svg';
import dogBulldog from '../../../../../../public/assets/Images/ImageFosteringLongLife/dogBulldog.webp';
import dogMac from '../../../../../../public/assets/Images/ImageFosteringLongLife/dogMac.svg';
import melhoresComParceiros from '../../../../../../public/assets/Images/ImageFosteringLongLife/melhoresComParceiros.svg';

melhoresComParceiros
import Link from 'next/link';

export default function Timeline() {
    const [bgClass, setBgClass] = useState<string>('');
    const { download } = useDownloader();
    const { isMobile } = useWebContext();

    useEffect(() => {
        const className = isMobile ? "bg-[url('/assets/Images/ImageFosteringLongLife/bgmobile2.png')]" : "bg-[url('/assets/Images/ImageFosteringLongLife/bgsectionGreen.png')]";
        setBgClass(className);
    }, [isMobile]);

    return (
        <>
            {isMobile && (
                <div
                    className="w-full md:w-2/5 h-full flex items-center justify-center bg-white z-20 lg:mb-0">
                    <div className="text-center md:text-left p-8 mt-10 md:mt-0">
                        <h1 className="text-5xl md:text-5xl text-[--primary] font-bold">LINHA DO <span
                            className='inline lg:block'>TEMPO </span></h1>
                        <p className="text-[--text-color] mt-2">A história da Plamev, evoluindo com
                            você!</p>
                    </div>
                </div>
            )}

            <ParallaxProvider>
                <section>
                    <div className="mx-auto sticky top-0 z-10">
                        <div className="flex flex-col md:flex-row h-full gap-10">
                            <div className="w-full md:w-2/3 relative flex-1">
                                <SectionComponents />

                                <div className='relative z-[100]'
                                    style={{ background: 'linear-gradient(to top, white 50%, transparent 50%)' }}>
                                    <div
                                        className={`relative top-0 z-30 ${bgClass} bg-top sm:bg-center lg:bg-cover md:h-screen bg-no-repeat py-6 lg:py-24 items-center justify-center`}>
                                        <ParallaxBanner
                                            layers={[{ speed: 100 }]}
                                            style={{ height: `${isMobile ? '1500px' : 'auto'}` }}
                                        >
                                            <div className="text-center mt-6">
                                                <h1 className="text-[40px] leading-10 md:text-5xl font-bold text-[--primary]">SOMOS
                                                    RECONHECIDOS</h1>
                                                <h1 className="text-[40px]  leading-10  md:text-5xl font-semibold text-[--secundary]">NACIONALMENTE</h1>

                                                <div className="flex flex-col md:flex-row justify-center mt-3">
                                                    <div className="p-3 max-w-full md:max-w-[350px] lg:max-w-[350px]">
                                                        <Image src={ra1000} alt="RA1000 Reclame Aqui"
                                                            className='m-auto max-h-[130px] lg:h-full md:h-full' />
                                                        <h1 className="text-xl font-bold mt-4 text-[--primary]">SOMOS <span
                                                            className='text-[--secundary]'>RA1000 RECLAME AQUI</span>
                                                        </h1>
                                                        <p className="mt-2 text-[--text-color] text-base">
                                                            Nossa empresa é reconhecida como RA1000 no Reclame Aqui,
                                                            garantindo a você um atendimento humanizado e uma equipe
                                                            capacitada para solução de problemas.
                                                        </p>
                                                    </div>

                                                    <div className="p-3 max-w-full md:max-w-[350px] lg:max-w-[350px]">
                                                        <a
                                                            href="https://old.endeavor.org.br/sobre-a-endeavor/scale-up-endeavor-2021-2/"
                                                            target='_blank'
                                                            className="relative z-[150] block"
                                                        >
                                                            <Image src={scaleUp} alt="Scale Up Endeavor"
                                                                className='m-auto max-h-[130px] lg:h-full md:h-full' />
                                                        </a>
                                                        <h1 className="text-xl font-bold mt-4 text-[--primary]">SELECIONADOS <span
                                                            className='text-[--secundary]'>PARA O UP SCALE ENDEAVOR</span>
                                                        </h1>
                                                        <p className="mt-2 text-[--text-color] text-base">
                                                            Fomos selecionados para o Scale Up Endeavor, para acelerar
                                                            resultados ao lado dos maiores empreendedores do país.
                                                        </p>
                                                    </div>

                                                    <div className="p-3 max-w-full md:max-w-[350px] lg:max-w-[350px]">
                                                        <a
                                                            href="https://bee4.com.br/en/empresas/plamev-pet-plmv4-2/"
                                                            target='_blank'
                                                            className="relative z-[150] block"
                                                        >
                                                            <Image src={bee4} alt="BEE4" className='m-auto max-h-[130px] lg:h-full md:h-full' />
                                                        </a>

                                                        <h1 className="text-xl font-bold mt-4 text-[--primary]">PRIMEIRA
                                                            EMPRESA BRASILEIRA<span className='text-[--secundary]'> DO SEGMENTO COM IPO LISTADO NA BEE4</span>
                                                        </h1>
                                                        <p className="mt-2 text-[--text-color] text-base">
                                                            A Plamev é a primeira empresa do mercado pet com capital
                                                            aberto listado na BEE4.
                                                        </p>
                                                    </div>

                                                    <div className="p-3 max-w-full md:max-w-[350px] lg:max-w-[350px]">
                                                        <a
                                                            href="https://melhores.com/plano-de-saude-pet#plamev"
                                                            target='_blank'
                                                            className="relative z-[150] block"
                                                        >
                                                            <Image src={melhoresComParceiros} alt="BEE4" className="m-auto max-h-[130px] lg:h-full md:h-full" />
                                                        </a>

                                                        <h1 className="text-xl font-bold mt-4 text-[--primary]">MELHORES.COM -<span className='text-[--secundary]'>  PLANO DE SAÚDE PET 2025</span>
                                                        </h1>
                                                        <p className="text-[--text-color] text-base lg:max-w-[300px] md:max-w-[300px]">
                                                            A Plamev foi reconhecida no ranking de melhores empresas de plano de saúde pet da Melhores.com, reforçando nosso compromisso com a excelência e a satisfação dos nossos clientes.
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </ParallaxBanner>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </ParallaxProvider>


            <div
                className="container mx-auto flex flex-col md:flex-row justify-around mt-6 lg:p-4 p-4 mb-16 md:mt-20 gap-10">
                <div className="flex flex-col lg:flex-row items-center gap-4 md:gap-10">
                    <Image src={dogBulldog} alt="Imprensa e Parcerias" width={245} height={278} />
                    <div className="text-center md:text-left">
                        <h1 className="text-[40px] font-bold mt-4 text-[--primary] leading-10">IMPRENSA E PARCERIAS</h1>
                        <p className="mt-5 text-[--text-color] text-sm">
                            Fale com a gente pelo email: <br />
                            <a
                                href="mailto:marketing@planvet.com.br"
                                className="text-[--primary]"
                            >
                                marketing@plamev.com.br
                            </a>
                        </p>

                        <Link
                            href="mailto: imprensa@plamev.com.br"
                            className="mt-4  mx-auto md:mx-0 bg-[#EDB94B] hover:bg-[#D8A844] text-white px-6 py-4 rounded-lg flex flex-row gap-1 items-center w-[180px]"
                        >
                            Enviar e-mail <MdOutlineEmail size={20} />
                        </Link>
                    </div>
                </div>

                <div className="flex flex-col lg:flex-row items-center gap-4 md:gap-10">
                    <Image src={dogMac} alt="Imprensa e Parcerias" width={245} height={278} />
                    <div className="text-center md:text-left">
                        <h1 className="text-[40px] font-bold mt-4 text-[--primary] leading-10">
                            PRESS KIT E GUIA DA MARCA
                        </h1>
                        <p className="mt-5 text-[--text-color] text-sm">
                            Fale com a gente pelo email: <br />
                            <a
                                href="mailto:marketing@planvet.com.br"
                                className="text-[--primary]"
                            >
                                marketing@plamev.com.br
                            </a>
                        </p>
                        <button
                            onClick={() => download("Manualdamarca.pdf", 'Manual da Marca.pdf')}
                            className="mt-4 mx-auto md:mx-0 bg-[#EDB94B] hover:bg-[#D8A844] text-white px-6 py-4 rounded-lg flex flex-row gap-2 items-center"
                        >
                            Baixar material <LuArrowDownToLine size={20} />
                        </button>
                    </div>
                </div>
            </div>
        </>
    )
}