'use client'

import { useState } from "react";
import arrow from "../../../../../../../../public/assets/Images/Icons/arrowBlueButton.svg";
import whatsAppSecundary from "../../../../../../../../public/assets/Images/Icons/whatsAppSecundary.svg";
import Doctor from "../../../../../../../../public/assets/Images/ImageGetAccredited/doctor.png";
import DoctorMobile from "../../../../../../../../public/assets/Images/ImageGetAccredited/doctorMobile.png";
import Image from "next/image";
import CustomButton from "@/components/Button";

export default function AnyQuestions() {
    const [openIndex, setOpenIndex] = useState<number | null>(null);

    const faqs = [
        { question: "Como a minha clínica e serviços são divulgados?", answer: "Através do nosso site / rede credenciada, redes sociais e do app Plamev Appet. O nosso setor de vendas e relacionamento de clínicas também sempre indica as melhores clínicas para os nossos clientes." },
        { question: "Ser um credenciado Plamev tem burocracia?", answer: "Não. O nosso modelo de negócio foi pensado diretamente na experiência do usuário, tanto do veterinário, como do cliente. Nosso atendimento é 100% digital, trazendo mais comodidade e agilidade para todos envolvidos no processo." },
        { question: "Os planos da Plamev tem coparticipação?", answer: "Não. O cliente irá pagar somente pelos procedimentos não cobertos pelo plano contratado. Exemplo: medicações" },
        { question: "O contrato da Plamev tem fidelidade?", answer: "Não. Acreditamos que a parceria precisa ser saudável para os dois, Plamev e credenciado." },
        { question: "Tenho que atender todos os procedimentos do plano?", answer: "Não. Você pode escolher os procedimentos que vai atender ao cliente Plamev. Quanto mais procedimentos oferecidos, maiores as chances de atrair e reter o cliente." },
    ];



    const toggleDropdown = (index: number) => {
        setOpenIndex(openIndex === index ? null : index);
    };

    return (
        <div className="bg-[url('/assets/Images/ImageGetAccredited/anyQuestionsBgMobile.png')]
        lg:bg-[url('/assets/Images/ImageGetAccredited/anyQuestionsBg.png')] lg:mt-[-420px] bg-cover bg-top bg-no-repeat min-h-screen 
        lg:min-h-[1000px] flex flex-col lg:flex-row  justify-end lg:justify-around md:px-0 
        gap-2 sm:gap-8 mx-auto p-4 md:p-8 py-24 relative items-center">

            <div className="text-center md:text-left md:max-w-sm mb-[38px] mt-0 lg:mt-64 md:mt-64">
                <h1 className="text-[40px] lg:text-5xl md:text-5xl leading-9 font-bold text-[--primary] mb-6 relative z-10">
                    FICOU ALGUMA <span className="text-[#EDB94B]">DÚVIDA?</span>
                </h1>

                <Image src={DoctorMobile} alt="Icon" className="block md:hidden lg:w-[18rem] h-[20rem] absolute top-[5%] left-[10%] md:top-[10%] md:left-[20%] z-0" />

                <Image src={Doctor} alt="Icon" className="hidden md:block
                    2xl:w-[18rem] 2xl:h-[20rem] absolute top-[5%] left-[15%] md:top-[25rem] md:left-0 z-0" />

                <p className="mt-2 text-base text-[--text-color] mb-6 relative z-10">
                    Clique no botão e fale agora com um especialista.
                </p>


                <div className="m-auto md:m-0 max-w-[345px] relative">
                    <CustomButton
                        href="https://s.tintim.app/whatsapp/dccae2b0-586e-40c2-8703-1ce95f7b90e6/e9d02f7b-ee86-48c7-803e-8b87adf3933b"
                        label="Chamar no WhatsApp"
                        iconSrc={whatsAppSecundary}
                        bgColor='#EDB94B'
                        textColor="text-white"
                        hoverColor="#D8A844"
                        classCustom="!text-[15px] md:!text-base"
                    />
                </div>
            </div>

            <div className="bg-white w-full h-full max-w-2xl md:max-w-xs lg:max-w-2xl border-2 border-[--secundary] rounded-3xl relative mt-0 lg:mt-64 md:mt-64">
                {faqs.map((faq, index) => (
                    <div key={index} className={`${index !== faqs.length - 1 ? 'border-b-2 border-[#edb94b70]' : ''}`}>
                        <button
                            className={`w-full flex justify-between items-center p-4 text-left font-bold text-[--text-color] hover:bg-[#FDF8ED]
                    ${index === faqs.length - 1 ? 'rounded-b-3xl' : index === 0 ? 'rounded-t-3xl' : ''}
                `}
                            onClick={() => toggleDropdown(index)}
                        >
                            {faq.question}
                            <Image
                                src={arrow}
                                alt="Toggle"
                                className={`transform transition-transform duration-300 ${openIndex === index ? 'rotate-180' : ''}`}
                            />
                        </button>

                        {/* Conteúdo expansível abaixo do botão */}
                        <div
                            className={`overflow-hidden transition-[max-height] duration-500 ease-in-out ${openIndex === index ? 'max-h-[300px]' : 'max-h-0'}`}
                        >
                            <hr className="w-full h-[2px] border-t-2 border-[#F9E9C7] border-dashed mb-1" />
                            <div className="p-4 text-sm text-[--color-primary]">
                                {faq.answer}
                            </div>
                        </div>
                    </div>
                ))}
            </div>

        </div>
    );
}