'use client'
import Link from "next/link";

export default function LocationsClient() {
    return (
        <>
            {/* Section 1: Hero */}
            <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 image-column">
                            <div className="image_block_four">
                                <div className="image-box">
                                    <figure className="image">
                                        <img src="/assets/images/location/locations-our-location.webp" alt="Education & Training" />
                                    </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">
                                        <span className="sub-title mt-3">Our Locations</span>
                                        <h2>Our Locations – Physiotherapy Clinic in Etobicoke & Serving the GTA</h2>
                                    </div>
                                    <div className="text-box">
                                        <p>Rapha Rehab proudly operates as a leading physiotherapy clinic in Etobicoke, serving patients across the Greater Toronto Area.</p>
                                        <p className="mb-3">Our convenient location allows easy access for residents of:</p>
                                        <ul className="list-style-one clearfix mb_30">
                                            <li>Etobicoke</li>
                                            <li>Toronto</li>
                                            <li>Mississauga</li>
                                            <li>North York</li>
                                            <li>Surrounding Ontario communities</li>
                                        </ul>
                                        <p>We are committed to providing accessible, professional rehabilitation services close to home.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Section 2: Primary Location */}
            <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 content-column">
                            <div className="content_block_one">
                                <div className="content-box">
                                    <div className="sec-title mb_25">
                                        <h2 className="text-white">Etobicoke – Primary Physiotherapy Clinic</h2>
                                    </div>
                                    <div className="text-box">
                                        <div className="mb_30 d-flex align-items-start">
                                            {/* Location Icon */}
                                            <div className="me-3">
                                                <i className="fas fa-map-marker-alt" style={{ fontSize: "22px", color: "#fff" }}></i>
                                            </div>

                                            <div>
                                                <h3 className="text-white" style={{ fontSize: "20px", fontWeight: "bold" }}>
                                                    Address:
                                                </h3>
                                                <p className="text-white mb-0">
                                                    5 – 4335 Bloor Street West<br />
                                                    Etobicoke, Ontario M9C 2A5
                                                </p>
                                            </div>
                                        </div>

                                        <div className="mb_30 d-flex align-items-start">
                                            {/* Phone Icon */}
                                            <div className="me-3">
                                                <i className="icon-2" style={{ fontSize: "22px", color: "#fff" }}></i>
                                            </div>

                                            <div>
                                                <h3 className="text-white" style={{ fontSize: "20px", fontWeight: "bold" }}>
                                                    Phone:
                                                </h3>
                                                <p className="text-white mb-0">
                                                    +1 647-722-3434
                                                </p>
                                            </div>
                                        </div>
                                        <p className="text-white">Our primary location is strategically situated in central Etobicoke, making it convenient for local residents and commuters from surrounding neighborhoods.</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/location/locations-etobicoke.webp" alt="Education & Training" />
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Section 3: Access & Serving GTA Grid */}
            <section className="feature-section pt_90 pb_90">
                <div className="auto-container">
                    <div className="row clearfix">
                        {/* Card 1: Access & Parking */}
                        <div className="col-lg-6 col-md-12 col-sm-12 feature-block d-flex">
                            <div className="feature-block-one w-100">
                                <div className="inner-box h-100 p-4 shadow-sm border rounded">
                                    <div className="icon-box-small mb-4" style={{ height: '70px', display: 'flex', alignItems: 'center' }}>
                                        <img src="/assets/images/location/convenient.webp" alt="Convenient Access & Parking" style={{ width: '60px', height: '60px', objectFit: 'contain', transition: 'transform 0.3s ease' }} className="feature-icon" />
                                    </div>
                                    <h3>Convenient Access & Parking</h3>
                                    <p>Our Etobicoke physiotherapy clinic offers:</p>
                                    <ul className="list-style-one clearfix mt-3 mb-3">
                                        <li>Easy road access</li>
                                        <li>Nearby major intersections</li>
                                        <li>Public transit availability</li>
                                        <li>Convenient parking options</li>
                                    </ul>
                                    <p>Whether you’re traveling from Toronto or Mississauga, reaching our clinic is simple and efficient.</p>
                                </div>
                            </div>
                        </div>

                        {/* Card 3: Why Patients Choose Our Location */}
                        <div className="col-lg-6 col-md-12 col-sm-12 feature-block d-flex">
                            <div className="feature-block-one w-100">
                                <div className="inner-box h-100 p-4 shadow-sm border rounded">
                                    <div className="icon-box-small mb-4" style={{ height: '70px', display: 'flex', alignItems: 'center' }}>
                                        <img src="/assets/images/location/why.webp" alt="Why Patients Choose Our Location" style={{ width: '60px', height: '60px', objectFit: 'contain', transition: 'transform 0.3s ease' }} className="feature-icon" />
                                    </div>
                                    <h3>Why Patients Choose Our Location</h3>
                                    <p>Patients prefer Rapha Rehab because we offer:</p>
                                    <ul className="list-style-one clearfix mt-3 mb-3">
                                        <li>Accessible clinic hours</li>
                                        <li>Flexible scheduling</li>
                                        <li>Professional rehabilitation services</li>
                                        <li>Personalized treatment plans</li>
                                        <li>Insurance support</li>
                                    </ul>
                                    <p>Being located in Etobicoke allows us to provide community-based physiotherapy with big-city clinical standards.</p>
                                </div>
                            </div>
                        </div>


                        {/* Card 2: Serving the GTA */}
                        <div className="col-lg-6 col-md-12 col-sm-12 feature-block d-flex">
                            <div className="feature-block-one w-100">
                                <div className="inner-box h-100 p-4 shadow-sm border rounded">
                                    <div className="icon-box-small mb-4" style={{ height: '70px', display: 'flex', alignItems: 'center' }}>
                                        <img src="/assets/images/location/serving.webp" alt="Serving the Greater Toronto Area" style={{ width: '60px', height: '60px', objectFit: 'contain', transition: 'transform 0.3s ease' }} className="feature-icon" />
                                    </div>
                                    <h3>Serving the Greater Toronto Area</h3>
                                    <p>While our clinic is located in Etobicoke, many patients travel from across the GTA due to our reputation as one of the best physiotherapy clinics in Etobicoke. We regularly serve patients from:</p>
                                    <ul className="list-style-one clearfix mt-3 mb-3">
                                        <li>Downtown Toronto</li>
                                        <li>Mississauga</li>
                                        <li>Brampton</li>
                                        <li>North York</li>
                                        <li>Scarborough</li>
                                        <li>Surrounding communities</li>
                                    </ul>
                                    <p>Our centralized location allows us to deliver high-quality rehabilitation services to a wide range of patients.</p>
                                </div>
                            </div>
                        </div>

                        {/* Card 4: Comprehensive Rehabilitation */}
                        <div className="col-lg-6 col-md-12 col-sm-12 feature-block d-flex">
                            <div className="feature-block-one w-100">
                                <div className="inner-box h-100 p-4 shadow-sm border rounded">
                                    <div className="icon-box-small mb-4" style={{ height: '70px', display: 'flex', alignItems: 'center' }}>
                                        <img src="/assets/images/location/comprehensive.webp" alt="Comprehensive Rehabilitation Under One Roof" style={{ width: '60px', height: '60px', objectFit: 'contain', transition: 'transform 0.3s ease' }} className="feature-icon" />
                                    </div>
                                    <h3>Comprehensive Rehabilitation Under One Roof</h3>
                                    <p>At our Etobicoke rehabilitation clinic, you can access:</p>
                                    <ul className="list-style-one clearfix mt-3 mb-3">
                                        <li>Orthopedic physiotherapy</li>
                                        <li>Accident rehabilitation</li>
                                        <li>Post-surgical recovery</li>
                                        <li>Sports injury treatment</li>
                                        <li>Chronic pain management</li>
                                        <li>Manual therapy</li>
                                        <li>Therapeutic exercise programs</li>
                                    </ul>
                                    <p>Having multiple services in one location ensures continuity of care and convenience.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Section 4: Community & Booking */}
            <section className="about-style-three pt_90 pb_90 bg-color-1">
                <div className="auto-container">
                    <div className="row clearfix align-items-center">
                        <div className="col-lg-8 col-md-12 col-sm-12 content-column">
                            <div className="content_block_one">
                                <div className="content-box">
                                    <div className="sec-title-1 mb_25">
                                        <h2 className="text-white">Community-Focused Care</h2>
                                    </div>
                                    <div className="text-box mb_40">
                                        <p className="text-white mb-3">We are proud to be part of the Etobicoke healthcare community. Our clinic emphasizes:</p>
                                        <ul className="list-style-one mb_30 clearfix text-white">
                                            <li className="text-white">Patient education</li>
                                            <li className="text-white">Long-term wellness</li>
                                            <li className="text-white">Injury prevention</li>
                                            <li className="text-white">Personalized recovery strategies</li>
                                        </ul>
                                        <p className="text-white">We believe physiotherapy should be accessible, effective, and supportive.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-4 col-md-12 col-sm-12 image-column">
                            <div className="image_block_four">
                                <div className="image-box">
                                    <figure className="image">
                                        <img src="/assets/images/location/locations-community.webp" alt="Education & Training" />
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Section 5: Appointment Booking */}
            <section className="feature-section pt_90">
                <div className="auto-container">
                    <div className="row clearfix">
                        <div className="col-lg-12 feature-block">
                            <div className="feature-block-one mb_30">
                                <style jsx>{`
                                    .list-style-one li:before {
                                        background-color: #fff !important;
                                    }
                                `}</style>
                                <div className="inner-box p-5 shadow-sm border rounded" style={{ backgroundImage: "url('/assets/images/location/locations-easy.webp')", backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative', overflow: 'hidden' }}>
                                    <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1 }}></div>
                                    <div className="position-relative" style={{ zIndex: 2 }}>
                                        <div className="sec-title mb_25">
                                            <h2 className="text-white">Easy Appointment Booking</h2>
                                        </div>
                                        <div className="text-box">
                                            <p className="mb-4 text-white" style={{ fontSize: '18px' }}>Booking an appointment at our Etobicoke physiotherapy clinic is straightforward. You can:</p>
                                            <ul className="list-style-one clearfix mt-3 mb-4">
                                                <li className="mb-3 text-white">Call our clinic directly</li>
                                                <li className="mb-3 text-white">Send an email inquiry</li>
                                                <li className="mb-3 text-white">Use our website contact form</li>
                                            </ul>
                                            <p className="mt-4 text-white" style={{ fontWeight: '600' }}>Our administrative team ensures quick responses and efficient scheduling.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Section 5: CTA */}
            <section className="about-style-two pt_90 pb_90">
                <div className="auto-container">
                    <div className="sec-title centred mb_50">
                        <h2>Visit Rapha Rehab Today</h2>
                    </div>
                    <div className="text-box centred">
                        <p style={{ fontSize: '18px', maxWidth: '800px', margin: '0 auto' }}>
                            If you are searching for the best physiotherapy clinic in Etobicoke, trusted Toronto physiotherapy services, reliable Mississauga physiotherapy support, or professional accident rehabilitation, Rapha Rehab is here to help.
                        </p>
                        <p className="mt_20" style={{ fontSize: '18px', fontWeight: '600' }}>
                            Visit our Etobicoke location and experience professional, patient-centered care designed to restore strength, mobility, and confidence.
                        </p>
                        <div className="btn-box mt_30">
                            <Link href="/contact" className="theme-btn btn-one"><span>Book Your Visit Now</span></Link>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}