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

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 (
        <>
            <style>
                {`
                    @media (max-width: 425px) {
                        .feature-block {
                            display: flex !important;
                            justify-content: center !important;
                            width: 100% !important;
                        }
                        .feature-block .inner-box {
                            flex-direction: column !important;
                            text-align: center !important;
                            padding: 20px !important;
                            border-radius: 20px !important;
                            justify-content: center !important;
                            margin: 0 auto !important;
                            width: 90% !important;
                        }
                        .feature-block .icon-box-small {
                            margin-right: 0 !important;
                            margin-bottom: 15px !important;
                            margin-left: 0 !important;
                        }
                        .feature-block h3 {
                            text-align: center !important;
                            width: 100% !important;
                        }
                    }
                `}
            </style>
            {/* Section 1: Hero / Introduction */}
            <section className="about-style-three pt_90 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_block_one">
                                <div className="content-box">
                                    <div className="sec-title mb_25">
                                        <h2>Caregiver Support & Rehabilitation Guidance in Etobicoke</h2>
                                    </div>
                                    <div className="text-box">
                                        <p className="mt-3">At Rapha Rehab, we recognize that recovery is not just about the patient — it’s also about the people who support them. Caregivers play an essential role in helping individuals recover from injury, surgery, chronic illness, or mobility challenges.</p>
                                        <p className="mt-3">As a leading physiotherapy clinic in Etobicoke, we are committed to supporting both patients and caregivers with practical guidance, education, and professional rehabilitation strategies.</p>
                                        <p className="mt-3">Caring for a loved one can be rewarding — but it can also be physically and emotionally demanding. Our goal is to make the process easier, safer, and more effective for everyone involved.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <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/caregivers/caregiver-supporting.webp" alt="Caregiver Supporting" />
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Role of Caregivers Section */}
            <section className="feature-section pt_90 pb_90 bg-color-1">
                <div className="auto-container">
                    <div className="sec-title centred mb_50">
                        <h2 className="text-white">The Role of Caregivers in Rehabilitation</h2>
                        <p className="mt_20 text-white" style={{ fontSize: '18px', fontWeight: '500' }}>Caregivers often assist with:</p>
                    </div>
                    <div className="row clearfix justify-content-center">
                        {[
                            { title: "Mobility and transfers", icon: "/assets/images/caregivers/role-of-caregiver-icons-mobility.webp", color: "#eef2ff" },
                            { title: "Daily living activities", icon: "/assets/images/caregivers/role-of-caregiver-icons-daily.webp", color: "#fff1f2" },
                            { title: "Exercise support", icon: "/assets/images/caregivers/role-of-caregiver-icons-exercise.webp", color: "#f0f9ff" },
                            { title: "Medication reminders", icon: "/assets/images/caregivers/role-of-caregiver-icons-medication.webp", color: "#fff7ed" },
                            { title: "Emotional encouragement", icon: "/assets/images/caregivers/role-of-caregiver-icons-emotional.webp", color: "#fefce8" },
                            { title: "Appointment coordination", icon: "/assets/images/caregivers/role-of-caregiver-icons-appointment.webp", color: "#f0fdf4" }
                        ].map((item, index) => (
                            <div key={index} className="col-lg-3 col-md-4 col-sm-6 feature-block d-flex">
                                <div className="feature-block-one w-100 mb-2">
                                    <div className="inner-box d-flex align-items-center p-3 rounded-pill shadow-sm h-100" style={{ minHeight: '80px', border: '1px solid rgba(0,0,0,0.05)', backgroundColor: item.color }}>
                                        <div className="icon-box-small me-3" style={{ width: '55px', height: '55px', flexShrink: 0, marginLeft: '5px' }}>
                                            <img src={item.icon} alt={item.title} className="rounded-circle" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                                        </div>
                                        <h3 className="m-0 text-start" style={{ fontSize: '15px', fontWeight: '600', color: '#101A30', lineHeight: '1.2' }}>{item.title}</h3>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                    <div className="sec-title centred mt_30">
                        <p className="text-white" style={{ maxWidth: '900px', margin: '0 auto' }}>Without proper training, caregivers may risk physical strain, burnout, or injury. That’s why professional guidance from a rehabilitation clinic in Etobicoke can make a significant difference. At Rapha Rehab, we provide caregiver education as part of our comprehensive physiotherapy services.</p>
                    </div>
                </div>
            </section>

            {/* Section 3: Education & Training (Content | Image) */}
            <section className="about-style-two pt_90 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_block_one">
                                <div className="content-box">
                                    <div className="sec-title mb_25">
                                        <h2>Education & Training for Safe Assistance</h2>
                                    </div>
                                    <div className="text-box">
                                        <p>One of the biggest challenges caregivers face is safely helping patients move without causing injury to themselves or the patient. We provide hands-on training in:</p>
                                        <ul className="list-style-one mb_30 clearfix">
                                            <li>Safe lifting techniques</li>
                                            <li>Proper transfer methods (bed to chair, chair to standing)</li>
                                            <li>Use of mobility aids</li>
                                            <li>Fall prevention strategies</li>
                                            <li>Proper posture while assisting</li>
                                            <li>Home exercise supervision</li>
                                        </ul>
                                        <p>This guidance reduces caregiver strain and improves patient safety.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <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/caregivers/caregiver-education.webp" alt="Education & Training" />
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>



            {/* Supporting Recovery at Home */}
            <section className="about-style-two pb_90">
                <div className="auto-container">
                    <div className="row align-items-center clearfix">
                        <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 mb-3">
                                        <img src="/assets/images/caregivers/caregiver-support.webp" alt="Supporting Recovery" />
                                    </figure>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-6 col-md-12 col-sm-12 content-column">
                            <div className="content_block_one">
                                <div className="content-box">
                                    <div className="sec-title mb_25">
                                        <h2>Supporting Recovery at Home</h2>
                                    </div>
                                    <div className="text-box">
                                        <p>Recovery doesn’t stop when a therapy session ends. At-home support is critical for consistent improvement.
                                        </p>
                                        <p>As part of our Etobicoke physiotherapy services, we teach caregivers how to:</p>
                                        <ul className="list-style-one mb_30 clearfix">
                                            <li>Assist with prescribed exercises</li>
                                            <li>Monitor pain or swelling</li>
                                            <li>Encourage safe movement</li>
                                            <li>Maintain proper body alignment</li>
                                            <li>Recognize warning signs requiring professional attention</li>
                                        </ul>
                                        <p>When caregivers feel confident in what they’re doing, patients recover faster and with greater confidence.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Preventing Caregiver Burnout */}
            <section className="feature-section pt_90 pb_90 bg-color-1">
                <div className="auto-container">
                    <div className="row text-center">
                        <div className="col-12">
                            <div className="sec-title mb_45">
                                <h2 className="text-white">Preventing Caregiver Burnout</h2>
                                <p className="text-white">Caregiving can be physically exhausting and emotionally draining.</p>
                            </div>
                        </div>
                    </div>
                    <div className="row align-items-center clearfix">

                        {/* LEFT SIDE CONTENT */}
                        <div className="col-lg-6 col-md-12 col-sm-12 content-column">

                            <h5 className="text-white mb_15">
                                Many caregivers experience:
                            </h5>

                            {[
                                "Back pain",
                                "Shoulder strain",
                                "Fatigue",
                                "Stress",
                                "Sleep disruption"
                            ].map((item, index) => (
                                <div key={index} className="d-flex align-items-center mb_10">
                                    <i
                                        className="fa fa-check"
                                        style={{ fontSize: "18px", color: "#fff", marginRight: "10px" }}
                                    ></i>
                                    <p className="text-white mb-0">{item}</p>
                                </div>
                            ))}

                            <p className="text-white mt_30 mb_20">
                                At Rapha Rehab, we also care for caregivers. If you are experiencing
                                pain due to caregiving responsibilities, our physiotherapy clinic in
                                Etobicoke can assess and treat your musculoskeletal strain.
                            </p>

                            <h5 className="text-white mb_15">
                                We may recommend:
                            </h5>

                            {[
                                "Manual therapy",
                                "Posture correction exercises",
                                "Strengthening programs",
                                "Stress-reducing movement strategies",
                                "Ergonomic adjustments at home"
                            ].map((item, index) => (
                                <div key={index} className="d-flex align-items-center mb_10">
                                    <i
                                        className="fa fa-check"
                                        style={{ fontSize: "18px", color: "#fff", marginRight: "10px" }}
                                    ></i>
                                    <p className="text-white mb-0">{item}</p>
                                </div>
                            ))}

                            <p
                                className="text-white mt_30"
                                style={{ fontWeight: "600", fontSize: "17px" }}
                            >
                                Healthy caregivers provide better support.
                            </p>

                        </div>

                        {/* RIGHT SIDE IMAGE */}
                        <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 mt-3">
                                        <img
                                            src="/assets/images/caregivers/caregiver-preventing.webp"
                                            alt="Preventing Caregiver Burnout"
                                            className="img-fluid rounded"
                                        />
                                    </figure>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>

            {/* Home Safety & Injury Prevention Section */}
            <section className="about-style-two pt_90 pb_90">
                <div className="auto-container">
                    <div className="row align-items-center clearfix">
                        {/* Left Side: Visual Element */}
                        <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 mb-3">
                                        <img src="/assets/images/caregivers/caregiver-home-safety.webp" alt="Home Safety" />
                                    </figure>
                                </div>
                            </div>
                        </div>

                        {/* Right Side: Structured List */}
                        <div className="col-lg-6 col-md-12 col-sm-12 content-column">
                            <div className="content_block_one ps-lg-5">
                                <div className="content-box">
                                    <div className="sec-title mb_40">
                                        <h2>Home Safety & <br /><span style={{ color: '#bc0000' }}>Injury Prevention</span></h2>
                                        <p>Our rehabilitation team can provide recommendations to make your home environment safer, including:</p>
                                    </div>
                                    <div className="inner-box p_relative">
                                        {/* Connector Line */}
                                        <div className="line p_absolute" style={{ left: '30px', top: '40px', bottom: '95px', width: '2px', background: 'rgba(188, 0, 0, 0.1)', zIndex: 0 }}></div>

                                        {[
                                            { title: "Removing tripping hazards", icon: "/assets/images/caregivers/home-safety-icons-removing.png" },
                                            { title: "Installing grab bars", icon: "/assets/images/caregivers/home-safety-icons-installing.png" },
                                            { title: "Improving lighting", icon: "/assets/images/caregivers/home-safety-icons-improving.png" },
                                            { title: "Adjusting furniture height", icon: "/assets/images/caregivers/home-safety-icons-adjusting.png" },
                                            { title: "Selecting supportive mattresses or chairs", icon: "/assets/images/caregivers/home-safety-icons-selecting.png" }
                                        ].map((item, index) => (
                                            <div key={index} className="d-flex align-items-start mb_35 p_relative" style={{ zIndex: 1 }}>
                                                <div className="icon-box-circle me-4 d-flex align-items-center justify-content-center" style={{ width: '62px', height: '62px', borderRadius: '50%', border: '2px solid #bc0000', background: '#fff', flexShrink: 0, padding: '12px' }}>
                                                    <img src={item.icon} alt={item.title} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
                                                </div>
                                                <div className="text-box pt-2">
                                                    <h3 style={{ fontSize: '20px', fontWeight: '700', color: '#101A30', marginBottom: '5px' }}>{item.title}</h3>
                                                    <p style={{ margin: 0, color: '#666' }}>{item.desc}</p>
                                                </div>
                                            </div>
                                        ))}
                                        <p>These small adjustments significantly reduce fall risks and prevent secondary injuries.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Section 5: Specialized & Emotional Support Cards */}
            <section className="about-section pb_90">
                <div className="auto-container">
                    <div className="row clearfix">
                        {/* Neurological Support - Red Theme */}
                        <div className="col-lg-6 col-md-12 col-sm-12 content-column mb-4">
                            <div className="content_block_one h-100">
                                <div className="inner-box h-100 p-5 rounded shadow-lg" style={{ backgroundColor: '#bc0000' }}>
                                    <div className="sec-title mb_25">
                                        <h2 className="text-white" style={{ fontSize: '28px' }}>Supporting Neurological & Post-Surgical Patients</h2>
                                    </div>
                                    <div className="text-box">
                                        <p className="text-white mb_20">Caregivers assisting individuals recovering from:</p>
                                        <ul className="list-style-one clearfix text-white mb_30">
                                            <li className="text-white d-flex align-items-center mb-3">
                                                Stroke
                                            </li>
                                            <li className="text-white d-flex align-items-center mb-3">
                                                Spinal cord injury
                                            </li>
                                            <li className="text-white d-flex align-items-center mb-3">
                                                Joint replacement surgery
                                            </li>
                                            <li className="text-white d-flex align-items-center mb-3">
                                                Fractures
                                            </li>
                                            <li className="text-white d-flex align-items-center mb-3">
                                                Chronic conditions
                                            </li>
                                        </ul>
                                        <p className="text-white" style={{ borderTop: '1px solid rgba(255,255,255,0.2)', paddingTop: '20px' }}>
                                            Our Etobicoke rehabilitation clinic provides structured training to ensure safe mobility assistance and gradual independence development.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Emotional Support - Blue Theme */}
                        <div className="col-lg-6 col-md-12 col-sm-12 content-column mb-4">
                            <div className="content_block_one h-100">
                                <div className="inner-box h-100 p-5 rounded shadow-lg bg-color-1">
                                    <div className="sec-title mb_25">
                                        <h2 className="text-white" style={{ fontSize: '28px' }}>Communication & Emotional Support</h2>
                                    </div>
                                    <div className="text-box">
                                        <p className="text-white mb_20">Recovery can be emotionally challenging. Patients may experience frustration, fear, or anxiety about movement.</p>
                                        <p className="text-white mb_20">We educate caregivers on:</p>
                                        <ul className="list-style-one clearfix text-white mb_30">
                                            <li className="text-white d-flex align-items-center mb-3">
                                                Encouraging positive reinforcement
                                            </li>
                                            <li className="text-white d-flex align-items-center mb-3">
                                                Managing pain-related anxiety
                                            </li>
                                            <li className="text-white d-flex align-items-center mb-3">
                                                Promoting independence safely
                                            </li>
                                            <li className="text-white d-flex align-items-center mb-3">
                                                Setting realistic recovery goals
                                            </li>
                                        </ul>
                                        <p className="text-white" style={{ borderTop: '1px solid rgba(255,255,255,0.2)', paddingTop: '20px' }}>
                                            Emotional support significantly impacts physical healing outcomes.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Section 6: Why Choose Us (Numbered List Layout) */}
            <section className="about-style-two pt_90 pb_90 bg-color-1" style={{ backgroundColor: '#102548' }}>
                <div className="auto-container">
                    <div className="row clearfix">
                        {/* Right Side: Title & Image */}
                        <div className="col-lg-6 col-md-12 col-sm-12 content-column">
                            <div className="content_block_one ps-lg-5">
                                <div className="content-box">
                                    <div className="sec-title mb_25">
                                        <h2 className="text-white">Why Choose Rapha Rehab for <br />Caregiver Support?</h2>
                                    </div>
                                    <div className="text-box mb_40">
                                        <p className="text-white">As a trusted physiotherapy clinic in Etobicoke, we offer:</p>
                                        <p className="mt_10 text-white" style={{ fontWeight: '600' }}>
                                            We believe rehabilitation works best when caregivers are empowered, educated, and supported.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/* Left Side: Check List */}
                        <div className="col-lg-6 col-md-12 col-sm-12 content-column">
                            <div className="content_block_one">
                                <div className="inner-box">
                                    {[
                                        { title: "Personalized rehabilitation plans" },
                                        { title: "Family-inclusive therapy sessions" },
                                        { title: "Education-driven care" },
                                        { title: "Insurance assistance" },
                                        { title: "Accessible location for Toronto and Mississauga residents" }
                                    ].map((item, index) => (
                                        <div
                                            key={index}
                                            className="d-flex align-items-center mb-4 pb-3"
                                            style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}
                                        >
                                            {/* Check Icon */}
                                            <div
                                                className="icon-box me-3 d-flex align-items-center justify-content-center"
                                                style={{
                                                    width: "40px",
                                                    height: "40px",
                                                    borderRadius: "50%",
                                                    background: "rgba(255,255,255,0.1)",
                                                    border: "1px solid rgba(255,255,255,0.2)",
                                                }}
                                            >
                                                <i
                                                    className="fas fa-check"
                                                    style={{ color: "#fff", fontSize: "14px" }}
                                                ></i>
                                            </div>

                                            <div className="text-box">
                                                <h3
                                                    className="text-white"
                                                    style={{ fontSize: "18px", fontWeight: "600", margin: 0 }}
                                                >
                                                    {item.title}
                                                </h3>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Section 7: Final CTA */}
            <section className="about-style-three pt_90 pb_90">
                <div className="auto-container">
                    <div className="row clearfix align-items-center">
                        <div className="col-lg-12 content-column">
                            <div className="content_block_one">
                                <div className="content-box">
                                    <div className="sec-title mb_25">
                                        <h2>Partner With Us in Recovery</h2>
                                    </div>
                                    <div className="text-box mb_40">
                                        <p>If you are caring for a loved one recovering from injury or surgery, we invite you to connect with our team. Together, we can create a safe, effective recovery plan that supports both patient and caregiver.</p>
                                        <p className="mt-3">Contact Rapha Rehab today to learn how our Etobicoke physiotherapy clinic can guide you through every stage of rehabilitation.</p>
                                    </div>
                                    <div className="btn-box">
                                        <Link href="/contact" className="theme-btn btn-one"><span>Contact Rapha Rehab Today</span></Link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}