'use client'

import Image from "next/image";
import brazilDog from "../../../../../../../../public/assets/Images/ImageGetAccredited/brazilDog.svg";
import arrowLeft from '../../../../../../../../public/assets/Images/Icons/arrowLeft.svg';
import CustomButton from "@/components/Button";

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

    return (
        <section className="md:container mx-auto p-8 pt-32 flex flex-col md:flex-row items-center justify-center lg:justify-between md:py-24
        bg-gradient-to-b from-transparent to-plamev-yellow-50"> 
            <div className="flex justify-center text-center flex-col md:text-left mt-[-10px] md:mt-0">
                <h1 className="text-[48px] lg:text-5xl md:text-5xl leading-[3rem] font-bold text-center md:text-left max-w-[488px] md:leading-snug">
                    <span className="text-[--primary]">A PLAMEV É </span>
                    <span className="text-[--secundary]">LÍDER EM CRESCIMENTO</span>
                </h1>
                <p className="mt-4 text-[--text-color] max-w-[488px]">
                    Estamos expandindo para cada vez mais estados do Brasil,<strong> rumo à cobertura 100% nacional</strong>.
                </p>
                <p className="mt-4 text-[--text-color] max-w-[488px]">
                    <strong> São mais de 30  mil tutores que confiam</strong> a vida dos seus peludinhos em nossas mãos.
                </p>
                <p className="mt-4 text-[--text-color] max-w-[488px]">
                    <strong>Com 3 diferentes planos</strong>, temos uma ampla cobertura de serviços, com soluções para todos os bolsos e necessidades.
                </p>
                <p className="mt-4 text-[--text-color] max-w-[488px]">
                    <strong>Faça parte da nossa rede credenciada</strong> e conte com a gente nessa história de amor e carinho.
                </p>

                <div className="md:max-w-[345px]">
                    <CustomButton
                        label="Quero ser credenciado"
                        iconSrc={arrowLeft}
                        bgColor='#EDB94B'
                        onClick={scrollToSection}
                        hoverColor="#D8A844"
                        classCustom='!text-base w-[100%] md:w-[80%] mt-7'
                    />
                </div>
            </div>

            <div className="flex justify-center items-center mt-6 md:mt-0">
                <div className="bottom-0 right-0 md:relative md:bottom-auto md:right-auto">
                    <Image
                        src={brazilDog}
                        alt="Cachorro"
                        className="object-contain"
                    />
                </div>
            </div>
        </section>
    )
}