'use client'
import Layout from "@/components/layout/Layout"
import Link from "next/link"
import Image from "next/image";


import { useState } from 'react'
export default function FaqSection() {
    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 sec-pad">
            {/* <figure className="image-layer"><img src="assets/images/resource/faq-1.png" alt="" /></figure> */}
            <div className="auto-container">
                <div className="sec-title centred mb_50">
                    <span className="sub-title">Discover Why We’re Different</span>
                    <h2>Why Patients Trust Us</h2>
                </div>
                <div className="row clearfix d-flex align-items-center">
                    <div className="col-xl-6 col-lg-12 col-sm-12 image-column">
                        <div className="image_block_three">
                            <div className="image-box new-icon-box-faq">
                                <div className="image-shape">
                                    <div className="shape-1 rotate-me">
                                        <Image
                                            // loader={exportableLoader}
                                            src="/assets/images/shape/shape-8.webp"
                                            alt="Physiotherapy at Rapharehab"
                                            fill
                                            style={{ objectFit: "cover" }}
                                        />
                                    </div>

                                    <div className="shape-2">
                                        <Image
                                            // loader={exportableLoader}
                                            src="/assets/images/shape/shape-33.png"
                                            alt="Physiotherapy at Rapharehab"
                                            fill
                                            style={{ objectFit: "cover" }}
                                        />
                                    </div>

                                    {/* <div className="shape-3">
  <Image
    src="/assets/images/shape/shape-7.webp"
    alt="Physiotherapy at Rapharehab"
    fill
    style={{ objectFit: "cover" }}
  />
</div> */}

                                    <div className="shape-4">
                                        <Image
                                            // loader={exportableLoader}
                                            src="/assets/images/shape/shape-34.png"
                                            alt="Physiotherapy at Rapharehab"
                                            fill
                                            style={{ objectFit: "cover" }}
                                        />
                                    </div>

                                    <div className="shape-5">
                                        <Image
                                            // loader={exportableLoader}
                                            src="/assets/images/shape/shape-11.webp"
                                            alt="Physiotherapy at Rapharehab"
                                            fill
                                            style={{ objectFit: "cover" }}
                                        />
                                    </div>

                                </div>
                                <figure className="image image-1 image-new-align"><img src="/assets/images/home/why-trust-us/trust-right.webp" alt="Physiotherapy at Rapharehab" /></figure>
                                <figure className="image image-2 imge-new-element"><img src="/assets/images/home/why-trust-us/trust-left.webp" alt="Physiotherapy at Rapharehab" /></figure>
                                <div className="icon-box"><img src="/assets/images/home/why-trust-us/icon.webp" alt="Physiotherapy at Rapharehab" /></div>
                            </div>
                        </div>
                    </div>
                    <div className="col-xl-6 col-lg-12 col-md-12 content-column">
                        <div className="content-box">

                            <ul className="accordion-box">
                                <li className="accordion block active-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>About Us</h3>
                                    </div>
                                    <div className={isActive.key == 1 ? "acc-content current" : "acc-content"}>
                                        <div className="content">
                                            <div className="text"><p>Welcome to <b>Rapha Rehab, the Best Physiotherapy & Massage Therapy Clinic in Etobicoke</b>, your trusted destination for complete rehabilitation and pain management.
                                                We offer personalized care through physiotherapy, sports injury rehab, pelvic floor therapy, chiropractic care, osteopathy, acupuncture, massage therapy, orthotics, and home care physiotherapy - helping you move better, recover faster, and live pain-free.</p>
                                            </div>
                                        </div>
                                        <div className="btn-box mt-3">
                                            <Link href="/contact" className="theme-btn btn-one" aria-label="Book Appointment"><span>Book Appointment</span></Link>
                                        </div>
                                    </div>
                                </li>
                                <li className="accordion block active-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>Vision</h3>
                                    </div>
                                    <div className={isActive.key == 2 ? "acc-content current" : "acc-content"}>
                                        <div className="content">
                                            <div className="text"><p>To be recognized as Etobicoke’s most trusted physiotherapy and rehabilitation clinic, delivering innovative, compassionate, and effective care through a team of passionate healthcare professionals dedicated to improving lives.</p>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li className="accordion block active-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>Mission</h3>
                                    </div>
                                    <div className={isActive.key == 3 ? "acc-content current" : "acc-content"}>
                                        <div className="content">
                                            <div className="text"><p>At <b>Rapha Rehab Physiotherapy in Etobicoke</b>, our mission is to provide innovative, evidence-based healthcare in a supportive and professional environment.
                                                We work as an <b>interdisciplinary team</b> to deliver comprehensive, patient-centered treatments that restore mobility, relieve pain, and enhance quality of life through compassionate care and clinical excellence.</p>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li className="accordion block active-block">
                                    <div className={isActive.key == 4 ? "acc-btn active" : "acc-btn"} onClick={() => handleToggle(4)}>
                                        <div className="icon-box"><i className="icon-34"></i></div>
                                        <h3>Why Choose Us</h3>
                                    </div>
                                    <div className={isActive.key == 4 ? "acc-content current" : "acc-content"}>
                                        <div className="content">
                                            <div className="text"><p>At <b>Rapha Rehab, the Best Physiotherapy in Etobicoke</b>, our dedicated team of healthcare professionals works together to deliver faster recovery, lasting pain relief, and personalized care, helping you move better and feel stronger every day.
                                            </p>
                                            </div>
                                        </div>
                                        <div className="btn-box mt-3">
                                            <Link href="/contact" className="theme-btn btn-one" aria-label="Book Appointment"><span>Book Appointment</span></Link>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {/* <div className="col-lg-6 col-md-12 col-sm-12 image-column">
                        <div className="image_block_four">
                            <div className="image-box ml_30">
                                <div className="image-shape" style={{ backgroundImage: 'url(assets/images/shape/shape-22.png)' }}></div>

                            </div>
                        </div>
                    </div> */}
                </div>
            </div>
        </section>
    );
};