'use client'
import Layout from "@/components/layout/Layout"
import Link from "next/link"
import { useState } from 'react'
import { teamMembers } from "@/utils/constant.utils";
import CounterUp from "@/components/elements/CounterUp";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import Image from "next/image";

const swiperOptions = {
  modules: [Autoplay, Pagination, Navigation],
  slidesPerView: 1,
  spaceBetween: 0,
  loop: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
};

const images = [
  '/assets/images/BrandPartners/1.png',
  '/assets/images/BrandPartners/2.png',
  '/assets/images/BrandPartners/3.png',
  '/assets/images/BrandPartners/4.png',
  '/assets/images/BrandPartners/5.png',
  '/assets/images/BrandPartners/6.png',
];

export default function Home() {
  const [isOpen, setOpen] = useState(false)
  const [activeIndex, setActiveIndex] = useState(null);

  const toggleReadMore = (index) => {
    setActiveIndex(activeIndex === index ? null : index);
  };



  const contents = [
    {
      title: "Mission",
      img: "/assets/images/about-us/section2/mission.webp",
      text: "Rapha Rehab is committed to delivering high-quality, innovative, and personalized health care in a supportive and professional environment. Our interdisciplinary team."
    },
    {
      title: "Vision",
      img: "/assets/images/about-us/section2/vision.webp",
      text: "To be recognized as Etobicoke’s most trusted and effective rehabilitation clinic, offering evidence-based therapies supported by a skilled and innovative healthcare team."
    },
    {
      title: "Values",
      img: "/assets/images/about-us/section2/values.webp",
      text: "We uphold compassion, excellence, integrity, collaboration, and innovation. With a blend of empathy and clinical expertise, we create a supportive, professional, and patient-centered care experience."
    }
  ];

  return (
    <>
      {/* about-section */}
      <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 clearfix">
            <div className="col-lg-6 col-md-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.webp)' }}></div>
                    <div className="shape-2">
                      <Image
                      //  loader={exportableLoader}
                        src="/assets/images/shape/shape-33.png"
                        alt="Physiotherapy at Rapharehab"
                        fill
                        style={{ objectFit: "cover" }}
                      />
                    </div>

                    {/* <div className="shape-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-7.png)' }}></div> */}
                    <div className="shape-4">
                      <Image
                      //  loader={exportableLoader}
                        src="/assets/images/shape/shape-34.png"
                        alt="Physiotherapy at Rapharehab"
                        fill
                        style={{ objectFit: "cover" }}
                      />
                    </div>

                    <div className="shape-5">
                      <Image
                      //  loader={exportableLoader}
                        src="/assets/images/shape/shape-11.webp"
                        alt="Physiotherapy at Rapharehab"
                        fill
                        style={{ objectFit: "cover" }}
                      />
                    </div>

                  </div>
                  <figure className="image image-1-ho hide-img"><img src="/assets/images/about-us/section1/about-right.webp" alt="Physiotherapy at Rapharehab" /></figure>
                  <figure className="image image-2"><img src="/assets/images/about-us/section1/about-left.webp" alt="Physiotherapy at Rapharehab" /></figure>
                  <div className="icon-box new-ho"><img src="/assets/images/about-us/section1/about-icon.webp" alt="Physiotherapy at Rapharehab" /></div>
                </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_15">
                    <span className="sub-title mt-3">About Us</span>
                    <h2>Comprehensive Physiotherapy & Rehabilitation Clinic in Etobicoke</h2>
                  </div>
                  <div className="text-box mb_40">
                    <p>Welcome to Rapha Rehab Physiotherapy & Massage Therapy Clinic in Etobicoke — a trusted physiotherapy clinic in Etobicoke led by Registered Physiotherapists providing reliable therapy and rehabilitation services. We offer Sports injury physiotherapy, Pelvic floor physiotherapy, Chiropractic care, Massage therapy, Acupuncture, Foot Reflexology, Osteopathy, Custom knee braces, Orthotics, Spinal decompression therapy, Concussion management, Chronic pain management, Workplace injury management, Naturopathy, and Home care physiotherapy services in Etobicoke.</p>
                  </div>
                  <div className="btn-box">
                    <Link href="/contact" className="theme-btn btn-one" aria-label="Book Appointment"><span>Book Appointment</span></Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* about-section end */}

      {/* process */}
      <section className="process-section sec-pad pt-0">
        <div className="pattern-layer">
          <Image
          //  loader={exportableLoader}
            src="/assets/images/shape/shape-19.png"
            alt="Physiotherapy at Rapharehab"
            fill
            style={{ objectFit: "cover" }}
          />
        </div>


        <div className="shape">
          {/* <div className="shape-1 float-bob-x" style={{ backgroundImage: 'url(/assets/images/shape/shape-20.png)' }}></div>
            <div className="shape-2 float-bob-y" style={{ backgroundImage: 'url(/assets/images/shape/shape-15.png)' }}></div> */}
          <div className="shape-3"></div>
        </div>
        <div className="auto-container">
          <div className="sec-title mb_50 centred">
            <span className="sub-title">Excellence in Care</span>
            <h2>Our Mission, Vision & Values</h2>
          </div>
          <div className="inner-container">
            <div className="arrow-shape">
              <Image
              //  loader={exportableLoader}
                src="/assets/images/shape/shape-18.webp"
                alt="Physiotherapy at Rapharehab"
                fill
                style={{ objectFit: "cover" }}
              />
            </div>

            {contents.map((item, index) => {
              const isActive = activeIndex === index;
              const words = item.text.split(" ");
              const shortText = words.slice(0, 20).join(" ") + (words.length > 20 ? "..." : "");

              return (
                <div key={index} className="processing-block-one wow fadeInLeft animated" data-wow-delay="00ms" data-wow-duration="1500ms">
                  <div className="inner-box">
                    <span className="count-text">{`0${index + 1}`}</span>
                    <figure className="image-box"><img src={item.img} alt={item.title} /></figure>
                    <div className="lower-content">
                      <h3>{item.title}</h3>
                      <p>{isActive ? item.text : shortText}</p>
                      {words.length > 20 && (
                        <button className="read-more-btn" onClick={() => toggleReadMore(index)}>
                          {isActive ? "Read Less" : "Read More"}
                        </button>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

        </div>
      </section>
      {/* process end */}

      <section className="testimonial-style-two p_relative bg-color-1">
        {/* <div className="pattern-layer" style={{ backgroundImage: 'url(assets/images/shape/shape-19.png)' }}></div> */}
        <div className="auto-container">
          <div className="row align-items-center flex-row-reverse">
            {/* RIGHT IMAGE / LEFT CONTENT */}
            <div className="col-lg-6 col-md-12 col-sm-12 image-column order-2 order-lg-1">
              <div className="image_block_two pl_30 pb_30">
                <div className="image-box">
                  <figure className="image image-1-new "><img src="/assets/images/about-us/section3/top.webp" className="new-image-about" alt="Physiotherapy at Rapharehab" /></figure>
                  <figure className="image image-2-new hide-img"><img src="/assets/images/about-us/section3/bottom.webp" alt="Physiotherapy at Rapharehab" /></figure>
                  <div className="icon-box my-icon"><img src="/assets/images/about-us/section3/icon.webp" className="new-image-about2" alt="Physiotherapy at Rapharehab" /></div>
                </div>
              </div>
            </div>
            <div className="col-lg-6 col-md-12 col-sm-12 content-column mb-5">
              <div className="content_block_one">
                <div className="content-box">
                  <div className="sec-title-1 mb_15">
                    <span className="sub-title-1">Why Choose Us</span>
                    <h2>Your Trusted Physiotherapy Team in Etobicoke</h2>
                  </div>
                  <div className="text-box mb_40">
                    <p className="tex-color-1">Rapha Rehab is led by a dedicated team of skilled health-care professionals committed to helping you recover better and faster. Through collaborative, personalized care, we ensure every client receives the highest quality treatment, tailored support, and exceptional service for lasting results.</p>
                  </div>
                  <div className="btn-box">
                    <Link href="/contact" className="theme-btn btn-one-new" aria-label="Contact"><span>Book Appointment</span></Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* process end */}


      {/* team-section-style-two */}
      <section className="team-section sec-pad centred">
        {/* <div className="shape"> */}
        {/* <div
              className="shape-1 float-bob-y"
              style={{ backgroundImage: "url(/assets/images/shape/shape-15.png)" }}
            ></div> */}
        {/* <div className="shape-2"></div> */}
        {/* <div
              className="shape-3 float-bob-x"
              style={{ backgroundImage: "url(/assets/images/shape/shape-16.png)" }}
            ></div> */}
        {/* </div> */}

        <div className="auto-container">
          <div className="sec-title mb_50">
            <span className="sub-title">Our Team</span>
            <h2>
              Meet our experienced doctors <br />for the best treatment
            </h2>
          </div>

          <div className="row clearfix justify-content-center">
            {teamMembers.map((member, index) => (
              <div
                key={member.id}
                className="col-lg-3 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>
                      {/* <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 className="lower-content">
                      <h3>
                        <Link href={`/our-team-physiotherapy-etobicoke/${member.slug}`} aria-label="Our Team Member Name">
                          {member.name}
                        </Link>
                      </h3>
                      <span className="designation">{member.designation}</span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="chooseus-section">
        <div className="bg-layer">
          <Image
          //  loader={exportableLoader}
            src="/assets/images/about-us/section4/why-choose-right.webp"
            alt="Physiotherapy at Rapharehab"
            fill
            style={{ objectFit: "cover" }}
          />
        </div>


        <div className="pattern-layer">
          <Image
          //  loader={exportableLoader}
            src="/assets/images/shape/shape-12.webp"
            alt="Physiotherapy at Rapharehab"
            fill
            style={{ objectFit: "cover" }}
          />
        </div>


        <div className="auto-container">
          <div className="row clearfix">
            <div className="col-lg-8 col-md-12 col-sm-12 content-column">
              <div className="content-box">
                <div className="sec-title light mb_50">
                  {/* <span className="sub-title">Why Choose Us</span> */}
                  <h2>WHY CHOOSE RAPHA REHAB PHYSIOTHERAPY</h2>
                  <p className='sub-title-2'>Rapharehab Physiotherapy in Etobicoke – Our dedicated team of health-care professionals provides physiotherapy, massage therapy, and rehabilitation services in Etobicoke to support your recovery, mobility, and overall well-being.</p>
                </div>
                <div className="row clearfix">
                  <div className="col-lg-6 col-md-6 chooseus-block">
                    <div className="chooseus-block-one">
                      <div className="inner-box">
                        <div className="icon-box"><img src="/assets/images/home/why-choose/expert-team.webp" alt="Expert team" /></div>
                        <h3>Expert Team</h3>
                        <p>At Rapharehab Physiotherapy, you are treated by a highly skilled and experienced team of professionals dedicated to delivering quality care.</p>
                      </div>
                    </div>
                  </div>
                  <div className="col-lg-6 col-md-6 chooseus-block">
                    <div className="chooseus-block-one">
                      <div className="inner-box">
                        <div className="icon-box"><img src="/assets/images/about-us/section4/understand.webp" alt="Understand your pain" /></div>
                        <h3>Understand your Pain</h3>
                        <p>Rapharehab offers personalized treatment plans focused on identifying the root cause of your pain for faster, long-lasting recovery.</p>
                      </div>
                    </div>
                  </div>
                  <div className="col-lg-6 col-md-6 chooseus-block">
                    <div className="chooseus-block-one">
                      <div className="inner-box">
                        <div className="icon-box"><img src="/assets/images/home/why-choose/ready.webp" alt="Ready to go" /></div>
                        <h3>Ready To Go</h3>
                        <p>We offer flexible scheduling and convenient hours, making it easier for you to access physiotherapy services right here in Etobicoke.</p>
                      </div>
                    </div>
                  </div>
                  {/* <div className="col-lg-6 col-md-6 col-sm-12 chooseus-block">
                  <div className="chooseus-block-one">
                    <div className="inner-box">
                      <div className="icon-box"><i className="icon-20"></i></div>
                      <h3>24/7 Services</h3>
                      <p>Amet minim mollit non deserunt aliqua dolor do amet sint.</p>
                    </div>
                  </div>
                </div> */}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className="funfact-section centred">
        <div className="auto-container">
          <div className="inner-container">
            <div className="row clearfix">
              <div className="col-lg-3 col-md-6 col-sm-6 col-6 funfact-block">
                <div className="funfact-block-one">
                  <div className="inner-box">

                    <div className="count-outer count-box">
                      <CounterUp end={10} /><span>+</span>
                    </div>
                    <span className="text-new">Professionals</span>
                  </div>
                </div>
              </div>
              <div className="col-lg-3 col-md-6 col-sm-6 col-6 funfact-block">
                <div className="funfact-block-one">
                  <div className="inner-box">

                    <div className="count-outer count-box">
                      <CounterUp end={25} /><span>+</span>
                    </div>
                    <span className="text-new">Years Experience</span>
                  </div>
                </div>
              </div>
              <div className="col-lg-3 col-md-6 col-sm-6 col-6 funfact-block">
                <div className="funfact-block-one">
                  <div className="inner-box">

                    <div className="count-outer count-box">
                      <CounterUp end={10} /><span>k+</span>
                    </div>
                    <span className="text-new">Happy Customers</span>
                  </div>
                </div>
              </div>
              <div className="col-lg-3 col-md-6 col-sm-6 col-6 funfact-block">
                <div className="funfact-block-one">
                  <div className="inner-box">

                    <div className="count-outer count-box">
                      <CounterUp end={97} /><span>%</span>
                    </div>
                    <span className="text-new">Client Satisfaction</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>


      <section className="image-slider-section relative w-full pt_90 pb_90 text-center">
        <div className="auto-container mx-auto relative w-full">
          <div className="sec-title mb_50 centred">
            <h2>Our Trusted Partners</h2>
          </div>
          <div className="slider-wrapper w-full">
            <Swiper
              {...swiperOptions}
              slidesPerView={3}
              spaceBetween={30}
              breakpoints={{
                320: { slidesPerView: 1 },
                640: { slidesPerView: 2 },
                1024: { slidesPerView: 3 },
              }}
              className="w-full h-[400px]"
            >
              {images.map((src, index) => (
                <SwiperSlide key={index}>
                  <img
                    src={src}
                    alt="Physiotherapy at Rapharehab"
                    className="w-full h-full object-cover rounded-lg"
                  />
                </SwiperSlide>
              ))}
            </Swiper>
          </div>

        </div>
      </section>
    </>
  )
}