import RatingStars from "@/components/core/RatingStars";
import SectionTitle from "../../SectionTitle";


export default function Testimonial() {
    return <section className=' '>
        <div className="max-w-300 2xl:max-w-340  py-6 sm:py-16 sm:pb-24 mx-auto px-4 flex flex-col sm:grid grid-cols-2 sm:gap-4">

            <div className='cols-span-1  space-y-4'>
                {/* <div className="flex flex-col justify-center items-start text-start gap-3">
                    <span className="text-sm uppercase tracking-widest text-gray-500">TESTIMONIAL</span>
                    <h2 className=" w-fit  text-3xl lg:text-4xl font-serif text-gray-900 ">What Our Guests Sayz</h2>
                    </div> */}

                <SectionTitle subtitle='Testimonial' title='What Our Guests Sayz' />

                <p className="hidden sm:block">We pride ourselves on delivering unforgettable experiences — but don’t just take our word for it. Our guests return time and again for the impeccable service, exquisite surroundings, and the feeling of true indulgence.</p>

                <div className='hidden sm:flex gap-1 tems-center mt-12'>
                    <div className='w-12 h-12 rounded-full bg-gray-300' />
                    <div className='w-12 h-12 rounded-full bg-gray-300' />
                    <div className='w-12 h-12 rounded-full bg-gray-300' />
                </div>
                <h2 className="hidden sm:block w-fit  text-xl font-serif text-gray-600 ">More Than <span className='text-main'>25k</span> client Reviews</h2>
            </div>

            <div className='cols-span-1 flex flex-col justify-start items-center'>
                <div className='bg-white border self-start self-top border-main h-fit sm:h-70 gap-4 w-full max-w-130 mx-auto p-4 sm:p-10 rounded-lg flex flex-col items-start justify-between'>
                    <RatingStars rating={4} />
                    <p className='text-xs sm:text-sm'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, illum quo? Laborum delectus quos similique, cum, quidem sed saepe ad odit non rerum reiciendis unde nobis temporibus laboriosam adipisci illo?</p>
                    <div className='flex justify-between items-center'>
                        <div className='flex justify-Start items-center gap-4'>
                            <div className='w-10 h-10 bg-gray-200 rounded-full' />
                            <div className='text-sm sm:text-base'>
                                <h2>Marvin McKinney</h2>
                                <p className='text-xs sm:text-sm'>Product Maneger</p>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </section>
}
