import { ArrowRightCircle, PhoneCall } from "lucide-react";
import ButtonUi from "../../ButtonUI";
import ImageIconPoint from "../../ImageIconPoint";
import SectionTitle from "../../SectionTitle";


export default function AboutUs() {
    return <section className=''>
        <div className="max-w-300 2xl:max-w-340  pt-20 pb-10 mx-auto  px-4 flex flex-col sm:grid grid-cols-1 grid-rows-2 sm:grid-rows-1 sm:grid-cols-2 gap-6 sm:gap-10  2xl:gap-14 items-center justify-center">

            <div className='cols-span-1 row-span-1 relative aspect-4/3 '>
                <div className='absolute top-6 left-6 w-4/6 aspect-square  ring-4 ring-main z-0' />
                <img src='/images/hotel/about-us-2.jpg' className='w-4/6  z-1 aspect-square object-cover absolute' />
                <img src='/images/hotel/about-us-1.jpg' className='w-4/6 sm:w-3/6 aspect-4/3 sm:h-75 z-2 object-cover  border-l-8 border-t-8 border-white absolute bottom-0 right-0' />
                <div className='absolute bottom-6 left-1/6 sm:left-1/3  bg-black/95 z-3 p-6 sm:p-8 flex flex-col gap-2 text-center items-center justify-center rounded-lg ' ><span className="text-3xl sm:text-5xl text-white font-bold">21 +</span> <span className="text-sm sm:text-lg text-white">Years Of <br /> Experience</span></div>
            </div>
            <div className='cols-span-1 row-span-1 space-y-3 2xl:space-y-6  h-full'>
                <SectionTitle subtitle='About Us' title='More Than a Stay – A Legacy of Luxury' />
                <p className='font-p'>At our hotel, luxury is more than just a word — it's a tradition. From exquisite design to personalized service, every detail is thoughtfully curated to create unforgettable experiences. Whether you're here for relaxation or celebration, we offer more than a stay — we offer a legacy of comfort, elegance, and world-class hospitality.</p>
                <div className='flex gap-6 justify-start items-center'>

                    <ImageIconPoint imageUrl="/images/icons/icon-1.png" label='The Greatest Lighting' />
                    <ImageIconPoint imageUrl="/images/icons/icon-2.png" label='Pick up & Drop ' />
                </div>
                <div className='flex flex-col gap-4 justify-start items-start text-sm'>
                    <div className='flex gap-2 justify-start items-center'>
                        <ArrowRightCircle className='text-main w-5 h-5' />
                        <p>Morning Meals for Everyone</p>
                    </div>
                    <div className='flex gap-2 justify-start items-center'>
                        <ArrowRightCircle className='text-main w-5 h-5' />
                        <p>The Best Parking Space</p>
                    </div>

                </div>
                <div className='flex gap-8 justify-start items-center mt-6 2xl:mt-12'>
                    <ButtonUi >About Us</ButtonUi>
                    <div className='flex gap-4 items-center justify-center w-fit text-sm sm:text-base'>
                        <div className='bg-main-dark p-3 rounded-full'><PhoneCall className='text-white w-5 h-5 sm:w-6 sm:h-6' /></div>
                        <div>
                            <p>Contact Us Now</p>
                            <p>07X XXXX XXX</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
}
