'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">Frequently Asked Questions</span>
                            <h2>Have Questions About Physiotherapy?</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"
                                                loading="lazy"
                                                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>
                                                <h3>What is physiotherapy?</h3>
                                            </div>
                                            <div className={isActive.key === 1 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <p>Physiotherapy is a healthcare practice focused on restoring movement, reducing pain, and improving physical function affected by injury, illness, or disability. Physiotherapists use manual therapy, exercise, and education to help you move better and recover safely.</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>
                                                <h3>What does the physiotherapist do?</h3>
                                            </div>
                                            <div className={isActive.key === 2 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <p>A physiotherapist assesses your condition, identifies the root cause of your pain or movement issue, and creates a personalized treatment plan. They use hands-on techniques, exercises, and guidance to help you heal, strengthen, and prevent future injuries.</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>
                                                <h3>How long will your session take?</h3>
                                            </div>
                                            <div className={isActive.key === 3 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <p>A typical physiotherapy session lasts between 30 - 60 minutes, depending on your condition and treatment plan. Initial assessments may take slightly longer to ensure a full understanding of your needs.</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> */}
        </>
    );
}