'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';

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: "Physiotherapy etobicoke is committed to providing quality and innovative health care in a comfortable and professional environment. Our interdisciplinary team will work collaboratively to offer a comprehensive and patient centered approach to ensure the highest level of client experience through our evidence-based clinical practice"
    },
    {
      title: "Vision",
      img: "/assets/images/about-us/section2/vision.webp",
      text: "To be regarded as the most reliable and effective health care therapy practice backed by the team of innovative healthcare professionals driven by passion"
    },
    {
      title: "Values",
      img: "/assets/images/about-us/section2/values.webp",
      text: "We value compassion, excellence, innovation, collaboration, and integrity. By combining empathy with evidence-based care, we create a supportive and professional environment that helps every patient achieve long-term health and well-being."
    }
  ];

  return (
    <>
      <Layout headerStyle={2} footerStyle={1} breadcrumbTitle="About Us" bannerImage="/assets/images/about-us/about-us-banner.webp">
        {/* about-section */}
        <section className="about-style-three pt_120 pb_120">
          {/* <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" style={{ backgroundImage: 'url(/assets/images/shape/shape-33.png)' }}></div>
                      <div className="shape-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-7.png)' }}></div>
                      <div className="shape-4" style={{ backgroundImage: 'url(/assets/images/shape/shape-34.png)' }}></div>
                      <div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
                    </div>
                    <figure className="image image-1"><img src="/assets/images/about-us/section1/about-right.webp" alt="" /></figure>
                    <figure className="image image-2"><img src="/assets/images/about-us/section1/about-left.webp" alt="" /></figure>
                    <div className="icon-box"><img src="/assets/images/about-us/section1/about-icon.webp" alt="" /></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">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 Etobicoke – physiotherapy clinic in etobicoke managed by Registered Physiotherapists offering reliable physiotherapy treatment Services, Sports injury physiotherapy, Pelvic floor physiotherapy, Chiropractor, Massage therapy , Acupuncture treatment, 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"><span>Book Appointment</span></Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        {/* about-section end */}

        {/* process */}
        <section className="process-section sec-pad ">
          <div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/shape/shape-19.png)' }}></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">Caring Excellence</span>
              <h2>Mission Vision & Values</h2>
            </div>
            <div className="inner-container">
              <div className="arrow-shape" style={{ backgroundImage: 'url(/assets/images/shape/shape-18.webp)' }}></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">
                  <div className="image-box">
                    <figure className="image image-1"><img src="/assets/images/about-us/section3/top.webp" alt="" /></figure>
                    <figure className="image image-2"><img src="/assets/images/about-us/section3/bottom.webp" alt="" /></figure>
                    <div className="icon-box"><img src="/assets/images/about-us/section3/icon.webp" alt="" /></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 Choos Us</span>
                      <h2>Your Trusted Physiotherapy Team in Etobicoke</h2>
                    </div>
                    <div className="text-box mb_40">
                      <p className="tex-color-1">Physiotherapy etobicoke is a team of health care professionals working together to help get you better, faster. This helps us in rendering our best possible services to our clients</p>
                    </div>
                    <div className="btn-box">
                      <Link href="/contact" className="theme-btn btn-one-new"><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}`}>
                            {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" style={{ backgroundImage: 'url(/assets/images/about-us/section4/why-choose-right.webp)' }}></div>
          <div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/shape/shape-12.png)' }}></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 ETOBICOKE PHYSIOTHERAPY</h2>
                    <p className='sub-title-2'>Physiotherapy Etobicoke – We are a team of health care professionals provide physiotherapy, massage therapy services in etobicoke assist you in improving your health.</p>
                  </div>
                  <div className="row clearfix">
                    <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"><img src="/assets/images/about-us/section4/expert-team.webp" alt="" /></div>
                          <h3>Expert Team</h3>
                          <p>At Etobicoke Physiotherapy, we have expert team of professionals</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"><img src="/assets/images/about-us/section4/understand.webp" alt="" /></div>
                          <h3>Understand your Pain</h3>
                          <p>Etobicoke physiotherapy offer Treatment for faster recovery</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"><img src="/assets/images/home/why-choose/ready.webp" alt="" /></div>
                          <h3>Ready To Go</h3>
                          <p>Flexible opening hours conveniently located 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-12 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-12 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-12 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-12 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_120 pb_120 text-center">
          <div className="auto-container mx-auto relative w-full">
            <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={`Slide ${index + 1}`}
                      className="w-full h-full object-cover rounded-lg"
                    />
                  </SwiperSlide>
                ))}
              </Swiper>
            </div>

          </div>
        </section>

      </Layout>
    </>
  )
}