'use client'
import Layout from "@/components/layout/Layout"
import Link from "next/link"
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 Who We Are</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">
                                <div className="image-shape">
                                    <div className="shape-1 rotate-me" style={{ backgroundImage: 'url(/assets/images/shape/shape-8.png)' }}></div>
                                    <div className="shape-2" style={{ backgroundImage: 'url(/assets/images/shape/shape-33.png)' }}></div>
                                    <div className="shape-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-7.png)' }}></div>
                                    <div className="shape-4" style={{ backgroundImage: 'url(/assets/images/shape/shape-34.png)' }}></div>
                                    <div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
                                </div>
                                <figure className="image image-1"><img src="/assets/images/home/why-trust-us/trust-right.webp" alt="" /></figure>
                                <figure className="image image-2"><img src="/assets/images/home/why-trust-us/trust-left.webp" alt="" /></figure>
                                <div className="icon-box"><img src="/assets/images/home/why-trust-us/icon.webp" alt="" /></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>
                                        <h5>About Us</h5>
                                    </div>
                                    <div className={isActive.key == 1 ? "acc-content current" : "acc-content"}>
                                        <div className="content">
                                            <div className="text"><p>Welcome to Rapha Rehab Physiotherapy & Massage Therapy Clinic in Etobicoke. We provide trusted care through physiotherapy, sports injury rehab, pelvic floor therapy, chiropractic care, massage, acupuncture, osteopathy, orthotics, braces, pain management, workplace injury rehab, naturopathy, and home care services.</p>
                                            </div>
                                        </div>
                                        <div className="btn-box mt-3">
                                            <Link href="/contact" className="theme-btn btn-one"><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>
                                        <h5>Vision</h5>
                                    </div>
                                    <div className={isActive.key == 2 ? "acc-content current" : "acc-content"}>
                                        <div className="content">
                                            <div className="text"><p>To be regarded as the most reliable and effective health care therapy practice backed by the team of innovative healthcare professionals driven by passion.</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>
                                        <h5>Mission</h5>
                                    </div>
                                    <div className={isActive.key == 3 ? "acc-content current" : "acc-content"}>
                                        <div className="content">
                                            <div className="text"><p>Physiotherapy etobicoke is committed to providing quality and innovative health care in a comfortable and professional environment. Our interdisciplinary team will work collaboratively to offer a comprehensive and patient centered approach to ensure the highest level of client experience through our evidence-based clinical practice.</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>
                                        <h5>Why Choose Us</h5>
                                    </div>
                                    <div className={isActive.key == 4 ? "acc-content current" : "acc-content"}>
                                        <div className="content">
                                            <div className="text"><p>Physiotherapy etobicoke is a team of health care professionals working together to help get you better, faster. This helps us in rendering our best possible services to our clients.</p>
                                            </div>
                                        </div>
                                        <div className="btn-box mt-3">
                                            <Link href="/contact" className="theme-btn btn-one"><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>
    );
};