'use client'
import CounterUp from "@/components/elements/CounterUp"
import Layout from "@/components/layout/Layout"
import Link from "next/link"
import { useState } from 'react'
import ModalVideo from 'react-modal-video'
import { motion } from "framer-motion"

const ProgressBar = ({ label, percent }) => (
    <div className="progress-box">
        <p>{label}</p>
        <div className="bar">
            <div className="bar-inner count-bar" style={{ width: `${percent}%` }}></div>
            <div className="count-text">{`${percent}%`}</div>
        </div>
    </div>
);

export default function Home() {
    const [isOpen, setOpen] = useState(false)
    const [isActive, setIsActive] = useState({
        status: false,
        key: 1,
    })

    const handleToggle = (key) => {
        if (isActive.key === key) {
            setIsActive({
                status: false,
            })
        } else {
            setIsActive({
                status: true,
                key,
            })
        }
    }

    return (
        <>
                <section className="chooseus-style-two pt_90 pb_90">
                    <div className="auto-container">
                        <div className="row clearfix">
                            <div className="content-box">
                                {/* Top Intro */}
                                <div className="sec-title mb_50 text-center">
                                    <h2 className="mb-3">COVID 19 UPDATES</h2>
                                    <p className="section-para">
                                        The COVID-19 pandemic has increased stress, anxiety, and mobility challenges for many people. At Rapha Rehab, your safety comes first. We offer virtual therapy, at-home physiotherapy, and mobile care as safe, effective alternatives to in-clinic treatment.
                                    </p>
                                </div>

                                {/* Virtual Therapy (Right aligned on desktop, center on mobile) */}
                                <div className="row clearfix">
                                    <div className="col-lg-12 col-md-12 col-sm-12 chooseus-block">
                                        <motion.div
                                            className="chooseus-block-one d-flex justify-content-center justify-content-lg-end text-lg-left"
                                            initial={{ opacity: 0, x: 100 }}
                                            whileInView={{ opacity: 1, x: 0 }}
                                            transition={{ duration: 0.8, ease: "easeOut" }}
                                            viewport={{ once: true }}
                                        >
                                            <div className="inner-box w-100 pb-0">
                                                <div className="icon-box mb-3 mb-lg-0">
                                                    <img src="/assets/images/covid/virtual.webp" alt="Virtual Therapy" loading="lazy" />
                                                </div>
                                                <h3>VIRTUAL THERAPY</h3>
                                                <p>
                                                   Virtual therapy allows you to continue treatment from home through secure online sessions. Your therapist provides real-time guidance and support, offering a convenient alternative to in-clinic care.
                                                </p>
                                            </div>
                                        </motion.div>
                                    </div>

                                    {/* Home Therapy (Left aligned on desktop, center on mobile) */}
                                    <div className="col-lg-12 col-md-12 col-sm-12 chooseus-block mt-4">
                                        <motion.div
                                            className="chooseus-block-one d-flex justify-content-center justify-content-lg-start text-lg-left"
                                            initial={{ opacity: 0, x: -100 }}
                                            whileInView={{ opacity: 1, x: 0 }}
                                            transition={{ duration: 0.8, ease: "easeOut" }}
                                            viewport={{ once: true }}
                                        >
                                            <div className="inner-box d-flex flex-column flex-lg-row-reverse align-items-lg-start w-100 pb-0" >
                                                
                                                <div className="icon-box ml-lg-3 mb-3 mb-lg-0">
                                                    <img src="/assets/images/covid/home.webp" alt="Home Therapy" loading="lazy"/>
                                                </div>
                                                
                                                <div>
                                                    <h3>HOME THERAPY</h3>
                                                    <p>
                                                        Home therapy brings professional physiotherapy directly to you, removing barriers such as mobility challenges or lack of transportation. By treating you in your home environment, your therapist can better assess your daily movement, personalize your program, and help you stay actively involved in your recovery.
                                                    </p>
                                                  
                                                </div>
                                            </div>
                                        </motion.div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* Subscribe Section */}
                {/* <section className="subscribe-section pt-0 bg-color-1">
                    <div className="auto-container">
                        <div className="inner-container">
                            <div className="row align-items-center">
                                <div className="col-lg-6 col-md-12 col-sm-12 text-column">
                                    <div className="text-box text-center text-lg-left">
                                        <h2><span>Subscribe</span> for the exclusive updates!</h2>
                                    </div>
                                </div>
                                <div className="col-lg-6 col-md-12 col-sm-12 form-column">
                                    <div className="form-inner">
                                        <form method="post" action="contact">
                                            <div className="form-group">
                                                <input type="email" name="email" placeholder="Enter Your Email Address" required />
                                                <button type="submit" className="theme-btn btn-one"><span>Subscribe Now</span></button>
                                            </div>
                                            <div className="form-group">
                                                <div className="check-box">
                                                    <input className="check" type="checkbox" id="checkbox1" />
                                                    <label htmlFor="checkbox1">
                                                        I agree to the <Link href="index">Privacy Policy.</Link>
                                                    </label>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section> */}
        </>
    )
}