'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 Image from "next/image";
import CustomButton from "@/components/Button";
import { useSearchParams } from "next/navigation";

export default function AnyQuestionsAccredited() {
    const [openIndex, setOpenIndex] = useState<number | null>(null);
    const searchParams = useSearchParams();
    const lp = searchParams.get("lp");

    const faqs = [
        { question: "Como a minha clínica e serviços são divulgados?", answer: "Atráves 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="flex flex-col md:flex-row bg-white justify-around md:px-0 mx-auto p-8 gap-4 relative">
            <div className="text-center md:text-left md:max-w-sm  mb-[38px] ml-4">
                <h1 className="text-5xl font-bold text-[--primary] mb-6 relative z-10">
                    FICOU ALGUMA <span className="text-[#EDB94B]">DÚVIDA?</span>
                </h1>

                <Image src={Doctor} alt="Icon" className="lg:w-[16rem] lg:h-[18rem] xl:w-[18rem] xl:h-[20rem] absolute top-0 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>

                {!lp && (<>
                    <div className="m-auto mb-5 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"
                        />
                    </div>
                </>)}
            </div>

            <div className="bg-white w-full max-w-2xl md:max-w-xs lg:max-w-2xl border-2 border-[--secundary] rounded-3xl relative">
                {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>
                        {openIndex === index && (
                            <>
                                <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>
    );
}