'use client'

import Image from "next/image";

import caixaendplamev from '../../../../../../public/assets/Images/ImageLPCaixa/caixaeplamev.svg'
import consultas from '../../../../../../public/assets/Images/ImageLPCaixa/consultasVeterinarias.svg'
import vacinas from '../../../../../../public/assets/Images/ImageLPCaixa/vacinas.svg'
import exames from '../../../../../../public/assets/Images/ImageLPCaixa/exames.svg'
import dinheiro from '../../../../../../public/assets/Images/ImageLPCaixa/dinheiro.svg'

import procedimentosAmbulatoriais from '../../../../../../public/assets/Images/ImageLPCaixa/procedimentosAmbulatoriais.svg'
import procedimentosCirurgicos from '../../../../../../public/assets/Images/ImageLPCaixa/procedimentosCirurgicos.svg'
import amplaRedeCredenciada from '../../../../../../public/assets/Images/ImageLPCaixa/amplaRede.svg'
import planosSemCoparticipacao from '../../../../../../public/assets/Images/ImageLPCaixa/planosSemCoparticipacao.svg'
import Link from "next/link";

import { IoIosArrowForward } from "react-icons/io";
import { useWebContext } from "@/app/(site)/providers";

const GarantimosOsMelhores = () => {
    const { isMobile } = useWebContext();
    return isMobile ? <GarantimosOsMelhoresMobile /> : <GarantimosOsMelhoresDesktop />;
}

const GarantimosOsMelhoresMobile = () => {
    const { setIsModalStateOpenLPCaixa } = useWebContext();
    return (
        <div className="container mx-auto my-[50px] md:p-8 p-8 py-1">
            <div className="flex justify-center mb-[64px]">
                <Image
                    src={caixaendplamev}
                    alt="Plamev"
                    width={222.54}
                    quality={75}
                />
            </div>

            <h1 className="text-[--primary] text-[40px] uppercase font-bold mb-7 leading-[40px] text-center mb-[27px]">
                Garantimos os<br />melhores<br /><span className="text-plamev-yellow-500">procedimentos<br />para o seu pet</span>
            </h1>

            <p className="text-plamev-dark-400 text-[15px] sm:text-[16px] text-center mb-[36px]">
                Desde 2013, temos o compromisso de<br />oferecer uma vida mais longa e saudável<br />para pets em todo o Brasil.
            </p>

            <div className="grid grid-cols-2 justify-items-center gap-4 w-[344px] mb-[63px] mx-auto">
                <div className="w-[165.46px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={consultas}
                        alt="Consultas veterinárias"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Consultas<br />veterinárias</p>
                </div>

                <div className="w-[165.46px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={vacinas}
                        alt="Vacinas (V10, V4 e raiva)"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Vacinas<br />(V10, V4 e raiva)</p>
                </div>

                <div className="w-[165.46px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={exames}
                        alt="Exames laboratoriais e de imagem"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Exames laboratoriais e de imagem</p>
                </div>

                <div className="w-[165.46px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={dinheiro}
                        alt="Zero taxa de adesão"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Zero taxa de<br />adesão</p>
                </div>

                <div className="w-[165.46px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={procedimentosAmbulatoriais}
                        alt="Procedimentos ambulatoriais"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Procedimentos ambulatoriais</p>
                </div>

                <div className="w-[165.46px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={procedimentosCirurgicos}
                        alt="Procedimentos cirúrgicos"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Procedimentos cirúrgicos</p>
                </div>

                <div className="w-[165.46px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={amplaRedeCredenciada}
                        alt="Ampla rede credenciada"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Ampla rede credenciada</p>
                </div>

                <div className="w-[165.46px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={planosSemCoparticipacao}
                        alt="Planos sem coparticipação"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Planos sem coparticipação</p>
                </div>
            </div>

            <div className="flex flex-col justify-center items-center gap-5">
                <button type="button" onClick={() => setIsModalStateOpenLPCaixa(true)} className="bg-plamev-yellow-500 text-white px-4 py-2 w-[305px] h-[56px] font-semibold tracking-[1px] rounded-md flex justify-between items-center normal-case">
                    Simular agora um plano <IoIosArrowForward />
                </button>

                <Link href="https://plamev.pet/CaixaWppConsultor" target="_blank" className="bg-[#23404C] text-white px-4 py-2 w-[305px] h-[56px] font-semibold tracking-[1px] rounded-md flex justify-between items-center">
                    Falar com um especialista <IoIosArrowForward />
                </Link>
            </div>
        </div>
    )
}

const GarantimosOsMelhoresDesktop = () => {
    const { setIsModalStateOpenLPCaixa } = useWebContext();
    return (
        <div className="container mx-auto my-[50px] md:p-8 p-8 py-1">
            <div className="flex justify-center mb-[57px]">
                <Image
                    src={caixaendplamev}
                    alt="Dog"
                    width={222}
                    quality={75}
                />
            </div>

            <h1 className="text-[--primary] text-[48px] uppercase font-bold leading-[48px] text-center mb-[23px]">
                Garantimos os melhores<br /><span className="text-plamev-yellow-500">procedimentos para o seu pet</span>
            </h1>

            <p className="text-plamev-dark-400 text-[15px] sm:text-[16px] text-center mb-[62px]">
                Desde 2013, temos o compromisso de oferecer uma vida<br />mais longa e saudável para pets em todo o Brasil.
            </p>

            <div className="grid grid-cols-2 sm:grid-cols-4 justify-items-center gap-4 w-[797.82px] mx-auto mb-[85px]">
                <div className="w-[176px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={consultas}
                        alt="Consultas veterinárias"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Consultas<br />veterinárias</p>
                </div>

                <div className="w-[176px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={vacinas}
                        alt="Vacinas (V10, V4 e raiva)"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Vacinas<br />(V10, V4 e raiva)</p>
                </div>

                <div className="w-[176px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={exames}
                        alt="Exames laboratoriais e de imagem"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Exames laboratoriais e de imagem</p>
                </div>

                <div className="w-[176px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={dinheiro}
                        alt="Zero taxa de adesão"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Zero taxa de<br />adesão</p>
                </div>

                <div className="w-[176px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={procedimentosAmbulatoriais}
                        alt="Procedimentos ambulatoriais"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Procedimentos ambulatoriais</p>
                </div>

                <div className="w-[176px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={procedimentosCirurgicos}
                        alt="Procedimentos cirúrgicos"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Procedimentos cirúrgicos</p>
                </div>

                <div className="w-[176px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={amplaRedeCredenciada}
                        alt="Ampla rede credenciada"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Ampla rede credenciada</p>
                </div>

                <div className="w-[176px] h-[133px] border-[2px] p-2 flex flex-col items-center justify-evenly border-[#F9E9C7] rounded-[10px]">
                    <Image
                        src={planosSemCoparticipacao}
                        alt="Planos sem coparticipação"
                        width={32}
                        quality={75}
                    />
                    <p className="text-plamev-dark-400 text-[15px] text-center">Planos sem coparticipação</p>
                </div>
            </div>

            <div className="flex flex-col sm:flex-row justify-center items-center gap-5">
                <button type="button" onClick={() => setIsModalStateOpenLPCaixa(true)} className="bg-plamev-yellow-500 text-white px-4 py-2 w-[305px] h-[56px] font-semibold tracking-[1px] rounded-md flex justify-between items-center normal-case">
                    Simular agora um plano <IoIosArrowForward />
                </button>

                <Link href="https://plamev.pet/CaixaWppConsultor" target="_blank" className="bg-[#23404C] text-white px-4 py-2 w-[305px] h-[56px] font-semibold tracking-[1px] rounded-md flex justify-between items-center">
                    Falar com um especialista <IoIosArrowForward />
                </Link>
            </div>
        </div>
    )
}

export default GarantimosOsMelhores;