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


import { teamMembers } from "@/utils/constant.utils";

export default function Home() {

    const [isActive, setIsActive] = useState({
        status: false,
        key: 1,
    })

    const handleToggle = (key) => {
        if (isActive.key === key) {
            setIsActive({
                status: false,
            })
        } else {
            setIsActive({
                status: true,
                key,
            })
        }
    }
    return (
        <>
            <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Caregivers" bannerImage="/assets/images/caregivers/caregivers-banner.webp">
                <section className="feature-section pt_90 pb_90">
                    <div className="shape hide-element">
                        <Image
                            // loader={exportableLoader}
                            src="/assets/images/shape/shape-6.png"
                            alt="Physiotherapy at Rapharehab"
                            fill
                            style={{ objectFit: "cover" }}
                        />
                    </div>


                    <div className="auto-container">
                        <div className="sec-title centred mb_50">
                            <span className="sub-title">Caregivers</span>
                            <h2>We Don’t Just Give Care - <br />We Take Care as Well</h2>
                        </div>
                        <div className="row clearfix">
                            <div className="col-lg-4 col-md-6 col-sm-12 feature-block">
                                <div className="feature-block-one">
                                    <div className="inner-box">
                                        <div className="icon-box"><img src="/assets/images/caregivers/caring.webp" alt="Caring with a smile" /></div>
                                        <h3>Caring with a Smile</h3>
                                        <p>At RaphaRehab, care is not just a service - it’s an experience. Our caregivers bring warmth, positivity, and a genuine smile to every interaction. A simple smile can uplift a day, ease stress, and make healing feel lighter - and that’s exactly the kind of comfort we aim to bring to your home.</p>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-4 col-md-6 col-sm-12 feature-block">
                                <div className="feature-block-one">
                                    <div className="inner-box">
                                        <div className="icon-box"><img src="/assets/images/caregivers/attentive.webp" alt="Attentive listener" /></div>
                                        <h3>Attentive Listener</h3>
                                        <p>Your comfort begins with being heard. Our caregivers take the time to understand your routines, preferences, and expectations. From how you like things arranged to where you enjoy going, we listen closely so we can offer support that truly fits your lifestyle. Every conversation helps us create the perfect caregiver–client match.</p>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-4 col-md-6 col-sm-12 feature-block">
                                <div className="feature-block-one">
                                    <div className="inner-box">
                                        <div className="icon-box"><img src="/assets/images/caregivers/qualified.webp" alt="Qualified" /></div>
                                        <h3>Qualified & Trustworthy</h3>
                                        <p>Whether you need companionship, mobility support, or more complex personal care, our caregivers are trained, experienced, and carefully vetted. We ensure every caregiver meets high standards of safety, professionalism, and compassion - so you receive care that is not only dependable but also meaningful.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="about-style-three pt_90 pb_90 bg-color-1">
                    <div className="pattern-layer hide-element" style={{ backgroundImage: 'url(/assets/images/shape/shape-35.webp)' }}></div>
                    <div className="auto-container">
                        <div className="row clearfix">
                            {/* <div className="col-lg-6 col-md-12 col-sm-12 image-column">
                                <div className="image_block_three">
                                    <div className="image-box">
                                        <figure className="image image-1"><img src="/assets/images/caregivers/right.webp" alt="A professional and friendly care provider" /></figure>
                                        <figure className="image image-2"><img src="/assets/images/caregivers/left.webp" alt="A professional and friendly care provider" /></figure>
                                        <div className="icon-box"><img src="/assets/images/caregivers/rapharehab-web-images.webp" alt="A professional and friendly care provider" /></div>
                                    </div>
                                </div>
                            </div> */}

                            <div className="col-lg-4 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/caregivers/left.webp"
                                                alt="Physiotherapy at Rapharehab"
                                                className="img-fluid"
                                            />
                                        </figure>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-8 col-md-12 col-sm-12 content-column mt-5">
                                <div className="content_block_one">
                                    <div className="content-box">
                                        <div className="sec-title-1 mb_15 mt_15">
                                            <span className="sub-title-1">At RaphaRehab</span>
                                            <h2>Professional, Friendly Care You Can Trust</h2>
                                        </div>
                                        <div className="text-box mb_40">
                                            <p className="text-white">We choose caregivers who bring skill, compassion, and genuine dedication to those who need daily support.</p>
                                        </div>
                                        <div className="btn-box">
                                            <Link href="/contact" className="theme-btn btn-one-new" aria-label="Contact"><span>Become a Caregiver</span></Link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="team-section pb_90 bg-color-1">
                    <div className="auto-container">
                        {/* <div className="sec-title mb_50">
              <span className="sub-title">Meet the Team</span>
              <h2>Meet Our Experienced Therapists <br />for Exceptional Care</h2>
            </div> */}
                        <div className="row clearfix justify-content-center">
                            {teamMembers.map((member, index) => (
                                <div key={member.id} className="col-lg-4 col-md-6 col-sm-12 team-block">
                                    <div
                                        className="team-block-two wow fadeInUp animated"
                                        data-wow-delay={`${index * 200}ms`}
                                        data-wow-duration="1500ms"
                                    >
                                        <div className="inner-box">
                                            <div className="image-box">
                                                <figure className="image">
                                                    <img
                                                        src={member.image}
                                                        alt={member.name}
                                                        style={{ width: "410px", height: "444px", objectFit: "cover" }}
                                                    />
                                                </figure>
                                            </div>
                                            <div className="lower-content">
                                                <h3>
                                                    <Link href={`/our-team-physiotherapy-etobicoke/${member.slug}`} aria-label="Our team physiotherapy etobicoke">{member.name}</Link>
                                                </h3>
                                                <span className="designation">{member.designation}</span>
                                                {/* <ul className="social-links clearfix">
                          {member.socials.map((social, idx) => (
                            <li key={idx}>
                              <Link href={social.link}><i className={social.icon}></i></Link>
                            </li>
                          ))}
                        </ul> */}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>


                <section className="faq-section pt_90 pb_90">
                    <div className="auto-container">
                        <div className="sec-title centred mb_50">
                            <span className="sub-title">RaphaRehab</span>
                            <h2>Have Questions? We’re  <br />Here to Help.</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/caregivers/nanocare.webp"
                                                alt="Physiotherapy at Rapharehab"
                                                className="img-fluid"
                                            />
                                        </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>Why should I apply to RaphaRehab?</h3>
                                            </div>
                                            <div className={isActive.key === 1 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <p>RaphaRehab offers a supportive work environment, flexible schedules, and opportunities to make a meaningful difference in people’s lives. We value compassion, professionalism, and growth and we ensure every caregiver feels respected, trained, and appreciated.</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>Where can I work?</h3>
                                            </div>
                                            <div className={isActive.key === 2 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <p>Our caregivers work across multiple home-care locations, supporting clients who need daily assistance, rehabilitation help, or companionship. You’ll be matched with assignments based on your skills, comfort, and proximity.</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>What types of shifts do you offer?</h3>
                                            </div>
                                            <div className={isActive.key === 3 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <p>We provide a wide range of shift options, including hourly, part-time, full-time, overnight, and 24/7 live-in care. You can choose shifts that suit your schedule and lifestyle.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>

                                        {/* FAQ 4 */}
                                         <li className="accordion 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>Do you hire full-time, part-time, or contract caregivers?</h3>
                                            </div>
                                            <div className={isActive.key === 4 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <p>Yes - we offer all options. Depending on your preference, you can join us as a full-time employee, part-time caregiver, or contracted professional. Our goal is to provide flexibility while maintaining high standards of care.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </Layout>
        </>
    );
}