import Image from "next/image";
import BestPricesImage from '../../../public/best-prices.png'
import hotelBanner from '../../../public/hotel-banner.png'
import localFont from "next/font/local";


const figtree = localFont({
    src: [
        {
            path: '../../../public/Fonts/figtree/figtree.ttf',
        },
    ],
})

function BestPrices() {
    return (
        <div>
            <div className="flex flex-row justify-center gap-10 overflow-visible mb-35">
                <div className="flex flex-row items-center justify-around">
                <Image src={BestPricesImage} alt="Best Prices" width={300} height={200} className="h-85 object-cover rounded-l-xl hover:scale-105 transition-all duration-300 cursor-pointer" />
                <Image src={hotelBanner} alt="Hotel Banner" width={300} height={500} className="h-85 object-cover rounded-r-xl shadow-[8px_4px_0px_rgba(0,0,0,1)] hover:scale-105 transition-all duration-300 cursor-pointer" />
                </div>
                <div className="flex flex-col items-center justify-start w-100 h-85 border border-black border-2 rounded-xl p-4 gap-4 shadow-[8px_4px_0px_rgba(0,0,0,1)] hover:scale-105 transition-all duration-300 cursor-pointer">
                   <h2 className={`${figtree.className} text-4xl font-bold`}>Consistent Service and Quality</h2>
                   <p className={`${figtree.className} text-lg font-light`}> 1. Our listings are consistently rated highly for service and quality, ensuring you have a comfortable and enjoyable stay.</p>
                   <p className={`${figtree.className} text-lg font-light`}> 2. We make sure to offer the best prices for our listings, ensuring you get the best value for your money.</p>
                </div>
            </div>
        </div>
    )
}

export default BestPrices;