import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
import { Link, usePage } from "@inertiajs/react";
import { ChevronRight, CornerRightDown, Facebook, Instagram, Linkedin, Mail, MapPin, MapPinHouse, Phone, Twitter, Youtube } from "lucide-react";
import { Calendar, FileText, HelpCircle } from "lucide-react";

export default function Footer() {

    const { contact_details } = usePage().props as unknown as { contact_details: ContactDetailsType }

    const socials = [
        { icon: Facebook, border: "border-blue-600/50", text: "text-blue-600" },
        { icon: Youtube, border: "border-red-600/50", text: "text-red-600" },
        { icon: Twitter, border: "border-sky-400/50", text: "text-sky-400" },
        { icon: Linkedin, border: "border-blue-700/50", text: "text-blue-700" },
        { icon: Instagram, border: "border-pink-600/50", text: "text-pink-600" },
    ];


    const actions = [
        // {
        //     icon: Calendar,
        //     title: "Check Availability",
        //     desc: "See available rooms instantly",
        // },
        {
            icon: MapPin,
            title: "View Location",
            desc: "Find us on Google Maps",
        },
        {
            icon: FileText,
            title: "Hotel Policies",
            desc: "Check-in, cancellation & rules",
        },
        {
            icon: HelpCircle,
            title: "Need Help?",
            desc: "Contact support or FAQ",
        },
    ];


    return (
        <div className="hidden md:flex relative bg-main-dark p-8 w-full justify-center items-center">

            {/* Background Image */}
            <div className="absolute inset-0 bg-[url(/images/hotel/caption.jpg)] bg-cover bg-center" />

            {/* Black Overlay */}
            <div className="absolute inset-0 bg-linear-to-b from-black via-black/95 to-black/90" />

            <div className="relative z-10 max-w-300 2xl:max-w-340   px-4 w-full flex flex-col md:gap-8 justify-start items-start">
                <div className='w-full   text-white  lg:gap-10 space-y-8'>
                    <div className="flex items-center justify-between gap-4 w-full">

                        <Link href='/' className='flex gap-4 items-center justify-start transition-all duration-300 hover:scale-101  hover:translate-x-0.5'>
                            <img src='/images/hotel/logo-text-c.png' className=' h-14' />
                        </Link>

                        {/* Useful Actions */}
                        <div className=" grid grid-cols-3  gap-6">

                            {actions.map(({ icon: Icon, title, desc }, i) => (
                                <div key={i} className="group cursor-pointer flex items-start gap-3 p-3 rounded-lg   transition-all duration-300  border-neutral-400 hover:-translate-y-1"    >
                                    <Icon className="w-5 h-5 text-[#63aa45] mt-0.5 transition-transform duration-300 group-hover:scale-110" />

                                    <div>
                                        <h3 className="text-sm md:text-base font-semibold">   {title}  </h3>
                                        <p className="text-sm text-gray-400">   {desc}  </p>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    <Separator className="bg-white/60" />

                    <div className="flex justify-between gap-2 items-start w-full">

                        <div className=" max-w-60 md:max-w-xs space-y-4">
                            <h2 className="text-lg font-bold">Our Hotel</h2>
                            <p className="text-sm">Experience the tranquility of Sri Lanka’s natural beauty - a perfect getaway surrounded by lush paddy fields and gentle breezes.</p>
                            <div className="flex items-center gap-4 mt-6">
                                {socials.map((item, i) => (
                                    <div key={i} className={cn('group border bg-black/90 border-main/20 rounded-full p-2 flex items-center justify-center  cursor-pointer  transition-all duration-300 hover:scale-110 hover:-translate-y-1 hover:shadow-lg', item.border)}  >
                                        <item.icon className={cn('h-5 w-5 text-main transition-all duration-300 group-hover:rotate-6', item.text)} />
                                    </div>
                                ))}
                            </div>
                        </div>

                        <div className="text-xs md:text-sm flex flex-col gap-2 ">

                            <h2 className=" text-base md:text-lg font-bold mb-2">Quick Links</h2>
                            {['Home', 'About Us', 'Why Choose Us', 'Rooms', 'Contact Us'].map((item, index) =>
                                <Link key={index} className="flex items-center text-sm gap-1 transition-all duration-300 hover:translate-x-2 hover:text-main" >
                                    <ChevronRight className="w-5 h-5 text-neutral-400 transition-transform duration-300 group-hover:translate-x-0.5" /> {item}
                                </Link>)}

                        </div>
                        {/* <div className="h-42 w-90 hidden lg:block object-cover bg-main/20 object-bottom border border-white" /> */}
                        <div className="text-xs md:text-sm flex flex-col gap-2 md:gap-1 max-w-100">

                            <h2 className=" text-base md:text-lg font-bold mb-2">Contact Details</h2>
                            <div className="space-y-3 text-sm">
                                <div className="flex gap-4 items-start">
                                    <Mail className="text-main w-6 h-6 mt-1" />
                                    <div className="">
                                        <h1 className=" text-neutral-400">Send Email</h1>
                                        <p className="">{contact_details.email}</p>
                                    </div>
                                </div>

                                <div className="flex gap-4 items-start">
                                    <Phone className=" text-main w-6 h-6 mt-1" />
                                    <div className="">
                                        <h1 className=" text-neutral-400">Phone Number</h1>
                                        <p className="">{contact_details.phone}</p>
                                    </div>
                                </div>

                                <div className="flex gap-4 items-start">
                                    <MapPinHouse className=" text-main w-6 h-6 min-w-6 mt-1" />
                                    <div className="">
                                        <h1 className=" text-neutral-400">Address</h1>
                                        <p className="">{contact_details.address}</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <span className="  text-white w-full text-center text-xs">Copyright © 2026. All rights reserved. | Design By Udayanagana</span>
            </div>
        </div >
    )
}
