'use client'

import Image from "next/image";
import dogpincher from "../../../../../../public/assets/Images/ImageFosteringLongLife/dogPincher.svg"
import { useEffect, useState } from "react";
import useDeviceType from "@/utils/getDeviceType";

export default function FosteringLongLifeSection() {
    const screen = useDeviceType();
    const [bgClass, setBgClass] = useState<string>('');

    useEffect(() => {
        const className = screen === 'mobile' ? "bg-[url('/assets/Images/ImageFosteringLongLife/bgMobilePincher.png')]" : "bg-[url('/assets/Images/ImageFosteringLongLife/bgImagePincher.png')]";

        setBgClass(className);
    }, [screen]);

    return (
        <section className={`${bgClass} bg-cover bg-center bg-no-repeat w-full h-full min-h-[700px] flex flex-col lg:flex-row justify-center p-4 md:p-0`}>
            <div className="text-left flex flex-col justify-center lg:w-1/3 items-center lg:ml-[3rem] mb-10 mt-16 lg:mt-0">
                <h1 className="text-[40px] leading-10 lg:text-5xl md:text-4xl font-bold text-[--primary] text-center lg:text-left">
                    HÁ 12 ANOS <br />PROMOVENDO 
                    <span className="text-[40px] lg:text-5xl md:text-4xl font-bold text-[--secundary] mb-4 text-start"> UMA VIDA MAIS LONGA E SAUDÁVEL PARA PETS</span>
                </h1>
            </div>

            <div className="flex justify-center items-center lg:w-1/5">
                <Image src={dogpincher} width={screen === 'mobile' ? 300 : 500} height={screen === 'mobile' ? 450 : 500} alt="Pet Image" quality={75} />
            </div>

            <div className="flex justify-center items-center lg:w-1/3 mb-16 lg:mb-0 mt-6 md:mt-0">
                <ul>
                    <li className="flex flex-row gap-4">
                        <span className="text-[--secundary] font-bold text-5xl">+42 mil</span>
                        <span className="flex justify-center items-center flex-col text-[--text-color] text-md"> Pets ativos em toda a nossa base</span>
                    </li>
                    <hr className="w-full h-[1,376px] bg-[#F9E9C7] border-[#F9E9C7] mt-5 mb-5" />
                    <li className="flex flex-row gap-4">
                        <span className="text-[--secundary] font-bold text-5xl">+1.300</span>
                        <span className="flex justify-center items-center flex-col text-[--text-color] text-md">Clínicas, hospitais, veterinários<br/> e laboratórios cadastrados</span>
                    </li>
                    <hr className="w-full h-[1,376px] bg-[#F9E9C7] border-[#F9E9C7] mt-5 mb-5" />
                    <li className="flex flex-row gap-4">
                        <span className="text-[--secundary] font-bold text-5xl">+2.050</span>
                        <span className="flex justify-center items-center flex-col text-[--text-color] text-md">Vendas mensalmente<br/> através do digital</span>
                    </li>
                    <hr className="w-full h-[1,376px] bg-[#F9E9C7] border-[#F9E9C7] mt-5 mb-5" />
                    <li className="flex flex-row gap-4">
                        <span className="text-[--secundary] font-bold text-5xl">+10.000</span>
                        <span className="flex justify-center items-center flex-col text-[--text-color] text-md">Atendimentos realizados<br/> todos os meses</span>
                    </li>
                </ul>
            </div>
        </section>
    )
}