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

export default function Team() {
    const [email, setEmail] = useState("");

    useEffect(() => {
        const user = "bloor";
        const domain = "rapharehab.ca";
        setEmail(`${user}@${domain}`);
    }, []);

    const teamMembers = [
        { name: 'Musculoskeletal Physiotherapy', image: '/assets/images/why-us/img/musculo.webp' },
        { name: 'Sports Physiotherapy', image: '/assets/images/why-us/img/sports.webp' },
        { name: 'Clinical Pilates', image: '/assets/images/why-us/img/clinical-pilates.webp' },
        { name: 'Workplace & Occupational', image: '/assets/images/why-us/img/workplace.webp' },
        { name: 'Sports Rehabilitation', image: '/assets/images/why-us/img/sports-rehabilation.webp' },
        { name: 'Womens health', image: '/assets/images/why-us/img/women-health.webp' },
        { name: 'Back & Neck Pain', image: '/assets/images/why-us/img/back-pain.webp' },
        { name: 'Fitness & Exercise Programs', image: '/assets/images/why-us/img/fitness.webp' },
        { name: 'Pregnancy and Post-natal', image: '/assets/images/why-us/img/pregnancy.webp' },
        { name: 'Headaches & Dizziness', image: '/assets/images/why-us/img/headache.webp' },
        { name: 'Injury Management', image: '/assets/images/why-us/img/injury.webp' },
        { name: 'Pre/Post Surgical Management', image: '/assets/images/why-us/img/surgical.webp' },
    ];

    return (
        <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Why Us" bannerImage="/assets/images/why-us/why-us-banner.webp">
            <section className="team-section pt_90 centred pb-0">
                <div className="pattern-layer">
                    <div className="pattern-1">
                        <Image
                            src="/assets/images/shape/shape-13.webp"
                            alt="Physiotherapy at Rapharehab"
                            fill
                            style={{ objectFit: "cover" }}
                        />
                    </div>

                    <div className="pattern-2">
                        <Image
                            src="/assets/images/shape/shape-14.webp"
                            alt="Physiotherapy at Rapharehab"
                            fill
                            style={{ objectFit: "cover" }}
                        />
                    </div>
                </div>
                <div className="auto-container">
                    <div className="sec-title mb_50">
                        <span className="sub-title">Why Choose Us</span>
                        <h2>We Have Licensed and Experienced Therapists With Specialized Skills and Advanced Clinical Expertise.</h2>
                    </div>
                    <div className="row clearfix">
                        {teamMembers.map((member, index) => (
                            <div key={index} className="col-lg-4 col-md-6 col-sm-12 team-block">
                                <div className="team-block-one 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}`} /></figure>
                                        </div>
                                        <div className="lower-content">
                                            <h3>{member.name}</h3>
                                            <span className="designation">{member.role}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            <section className="testimonial-style-two pb_90 p_relative">
                <div className="pattern-layer">
                    <Image
                        src="/assets/images/shape/shape-19.png"
                        alt="Physiotherapy at Rapharehab"
                        fill
                        style={{ objectFit: "cover" }}
                    />
                </div>
                <div className="auto-container">
                    <div className="row align-items-center">
                        <div className="col-lg-6 col-md-12 col-sm-12 image-column order-2 order-lg-1">
                            <div className="image_block_two">
                                <div className="image-box">
                                    <figure className="image image-1-ho renderd-area"><img src="/assets/images/why-us/back-1.webp" alt="health care professionals" /></figure>
                                    <figure className="image image-2"><img src="/assets/images/why-us/front-1.webp" alt="health care professionals" /></figure>
                                    <div className="icon-box"><img src="/assets/images/why-us/icon-1.webp" alt="health care professionals" /></div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-6 col-md-12 col-sm-12 content-column order-1 order-lg-2 pr_30">
                            <div className="content_block_one">
                                <div className="content-box">
                                    <div className="text-box mb_40">
                                        <ul className="list-style-one clearfix">
                                            <li><b>Team of Health Care Professionals </b> - We are a dedicated team of health care providers working together to help you recover better and faster. Our collaborative approach ensures you receive the highest quality care and the best possible treatment outcomes.</li>
                                            <li><b>Skilled & Diverse Clinical Team </b> - Our team includes Physiotherapists, Massage Therapists, Acupuncture Specialists, and other health professionals. Each brings unique skills to improve your health and deliver effective, evidence-based treatments tailored to your needs.</li>
                                            <li><b>Direct Billing for Insurance</b> - If you have extended health insurance, we provide treatment without asking for upfront payment. We bill your insurance company directly, ensuring a smooth and hassle-free experience.</li>
                                            <li><b>Wide Range of Services</b> - We offer a comprehensive range of treatments, including physiotherapy, sports rehabilitation, acupuncture, manual therapy, MVA rehab, work-related injury care, chronic pain management, and more - helping you recover to your highest potential.</li>
                                            <li><b>Flexible Clinic Hours</b> - Our clinic is conveniently located in Etobicoke and Scarborough, offering flexible hours to serve you better. We provide early morning and late evening appointments to fit your schedule.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section className="testimonial-style-two p_relative pt-5">
                <div className="auto-container">
                    <div className="row align-items-center flex-row-reverse">
                        <div className="col-lg-6 col-md-12 col-sm-12 image-column order-2 order-lg-1">
                            <div className="image_block_two">
                                <div className="image-box">
                                    <figure className="image image-1-ho renderd-area"><img src="/assets/images/why-us/back-2.webp" alt="Top-Notch Treatment " /></figure>
                                    <figure className="image image-2 rowImage"><img src="/assets/images/why-us/front-2.webp" alt="Top-Notch Treatment " /></figure>
                                    <div className="icon-box"><img src="/assets/images/why-us/icon-2.webp" alt="Top-Notch Treatment" /></div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-6 col-md-12 col-sm-12 content-column order-1 order-lg-2">
                            <div className="content_block_one pr_30">
                                <div className="content-box">
                                    <div className="text-box mb_40">
                                        <ul className="list-style-one clearfix">
                                            <li><b>Top-Notch Treatment</b> – Under our care, you’re placed in a supportive and comfortable environment designed to help you feel at ease while receiving effective treatment for your concerns.</li>
                                            <li><b>Personalized Treatment Plan</b> – We provide one-on-one care with a skilled therapist who creates a tailored plan specific to your needs, helping you recover faster and more efficiently.</li>
                                            <li><b>We Listen & Take Time</b> – From your very first inquiry, we take the time to understand you properly. We listen, ask the right questions, and work with you to identify the root cause of your problem.</li>
                                            <li><b>Private Treatment Rooms</b> – All our treatment rooms are fully equipped, clean, and designed to provide a private and comfortable therapy experience.</li>
                                            <li><b>Strong Network of Health Professionals</b> – We collaborate with a trusted network of healthcare experts to ensure you receive the right diagnosis, guidance, and treatment for your condition.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section className="video-section p_relative">
                <div className="bg-layer parallax-bg" data-parallax='{"y": 100}'>
                    <Image
                        src="/assets/images/why-us/bg.webp"
                        alt=" Physiotherapy at Rapharehab "
                        fill
                        style={{ objectFit: "cover" }}
                    />
                </div>

                <figure className="image-layer"><img src="/assets/images/why-us/img.webp" alt="Physiotherapy at Rapharehab" /></figure>
                <div className="auto-container">
                    <div className="inner-box">
                        <div className="shape new-arrow">
                            <Image
                                src="/assets/images/shape/shape-17.png"
                                alt="Physiotherapy at Rapharehab"
                                fill
                                style={{ objectFit: "cover" }}
                            />
                        </div>

                        <p className="inner-box-new-color">
                            Rapharehab provides exceptional physiotherapy care for patients in Etobicoke and Scarborough with personalized treatment plans designed to meet your specific needs. Whether you are experiencing pain or recovering from a recent injury, our dedicated physiotherapists will help you return to the activities you enjoy and love. Contact us today at 647-722-3434 or email {email ? (
                                <Link href={`mailto:${email}`} style={{ color: "inherit" }}>{email}</Link>
                            ) : (
                                <span>Loading...</span>
                            )} to schedule your appointment or book a consultation.
                        </p>
                        <div className="btn-box mt-4">
                            <Link href="/contact" className="theme-btn btn-one-blue" aria-label="Make an appointment">
                                <span>Make an Appointment</span>
                            </Link>
                        </div>
                    </div>
                </div>
            </section>
        </Layout>
    );
}