'use client'
import Link from "next/link";
import { useState } from 'react';

export default function Faq() {
    const [active1, setActive1] = useState(1);
    const [active2, setActive2] = useState(6);
    const [active3, setActive3] = useState(11);

    const handleToggle1 = (key) => setActive1(active1 === key ? null : key);
    const handleToggle2 = (key) => setActive2(active2 === key ? null : key);
    const handleToggle3 = (key) => setActive3(active3 === key ? null : key);

    const faqData = [
        {
            question: "What is physiotherapy?",
            answer: "Physiotherapy is a healthcare profession focused on restoring movement, reducing pain, and improving physical function. At our Etobicoke physiotherapy clinic, we use evidence-based treatments to address musculoskeletal injuries, chronic pain, and mobility limitations."
        },
        {
            question: "Do I need a doctor’s referral?",
            answer: "In most cases, no referral is required to visit a physiotherapy clinic in Etobicoke. However, some insurance plans may require a doctor’s note for reimbursement. Contact your insurance provider to confirm."
        },
        {
            question: "What conditions do you treat?",
            answer: (
                <>
                    <p>We treat a wide range of conditions, including:</p>
                    <ul className="list-style-one clearfix mt-2 mb-2">
                        <li>Back pain</li>
                        <li>Neck pain</li>
                        <li>Shoulder injuries</li>
                        <li>Knee pain</li>
                        <li>Sports injuries</li>
                        <li>Accident-related injuries</li>
                        <li>Arthritis</li>
                        <li>Post-surgical rehabilitation</li>
                        <li>Workplace injuries</li>
                    </ul>
                    <p>Our rehabilitation clinic in Etobicoke provides personalized treatment for both acute and chronic conditions.</p>
                </>
            )
        },
        {
            question: "What happens during my first appointment?",
            answer: (
                <>
                    <p>Your first visit includes:</p>
                    <ul className="list-style-one clearfix mt-2 mb-2">
                        <li>A detailed medical history review</li>
                        <li>Physical assessment and movement analysis</li>
                        <li>Discussion of your goals</li>
                        <li>Development of a customized treatment plan</li>
                        <li>Initial therapy session</li>
                    </ul>
                    <p>Our goal is to provide clarity and confidence from the start.</p>
                </>
            )
        },
        {
            question: "How long does each session last?",
            answer: "Initial assessments typically last 45–60 minutes. Follow-up sessions usually last 30–45 minutes, depending on your treatment plan."
        },
        {
            question: "How many sessions will I need?",
            answer: (
                <>
                    <p>The number of sessions varies depending on:</p>
                    <ul className="list-style-one clearfix mt-2 mb-2">
                        <li>Severity of injury</li>
                        <li>Type of condition</li>
                        <li>Your overall health</li>
                        <li>Consistency with home exercises</li>
                    </ul>
                    <p>Some patients improve within a few visits, while others require structured long-term rehabilitation.</p>
                </>
            )
        },
        {
            question: "Does physiotherapy hurt?",
            answer: "Physiotherapy should not cause excessive pain. Some mild soreness may occur after exercises, but your therapist will adjust intensity to your comfort level."
        },
        {
            question: "Is physiotherapy covered by insurance?",
            answer: (
                <>
                    <p>Most extended health insurance plans cover physiotherapy services. Our Etobicoke physiotherapy clinic offers assistance with:</p>
                    <ul className="list-style-one clearfix mt-2 mb-2">
                        <li>Direct billing (where available)</li>
                        <li>Insurance documentation</li>
                        <li>Accident claim paperwork</li>
                    </ul>
                    <p>Contact us to verify your coverage.</p>
                </>
            )
        },
        {
            question: "Do you treat motor vehicle accident injuries?",
            answer: "Yes. We specialize in accident rehabilitation in Etobicoke, including whiplash, soft tissue injuries, and post-collision mobility issues."
        },
        {
            question: "Can physiotherapy prevent surgery?",
            answer: "In some cases, yes. Targeted strengthening, mobility correction, and pain management may reduce the need for surgical intervention. However, each case is unique."
        },
        {
            question: "Do you offer massage therapy?",
            answer: "Yes. We provide therapeutic massage as part of comprehensive rehabilitation programs."
        },
        {
            question: "What should I wear?",
            answer: "Wear comfortable clothing that allows movement and access to the affected area. For lower-body injuries, shorts are recommended."
        },
        {
            question: "Do you treat athletes?",
            answer: "Yes. We offer sports physiotherapy programs to help athletes recover and improve performance."
        },
        {
            question: "Is parking available?",
            answer: "Yes. Our Etobicoke physiotherapy clinic offers convenient parking and public transit access."
        },
        {
            question: "When should I see a physiotherapist?",
            answer: (
                <>
                    <p>You should consider visiting if you experience:</p>
                    <ul className="list-style-one clearfix mt-2 mb-2">
                        <li>Persistent pain</li>
                        <li>Limited movement</li>
                        <li>Swelling</li>
                        <li>Muscle weakness</li>
                        <li>Post-surgical stiffness</li>
                        <li>Injury after an accident</li>
                    </ul>
                    <p>Early intervention leads to faster recovery.</p>
                </>
            )
        }
    ];

    return (
        <>
            {/* FAQ Intro Section */}
            <section className="about-style-three pt_90 mb-2">
                <div className="auto-container">
                    <div className="row align-items-center clearfix">
                        <div className="col-lg-12 col-md-12 col-sm-12 content-column">
                            <div className="content_block_one">
                                <div className="content-box">
                                    <div className="sec-title mb_25 centred">
                                        <span className="sub-title">Frequently Asked Questions</span>
                                        <h2>Frequently Asked Questions – Physiotherapy in Etobicoke</h2>
                                        <p className="mt_20" style={{ maxWidth: '800px', margin: '0 auto' }}>
                                            Below are answers to common questions about physiotherapy and rehabilitation services at Rapharehab, one of the best physiotherapy clinics in Etobicoke.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Section 1: Image | FAQ 1-5 */}
            <section className="faq-section pb_90">
                <div className="auto-container">
                    <div className="row clearfix">
                        {/* Image Column */}
                        <div className="col-lg-6 col-md-12 col-sm-12 image-column">
                            <div className="image_block_four">
                                <div className="image-box">
                                    <figure className="image">
                                        <img src="/assets/images/faq/img.webp" alt="COVID-19 Safety Updates" />
                                    </figure>
                                </div>
                            </div>
                        </div>

                        {/* FAQ Column */}
                        <div className="col-lg-6 col-md-12 col-sm-12 content-column mt-3">
                            <div className="content-box">
                                <ul className="accordion-box">
                                    {faqData.slice(0, 5).map((faq, index) => (
                                        <li key={index + 1} className="accordion block">
                                            <div
                                                className={active1 === index + 1 ? "acc-btn active" : "acc-btn"}
                                                onClick={() => handleToggle1(index + 1)}
                                            >
                                                <div className="icon-box"><i className="icon-34"></i></div>
                                                <h3>{faq.question}</h3>
                                            </div>
                                            <div className={active1 === index + 1 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <div>{faq.answer}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Section 2: FAQ 6-10 | FAQ 11-15 */}
            <section className="faq-section pb_90">
                <div className="auto-container">
                    <div className="row clearfix">
                        <div className="col-lg-6 col-md-12 col-sm-12 content-column">
                            <div className="content-box">
                                <ul className="accordion-box">
                                    {faqData.slice(5, 10).map((faq, index) => (
                                        <li key={index + 6} className="accordion block">
                                            <div
                                                className={active2 === index + 6 ? "acc-btn active" : "acc-btn"}
                                                onClick={() => handleToggle2(index + 6)}
                                            >
                                                <div className="icon-box"><i className="icon-34"></i></div>
                                                <h3>{faq.question}</h3>
                                            </div>
                                            <div className={active2 === index + 6 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <div>{faq.answer}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                        <div className="col-lg-6 col-md-12 col-sm-12 content-column">
                            <div className="content-box">
                                <ul className="accordion-box">
                                    {faqData.slice(10, 15).map((faq, index) => (
                                        <li key={index + 11} className="accordion block">
                                            <div
                                                className={active3 === index + 11 ? "acc-btn active" : "acc-btn"}
                                                onClick={() => handleToggle3(index + 11)}
                                            >
                                                <div className="icon-box"><i className="icon-34"></i></div>
                                                <h3>{faq.question}</h3>
                                            </div>
                                            <div className={active3 === index + 11 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <div>{faq.answer}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Still Have Questions CTA */}
            <section className="about-style-three pt_90 pb_90 bg-color-1" style={{ backgroundImage: "url(/assets/images/home/make-an-appointment/make-an-appopintment-bg.webp)" }}>
                <div className="auto-container">
                    <div className="row clearfix align-items-center">
                        <div className="col-lg-8 col-md-12 col-sm-12 content-column">
                            <div className="content_block_one">
                                <div className="content-box">
                                    <div className="sec-title-1 mb_25">
                                        <h2 className="text-white">Still Have Questions?</h2>
                                    </div>
                                    <div className="text-box mb_40">
                                        <p className="text-white">If your question is not listed here, contact Rapharehab directly. Our team is happy to provide personalized guidance.</p>
                                        <p className="text-white">As one of the best physiotherapy clinics in Etobicoke, we are committed to providing transparent, professional, and patient-centered care.</p>
                                    </div>
                                    <div className="btn-box">
                                        <Link href="/contact" className="theme-btn btn-one-new"><span>Contact Us Directly</span></Link>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-4 col-md-12 col-sm-12 image-column">
                            <div className="image_block_four">
                                <div className="image-box mt-3">
                                    <figure>
                                        <img src="/assets/images/faq/img.webp" alt="Still Have Questions" className="img-fluid" />
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}