'use client'
import Layout from "@/components/layout/Layout";
import Link from "next/link";
import { teamMembers } from "@/utils/constant.utils";

export default function Home() {
  return (
    <>
      <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Our Team" bannerImage="/assets/images/our-team/our-team-banner.webp">

        {/* ─── SECTION 1: Intro ─── */}
        <section className="about-style-three pt_90 pb_90">
          <div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/shape/shape-35.webp)' }}></div>
          <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">
                      <span className="sub-title">Physiotherapy Experts in Etobicoke</span>
                      <h2>Meet Our Physiotherapy &amp; Rehabilitation Team in Etobicoke</h2>
                    </div>
                    <div className="text-box">
                      <p className="mb_15" style={{ fontSize: '18px', fontWeight: '500', color: '#102548' }}>Behind every successful recovery is a skilled and dedicated professional team.</p>
                      <p>At Rapharehab, our clinicians bring years of experience, advanced training, and a deep commitment to patient-centered care. As one of the best physiotherapy clinics in Etobicoke, we believe expertise combined with compassion leads to exceptional outcomes.</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/our-team/our-team-meet.webp" alt="Meet Our Team" />
                    </figure>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* ─── SECTION 2: Professionals ─── */}
        <section className="about-style-two pt_90 pb_90 bg-color-1">
          <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">
                      <img src="/assets/images/our-team/our-team-experienced.webp" alt="Experienced Professionals" />
                    </figure>
                  </div>
                </div>
              </div>
              <div className="col-lg-6 col-md-12 col-sm-12 content-column mt-5 mt-lg-0">
                <div className="content_block_one">
                  <div className="content-box ml_30">
                    <div className="sec-title mb_25">
                      <h2 className="text-white">Experienced &amp; Licensed Professionals</h2>
                    </div>
                    <div className="text-box">
                      <p className="text-white mb_20" style={{ fontWeight: '600' }}>Our team includes:</p>
                      <ul className="list-style-one mb_30 clearfix">
                        <li className="text-white">Licensed physiotherapists</li>
                        <li className="text-white">Rehabilitation specialists</li>
                        <li className="text-white">Manual therapy practitioners</li>
                        <li className="text-white">Sports injury therapists</li>
                        <li className="text-white">Post-surgical recovery experts</li>
                      </ul>
                      <p className="text-white mb_20">Each professional at our Etobicoke physiotherapy clinic maintains current certifications and participates in ongoing continuing education to stay updated with modern treatment techniques.</p>
                      <p className="text-white" style={{ borderLeft: '3px solid #fff', paddingLeft: '15px' }}>We believe continuous learning translates into better patient care.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* ─── SECTION 3: Specialties ─── */}
        <section className="feature-section pt_90 pb_90 centred">
          <div className="auto-container">
            <div className="sec-title mb_50">
              <span className="sub-title">Comprehensive Care</span>
              <h2>Expertise Across Multiple Specialties</h2>
              <p className="mt-3" style={{ maxWidth: '800px', margin: '0 auto' }}>This multidisciplinary expertise allows us to provide comprehensive rehabilitation under one roof. Our team has experience treating:</p>
            </div>
            <div className="row clearfix">
              {[
                { title: "Joint dysfunction", icon: "/assets/images/our-team/joint-dysfuntion.webp" },
                { title: "Mobility impairments", icon: "/assets/images/our-team/mobility-impairments.webp" },
                { title: "Workplace injuries", icon: "/assets/images/our-team/workplace-injuries.webp" },
                { title: "Sports injuries", icon: "/assets/images/our-team/sports-injury.webp" },
                { title: "Post-surgical rehabilitation", icon: "/assets/images/our-team/post-surgical-rehabilation.webp" },
                { title: "Chronic back and neck pain", icon: "/assets/images/our-team/chronic-back-neck-pain.webp" },
                { title: "Motor vehicle accident injuries", icon: "/assets/images/our-team/motor-vehicle-accident.webp" },
                { title: "Neurological rehabilitation therapy", icon: "/assets/images/our-team/neurological-rehabilation.webp" },
              ].map((item, idx) => (
                <div key={idx} className="col-lg-3 col-md-6 col-sm-12 feature-block mb_30">
                  <div className="feature-block-one">
                    <div className="inner-box p-4 shadow-sm h-100" style={{ border: '1px solid #f0f0f0', borderRadius: '15px' }}>
                      <div className="icon-box mb-3" style={{ height: '70px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <img src={item.icon} alt={item.title} style={{ width: '60px', height: '60px', objectFit: 'contain' }} />
                      </div>
                      <h3 style={{ fontSize: '18px', fontWeight: '700' }}>{item.title}</h3>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ─── SECTION 4: Philosophy ─── */}
        <section
          className="about-style-two pt_90 pb_90 bg-color-1"
          style={{ position: "relative", overflow: "hidden" }}
        >
          <div
            className="pattern-layer"
            style={{
              opacity: 0.05,
              backgroundImage: "url(/assets/images/shape/shape-35.webp)",
            }}
          ></div>

          <div className="auto-container">
            <div className="row align-items-center clearfix">

              {/* LEFT 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 mb-3">
                      <img
                        src="/assets/images/our-team/our-team-patient.webp"
                        alt="Patient First Philosophy"
                        className="img-fluid rounded"
                      />
                    </figure>
                  </div>
                </div>
              </div>

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

                    {/* Title */}
                    <div className="sec-title mb_20">
                      <h2 className="text-white">A Patient-First Philosophy</h2>
                    </div>

                    {/* Paragraph */}
                    <div className="text-box mb_30">
                      <p
                        className="text-white"
                        style={{ fontSize: "18px", lineHeight: "1.6em" }}
                      >
                        Clinical skill is important — but so is listening. We understand
                        that pain and injury can be frustrating and emotionally
                        challenging. That’s why we create a supportive and encouraging
                        environment.
                      </p>
                    </div>

                    {/* Icon List */}
                    <div className="row">
                      {[
                        { title: "Clear communication", icon: "/assets/images/our-team/clear.webp" },
                        { title: "Thorough explanations", icon: "/assets/images/our-team/thorough.webp" },
                        { title: "Respectful care", icon: "/assets/images/our-team/respectful.webp" },
                        { title: "Realistic goal-setting", icon: "/assets/images/our-team/realistic.webp" },
                        { title: "Motivational support", icon: "/assets/images/our-team/motivational.webp" },
                      ].map((item, idx) => (
                        <div key={idx} className="col-12 mb_15">
                          <div className="d-flex align-items-center">
                            <img
                              src={item.icon}
                              alt={item.title}
                              style={{
                                width: "45px",
                                height: "45px",
                                objectFit: "contain",
                                marginRight: "12px",
                              }}
                            />
                            <h5
                              className="text-white mb-0"
                              style={{ fontSize: "16px", fontWeight: "600" }}
                            >
                              {item.title}
                            </h5>
                          </div>
                        </div>
                      ))}
                    </div>

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

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

        {/* ─── SECTION 5: Collaborative Care ─── */}
        <section className="about-section 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>Collaborative Care Approach</h2>
                    </div>
                    <div className="text-box">
                      <p className="mb_20">At Rapharehab, we believe teamwork improves outcomes. This ensures continuity of care for accident rehab patients and post-surgical recovery cases.</p>
                      <ul className="list-style-one clearfix">
                        <li>Family physicians</li>
                        <li>Orthopedic specialists</li>
                        <li>Surgeons</li>
                        <li>Insurance providers</li>
                        <li>Case managers</li>
                      </ul>
                    </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/our-team/our-team-collabarative.webp" alt="Collaborative Care" />
                    </figure>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* ─── SECTION 6: Individualized Attention ─── */}
        <section className="feature-section pt_90 pb_90 bg-color-1">
          <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">
                      <img src="/assets/images/our-team/our-team-individualized.webp" alt="Individualized Attention" />
                    </figure>
                  </div>
                </div>
              </div>
              <div className="col-lg-6 col-md-12 col-sm-12 content-column mt-5 mt-lg-0">
                <div className="content_block_one">
                  <div className="content-box">
                    <div className="sec-title mb_25">
                      <span className="sub-title" style={{ color: '#bc0000' }}>Quality Over Quantity</span>
                      <h2 className="text-white">Individualized Attention</h2>
                    </div>
                    <div className="text-box">
                      <p className="text-white mb_25">Unlike high-volume clinics, our physiotherapy clinic in Etobicoke emphasizes quality over quantity.</p>
                      <div className="row clearfix">
                        {[
                          "One-on-one treatment sessions",
                          "Personalized progress tracking",
                          "Adjusted therapy plans as needed",
                          "Close supervision during exercises"
                        ].map((text, idx) => (
                          <div key={idx} className="col-md-6 mb_15">
                            <div className="d-flex align-items-center text-white">
                              <i className="icon-21 me-2" style={{ color: '#fff' }}></i>
                              <span style={{ fontSize: '15px' }}>{text}</span>
                            </div>
                          </div>
                        ))}
                      </div>
                      <p className="text-white"> This focused attention accelerates healing and reduces the risk of setbacks.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* ─── SECTION 7: Passion for Performance ─── */}
        <section className="about-style-two pt_90 pb_90">
          <div className="auto-container">
            <div className="sec-title centred mb_50">
              <h2>Passion for Performance &amp; Prevention</h2>
              <p className="mt-3" style={{ maxWidth: '800px', margin: '0 auto' }}>Our team not only treats injuries — we prevent them. Whether you are an athlete, office worker, or senior adult, our therapists tailor strategies to your lifestyle.</p>
            </div>
            <div className="row clearfix">
              {[
                { title: "Movement optimization", icon: "/assets/images/our-team/movement-optimization.webp" },
                { title: "Postural correction", icon: "/assets/images/our-team/postural-correction.webp" },
                { title: "Athletic performance enhancement", icon: "/assets/images/our-team/atheletic-performace-enhancement.webp" },
                { title: "Workplace ergonomics", icon: "/assets/images/our-team/workplace-ergonomics.webp" },
                { title: "Long-term strength development", icon: "/assets/images/our-team/long-term-strength-development.webp" },
              ].map((item, idx) => (
                <div key={idx} className="col-lg-4 col-md-6 col-sm-12 mb_30">
                  <div className="p-4 border rounded shadow-sm hover-shadow transition-all bg-white text-center h-100">
                    <div className="icon-box mb-3" style={{ width: '60px', height: '60px', background: '#f8f8f8', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto' }}>
                      <img src={item.icon} alt={item.title} style={{ width: '40px', height: '40px', objectFit: 'contain' }} />
                    </div>
                    <h3 style={{ fontSize: '18px', fontWeight: '700' }}>{item.title}</h3>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ─── SECTION 8: Community-Focused ─── */}
        <section className="about-style-three pt_90 pb_90 bg-color-1">
          <div className="pattern-layer" style={{ opacity: 0.1, backgroundImage: 'url(/assets/images/shape/shape-35.webp)' }}></div>
          <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 className="text-white">Community-Focused Healthcare</h2>
                    </div>
                    <div className="text-box">
                      <p className="mb-4 text-white">As a trusted Etobicoke physiotherapy clinic, we proudly serve patients from:</p>
                      <h3 className="mb-3 text-white" style={{ fontSize: '20px', fontWeight: '700' }}>We treat every patient like family</h3>
                      <div className="row clearfix">
                        {["Etobicoke", "Toronto", "Mississauga", "Greater Toronto Area"].map((loc, idx) => (
                          <div key={idx} className="col-6 mb_10">
                            <div className="d-flex align-items-center text-white">
                              <i className="icon-21 me-2" style={{ color: '#fff' }}></i>
                              <span style={{ fontWeight: '600' }}>{loc}</span>
                            </div>
                          </div>
                        ))}
                      </div>
                      <p className="text-white">across the GTA. Our team is committed to supporting the health and mobility of our local community.</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 mt-3">
                      <img src="/assets/images/our-team/our-team-community.webp" alt="Community Focused" />
                    </figure>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* ─── SECTION 9: Why Choose ─── */}
        <section className="about-style-two pt_90 pb_90">
          <div className="auto-container">
            <div className="sec-title centred mb_50">
              <h2>Why Choose Rapharehab’s Team?</h2>
            </div>
            <div className="row clearfix justify-content-center">
              {[
                { title: "Advanced clinical knowledge", icon: "/assets/images/our-team/advanced-clinical-challenge.webp" },
                { title: "Compassionate, patient-centered care", icon: "/assets/images/our-team/compassionate.webp" },
                { title: "Clear communication", icon: "/assets/images/our-team/clear-communication.webp" },
                { title: "Customized treatment plans", icon: "/assets/images/our-team/customized-treatment-plans.webp" },
                { title: "Proven rehabilitation outcomes", icon: "/assets/images/our-team/proven-rehabilation-outcomes.webp" },
              ].map((item, idx) => (
                <div key={idx} className="col-lg-2 col-md-4 col-sm-6 mb_30 px-2">
                  <div className="inner-box text-center p-4 h-100" style={{ background: '#fff', border: '1px solid #eee', borderRadius: '15px' }}>
                    <div className="icon-box mb-3" style={{ height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <img src={item.icon} alt={item.title} style={{ width: '40px', height: '40px', objectFit: 'contain' }} />
                    </div>
                    <h4 style={{ fontSize: '14px', fontWeight: '700', lineHeight: '1.4em' }}>{item.title}</h4>
                  </div>
                </div>
              ))}
            </div>
            <p className="text-center mt_20" style={{ fontSize: '18px', fontWeight: '700', color: '#bc0000' }}>Our team’s mission is simple: help you move better, recover faster, and live stronger.</p>
          </div>
        </section>

        {/* ─── SECTION 10: Final CTA ─── */}
        <section className="about-style-three pt_90 pb_90" style={{ backgroundImage: 'linear-gradient(rgba(16,37,72,0.9), rgba(16,37,72,0.9)), url(/assets/images/home/make-an-appointment/make-an-appopintment-bg.webp)', backgroundSize: 'cover', backgroundAttachment: 'fixed' }}>
          <div className="auto-container">
            <div className="row align-items-center clearfix">
              <div className="col-lg-7 col-md-12 col-sm-12 content-column">
                <div className="content_block_one">
                  <div className="content-box">
                    <div className="sec-title mb_25">
                      <h2 className="text-white">Your Recovery Starts With the Right Team</h2>
                    </div>
                    <div className="text-box mb_40">
                      <p className="text-white opacity-75 mb_30">If you are looking for the best physiotherapy clinic in Etobicoke, Rapharehab is here for you. Schedule your appointment today and experience professional rehabilitation delivered by a team that truly cares.</p>
                      <div className="row clearfix">
                        {[
                          "The best physiotherapy clinic in Etobicoke",
                          "Skilled accident rehabilitation specialists",
                          "Trusted Toronto physiotherapy experts",
                          "Experienced Mississauga physiotherapy providers"
                        ].map((text, idx) => (
                          <div key={idx} className="col-md-6 mb_10">
                            <span className="text-white d-flex align-items-center"><i className="icon-21 me-2"></i> {text}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                    <div className="btn-box">
                      <Link href="/contact" className="theme-btn btn-one"><span>Schedule Your Appointment</span></Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* ─── TEAM MEMBERS GRID ─── */}
        <section className="team-section pt_90 pb_90 centred">
          <div className="auto-container">
            <div className="sec-title mb_50">
              <span className="sub-title">Expert Clinicians</span>
              <h2>Meet Our Specialist Team</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}
                            loading="lazy"
                            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>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </Layout>
    </>
  );
}