'use client'

import React, { useState } from 'react';
import Image from 'next/image';
import arrow from '../../../../../../public/assets/Images/Icons/arrowBlueButton.svg';
import iconBlock from '../../../../../../public/assets/Images/Icons/iconBlock.svg';
import checkIcon from '../../../../../../public/assets/Images/Icons/checkIcon.svg';
import check from '../../../../../../public/assets/Images/Icons/icon-check.png';
import checkDisable from '../../../../../../public/assets/Images/Icons/icon-check-disabled.png';
import Link from 'next/link';
import PlanHeaderImage from '@/app/(checkout)/planos/_components/PlanHeaderImage';

import theBestOffer from "../../../../../../public/assets/Images/ImageHome/coroua.svg";

import { FaWhatsapp } from "react-icons/fa";

import { formatPrice } from '@/utils/functions';
import { useWebContext } from '@/app/(site)/providers';
import { API_URL, TOKEN } from '@/utils/constants/selectConstants';
import { ICobertura } from '@/utils/Interfaces/interfaces';

interface ProcedimentosSite {
    isOpen: any;
    Nome: string;
    Procedimentos: string[];
}

interface ProcedimentosSiteValoreEstaticos {
    Nome: string;
    Procedimentos: string[];
    NaoIncluso: string[];
}

const PlanCard: React.FC<{ dados: ICobertura; openDropdownIndex: any; setOpenDropdownIndex: (index: any) => void; }> = ({ dados, openDropdownIndex, setOpenDropdownIndex }) => {
    const handleDropdownToggle = (index: any) => {
        if (openDropdownIndex === index) {
            setOpenDropdownIndex(null);
        } else {
            setOpenDropdownIndex(index);
        }
    };

    const descriptions: Record<string, string> = {
        '17': "Cobertura incrível pelo melhor custo-benefício",
        '4': "Cobertura incrível pelo melhor custo-benefício",
        '5': "Cobertura completa para quem você ama",
        '18': "Um plano pensado para você cuidar do seu gatinho"
    };

    function Descrition(id: string): string {
        return descriptions[id] || "Descrição não disponível";
    }

    const openPdf = (link: string) => {
        fetch(`${API_URL}CoberturasPDF/ObterPdfsUrl/${link}/?Autorizacao=${TOKEN}`)
            .then(res => res.json())
            .then(body => {
                window.open(`${API_URL}bancoImagens/${body.Arquivo}`);
            })
            .catch(error => {
                console.error(error, 'Ocorreu um erro ao buscar os items BannersSite');
            });
    }


    const dadosCobertura: any = {
        "17": {
            "ProcedimentosSite":
                [
                    {
                        "Nome": "Consulta Emergencial",
                        "Procedimentos": [],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Vacinas",
                        "Procedimentos": [
                            `Raiva`, `Quádrupla felina (V-4)`, `Déctupla (v-10)`, `Antirrábica`],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Exames Laboratoriais",
                        "Procedimentos": [
                            "AST (TGO);",
                            "Contagem de plaquetas;",
                            "Creatinina;",
                            "Eritrograma;",
                            "Fosfatase alcalina;",
                            "Gama GT;",
                            "Hemograma completo (contagem de plaquetas + pesquisa hematozoários);",
                            "Leucograma;",
                            "Uréia."
                        ],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Consulta",
                        "Procedimentos": [],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Telemedicina",
                        "Procedimentos": [],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Consulta 24h",
                        "Procedimentos": [],
                        "NaoIncluso": ['SLIM ESSENCIAL']
                    },
                    {
                        "Nome": "Diagnóstico por imagem",
                        "Procedimentos": [
                            'Eletrocardiograma',
                            'Raio-X simples (área de estudo)',
                            'Ultrassonografia abdominal'
                        ],
                        "NaoIncluso": ['SLIM ESSENCIAL']
                    },
                    {
                        "Nome": "Procedimentos Cirúrgicos",
                        "Procedimentos": [],
                        "NaoIncluso": ['SLIM ESSENCIAL']
                    },
                    {
                        "Nome": "Redução de Carência",
                        "Procedimentos": [],
                        "NaoIncluso": ['SLIM ESSENCIAL']
                    },
                    {
                        "Nome": "Consulta Especializada",
                        "Procedimentos": [],
                        "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                    },
                    {
                        "Nome": "Sorologia",
                        "Procedimentos": [],
                        "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                    },
                    {
                        "Nome": "Especialidades",
                        "Procedimentos": [],
                        "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                    }
                ]
        },
        "4": {
            "ProcedimentosSite":
                [
                    {
                        "Nome": "Consulta Emergencial",
                        "Procedimentos": [],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Vacinas",
                        "Procedimentos": [
                            'Raiva',
                            'Laptospirose',
                            'Déctupla (v-10)',
                            'Quádrupla felina (V-4)',
                        ],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Exames Laboratoriais",
                        "Procedimentos": [
                            "AST (TGO);",
                            "Contagem de plaquetas;",
                            "Creatinina;",
                            "Eritrograma;",
                            "Fosfatase alcalina;",
                            "Gama GT;",
                            "Hemograma completo (contagem de plaquetas + pesquisa hematozoários);",
                            "Leucograma;",
                            "Uréia."
                        ],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Consulta",
                        "Procedimentos": [],
                        "NaoIncluso": ['SLIM ESSENCIAL']
                    },
                    {
                        "Nome": "Telemedicina",
                        "Procedimentos": [],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Consulta 24h",
                        "Procedimentos": [],
                        "NaoIncluso": ['SLIM ESSENCIAL']
                    },
                    {
                        "Nome": "Diagnóstico por imagem",
                        "Procedimentos": [
                            'Eletrocardiograma',
                            'Raio-X simples (área de estudo)',
                            'Ultrassonografia abdominal'
                        ],
                        "NaoIncluso": ['SLIM ESSENCIAL']
                    },
                    {
                        "Nome": "Procedimentos Cirúrgicos",
                        "Procedimentos": [
                            'Ablação do conduto auditivo (unilateral)',
                            'Ablação escrotal',
                            'Aeração do conduto auditivo (unilateral)',
                            'Amputação de dedo',
                            'Amputação de dedo suplementar',
                            'Internação período diurno (sem medicação)',
                            'Amputação de membro torácico',
                            'Amputação de reto',
                            'Blefarorrafia (unilateral)',
                            'Caudectomia patológica',
                            'Ceratotomia em grade (unilateral)',
                            'Cesariana',
                            'Cílio ectópico',
                            'Cistotomia',
                            'Conchectomia patológica (unilateral)',
                            'Corpo estranho esofágico cervical',
                            'Corpo estranho intestinal',
                            'Dilatação vólvulo-gástrica (torção gástrica)',
                            'Distiquíase',
                            'Ectrópio palpebral (unilateral)',
                            'Entrópio palpebral (unilateral)',
                            'Enucleação do globo ocular (unilateral)',
                            'Episiotomia',
                            'Esofagotomia cervical',
                            'Esplenectomia',
                            'Exérese neoplasia palpebral',
                            'Extração de canino definitivo',
                            'Extração de incisivo',
                            'Extração de molar',
                            'Extração de papilomas',
                            'Fístula oronasal adquirida',
                            'Fístula oronasal congênita (fenda palatina)',
                            'Flape terceira pálpebra (unilateral)',
                            'Gastrectomia parcial',
                            'Glossectomia',
                            'Hepatectomia',
                            'Hérnia inguinal',
                            'Hérnia perineal',
                            'Hérnia umbilical',
                            'Higroma de cotovelo',
                            'Laparotomia exploratória',
                            'Mandibulectomia total',
                            'Mastectomia (unilateral)',
                            'Megacólon',
                            'Nefrectomia parcial',
                            'Nefrotomia',
                            'Otohematoma (unilateral)',
                            'Penectomia',
                            'Piometra',
                            'Prolapso retal',
                            'Prolapso uretral',
                            'Prolapso uterino',
                            'Prolapso vaginal',
                            'Redução de prolapso do globo ocular',
                            'Rescisão palpebral',
                            'Ressecção e anastomose intestinal',
                            'Traqueostomia cervical',
                            'Uretrostomia'
                        ],
                        "NaoIncluso": ['SLIM ESSENCIAL']
                    },
                    {
                        "Nome": "Redução de Carência",
                        "Procedimentos": [
                            'Torção Gástrica (Dilatação e Torção do Estômago)',
                            'Reações alérgicas com comprometimento respiratório',
                            'Perfuração do trato gastrointestinal / Peritonite aguda',
                            'Hematêmese (vômito com sangue)',
                            'Hemorragias graves e generalizadas',
                            'Eclâmpsia (hipocalcemia puerperal)',
                            'Dificuldade respiratória (dispneia)',
                            'Presença de corpos estranhos no sistema gastrointestinal',
                            'Convulsões e crises neurológicas',
                            'Choques de diferentes naturezas:',
                            'Anafilático (alergia grave)',
                            'Neurogênico (traumas na medula ou sistema nervoso)',
                            'Cardiogênico (falência cardíaca)',
                        ],
                        "NaoIncluso": ['SLIM ESSENCIAL']
                    },
                    {
                        "Nome": "Consulta Especializada",
                        "Procedimentos": [],
                        "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                    },
                    {
                        "Nome": "Sorologia",
                        "Procedimentos": [],
                        "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                    },
                    {
                        "Nome": "Especialidades",
                        "Procedimentos": [],
                        "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                    }
                ]
        },
        "5": {
            "ProcedimentosSite":
                [
                    {
                        "Nome": "Consulta Emergencial",
                        "Procedimentos": [],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Vacinas",
                        "Procedimentos": [
                            'Raiva',
                            'Laptospirose',
                            'Déctupla (v-10)',
                            'Quádrupla felina (V-4)',
                            'Giárgia',
                            'Gripe'
                        ],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Exames Laboratoriais",
                        "Procedimentos": [
                            "AST (TGO);",
                            "Contagem de plaquetas;",
                            "Creatinina;",
                            "Eritrograma;",
                            "Fosfatase alcalina;",
                            "Gama GT;",
                            "Hemograma completo (contagem de plaquetas + pesquisa hematozoários);",
                            "Leucograma;",
                            "Uréia."
                        ],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Consulta",
                        "Procedimentos": [],
                        "NaoIncluso": ['SLIM ESSENCIAL']
                    },
                    {
                        "Nome": "Telemedicina",
                        "Procedimentos": [],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Consulta 24h",
                        "Procedimentos": [],
                        "NaoIncluso": ['SLIM ESSENCIAL']
                    },
                    {
                        "Nome": "Diagnóstico por imagem",
                        "Procedimentos": [
                            'Eletrocardiograma',
                            'Raio-X simples (área de estudo)',
                            'Ultrassonografia abdominal'
                        ],
                        "NaoIncluso": ['SLIM ESSENCIAL']
                    },
                    {
                        "Nome": "Procedimentos Cirúrgicos",
                        "Procedimentos": [
                            'Ablação do conduto auditivo (unilateral)',
                            'Ablação escrotal',
                            'Aeração do conduto auditivo (unilateral)',
                            'Amputação de dedo',
                            'Amputação de dedo suplementar',
                            'Internação período diurno (sem medicação)',
                            'Amputação de membro torácico',
                            'Amputação de reto',
                            'Blefarorrafia (unilateral)',
                            'Caudectomia patológica',
                            'Ceratotomia em grade (unilateral)',
                            'Cesariana',
                            'Cílio ectópico',
                            'Cistotomia',
                            'Conchectomia patológica (unilateral)',
                            'Corpo estranho esofágico cervical',
                            'Corpo estranho intestinal',
                            'Dilatação vólvulo-gástrica (torção gástrica)',
                            'Distiquíase',
                            'Ectrópio palpebral (unilateral)',
                            'Entrópio palpebral (unilateral)',
                            'Enucleação do globo ocular (unilateral)',
                            'Episiotomia',
                            'Esofagotomia cervical',
                            'Esplenectomia',
                            'Exérese neoplasia palpebral',
                            'Extração de canino definitivo',
                            'Extração de incisivo',
                            'Extração de molar',
                            'Extração de papilomas',
                            'Fístula oronasal adquirida',
                            'Fístula oronasal congênita (fenda palatina)',
                            'Flape terceira pálpebra (unilateral)',
                            'Gastrectomia parcial',
                            'Glossectomia',
                            'Hepatectomia',
                            'Hérnia inguinal',
                            'Hérnia perineal',
                            'Hérnia umbilical',
                            'Higroma de cotovelo',
                            'Laparotomia exploratória',
                            'Mandibulectomia total',
                            'Mastectomia (unilateral)',
                            'Megacólon',
                            'Nefrectomia parcial',
                            'Nefrotomia',
                            'Otohematoma (unilateral)',
                            'Penectomia',
                            'Piometra',
                            'Prolapso retal',
                            'Prolapso uretral',
                            'Prolapso uterino',
                            'Prolapso vaginal',
                            'Redução de prolapso do globo ocular',
                            'Rescisão palpebral',
                            'Ressecção e anastomose intestinal',
                            'Traqueostomia cervical',
                            'Uretrostomia'
                        ],
                        "NaoIncluso": ['SLIM ESSENCIAL']
                    },
                    {
                        "Nome": "Redução de Carência",
                        "Procedimentos": [
                            'Torção Gástrica (Dilatação e Torção do Estômago)',
                            'Reações alérgicas com comprometimento respiratório',
                            'Perfuração do trato gastrointestinal / Peritonite aguda',
                            'Hematêmese (vômito com sangue)',
                            'Hemorragias graves e generalizadas',
                            'Eclâmpsia (hipocalcemia puerperal)',
                            'Dificuldade respiratória (dispneia)',
                            'Presença de corpos estranhos no sistema gastrointestinal',
                            'Convulsões e crises neurológicas',
                            'Choques de diferentes naturezas:',
                            'Anafilático (alergia grave)',
                            'Neurogênico (traumas na medula ou sistema nervoso)',
                            'Cardiogênico (falência cardíaca)',
                        ],
                        "NaoIncluso": ['SLIM ESSENCIAL']
                    },
                    {
                        "Nome": "Consulta Especializada",
                        "Procedimentos": [],
                        "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                    },
                    {
                        "Nome": "Sorologia",
                        "Procedimentos": [],
                        "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                    },
                    {
                        "Nome": "Especialidades",
                        "Procedimentos": [
                            'Acupuntura (sessão)',
                            'Fisioterapia (sessão)',
                            'Ozonioterapia (sessão)',
                        ],
                        "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                    }
                ]
        },
        "18": {
            "ProcedimentosSite":
                [
                    {
                        "Nome": "Consulta Emergencial",
                        "Procedimentos": [],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Vacina V5",
                        "Procedimentos": [],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Exames FIV/Felv e SDMA",
                        "Procedimentos": [],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Consulta Domiciliar",
                        "Procedimentos": [],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Telemedicina Especializada",
                        "Procedimentos": [],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Consulta 24h",
                        "Procedimentos": [],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Diagnóstico por imagem",
                        "Procedimentos": [
                            'Eletrocardiograma',
                            'Raio-X simples (área de estudo)',
                            'Ultrassonografia abdominal'
                        ],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Procedimentos Cirúrgicos",
                        "Procedimentos": [
                            'Ablação do conduto auditivo (unilateral)',
                            'Ablação escrotal',
                            'Aeração do conduto auditivo (unilateral)',
                            'Amputação de dedo',
                            'Amputação de dedo suplementar',
                            'Internação período diurno (sem medicação)',
                            'Amputação de membro torácico',
                            'Amputação de reto',
                            'Blefarorrafia (unilateral)',
                            'Caudectomia patológica',
                            'Ceratotomia em grade (unilateral)',
                            'Cesariana',
                            'Cílio ectópico',
                            'Cistotomia',
                            'Conchectomia patológica (unilateral)',
                            'Corpo estranho esofágico cervical',
                            'Corpo estranho intestinal',
                            'Dilatação vólvulo-gástrica (torção gástrica)',
                            'Distiquíase',
                            'Ectrópio palpebral (unilateral)',
                            'Entrópio palpebral (unilateral)',
                            'Enucleação do globo ocular (unilateral)',
                            'Episiotomia',
                            'Esofagotomia cervical',
                            'Esplenectomia',
                            'Exérese neoplasia palpebral',
                            'Extração de canino definitivo',
                            'Extração de incisivo',
                            'Extração de molar',
                            'Extração de papilomas',
                            'Fístula oronasal adquirida',
                            'Fístula oronasal congênita (fenda palatina)',
                            'Flape terceira pálpebra (unilateral)',
                            'Gastrectomia parcial',
                            'Glossectomia',
                            'Hepatectomia',
                            'Hérnia inguinal',
                            'Hérnia perineal',
                            'Hérnia umbilical',
                            'Higroma de cotovelo',
                            'Laparotomia exploratória',
                            'Mandibulectomia total',
                            'Mastectomia (unilateral)',
                            'Megacólon',
                            'Nefrectomia parcial',
                            'Nefrotomia',
                            'Otohematoma (unilateral)',
                            'Penectomia',
                            'Piometra',
                            'Prolapso retal',
                            'Prolapso uretral',
                            'Prolapso uterino',
                            'Prolapso vaginal',
                            'Redução de prolapso do globo ocular',
                            'Rescisão palpebral',
                            'Ressecção e anastomose intestinal',
                            'Traqueostomia cervical',
                            'Uretrostomia'
                        ],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Redução de Carência",
                        "Procedimentos": [
                            'Torção Gástrica (Dilatação e Torção do Estômago)',
                            'Reações alérgicas com comprometimento respiratório',
                            'Perfuração do trato gastrointestinal / Peritonite aguda',
                            'Hematêmese (vômito com sangue)',
                            'Hemorragias graves e generalizadas',
                            'Eclâmpsia (hipocalcemia puerperal)',
                            'Dificuldade respiratória (dispneia)',
                            'Presença de corpos estranhos no sistema gastrointestinal',
                            'Convulsões e crises neurológicas',
                            'Choques de diferentes naturezas:',
                            'Anafilático (alergia grave)',
                            'Neurogênico (traumas na medula ou sistema nervoso)',
                            'Cardiogênico (falência cardíaca)',
                        ],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Consulta Especializada",
                        "Procedimentos": [],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Sorologia",
                        "Procedimentos": [],
                        "NaoIncluso": []
                    },
                    {
                        "Nome": "Especialidades",
                        "Procedimentos": [
                            'Acupuntura (sessão)',
                            'Fisioterapia (sessão)',
                            'Ozonioterapia (sessão)',
                        ],
                        "NaoIncluso": []
                    }
                ]
        }
    };

    return (
        <div className={`rounded-[20px] relative text-center w-full sm:w-[320px] md:w-[320px] lg:w-[320px] flex-shrink-0 flex flex-col`}>

            {/* {!!dados.MaisVendido && parseInt(dados.MaisVendido) == 1 && (
                <div className="absolute -top-[30px] -right-[30px] h-[90px]">
                    <Image src={theBestOffer} alt="" width={111} />
                </div>
            )} */}

            <div className="border rounded-[20px] bg-[#FFFDFA] border-plamev-yellow-100 flex flex-col flex-1 overflow-hidden">
                {!!dados.MaisVendido && parseInt(dados.MaisVendido) == 1 ? (
                    <div className="w-full h-12 bg-[#8CC63F] flex items-center justify-center gap-3 shrink-0">
                        <Image src={theBestOffer} alt="Selo de melhor oferta" width={24} height={24} />
                        <span className="text-[#00516D] font-bold text-[18px] uppercase tracking-wide">MAIS VENDIDO</span>
                    </div>
                ) : dados.Especie === "FELINO" ? (
                    <div className="w-full h-12 bg-[#FFCB31] flex items-center justify-center gap-3 shrink-0">
                        <span className="text-[#00516D] font-bold text-[18px] uppercase tracking-wide">Novidade</span>
                    </div>
                ) : (
                    <div className="h-12 shrink-0" />
                )}
                <div className="p-4 flex flex-col flex-1">
                    <div className="flex justify-center">
                        <PlanHeaderImage title={dados.TiposCoberturasNome.toUpperCase()} tipoCobertura={dados.TiposCoberturasId} />
                    </div>

                    <h2 className="text-sm md:text-[16px] font-normal mt-3 min-h-12">{Descrition(dados.TiposCoberturasId)}</h2>

                    <div>
                        <ul className="mt-4 text-left border-solid border-[1.5px] rounded-lg border-plamev-yellow-100">
                            {!!dados && dadosCobertura[dados.TiposCoberturasId].ProcedimentosSite.map((feature: ProcedimentosSiteValoreEstaticos, idx: number) => {
                                const procedimentosVisiveis = feature.Procedimentos.filter(i => i !== "-");

                                return (
                                    <li key={idx} className="border-b border-plamev-yellow-100 p-2">
                                        <div className="flex items-center justify-between">
                                            <div className='flex justify-start gap-[10px]'>
                                                <Image
                                                    src={feature.NaoIncluso.includes(dados.TiposCoberturasNome.toUpperCase()) ? checkDisable : check}
                                                    alt=''
                                                />

                                                <span
                                                    className={`text-sm md:text-[16px] 
                                                ${feature.NaoIncluso.includes(dados.TiposCoberturasNome.toUpperCase()) ? 'text-zinc-400 disabled' : ''}`}
                                                >
                                                    {feature.Nome}
                                                </span>
                                            </div>

                                            {procedimentosVisiveis.length > 0 && !feature.NaoIncluso.includes(dados.TiposCoberturasNome.toUpperCase()) && (
                                                <button
                                                    onClick={() => handleDropdownToggle(`${dados.TiposCoberturasId}-${idx}`)}
                                                    className="focus:outline-none">
                                                    <Image
                                                        src={arrow}
                                                        alt="Toggle"
                                                        className={`transform transition-transform duration-300 ${openDropdownIndex === `${dados.TiposCoberturasId}-${idx}` ? 'rotate-180' : ''}`}
                                                    />
                                                </button>
                                            )}
                                        </div>

                                        {procedimentosVisiveis.length > 0 && !feature.NaoIncluso.includes(dados.TiposCoberturasNome.toUpperCase()) && (
                                            <div
                                                className={`overflow-hidden transition-all duration-300 ${openDropdownIndex === `${dados.TiposCoberturasId}-${idx}` ? 'max-h-100' : 'max-h-0'}`}>
                                                <div
                                                    className="text-sm text-gray-600 border-t border-plamev-yellow-100 border-dashed p-2">
                                                    {procedimentosVisiveis.map((i: any, v: any) => (
                                                        <span key={v}
                                                            className={`before:content-['•'] before:mr-2 block`}>{i}</span>
                                                    ))}
                                                </div>
                                            </div>
                                        )}
                                    </li>
                                );
                            })}
                        </ul>
                    </div>

                    <div className="pt-4">
                        {dados.TiposCoberturasId !== "18" && (
                            <p className="flex justify-center text-[--text-color]">
                                <Image src={iconBlock} alt="sem coparticipação" />
                                <p className='text-[--text-color] text-sm md:text-base'>
                                    Sem coparticipação
                                </p>
                            </p>
                        )}

                        {dados.TiposCoberturasId === "18" && (
                            <p className="flex justify-center text-[--text-color]">
                                <Image src={iconBlock} alt="sem coparticipação" />
                                <p className='text-[--text-color] text-sm md:text-base'>
                                    Taxa zero de adesão
                                </p>
                            </p>
                        )}

                        <div className="flex justify-center">
                            <Image src={checkIcon} alt="Taxa zero de adesão" className="min-w-[18px] w-[18px] h-[18px]" />
                            <p className="text-[--text-color] text-sm md:text-base">
                                Consulta Emergencial liberada com 15 dias
                            </p>
                        </div>

                        <div className="w-full flex justify-center mb-[-20px] mt-4">
                            <div className={`w-[260px] sm:w-[280px] flex items-end justify-start pl-1 translate-x-8 sm:translate-x-10 ${dados.Cartao.Composicao.CampanhasCoberturasExibeSite !== "SIM" ? 'invisible' : ''}`}>
                                <span className="text-[#24A6C9] text-[0.95rem] sm:text-[1.05rem] leading-none font-extrabold tracking-tight line-through decoration-[2px]">
                                    R${formatPrice(dados.Cartao.Composicao.ValorMensalidade).integerPart},{formatPrice(dados.Cartao.Composicao.ValorMensalidade).decimalPart}
                                </span>
                                <span className="text-[#506670] text-[0.95rem] sm:text-[1.05rem] leading-none ml-1">
                                    por
                                </span>
                            </div>
                        </div>

                        <div
                            className="text-[3rem] md:text-[3rem] lg:text-[3rem] font-bold text-plamev-yellow-500 tracking-tight flex justify-center w-full font-grandstander">
                            <div>
                                <span className="text-[24px] group-hover:text-plamev-yellow-500"
                                    style={{ textShadow: '2px 2px 0px#000', WebkitTextStroke: '1px #000' }}>R$</span>
                            </div>

                            <div className="relative flex items-center mr-20">
                                <div className="text-[4.8rem] group-hover:text-plamev-yellow-500"
                                    style={{ textShadow: '2px 2px 0px#000', WebkitTextStroke: '1px #000' }}>
                                    {formatPrice(dados.Cartao.Composicao.ValorComDesconto).integerPart}
                                </div>

                                <div
                                    className="absolute top-[-0.6rem] left-[79%] transform translate-x-1/2 text-[4.1rem] group-hover:text-plamev-yellow-500"
                                    style={{ textShadow: '2px 2px 0px#000', WebkitTextStroke: '1px #000' }}>
                                    <span>,</span>
                                </div>

                                <div className="absolute left-[70%] transform translate-x-[1rem] flex flex-col items-center">
                                    <span className="text-[3rem] leading-none group-hover:text-plamev-yellow-500"
                                        style={{ textShadow: '2px 2px 0px#000', WebkitTextStroke: '1px #000' }}>
                                        {formatPrice(dados.Cartao.Composicao.ValorComDesconto).decimalPart}
                                    </span>

                                    <span className="text-[1.2rem] group-hover:text-plamev-yellow-500 w-[100px] mt-[-0.2rem]"
                                        style={{ textShadow: '2px 2px 0px#000', WebkitTextStroke: '1px #000' }}>
                                        AO MÊS
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div className="flex justify-center items-center">
                            {/* <Link
                        target='_blank'
                        href="https://plamev.pet/WppComercialSite"
                        className="bg-[#EDB94B] text-white w-full justify-center py-3 rounded-md text-[14px] md:text-base font-medium flex items-center gap-[10px] space-x-2 mb-4 hover:bg-[#D8A844]"
                    >
                        <span>Falar com especialistas</span>  <FaWhatsapp className='text-[25px]' />
                    </Link> */}

                            <Link
                                href={`/planos/?plano=${dados.TiposCoberturasId}&Especie=${dados.Especie}&site=true`}
                                className="border bg-[#1DA1C2] border-[#1DA1C2]  group-hover:border-[#EDB94B]: rounded-lg py-2 flex justify-center items-center w-[220px] m-auto sm:w-full h-[56px] text-white text-center hover:bg-[#168ABF] group-hover:bg-[--secundary] hover:border-[#EDB94B] group-hover:border-[#EDB94B] gap-2 text-[13px] sm:text-base"
                            >
                                <span>Quero proteger meu pet!</span>
                            </Link>
                        </div>

                        <button
                            onClick={() => openPdf(dados.TiposCoberturasNome.toLowerCase().replace(' ', '-'))}
                            className='text-plamev-blue-500 text-xs'
                        >
                            Ver detalhes do plano
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

const PricingTable: React.FC = () => {
    const { newComparePlans } = useWebContext();
    const [openDropdownIndex, setOpenDropdownIndex] = useState<number | null>(null);

    return (
        <section className="container mx-auto p-4" id='outrosPlanos'>
            <div className="flex flex-col items-stretch sm:flex-row sm:flex-nowrap sm:justify-center gap-4">
                {!!newComparePlans && newComparePlans.Coberturas
                    .filter((cobertura) => (["17", "4", "5", "18"].includes(cobertura.TiposCoberturasId)) && cobertura.OrigemCheckout === "SITE")
                    .map((cobertura, index) => (
                        <PlanCard
                            key={index}
                            dados={cobertura}
                            openDropdownIndex={openDropdownIndex}
                            setOpenDropdownIndex={(index) => setOpenDropdownIndex(index)}
                        />
                    ))}
            </div>
        </section>
    );
};

export default PricingTable;