'use client'

import Image from "next/image";
import graficoBrasilChinaEua from "../../../../../../public/assets/Images/ImagePlanoEmpresarial/grafico-brasil-china-eua.png";
import arrowGreen from "../../../../../../public/assets/Images/ImagePlanoEmpresarial/arrow-green.svg";

import { useWebContext } from "@/app/(site)/providers";

export default function Thirdlargest() {
    const { isMobile } = useWebContext();

    return (
        <section className="w-full flex justify-center bg-white py-12 px-4">
            {!isMobile && (
                <div className="flex flex-col md:flex-row items-center max-w-[1216px] w-full">
                    <div className="flex justify-center w-full md:w-1/2">
                        <div className="w-[490.21px] h-80 relative">
                            <Image
                                src={graficoBrasilChinaEua}
                                alt="Grafico Br"
                                fill
                                className="object-contain md:object-cover"
                                priority
                            />
                        </div>
                    </div>

                    <div className="w-full md:w-1/2 text-end md:text-left">
                        <div className="flex justify-content-end items-center flex-col">
                            <h2 className="text-[45px] md:text-[45px] font-semibold text-[#0C4451] leading-[61px]">
                                Brasil segue como <br />
                                <span className="text-[#1DA1C2] font-semibold">3º maior</span> em<br />
                                faturamento pet
                            </h2>

                            <p className="mt-4 text-gray-600 text-base leading-[182%] mr-[52px] max-w-md mx-auto md:mx-0 w-[360px]">
                                O setor pet no Brasil movimenta bilhões anualmente e continua crescendo acima da média mundial, reforçando a paixão dos brasileiros pelos seus animais de estimação.
                            </p>
                        </div>
                    </div>
                </div>
            )}

            {isMobile && (
                <div className="flex flex-col md:flex-row items-center max-w-[1216px] w-full">
                    <div className="w-full md:w-1/2 text-start md:text-left">
                        <h2 className="text-[35px] md:text-[45px] font-semibold text-[#0C4451] leading-snug">
                            Brasil segue como <br />
                            <span className="text-[#1DA1C2] font-semibold">3º maior</span> em<br />
                            faturamento pet
                        </h2>

                        <p className="mt-4 text-gray-600 text-base leading-relaxed max-w-md mx-auto md:mx-0 w-[350px]">
                            O setor pet no Brasil movimenta bilhões anualmente e continua crescendo acima da média mundial, reforçando a paixão dos brasileiros pelos seus animais de estimação.
                        </p>
                    </div>

                    <div className="flex justify-center w-full md:w-1/2">
                        <div className="w-[490.21px] h-80 relative">
                            <Image
                                src={graficoBrasilChinaEua}
                                alt="Grafico Br"
                                fill
                                className="object-contain md:object-cover"
                                priority
                            />
                        </div>
                    </div>

                    <button
                        type="button"
                        onClick={() => {
                            document.getElementById('formulario')?.scrollIntoView({ behavior: 'smooth' });
                        }}
                        className="bg-plamev-blue-900 text-white rounded-md h-[43px] w-[195px] text-[10px] flex items-center justify-center gap-2"
                    >
                        Quero oferecer esse benefício <Image src={arrowGreen} alt="Quero oferecer esse benefício" width={15} />
                    </button>
                </div>
            )}
        </section>
    );
}