'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 });
    }
  };

  const faqs = [
    {
      id: 1,
      question: "Where can I find physiotherapy clinics near me with good reviews?",
      answer:
        "Rapharehab is a highly rated physiotherapy clinic trusted by patients for personalized treatment, expert therapists, and excellent results. You can check our Google reviews to see real patient success stories.",
      section: 1,
    },
    {
      id: 2,
      question: "Which physiotherapy services accept my health insurance in Canada?",
      answer:
        "Rapharehab accepts most major Canadian insurance plans. We also provide direct billing for many providers, making your treatment experience smooth and hassle-free.",
      section: 1,
    },
    {
      id: 3,
      question: "What are the costs for physiotherapy sessions in this area?",
      answer:
        "At Rapharehab, our physiotherapy fees are competitively priced and follow industry standards. Pricing depends on the type of treatment and session duration. You can contact our reception for a clear cost breakdown.",
      section: 1,
    },
    {
      id: 4,
      question: "Are there physiotherapy centers offering home visit services?",
      answer:
        "Yes. Rapharehab offers home physiotherapy sessions for patients who prefer treatment at home or have mobility challenges. Home care bookings can be scheduled online or by phone.",
      section: 1,
    },
    {
      id: 5,
      question: "Which physiotherapy clinics specialize in sports injury recovery?",
      answer:
        "Rapharehab provides specialized sports injury physiotherapy, helping athletes recover faster through tailored rehab programs, strengthening exercises, and advanced technology treatments.",
      section: 1,
    },
    {
      id: 6,
      question: "Where can I book an online physiotherapy consultation?",
      answer:
        "You can easily book a virtual physiotherapy consultation directly on Rapharehab.ca. Our online physiotherapy sessions are ideal for assessments, follow-ups, and exercise guidance.",
      section: 1,
    },
    {
      id: 7,
      question: "Do any physiotherapy providers offer packages or discounts for multiple sessions?",
      answer:
        "Rapharehab offers cost-effective treatment packages for patients needing multiple physiotherapy sessions. Contact our team to learn about current package discounts and wellness plans.",
      section: 1,
    },
    {
      id: 8,
      question: "Which physiotherapy clinics have flexible appointment hours on weekends?",
      answer:
        "Rapharehab provides flexible appointments, including extended hours on weekdays and availability on weekends, making it easy for working professionals and busy families to get care.",
      section: 2,
    },
    {
      id: 9,
      question: "Where can I find physiotherapy services that use advanced treatment technology?",
      answer:
        "Rapharehab uses modern physiotherapy technologies such as electrotherapy, ultrasound therapy, laser therapy, and biomechanical assessments to deliver faster and more effective recovery.",
      section: 2,
    },
    {
      id: 10,
      question: "Are there physiotherapy clinics with bilingual staff in my city?",
      answer:
        "Yes. Rapharehab has friendly bilingual staff, making communication easy and comfortable for patients from diverse backgrounds.",
      section: 2,
    },
    {
      id: 11,
      question: "Which clinics offer specialized physiotherapy for post-surgery rehabilitation?",
      answer:
        "Rapharehab offers structured post-surgical rehabilitation programs for knee, hip, shoulder, spine, and orthopedic surgeries to help patients regain strength, mobility, and confidence.",
      section: 2,
    },
    {
      id: 12,
      question: "Where can I find pediatric physiotherapy services nearby?",
      answer:
        "Rapharehab provides pediatric physiotherapy for children dealing with developmental delays, injuries, or muscle weakness. Our therapists use gentle, age-appropriate treatment plans.",
      section: 2,
    },
    {
      id: 13,
      question: "Are there mobile apps to schedule physiotherapy appointments in Canada?",
      answer:
        "Rapharehab supports online appointment scheduling through our website and integrated booking tools. You can book, reschedule, or request a consultation instantly.",
      section: 2,
    },
    {
      id: 14,
      question: "Which physiotherapy providers have the shortest wait times for new patients?",
      answer:
        "Rapharehab ensures minimal wait times for new patients. We prioritize fast appointments so you can begin treatment without unnecessary delays.",
      section: 2,
    },
    {
      id: 15,
      question: "Where can I find physiotherapy clinics that accept workers’ compensation claims?",
      answer:
        "Rapharehab accepts WSIB and workers’ compensation claims. Our team guides you through the paperwork and provides proper treatment documentation for smooth claim processing.",
      section: 2,
    }
  ];

  const sectionOneFaqs = faqs.filter((f) => f.section === 1);
  const sectionTwoFaqs = faqs.filter((f) => f.section === 2);

  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>Need Help?<br /> Find Answers Here</h2>
          </div>

          <div className="row align-items-center clearfix">
            <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/home/faq-2.webp"
                      alt="Do You Have Any Physiotherapy Questions"
                      className="img-fluid"
                      style={{objectFit: "cover" }}
                    />
                  </figure>
                </div>
              </div>
            </div>

            <div className="col-lg-6 col-md-12 col-sm-12 content-column">
              <div className="content-box">
                <ul className="accordion-box">
                  {sectionOneFaqs.map((faq) => (
                    <li className="accordion block" key={faq.id}>
                      <div
                        className={isActive.key === faq.id ? "acc-btn active" : "acc-btn"}
                        onClick={() => handleToggle(faq.id)}
                      >
                        <div className="icon-box"><i className="icon-34"></i></div>
                        <h3>{faq.question}</h3>
                      </div>
                      <div className={isActive.key === faq.id ? "acc-content current" : "acc-content"}>
                        <div className="content">
                          <div className="text">
                            <p>{faq.answer}</p>
                          </div>
                        </div>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="faq-section pb_90">
        <div className="auto-container">
          <div className="row align-items-center clearfix">
            <div className="col-lg-6 col-md-12 col-sm-12 content-column">
              <div className="content-box">
                <ul className="accordion-box">
                  {sectionTwoFaqs.map((faq) => (
                    <li className="accordion block" key={faq.id}>
                      <div
                        className={isActive.key === faq.id ? "acc-btn active" : "acc-btn"}
                        onClick={() => handleToggle(faq.id)}
                      >
                        <div className="icon-box"><i className="icon-34"></i></div>
                        <h3>{faq.question}</h3>
                      </div>
                      <div className={isActive.key === faq.id ? "acc-content current" : "acc-content"}>
                        <div className="content">
                          <div className="text">
                            <p>{faq.answer}</p>
                          </div>
                        </div>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            <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/home/faq-1.webp"
                      alt="Do You Have Any Physiotherapy Questions"
                      className="img-fluid"
                      style={{objectFit: "cover" }}
                    />
                  </figure>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}