'use client'

import Image from "next/image";
import dogHealthPlan from "../../../../../../public/assets/Images/ImageGetAccredited/dogHealthPlanPNG.png";
import heartPlus from "../../../../../../public/assets/Images/ImageGetAccredited/heartPlus.svg";
import paw from "../../../../../../public/assets/Images/Icons/paw.svg";
import arrowLeft from '../../../../../../public/assets/Images/Icons/arrowLeft.svg';
import CustomButton from "@/components/Button";
import { useWebContext } from "@/app/(site)/providers";

export default function HealthPlan() {
    const { isMobile } = useWebContext();
    const scrollToSection = () => {
        const element = document.getElementById('credenciamento');
        if (element) {
            element.scrollIntoView({ behavior: 'smooth' });
        }
    };

    return (
        <section className="container mx-auto py-8 md:p-8">
            <div className="flex flex-col lg:flex-row items-center lg:justify-between space-y-10 lg:space-y-0">
                <div className="flex flex-col justify-center lg:items-start lg:w-2/3 xl:1/2 text-center lg:text-left items-center px-3">
                    {/* Primeira linha: O PLANO DE SAÚDE PET + coração */}
                    <div className="w-full flex flex-row items-center justify-center lg:justify-start gap-1 md:gap-2">
                        <h1>   <span className="font-bold text-[--primary] leading-[2.2rem] md:leading-[3rem] text-[40px] sm:text-[40px] md:text-[36px] lg:text-[48px] xl:text-[56px]">
                                O PLANO DE SAÚDE PET
                            </span>
                            <span className="inline-block ml-1 md:ml-2">
                                <Image src={heartPlus} alt="Pet Image"
                                    width={isMobile ? 22 : 41} height={isMobile ? 20 : 38}
                                    className={`${!isMobile ? 'w-[41px] h-[38px]' : 'w-[22px] h-[20px]'}`} />
                            </span>
                        </h1>
                    </div>
                    {/* Segunda linha: CHEGOU PRA FICAR. + pata */}
                    <div className="w-full flex flex-row items-center justify-center lg:justify-start gap-1 md:gap-2">
                        <h1>
                            <span className="text-[--secundary] font-bold leading-[2.2rem] md:leading-[3rem] text-[40px] md:text-[36px] lg:text-[48px] xl:text-[56px]">
                                CHEGOU PRA FICAR.
                            </span>
                            <span className="inline-block text-[--secundary] ml-1 md:ml-2">
                                <Image src={paw} alt="Pet Image"
                                    width={isMobile ? 24 : 43} height={isMobile ? 22 : 44}
                                    className={`${!isMobile ? 'w-[43px] h-[44px]' : 'w-[24px] h-[22px]'}`} />
                            </span>
                        </h1>
                    </div>
                    <p className="text-base my-4  text-[--text-color]">
                        Faça parte da nossa rede credenciada e <span className="font-bold">aumente a retenção dos seus clientes.</span>
                    </p>
                    <CustomButton
                        label="Quero ser credenciado"
                        iconSrc={arrowLeft}
                        bgColor='--secundary'
                        onClick={scrollToSection}
                        hoverColor="#D8A844"
                        classCustom="!text-base w-full md:w-[260px]"
                    />
                </div>
                <div className="inline-flex">
                    <Image
                        src={dogHealthPlan}
                        alt="Pet Image"
                        className="h-auto"
                    />
                </div>
            </div>
        </section>
    )
}