import { usePage } from '@inertiajs/react';
import Features from '@/components/(public)/home/sections/Features';
import Rooms from '@/components/(public)/home/sections/Rooms';
import Testimonial from '@/components/(public)/home/sections/Testimonial';
import Facilities from '@/components/(public)/home/sections/Facilities';
import AboutUs from '@/components/(public)/home/sections/AboutUs';
import OfferBanner from '@/components/(public)/home/sections/OfferBanner';
import Gallery from '@/components/(public)/home/sections/Gallery';
import PageLayout from '@/layouts/home/page-layout';
import { RoomCategory } from '@/types/home/home-sections';
import { BedDouble, CarFront, HandCoins, Utensils } from 'lucide-react';


type HomePageProp = {
    canRegister?: boolean,
    roomCategories: RoomCategory[],

}


export default function Welcome({ roomCategories }: HomePageProp) {



    return <PageLayout home title='Welcome' className='space-y-6 sm:space-y-10 mb-20 sm:mb-0'>

        {/* <Features /> */}

        {/* Features Section */}
        <div className=' md:hidden  relative'>
            <div className='absolute -top-12 flex justify-between items-center w-full px-6'>

                <div className='  flex justify-center items-center flex-col gap-1.5'>
                    {/* <img src="/images/icons/car.jpg" alt="Pick Up" className='w-14 h-14 p-1  border-2 border-main bg-white rounded-full' /> */}
                    <div className='text-white bg-main w-14 h-14 p-2.5 rounded-full flex items-center justify-center ring-4 ring-main/20 '> <CarFront size={36} /> </div>
                    <p className='text-xs font-semibold'>Pick Up</p>
                </div>
                <div className='  flex justify-center items-center flex-col gap-1.5'>
                    {/* <img src="/images/icons/bed.jpg" alt="Pick Up" className='w-14 h-14 p-1  border-2 border-main bg-white rounded-full' /> */}
                    <div className='text-white bg-main w-14 h-14 p-2.5 rounded-full flex items-center justify-center ring-4 ring-main/20  '> <BedDouble size={34} /> </div>
                    <p className='text-xs font-semibold'>Rooms</p>
                </div>
                <div className='  flex justify-center items-center flex-col gap-1.5'>
                    {/* <img src="/images/icons/wifi.jpg" alt="Pick Up" className='w-14 h-14 p-1 border-2 border-main  bg-white rounded-full' /> */}
                    <div className='text-white bg-main w-14 h-14 p-2.5 rounded-full flex items-center justify-center ring-4 ring-main/20 '> <HandCoins size={36} /> </div>
                    <p className='text-xs font-semibold'>Payment</p>
                </div>
                <div className='  flex justify-center items-center flex-col gap-1.5'>
                    {/* <img src="/images/icons/food.jpg" alt="Pick Up" className='w-14 h-14 p-1 border-2 border-main  bg-white rounded-full' /> */}
                    <div className='text-white bg-main w-14 h-14 p-2.5 rounded-full flex items-center justify-center ring-4 ring-main/20 '> <Utensils size={32} /> </div>
                    <p className='text-xs font-semibold'>Foods</p>
                </div>
            </div>

        </div>

        <AboutUs />

        <Rooms data={roomCategories} />

        <Gallery />

        {/* <OfferBanner /> */}

        <Facilities />

        <Testimonial />

    </PageLayout>
}