'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>
                                        The COVID 19 pandemic has created increased stress and anxiety levels for many people. 
                                        We would like to take this opportunity to remind you that virtual therapy and at-home 
                                        or mobile therapy are effective alternatives to in-clinic therapy for many of our clients.
                                    </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" />
                                                </div>
                                                <h3>VIRTUAL THERAPY</h3>
                                                <p>
                                                    As an alternative to receiving direct in-clinic therapy, we continue to offer all 
                                                    clients the option to receive tele-rehabilitation or virtual therapy services to 
                                                    address your current therapy needs.
                                                </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" />
                                                </div>
                                                
                                                <div>
                                                    <h3>HOME THERAPY</h3>
                                                    <p>
                                                        The convenience of having a physiotherapist come to your home eliminates barriers 
                                                        faced by those who can’t drive. This improved access to therapy makes it easier for 
                                                        clients to be an active participant in their recovery.
                                                    </p>
                                                    <p>
                                                        Being able to interact with clients in their home setting enables a therapist to see 
                                                        how the client moves and completes tasks in their everyday life.
                                                    </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> */}
        </>
    )
}
