'use client'

import Image from "next/image";
import yellowPaw from "../../../../../../public/assets/Images/Icons/yellowPaw.svg"
import yellowHeart from "../../../../../../public/assets/Images/Icons/yellowHeart.svg"
import Careful from "../../../../../../public/assets/Images/Icons/Careful.svg"
import digital from "../../../../../../public/assets/Images/Icons/digital.svg"
import money from "../../../../../../public/assets/Images/Icons/money.svg"
import contractOnline from "../../../../../../public/assets/Images/Icons/contractOnline.svg"
import bgYourPet from "../../../../../../public/assets/Images/ImageOurPlans/bgYourPet.webp"
import { useWebContext } from "@/app/(site)/providers";
import { useEffect, useState } from "react";


export default function YourPetOurPriority() {

    const [border, setBorder] = useState('');
    const { isMobile } = useWebContext();

    useEffect(() => {
        const className = !isMobile ? "border-dashed border-l-2 border-plamev-yellow-100" : "border-dashed border-t-2 border-plamev-yellow-100";
        setBorder(className);
    }, [isMobile]);

    return (
        <section className="container mx-auto mt-6 p-4 md:p-8">
            <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center lg:justify-between">
                <div className={`w-full lg:w-1/2 mb-8 lg:mb-0 flex justify-center lg:justify-end ${isMobile ? 'order-1' : 'order-2'}`}>
                    <div className="flex space-x-4 relative w-full">
                        <Image
                            src={bgYourPet}
                            alt="Dog"
                            className="w-full h-auto"
                            sizes="100vw"
                            quality={75}
                        />
                    </div>
                </div>

                <div className={`lg:w-1/2 mb-8 lg:mb-0 ${isMobile ? 'order-2' : 'order-1'}`}>
                    <h1 className="text-[--primary] text-[40px] lg:text-[56px] font-bold mb-4 leading-[44px] lg:leading-[61px] text-center lg:text-start md:text-start">
                        SEU <span className="inline-block transform scale-125"><Image src={yellowPaw} alt="paw" width={33} /></span> PET, 
                        <span className="text-plamev-yellow-500"> NOSSA <br /> PRIORIDADE.
                            <Image src={yellowHeart} alt="paw" className="inline-block ml-2" />
                        </span>
                    </h1>

                    <p className="text-plamev-dark-400 text-center lg:text-start md:text-start mb-7 lg:mb-0 md:mb-0">
                        Não se preocupe mais com a saúde do seu peludinho. <strong>A gente <span className="lg:block">cuida de tudo.</span></strong>
                    </p>

                    <div className="grid grid-cols-1 md:grid-cols-2 p-0 lg:p-4 md:p-4">
                        <div className="flex items-center justify-center lg:justify-start md:justify-start py-[16px] gap-4">
                            <Image src={Careful} alt="Icon" className="w-[34px] h-[34px]" />
                            <p className="text-plamev-dark-400 font-medium"><strong>+ 40mil</strong> vidas protegidas</p>
                        </div>

                        <div className={`flex items-center justify-center lg:justify-start md:justify-start py-[16px] gap-4 pl-[32px] ${!isMobile ? "border-dashed border-l-2 border-plamev-yellow-100" : "border-dashed border-t-2 border-plamev-yellow-100"}`}>
                            <Image src={digital} alt="Icon" className="w-[34px] h-[34px]" />
                            <p className="text-plamev-dark-400 font-medium"><strong>100%</strong> digital</p>
                        </div>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 p-0 lg:p-4 md:p-4">
                        <div className={`flex items-center justify-center lg:justify-start md:justify-start py-[16px] gap-4 ${isMobile ? "border-dashed border-t-2 border-plamev-yellow-100" : ""}`}>
                            <Image src={money} alt="Icon" className="w-[34px] h-[34px]" />
                            <p className="text-plamev-dark-400 font-medium"><strong>Facilidade</strong> de pagamento</p>
                        </div>

                        <div className={`flex items-center justify-center lg:justify-start md:justify-start py-[16px] gap-4 pl-[32px] ${!isMobile ? "border-dashed border-l-2 border-plamev-yellow-100" : "border-dashed border-t-2 border-plamev-yellow-100"}`}>
                            <Image src={contractOnline} alt="Icon" className="w-[34px] h-[34px]" />
                            <p className="text-plamev-dark-400 font-medium"><strong>Aplicativo</strong> exclusivo</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}