// import PlanCard from "@/app/(checkout)/planos/_components/Plan";
import Plans from "@/app/(site)/_components/Home/_components/PlansHome/componentes/Plans";
import { useWebContext } from "@/app/(site)/providers";
import { API_URL, TOKEN } from "@/utils/constants/selectConstants";
import { ICobertura } from "@/utils/Interfaces/interfaces";
import { useState } from "react";

import Image from "next/image";

import theBestOffer from "../../../../../../public/assets/Images/ImageHome/selo-plano-indicado.png";
import arrow from '../../../../../../public/assets/Images/Icons/arrowBlueButton.svg';
import check from '../../../../../../public/assets/Images/Icons/icon-check.png';
import checkDisable from '../../../../../../public/assets/Images/Icons/icon-check-disabled.png';
import PlanHeaderImage from "@/app/(checkout)/planos/_components/PlanHeaderImage";

import yellowHeart from '../../../../../../public/assets/Images/ImageHome/yellowHeart.svg';
import yellowPaw from '../../../../../../public/assets/Images/ImageHome/yellowPaw.svg';

import useEmblaCarousel from 'embla-carousel-react'

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

const PlanCard: React.FC<{ dados: ICobertura; openDropdownIndex: any; setOpenDropdownIndex: (index: any) => void; isMobile: any }> = ({ dados, openDropdownIndex, setOpenDropdownIndex, isMobile }) => {
    const { setIsModalStateOpenLPCaixa } = useWebContext();
    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"
    };

    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',
                            '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": []
                    },
                    {
                        "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": "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": "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']
                    }
                ]
        }
    };

    return (
        <div className={`rounded-[20px] relative text-center ${dados.TiposCoberturasNome.toUpperCase() == 'ADVANCE' ? 'mb-3' : 'mb-10'} md:mb-10 lg:w-[384px] md:w-[384px] `}>

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

            <div className="p-4 border rounded-[20px] bg-[#FFFDFA] border-plamev-yellow-100">
                <div className="flex justify-center">
                    <PlanHeaderImage title={dados.TiposCoberturasNome.toUpperCase()} />
                </div>

                <h2 className="text-sm md:text-[16px] mx-auto 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="flex justify-center items-center">
                    <button type="button" onClick={() => setIsModalStateOpenLPCaixa(true)} className="border bg-plamev-yellow-500 mt-6 font-semibold tracking-[1px] 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-plamev-yellow-400 group-hover:bg-[--secundary] hover:border-[#EDB94B] group-hover:border-[#EDB94B] gap-2 text-[13px] sm:text-base">
                        <span>Quero proteger meu pet!</span>
                    </button>
                </div>

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

export default function QuandoAGenteAma() {
    const [emblaRef] = useEmblaCarousel();
    const { newComparePlans, isMobile } = useWebContext();

    const itemDesktop = Math.min(newComparePlans?.Coberturas?.length ?? 0, 3);
    const itemTablet = Math.min(newComparePlans?.Coberturas.length ?? 0, 2);
    const [openDropdownIndex, setOpenDropdownIndex] = useState<number | null>(null);

    const minsSizeDesktop = 1024;

    return (
        <section className="relative w-full">
            <div className="relative w-full h-[1000px] bg-[url('/assets/Images/ImageHome/bgcardValuesHome.png')] min-[540px]:bg-[url('/assets/Images/ImageHome/backgroundSection.svg')] bg-repeat-x bg-center min-[540px]:bg-no-repeat flex flex-col items-center justify-center  overflow-hidden">
                <div className="absolute inset-0 bg-[url('/assets/Images/ImageHome/pawBackgroundMobile.png')] md:bg-[url('/assets/Images/ImageHome/pawBackground.svg')] bg-no-repeat bg-center opacity-30 lg:-mt-[580px] mr-[850px]"></div>
                <div className="relative z-10 text-center px-4 -mt-[580px] lg:-mt-[580px] md:-mt-[580px]">
                    <h1 className="text-[40px] leading-tight md:hidden font-black text-[#FDF8ED]">
                      <span className="block">  PLANOS DE SAÚDE PET PLAMEV
                        
                            {" "}
                            <Image
                                src={yellowHeart}
                                alt="Heart"
                                className="inline align-middle rotate-[10deg] scale-x-[-1] scale-[0.9] translate-y-[-5px]"
                            />{" "}
                        </span>
                    </h1>
                    <h1 className="text-[40px] leading-tight md:hidden font-black text-[#FDF8ED]">
                        COM COBERTURA{" "}
                        <Image
                            src={yellowPaw}
                            alt="Paw"
                            className="inline align-middle scale-[0.9]"
                        />
                        COMPLETA!
                    </h1>

                    {/* DESKTOP */}
                    <h1 className="hidden md:block text-[40px] md:text-4xl lg:text-[48px] font-black text-[#FDF8ED]">
                        PLANOS DE SAÚDE PET PLAMEV{" "}
                        <Image src={yellowHeart} alt="Heart" className="inline align-middle" />
                    </h1>
                    <h1 className="hidden md:block text-3xl md:text-4xl lg:text-[48px] font-black text-[#FDF8ED]">
                        COM COBERTURA{" "}
                        <Image src={yellowPaw} alt="Paw" className="inline align-middle" /> COMPLETA!
                    </h1>

                    <h2 className="mt-4 text-base md:text-lg text-white max-w-2xl mx-auto">
                        Para cães e gatos de todas as raças e idades.
                    </h2>
                </div>
            </div>

            {!isMobile &&
                <div className="relative -mt-[120px] md:-mt-[160px] lg:-mt-[630px] px-4 z-20">
                    <div className="flex flex-col md:flex-row justify-center items-stretch gap-6 md:gap-20 max-w-[1200px] mx-auto">
                        {!!newComparePlans &&
                            newComparePlans.Coberturas
                                .filter(
                                    (cobertura) =>
                                        cobertura.OrigemCheckout === "CAIXA" &&
                                        (["17", "4"].includes(cobertura.TiposCoberturasId) ||
                                            cobertura.TiposCoberturasId === "5")
                                )
                                .map((cobertura, index) => (
                                    <div key={index} className="flex-1 min-w-[280px] max-w-[360px]">
                                        <PlanCard
                                            dados={cobertura}
                                            openDropdownIndex={openDropdownIndex}
                                            setOpenDropdownIndex={(index) => setOpenDropdownIndex(index)}
                                            isMobile={isMobile}
                                        />
                                    </div>
                                ))}
                    </div>
                </div>
            }

            {isMobile && (
                <div className="relative -mt-[600px] pl-4 z-20 overflow-visible">
                    <div className="w-full flex items-center justify-center overflow-visible">
                        {!!newComparePlans && (
                            <div className="w-full max-w-screen-xl overflow-visible relative">
                                <div className="embla relative" ref={emblaRef}>
                                    <div className="embla__container relative">
                                        {newComparePlans.Coberturas
                                            .filter((cobertura) => cobertura.OrigemCheckout === "CAIXA" && (["17", "4"].includes(cobertura.TiposCoberturasId) || cobertura.TiposCoberturasId === "5"))
                                            .map((cobertura, index) => (
                                                <div
                                                    key={index}
                                                    className="flex-none w-[85vw] max-w-[360px] px-3 pt-[50px] relative overflow-visible"
                                                >
                                                    {parseInt(cobertura.MaisVendido) === 1 && (
                                                        <div className="absolute -top-0 right-2 z-50 overflow-visible">
                                                            <Image src={theBestOffer} alt="" width={90} />
                                                        </div>
                                                    )}

                                                    <PlanCard
                                                        dados={cobertura}
                                                        openDropdownIndex={openDropdownIndex}
                                                        setOpenDropdownIndex={(index) => setOpenDropdownIndex(index)}
                                                        isMobile={isMobile}
                                                    />
                                                </div>
                                            ))}
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            )}
        </section>
    );
}