'use client'
import Layout from "@/components/layout/Layout";
import Link from "next/link";
import { useState } from 'react';

export default function Faq() {
    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="faq-section pt_90 pb_90">
                    <div className="auto-container">
                        <div className="sec-title centred mb_50">
                            <span className="sub-title">FAQ'S</span>
                            <h2>Do You Have Any Physiotherapy <br />Questions?</h2>
                        </div>

                        <div className="row align-items-center clearfix">

                            {/* Left Side Image */}
                           <div className="col-lg-6 col-md-12 col-sm-12 image-column mb-5 text-center text-lg-start">
                                <div className="image_block_four">
                                    <div className="image-box">
                                        <figure>
                                            <img
                                                src="/assets/images/faq/img.webp"
                                                alt="Do You Have Any Physiotherapy Questions"
                                                className="img-fluid"
                                                style={{ height: "550px", objectFit: "cover" }}
                                            />
                                        </figure>
                                    </div>
                                </div>
                            </div>

                            {/* Right Side FAQ Content */}
                            <div className="col-lg-6 col-md-12 col-sm-12 content-column">
                                <div className="content-box">
                                    <ul className="accordion-box">

                                        {/* FAQ 1 */}
                                        <li className="accordion block">
                                            <div
                                                className={isActive.key === 1 ? "acc-btn active" : "acc-btn"}
                                                onClick={() => handleToggle(1)}
                                            >
                                                <div className="icon-box"><i className="icon-34"></i></div>
                                                <h5>What is physiotherapy?</h5>
                                            </div>
                                            <div className={isActive.key === 1 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <p>Physiotherapists are medical professionals who specialize in treating injuries and conditions that impact movement.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>

                                        {/* FAQ 2 */}
                                        <li className="accordion block">
                                            <div
                                                className={isActive.key === 2 ? "acc-btn active" : "acc-btn"}
                                                onClick={() => handleToggle(2)}
                                            >
                                                <div className="icon-box"><i className="icon-34"></i></div>
                                                <h5>What does the physiotherapist do?</h5>
                                            </div>
                                            <div className={isActive.key === 2 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <p>Physiotherapists help people affected by injury, illness or disability through electrical modalities, movement, exercise, manual therapy, education and advice. We at Rapharehab Physiotherapy clinic Etobicoke for people of all ages, helping patients to manage pain and prevent disease.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>

                                        {/* FAQ 3 */}
                                        <li className="accordion block">
                                            <div
                                                className={isActive.key === 3 ? "acc-btn active" : "acc-btn"}
                                                onClick={() => handleToggle(3)}
                                            >
                                                <div className="icon-box"><i className="icon-34"></i></div>
                                                <h5>How Long Will Your session Take?</h5>
                                            </div>
                                            <div className={isActive.key === 3 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <p>The duration of the program will depend on an individual's healing rate and condition being treated. Every condition is different, and everyone heals at different rates. Minor injuries you might expect 2-3 sessions of physiotherapy while the soft tissue injuries may take even longer.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                {/* faq end */}

                {/* subscibe */}
                {/* <section className="subscribe-section">
                    <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">
                                        <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="/">Privacy Policy.</Link></label>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section> */}
        </>
    );
}
