import { Head, Link, usePage } from '@inertiajs/react';
import { dashboard, login, register } from '@/routes';
import { ArrowLeft, ArrowRight, ArrowRightCircle, BadgeCheck, Bath, Bed, BedDouble, Bell, Bus, Cake, Calculator, CalendarCheck, CalendarDays, CalendarIcon, CalendarX, Car, CarFront, ChevronDown, ChevronLeft, CircleCheck, ClipboardList, Clock, Coffee, Contact, CreditCard, Facebook, Globe, HandCoins, Heart, Home, Info, Instagram, Key, Leaf, Mail, MapPin, Menu, ParkingMeter, ParkingSquare, PersonStanding, Phone, Plane, ShieldCheck, ShoppingBasket, Snowflake, Sparkle, Sparkles, Star, Sun, Tv, Twitter, User, Users, UsersRound, Utensils, WashingMachine, Waves, Wifi, Youtube } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
    Drawer,
    DrawerClose,
    DrawerContent,
    DrawerDescription,
    DrawerFooter,
    DrawerHeader,
    DrawerTitle,
    DrawerTrigger,
} from "@/components/ui/drawer"
import { Calendar } from "@/components/ui/calendar"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { useState, useRef, useEffect, JSX } from 'react';
import RatingStars from '@/components/core/RatingStars';
import { Progress } from "@/components/ui/progress"
import CounterBar from '@/components/core/CounterBar';
import {
    Field,
    FieldContent,
    FieldDescription,
    FieldLabel,
    FieldLegend,
    FieldTitle,
} from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Separator } from '@/components/ui/separator';
import { addDays } from "date-fns"
import { type DateRange } from "react-day-picker"
import Header from '@/components/app-mobile/Header';
import PageLayout from '@/layouts/home/page-layout';
import { CurrencyPageProps, SearchRoom } from '@/types/home/client-side';
import Price from '@/components/(public)/Price';
import { RoomCategory } from '@/types/home/home-sections';
import Icon, { ImageIcon } from '@/components/core/Icon';
import { RoomImageCarousel } from '@/components/(public)/ImageCarousel';
import { SearchRoomCard, SearchSideCard, SideBoxFindRoom } from '@/components/(public)/home/SearchRoom';
import { ShowMealPackageType } from '@/types/home/meal-package';
import UiImageIcon from '@/components/(public)/UiImageIcon';
import BookingKeyCart from '@/components/(public)/home/BookingKeyCart';

const GuestRow = ({ label, hint, value = 2 }: { label: string, hint: string, value?: number }) => (
    <div className="flex items-center justify-between px-4">
        <div>
            <p className="font-medium">{label}</p>
            <p className="text-xs text-neutral-500">{hint}</p>
        </div>

        <div className="flex items-center gap-3">
            <button className="w-8 h-8 rounded-full border text-lg">−</button>
            <span className="w-5 text-center font-medium">{value}</span>
            <button className="w-8 h-8 rounded-full border text-lg">+</button>
        </div>
    </div>
);

const FacilityBudge = ({ icon, label }: {
    icon: JSX.Element;
    label: string;
}) => {

    return <div className="flex items-center gap-1.5 px-2 py-1 text-xs bg-gray-50 rounded-full border border-gray-200">
        <span className="text-main">{icon}</span>
        <span>{label}</span>
    </div>
}
const ShowMealPackage = ({ packages }: { packages: ShowMealPackageType[] }) => {


    if (packages.length <= 0) return

    return (
        <div className="space-y-3 bg-white p-4 rounded-xl border border-gray-200">

            {/* Header */}
            <div>
                <h4 className="text-sm font-semibold text-neutral-700">
                    Available Meal Packages
                </h4>
                <p className="text-xs text-neutral-500">
                    You can enhance your stay with these meal options
                </p>
            </div>

            {/* List */}
            <div className="flex flex-col gap-3">
                {packages.map((item, index) => (
                    <div key={index} className='space-y-2'>

                        <Separator />
                        <div className="  flex items-center justify-between gap-3  "   >
                            {/* Left side */}
                            <div className="flex items-center gap-3">

                                {/* Icon / Image */}
                                <div className="w-9 h-9 flex items-center justify-center rounded-md bg-gray-100 text-sm">
                                    <UiImageIcon
                                        is_icon={item.is_icon}
                                        value={item.icon_value}
                                        className="text-main w-6 h-6"
                                    />
                                </div>

                                {/* Text */}
                                <div>
                                    <div className="text-sm font-medium text-neutral-800">
                                        {item.title}
                                    </div>

                                    {item.description && (
                                        <div className="text-xs text-neutral-500">
                                            {item.description}
                                        </div>
                                    )}
                                </div>
                            </div>

                            {/* Right side */}
                            <div className="text-right">
                                <div className="text-sm font-semibold text-neutral-900"> {item.is_variant ? <span className='text-green-600'>variants</span> : <Price value={item.price} />} </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div >
        </div>
    );
};


// const RoomCard = () => {

//     return <div className="rounded-2xl md:rounded-md overflow-hidden border  shadow-sm" >

//         {/* <div className='relative '>
//             <img
//                 src="/images/rooms/room3.webp"
//                 alt="Serene Villa"
//                 className="h-44 md:h-80 w-full object-cover "
//             />
//             <span className='absolute top-2 right-2 bg-green-500 text-white rounded-full text-xs py-1 px-2' >50% OFF</span>

//             <CounterBar className='absolute bottom-2 left-0 right-0' length={3} active={0} />
//         </div> */}
//         <div className='relative '>
// <div className='grid grid-cols-3 grid-rows-2 md:h-100 '>
//     <img
//         src="/images/rooms/room3.webp"
//         alt="Serene Villa"
//         className="object-cover h-full col-span-2  row-span-2 "
//     />
//     <img
//         src="/images/rooms/room3.webp"
//         alt="Serene Villa"
//         className=" object-cover h-full col-span-1  row-span-1 "
//     />
//     <img
//         src="/images/rooms/room3.webp"
//         alt="Serene Villa"
//         className=" object-cover h-full col-span-1  row-span-1 "
//     />

// </div>
//             <span className='absolute top-2 right-2 bg-green-500 text-white rounded-full text-xs py-1 px-2' >50% OFF</span>

//             <CounterBar className='absolute bottom-2 left-0 right-0' length={3} active={0} />
//         </div>


//         {/* Content */}
//         <div className="p-4 pt-3 space-y-3">
//             {/* Header: Room Name + Category + Price */}
//             <div className="flex justify-between items-start">
//                 <div className="flex flex-col gap-0">
//                     <h3 className="font-semibold text-lg text-neutral-900">Serene Villa</h3>
//                     <p className="text-sm text-neutral-500">
//                         Deluxe / Pool View
//                     </p>
//                 </div>
//                 <span className="text-sm flex gap-2 items-center justify-end font-medium "><Users size={14} className="text-main" /> 2 Adults · 1 Child</span>
//             </div>

//             {/* <span className="text-xs flex-1 flex justify-start items-center text-neutral-600 border-b-2   pl-2 border-light-main" /> */}

//             {/* Description */}
//             <p className="text-sm text-neutral-600 line-clamp-2">
//                 Private villa surrounded by rice fields with peaceful jungle views and modern comforts.
//             </p>

//             {/* Facilities */}
//             <div className="flex flex-wrap gap-2 mt-2">
//                 {[
//                     { icon: <BedDouble size={16} />, label: '2 Beds' },
//                     { icon: <Leaf size={16} />, label: 'Relax' },
//                     { icon: <Wifi size={16} />, label: 'Wi-Fi' },
//                     { icon: <Bath size={16} />, label: 'Bath' },
//                     { icon: <Tv size={16} />, label: 'TV' },
//                     { icon: <ParkingSquare size={16} />, label: 'Parking' },
//                 ].map((facility, idx) => <FacilityBudge icon={facility.icon} label={facility.label} />)}
//             </div>

//             {/* View Details Button */}
//             <div className='flex w-full justify-between items-end'>

//                 <h2 className='text-xl font-bold text-black'>LKR 12400 <span className='text-sm text-gray-600 font-normal'>/ Night</span></h2>
//                 <Link href="/room" className="w-fit text-sm px-4 block text-center rounded-full ring-4 ring-light-main bg-main text-white py-2 font-medium hover:bg-main/10 active:scale-95 transition duration-300" > View Details</Link>
//             </div>


//         </div>
//     </div >

// }

// // Best
// const RoomCard = () => {

//     return (
//         <div className="group rounded-none overflow-hidden border border-neutral-200 hover:shadow-sm transition-all duration-300">

//             {/* IMAGE + Overlay */}
//             <div className="relative">

//                 <div className='grid grid-cols-3 grid-rows-2 md:h-72 '>
//                     <img
//                         src="/images/rooms/room3.webp"
//                         alt="Serene Villa"
//                         className="object-cover h-full col-span-2  row-span-2 "
//                     />
//                     <img
//                         src="/images/rooms/room3.webp"
//                         alt="Serene Villa"
//                         className=" object-cover h-full col-span-1  row-span-1 "
//                     />
//                     <img
//                         src="/images/rooms/room3.webp"
//                         alt="Serene Villa"
//                         className=" object-cover h-full col-span-1  row-span-1 "
//                     />

//                 </div>

//                 {/* Gradient Overlay for text readability */}
//                 <div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent pointer-events-none" />

//                 {/* Title + Category + Guests */}
//                 <div className="absolute bottom-2 left-4 right-4 text-white z-10 flex justify-between items-end">
//                     <div>
//                         <p className="text-sm uppercase tracking-wide  text-white/80  font-title">
//                             Deluxe · Pool View
//                         </p>
//                         <h3 className="text-3xl font-bold leading-snug font-title">Deluxe Double Room with Balcony</h3>
//                     </div>
//                     <div className="flex items-center gap-2 text-sm text-white py-1 h-fit rounded-full w-max">
//                         <Users size={14} className="text-main" /> 2 Adults · 1 Child
//                     </div>
//                 </div>

//                 {/* Offer Badge */}
//                 <span className="absolute top-4 left-4 bg-green-500 text-white text-xs font-semibold px-3 py-1 rounded-full "> 50% OFF </span>

//                 {/* Image Counter */}
//                 {/* <CounterBar
//                         className="absolute bottom-1 left-0 right-0 px-4"
//                         length={3}
//                         active={0}
//                     /> */}
//             </div>

//             {/* CONTENT */}
//             <div className="p-4 space-y-3 bg-white">

//                 {/* Description */}
//                 <p className="text-sm text-neutral-800 line-clamp-2">
//                     Private villa surrounded by rice fields with peaceful jungle
//                     views and modern comforts designed for a relaxing stay.
//                 </p>

//                 {/* Facilities */}
//                 <div className="flex flex-wrap gap-2 pt-1">
//                     {[
//                         { icon: <BedDouble size={16} />, label: "2 Beds" },
//                         { icon: <Leaf size={16} />, label: "Relax" },
//                         { icon: <Wifi size={16} />, label: "Wi-Fi" },
//                         { icon: <Bath size={16} />, label: "Bath" },
//                         { icon: <Tv size={16} />, label: "TV" },
//                         { icon: <ParkingSquare size={16} />, label: "Parking" },
//                     ].map((facility, idx) => (
//                         <div
//                             key={idx}
//                             className="flex items-center gap-2 text-xs border border-main/20 bg-main/5 text-neutral-800 px-3 py-1 rounded-full"
//                         >
//                             {facility.icon}
//                             {facility.label}
//                         </div>
//                     ))}
//                 </div>

//                 {/* PRICE + BUTTON */}
//                 <div className="flex justify-between items-center pt-4 border-t text-black border-neutral-400">
//                     <div className='flex gap-2 justify-start items-baseline'>
//                         <h2 className="text-2xl font-bold  slashed-zero tabular-nums">  LKR 12,400 </h2>
//                         <span className="text-sm ">  / Night  </span>
//                     </div>

//                     <Link
//                         href="/room" className="px-5 py-2 rounded-sm ring-4 ring-main/20 bg-main text-white font-medium text-sm  hover:bg-main/90 active:scale-95 transition shadow-md" > View Details </Link>
//                 </div>

//             </div>
//         </div>

//     );

// }


// Best

const RoomCard = ({ data }: { data: RoomCategory }) => {

    const { short_name, name, max_adults, max_children, description, facilities, base_price, rooms, slug, available_rooms_count } = data

    return (
        <div className="group rounded-none bg-white overflow-hidden border border-neutral-200 hover:shadow-sm transition-all  duration-300 flex flex-col sm:grid grid-cols-9">

            <RoomImageCarousel images={rooms} className='col-span-4' classNameImage='aspect-4/3' classNameCard='rounded-t-none' />
            {/* CONTENT */}
            <div className="p-4 col-span-5 relative space-y-3 flex justify-between flex-col  text-black ">

                <div className="">
                    <div className="flex justify-between items-start ">
                        <p className="text-sm uppercase tracking-wide text-gray-500 font-medium">{short_name}</p>
                        <div className="flex items-center gap-1 text-xs text-gray-600">

                            <Users className="w-4 h-4 text-main" />
                            <span>
                                {max_adults} Guest{(max_adults) > 1 ? 's' : ''} •{' '}
                                <span className="font-semibold text-green-800 animate-pulse">Only {available_rooms_count} left</span>
                            </span>
                        </div>
                    </div>
                    <h3 className="text-2xl font-bold leading-snug font-title">{name}</h3>
                    {/* Description */}
                    <p className=" line-clamp-2 font-p mt-2 text-base">{description} </p>

                    {/* Facilities */}
                    <div className="flex flex-wrap gap-2 pt-3">
                        {facilities.map((facility, idx) => (
                            <div
                                key={idx}
                                className="flex items-center gap-2 text-xs border border-main/20 bg-main/5  px-3 py-1 rounded-full"
                            >
                                {/* <Icon icon={facility.icon || 'ImageOff'} className='text-main w-4 h-4' /> */}
                                <ImageIcon is_icon={facility.is_icon} value={facility.icon_value} className='text-main w-4 h-4' />
                                {facility.name}
                            </div>
                        ))}
                    </div>
                </div>

                {/* PRICE + BUTTON */}
                <div className="flex justify-between items-center pt-4 border-t border-neutral-400">
                    <div className='flex gap-2 justify-start items-baseline'>
                        <h2 className="text-2xl font-bold  slashed-zero tabular-nums">  <Price value={base_price} /></h2>
                        <span className="text-sm ">  / Night  </span>
                    </div>

                    <Link href={`/rooms/${slug}`} className="px-5 py-2 rounded-sm ring-4 ring-main/20 bg-main text-white  font-medium text-sm  hover:bg-main/90 active:scale-95 transition shadow-md" > View Details </Link>
                </div>

            </div>
        </div >
    );
}


type RoomsPageProp = {
    roomCategories: RoomCategory[],
    mealPackages: ShowMealPackageType[]
}

export default function Rooms({ roomCategories, mealPackages }: RoomsPageProp) {


    return <PageLayout title='Rooms & Suites' className='bg-linear-to-b from-white via-neutral-800/2 to-neutral-800/5 mb-20 sm:mb-0'>
        <div className='flex gap-6 py-8 sm:py-16 overflow-y-auto  max-w-300 2xl:max-w-340  mx-auto w-full px-4 '>
            {/* Left Side - Rooms */}
            < div className="space-y-6 flex-1 " >
                <SearchSideCard searchBtn className=' sm:hidden mb-10' />

                {roomCategories.length === 0 ? (
                    <div className="relative flex flex-col items-center justify-center text-center py-24 px-6 rounded-xl overflow-hidden bg-neutral-50">

                        {/* Glow background blobs */}
                        {/* <div className="absolute w-72 h-72 bg-indigo-200/30 blur-3xl rounded-full -top-20 -left-20 animate-pulse"></div> */}
                        <div className="absolute w-72 h-72 bg-indigo-200/30 blur-3xl rounded-full  animate-pulse"></div>

                        {/* Icon */}
                        <div className="relative mb-5">
                            <div className="absolute inset-0 bg-indigo-400/20 blur-2xl rounded-full scale-150 animate-pulse"></div>
                            <CalendarX className="w-14 h-14 text-indigo-500 relative" />
                        </div>

                        {/* Title */}
                        <h2 className="text-xl font-semibold text-gray-900">
                            No rooms available
                        </h2>

                        {/* Message */}
                        <p className="text-sm text-gray-600 mt-2 max-w-md leading-relaxed">
                            No rooms match your selected dates. Try adjusting your check-in or check-out to discover available stays.
                        </p>

                        {/* subtle footer hint */}
                        <p className="text-xs text-gray-400 mt-4">
                            Availability changes frequently
                        </p>
                    </div>
                )
                    : roomCategories.map(item => <RoomCard key={item.id} data={item} />)}
            </div >

            {/* Right Side */}
            <div className='hidden sm:block flex-1 max-w-95 space-y-6'>
                <SearchRoomCard />
                <div className='space-y-4'>
                    <BookingKeyCart card />
                    <ShowMealPackage packages={mealPackages} />
                </div>
            </div>
        </div>
    </PageLayout>

    // return (
    //     <>
    //         <Head title="Rooms">
    //             <link rel="preconnect" href="https://fonts.bunny.net" />
    //             <link
    //                 href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600"
    //                 rel="stylesheet"
    //             />
    //         </Head>
    //         <div className="flex min-h-screen flex-col items-center bg-linear-to-br bg-white text-[#1b1b18] lg:justify-center lg:p-8 overflow-y-auto pb-20">


    //             {/* ================= Header Image ================= */}
    //             <Header title=' Available Rooms' />

    //             <div className='hidden md:flex gap-8 mt-24 overflow-y-auto max-w-300 mx-auto w-full px-4'>
    //                 < div className="space-y-4 flex-1" >

    //                     {/* Room Card */}
    //                     <RoomCard />
    //                     <RoomCard />
    //                     <RoomCard />

    //                     {/* Second Room Card */}
    //                     <div className="rounded-2xl overflow-hidden border bg- shadow-sm" >

    //                         <div className='relative '>
    //                             <img
    //                                 src="/images/rooms/room.webp"
    //                                 alt="Serene Villa"
    //                                 className="h-44 w-full object-cover "
    //                             />
    //                             <span className='absolute top-2 right-2 bg-green-500 text-white rounded-full text-xs py-1 px-2' >50% OFF</span>

    //                             <CounterBar className='absolute bottom-2 left-0 right-0' length={3} active={0} />
    //                         </div>


    //                         {/* Content */}
    //                         <div className="p-4 pt-3 space-y-3">
    //                             {/* Header: Room Name + Category + Price */}
    //                             <div className="flex justify-between items-start">
    //                                 <div className="flex flex-col gap-0">
    //                                     <h3 className="font-semibold text-lg text-neutral-900">Serene Villa</h3>
    //                                     <p className="text-sm text-neutral-500">
    //                                         Deluxe / Balcany View
    //                                     </p>
    //                                 </div>
    //                                 <span className="text-sm flex gap-2 items-center justify-end font-medium "><Users size={14} className="text-main" /> 2 Adults · 1 Child</span>
    //                             </div>

    //                             {/* <span className="text-xs flex-1 flex justify-start items-center text-neutral-600 border-b-2   pl-2 border-light-main" /> */}

    //                             {/* Description */}
    //                             <p className="text-sm text-neutral-600 line-clamp-2"> Secluded villa perfect for couples and quiet retreats.</p>

    //                             {/* Facilities */}
    //                             <div className="flex flex-wrap gap-2 mt-2">
    //                                 {[
    //                                     { icon: <BedDouble size={16} />, label: '2 Beds' },
    //                                     { icon: <Leaf size={16} />, label: 'Relax' },
    //                                     { icon: <Wifi size={16} />, label: 'Wi-Fi' },
    //                                     { icon: <Bath size={16} />, label: 'Bath' },
    //                                     { icon: <ParkingSquare size={16} />, label: 'Parking' },
    //                                 ].map((facility, idx) => (
    //                                     <div
    //                                         key={idx}
    //                                         className="flex items-center gap-1.5 px-2 py-1 text-xs bg-gray-50 rounded-full border border-gray-200"
    //                                     >
    //                                         <span className="text-main">{facility.icon}</span>
    //                                         <span>{facility.label}</span>
    //                                     </div>
    //                                 ))}
    //                             </div>

    //                             {/* View Details Button */}
    //                             <div className='flex w-full justify-between items-end'>

    //                                 <h2 className='text-xl font-bold text-black'>LKR 15600 <span className='text-sm text-gray-600 font-normal'>/ Night</span></h2>
    //                                 <Link href="/room" className="w-fit text-sm px-4 block text-center rounded-full ring-4 ring-light-main bg-main text-white py-2 font-medium hover:bg-main/10 active:scale-95 transition duration-300" > View Details</Link>
    //                             </div>


    //                         </div>
    //                     </div >

    //                 </div >
    //                 <div className='flex-1 max-w-90 h-120 border rounded-md'>


    //                 </div>

    //             </div>

    //             <div className="md:hidden w-full pb-8 bg-linear-to-b from-white  to-main-bg  shadow-sm">
    //                 <div className="flex bg-white items-center justify-between gap-3 mx-4 border-l-4 border-l-main/40 pl-3 my-3 ">
    //                     {/* Date + Guests */}
    //                     <div className="flex-1 flex items-center gap-3">
    //                         {/* Info */}
    //                         <div className="flex flex-col">
    //                             {/* Dates */}
    //                             <div className="flex items-baseline gap-1 text-neutral-900 text-2xl">
    //                                 <span className="font-semibold">12 Feb</span>
    //                                 <span className="font-semibold">–</span>
    //                                 <span className="font-semibold">14 Feb</span>
    //                                 <span className="text-sm text-neutral-500 ml-1">/ 2026</span>
    //                             </div>

    //                             {/* Guests */}
    //                             <div className="flex items-center gap-2 text-sm text-neutral-600 mt-0.5">
    //                                 <Users size={16} className="text-main" />
    //                                 <span>2 Adults · 1 Child</span>
    //                             </div>
    //                         </div>
    //                     </div>

    //                     {/* Change Button */}
    //                     <button className="shrink-0 text-sm font-medium bg-main text-white ring-4 ring-light-main  px-3 py-2 rounded-full hover:bg-main/5 active:scale-95 transition duration-300"> Change Date  </button>
    //                 </div>

    //                 {/* Bottom Row: Guests + Rooms Available */}
    //                 <div className="flex mx-4 mb-4 pt-4  justify-between items-center pb-1 gap-0 text-xs ">
    //                     <span className="w-fit  flex justify-start items-center bg-light-main text-main font-semibold px-3 h-6 py-1 rounded-full  rounded-br-none">  3 Rooms </span>
    //                     <span className=" flex-1 flex justify-start items-center text-neutral-600 border-b-2 h-6  pl-2 border-light-main">  Available for your stay </span>
    //                 </div>


    //                 {/* ================= Room Results ================= */}
    //                 < div className="space-y-4 px-4" >

    //                     {/* Room Card */}
    //                     <RoomCard />
    //                     <RoomCard />
    //                     <RoomCard />

    //                     {/* Second Room Card */}
    //                     <div className="rounded-2xl overflow-hidden border bg- shadow-sm" >

    //                         <div className='relative '>
    //                             <img
    //                                 src="/images/rooms/room.webp"
    //                                 alt="Serene Villa"
    //                                 className="h-44 w-full object-cover "
    //                             />
    //                             <span className='absolute top-2 right-2 bg-green-500 text-white rounded-full text-xs py-1 px-2' >50% OFF</span>

    //                             <CounterBar className='absolute bottom-2 left-0 right-0' length={3} active={0} />
    //                         </div>


    //                         {/* Content */}
    //                         <div className="p-4 pt-3 space-y-3">
    //                             {/* Header: Room Name + Category + Price */}
    //                             <div className="flex justify-between items-start">
    //                                 <div className="flex flex-col gap-0">
    //                                     <h3 className="font-semibold text-lg text-neutral-900">Serene Villa</h3>
    //                                     <p className="text-sm text-neutral-500">
    //                                         Deluxe / Balcany View
    //                                     </p>
    //                                 </div>
    //                                 <span className="text-sm flex gap-2 items-center justify-end font-medium "><Users size={14} className="text-main" /> 2 Adults · 1 Child</span>
    //                             </div>

    //                             {/* <span className="text-xs flex-1 flex justify-start items-center text-neutral-600 border-b-2   pl-2 border-light-main" /> */}

    //                             {/* Description */}
    //                             <p className="text-sm text-neutral-600 line-clamp-2"> Secluded villa perfect for couples and quiet retreats.</p>

    //                             {/* Facilities */}
    //                             <div className="flex flex-wrap gap-2 mt-2">
    //                                 {[
    //                                     { icon: <BedDouble size={16} />, label: '2 Beds' },
    //                                     { icon: <Leaf size={16} />, label: 'Relax' },
    //                                     { icon: <Wifi size={16} />, label: 'Wi-Fi' },
    //                                     { icon: <Bath size={16} />, label: 'Bath' },
    //                                     { icon: <ParkingSquare size={16} />, label: 'Parking' },
    //                                 ].map((facility, idx) => (
    //                                     <div
    //                                         key={idx}
    //                                         className="flex items-center gap-1.5 px-2 py-1 text-xs bg-gray-50 rounded-full border border-gray-200"
    //                                     >
    //                                         <span className="text-main">{facility.icon}</span>
    //                                         <span>{facility.label}</span>
    //                                     </div>
    //                                 ))}
    //                             </div>

    //                             {/* View Details Button */}
    //                             <div className='flex w-full justify-between items-end'>

    //                                 <h2 className='text-xl font-bold text-black'>LKR 15600 <span className='text-sm text-gray-600 font-normal'>/ Night</span></h2>
    //                                 <Link href="/room" className="w-fit text-sm px-4 block text-center rounded-full ring-4 ring-light-main bg-main text-white py-2 font-medium hover:bg-main/10 active:scale-95 transition duration-300" > View Details</Link>
    //                             </div>


    //                         </div>
    //                     </div >

    //                 </div >
    //             </div >


    //             {/* Mobile View */}
    //             <div className=" md:hidden fixed bottom-0 left-0 right-0 z-50">
    //                 <div className="relative h-20 bg-linear-to-r from-white/95 via-white to-white/95 rounded-t-2xl backdrop-blur-sm  shadow-lg flex items-center justify-between px-6">

    //                     {/* Home */}
    //                     <Link href='/' className="flex flex-col items-center text-xs gap-1 justify-center text-neutral-500 active:scale-95"> <Home size={24} />  Home  </Link>

    //                     {/* Rooms */}
    //                     <div className="relative flex flex-col items-center text-xs gap-1 justify-center   text-main font-semibold">
    //                         <BedDouble size={24} />
    //                         Rooms   {/* Badge */}
    //                         <span className="absolute -top-1 -right-1 min-w-4.5 h-4.5   rounded-full bg-main text-white text-[10px]    flex items-center justify-center font-semibold   ring-2 ring-white"> 2 </span>
    //                     </div>

    //                     <div className='w-22' />

    //                     {/* CHECK AVAILABILITY CTA */}
    //                     <div className="absolute left-1/2 -top-7 -translate-x-1/2 flex items-center justify-center flex-col gap-0.5">
    //                         {/* <button className="  flex items-center gap-3  p-4   bg-main ring-4 ring-main/20    text-white text-xs font-semibold   rounded-full active:scale-95  transition   "  >
    //                                 <Calendar size={24} />
    //                             </button> */}
    //                         <Drawer>
    //                             <DrawerTrigger asChild>
    //                                 <div className='bg-white p-2 rounded-full border-t border-neutral-200  '>
    //                                     <div className="  flex items-center gap-2 p-3 bg-main ring-4 ring-main/20 text-white text-xs font-semibold rounded-full active:scale-95 transition duration-300 " >
    //                                         <CalendarDays size={32} />
    //                                     </div>
    //                                 </div>
    //                             </DrawerTrigger>
    //                             <DrawerContent className="rounded-t-3xl bg-white px-4  pb-6">

    //                                 {/* ================= Header ================= */}
    //                                 <div className="pt-4 pb-3 text-center border-b">
    //                                     <h2 className="text-lg font-semibold text-neutral-900">
    //                                         Select your stay
    //                                     </h2>
    //                                     <p className="text-sm text-neutral-500">
    //                                         Choose dates and guests
    //                                     </p>
    //                                 </div>

    //                                 <div className='overflow-y-auto no-scrollbar'>
    //                                     {/* ================= Date Summary ================= */}
    //                                     <div className="mt-4 rounded-2xl border px-4 py-3 flex items-center justify-between">
    //                                         <div>
    //                                             <p className="text-xs text-neutral-500">Check-in</p>
    //                                             <p className="font-medium">12 Feb 2026</p>
    //                                         </div>

    //                                         <span className="text-neutral-400 text-sm">→</span>

    //                                         <div className="text-right">
    //                                             <p className="text-xs text-neutral-500">Check-out</p>
    //                                             <p className="font-medium">14 Feb 2026</p>
    //                                         </div>
    //                                     </div>

    //                                     {/* ================= Calendar ================= */}
    //                                     <div className="mt-4 hidden">
    //                                         <p className="text-sm font-medium text-neutral-700 mb-2">
    //                                             Select dates
    //                                         </p>

    //                                         {/* Calendar container */}
    //                                         <div className="rounded-2xl border overflow-hidden">
    //                                             <div className="px-4 py-3 border-b flex items-center justify-between">
    //                                                 <button className="text-sm text-neutral-500">‹</button>
    //                                                 <span className="font-medium">February 2026</span>
    //                                                 <button className="text-sm text-neutral-500">›</button>
    //                                             </div>

    //                                             {/* Week days */}
    //                                             <div className="grid grid-cols-7 text-xs text-neutral-400 px-3 py-2">
    //                                                 {["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(d => (
    //                                                     <div key={d} className="text-center">{d}</div>
    //                                                 ))}
    //                                             </div>

    //                                             {/* Dates */}
    //                                             <div className="grid grid-cols-7 gap-y-2 px-3 pb-3 text-sm">
    //                                                 {[...Array(29)].map((_, i) => (
    //                                                     <button
    //                                                         key={i}
    //                                                         className={`h-9 w-9 mx-auto rounded-full    ${i === 11 || i === 14
    //                                                             ? "bg-main text-white"
    //                                                             : "hover:bg-neutral-100"
    //                                                             }`}
    //                                                     >
    //                                                         {i + 1}
    //                                                     </button>
    //                                                 ))}
    //                                             </div>
    //                                         </div>
    //                                     </div>

    //                                     {/* ================= Guests ================= */}
    //                                     <div className="my-6">
    //                                         <p className="text-sm font-medium text-neutral-700 mb-3">
    //                                             Guests
    //                                         </p>

    //                                         <div className="space-y-4">
    //                                             {/* Adults */}
    //                                             <GuestRow label="Adults" hint="Age 13+" />

    //                                             {/* Children */}
    //                                             <GuestRow label="Children" hint="Age 2–12" value={1} />
    //                                         </div>
    //                                     </div>


    //                                     {/* ================= CTA ================= */}
    //                                     <Link href='/rooms'>
    //                                         <div className=" mx-4 px-6 rounded-full bg-main ring-4 ring-light-main text-white py-3 font-semibold text-center active:scale-98 transition duration-300"> Check Availability</div>
    //                                     </Link>
    //                                 </div>

    //                             </DrawerContent>


    //                         </Drawer>
    //                         <span className='text-start text-xs text-neutral-600'>Check  Availability</span>
    //                     </div>

    //                     {/* Contact */}
    //                     <div className="flex flex-col items-center text-xs gap-1 justify-center text-neutral-500">  <Phone size={24} />   Contact </div>

    //                     {/* More */}
    //                     <div className="flex flex-col items-center text-xs gap-1 justify-center text-neutral-500"> <Menu size={24} />   More   </div>

    //                 </div>
    //             </div>

    //         </div >
    //     </>
    // );
}

