'use client'

import Image from "next/image";
import ocious from "../../../../../../public/assets/Images/ImageGetAccredited/ocious.svg"
import clients from "../../../../../../public/assets/Images/ImageGetAccredited/Clients.svg"
import listMoney from "../../../../../../public/assets/Images/ImageGetAccredited/listMoney.svg"
import onlineContract from "../../../../../../public/assets/Images/ImageGetAccredited/onlineContract.svg"
import monemao from "../../../../../../public/assets/Images/ImageGetAccredited/monemao.svg"
import arrowLeft from '../../../../../../public/assets/Images/Icons/arrowLeft.svg';
import CustomButton from "@/components/Button";

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

    return (
        <section className="container mx-auto mt-10 mb-14 md:mb-0 p-3 md:p-8">
            <h1 className="text-center text-[40px] lg:text-5xl md:text-5xl leading-9 font-bold text-[--primary]">
                <span className="md:block">ESCOLHA A </span>
                PLAMEV<span className="text-[--secundary] ml-2">E TENHA:</span>
            </h1>

            <div className="mt-8 flex flex-col lg:flex-row items-center lg:items-stretch flex-wrap justify-center">
                <div
                    className="w-full sm:w-1/2 lg:w-1/5 p-9 border-t-2 border-b-0 sm:border-b-1 lg:border-b-2 border-l-2 border-r-2 lg:border-r border border-[#F9E9C7] lg:rounded-l-3xl max-sm:rounded-t-3xl text-center bg-white">
                    <Image src={ocious} alt="" className="mx-auto mb-5 w-[30px] h-auto object-contain"/>
                    <p>Redução de<br/>Ociosidade</p>
                </div>
                <div
                    className="w-full sm:w-1/2 lg:w-1/5 p-9 border-t-2 border-b-0 sm:border-b-1 lg:border-b-2 border-l-2 lg:border-l border-r-2 lg:border-r border border-[#F9E9C7]  rounded-none text-center bg-white">
                    <Image src={monemao} alt="" className="mx-auto mb-5 w-[30px] h-auto object-contain"/>
                    <p>Previsibilidade de faturamento</p>
                </div>
                <div
                    className="w-full sm:w-1/2 lg:w-1/5 p-9  border-t-2 border-b-0 sm:border-b-1 lg:border-b-2 border-l-2 lg:border-l border-r-2 lg:border-r  border border-[#F9E9C7]  rounded-none text-center bg-white">
                    <Image src={clients} alt="" className="mx-auto mb-5 w-[30px] h-auto object-contain"/>
                    <p>Retenção de clientes</p>
                </div>
                <div
                    className="w-full sm:w-1/2 lg:w-1/5 p-9 border-t-2 border-b-0 sm:border-b-1 lg:border-b-2 border-l-2 lg:border-l border-r-2 lg:border-r border border-[#F9E9C7] rounded-none text-center bg-white">
                    <Image src={listMoney} alt="" className="mx-auto mb-5 w-[30px] h-auto object-contain"/>
                    <p>Aumento de ticket<br/>médio</p>
                </div>
                <div
                    className="w-full sm:w-1/2 lg:w-1/5 p-9 border-t-2  border-b-2 border-r-2 border-l-2 lg:border-l border border-[#F9E9C7] lg:rounded-r-3xl  max-sm:rounded-b-3xl text-center bg-white">
                    <Image src={onlineContract} alt="" className="mx-auto mb-5 w-[30px] h-auto object-contain"/>
                    <p>Maior visibilidade</p>
                </div>
            </div>

            <div className="mt-8 flex justify-center text-center flex-col items-center">
                <p className="text-[--text-color] mb-4 lg:w-[588px]">
                    Transforme o atendimento da sua clínica veterinária fazendo parte do <strong>maior plano de saúde
                    pet independente do Brasil</strong>.
                </p>

                <CustomButton
                    label="Quero ser credenciado"
                    iconSrc={arrowLeft}
                    bgColor='#EDB94B'
                    onClick={scrollToSection}
                    hoverColor="#D8A844"
                    classCustom="!text-base font-bold w-full md:w-[270px]"
                />
            </div>
        </section>
    )
}