'use client'
import Layout from "@/components/layout/Layout"
import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"

const items = [
    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "On call 24/7 for client needs" },
    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Flexible and fast scheduling" },
    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Regular quality assurance" },
    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Thorough care management and family support" },
    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Double the care team staff of other agencies" },
    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Assisting with walking and transferring from bed to wheelchair" },
    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Bathing, dressing and grooming assistance" },
    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Medication reminders" },
    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Safety and fall prevention" },
    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Toileting and incontinence care" },
    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Light housekeeping" },
    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Meal preparation and nutrition" },
    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Grocery shopping and errands" },
    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Transportation to social and recreational activities" },
    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Assistance with light exercise and outdoor activity" },
]

export default function Home() {
    const [activeIndex, setActiveIndex] = useState(null)

    return (
        <Layout 
            headerStyle={2} 
            footerStyle={1} 
            breadcrumbTitle="COVID-19 UPDATES" 
            bannerImage="/assets/images/covid/covid-19-banner.webp"
        >
            <section className="chooseus-section lightbg">
                <div className="auto-container">
                    <div className="row clearfix">
                        <div className="col-lg-12 col-md-12 col-sm-12 content-column">
                            <div className="content-box text-center">
                                <div className="sec-title light mb_50">
                                    <span className="sub-title">Why Choose Us</span>
                                    <h2>Choose The Best For Your <br />Health</h2>
                                </div>

                                {/* ICONS in 1 row (4 columns) */}
                                <div className="row clearfix flex flex-wrap justify-center gap-6">
                                    {items.map((item, i) => (
                                        <div 
                                            key={i} 
                                            className="col-lg-3 col-md-3 col-sm-6 mb-5"
                                        >
                                            <div
                                                className="chooseus-block-one relative"
                                                onMouseEnter={() => setActiveIndex(i)}
                                                onMouseLeave={() => setActiveIndex(null)}
                                            >
                                                {/* Popup inside each icon */}
                                                <AnimatePresence>
                                                    {activeIndex === i && (
                                                        <motion.div
                                                            initial={{ opacity: 0, y: 10 }}
                                                            animate={{ opacity: 1, y: 0 }}
                                                            exit={{ opacity: 0, y: 10 }}
                                                            transition={{ duration: 0.25, ease: "easeOut" }}
                                                            className="absolute -top-24 left-1/2 -translate-x-1/2 bg-black/80 px-4 py-3 rounded-xl w-56 text-center shadow-lg z-10"
                                                        >
                                                            <p className="text-sm text-white mb-1">
                                                                {item.text}
                                                            </p>
                                                        </motion.div>
                                                    )}
                                                </AnimatePresence>

                                                {/* Icon replaced with Image */}
                                                <div className="inner-box">
                                                    <div className="icon-box bg-[#bc0000] w-20 h-20 flex items-center justify-center rounded-xl">
                                                        <img 
                                                            src={item.icon} 
                                                            alt="Service Icon" 
                                                            className="w-10 h-10 object-contain"
                                                        />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </Layout>
    )
}