import Link from "next/link"
import Layout from "@/components/layout/Layout"
import Image from "next/image";

export const metadata = {
    title: "What to Expect | Etobicoke Physio",
    description:
        "Your first physiotherapy visit explained. Assessment, treatment plan & recovery guidance in Etobicoke.",
};

export default function WhatToExpect() {
    return (
        <>
            <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="What To Expect" bannerImage="/assets/images/what-we-expect/expect-banner.webp">

                {/* Section 1: Hero / 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 image-column">
                                <div className="image_block_four">
                                    <div className="image-box">
                                        <figure className="image mb-3">
                                            <img src="/assets/images/what-we-expect/what-to-expect-at-rapha.webp" alt="Physiotherapy Assessment" />
                                        </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">Your First Visit to Our Etobicoke Physiotherapy Clinic</span>
                                            <h2>What to Expect at Rapharehab – Etobicoke Physiotherapy</h2>
                                        </div>
                                        <div className="text-box">
                                            <p>Starting physiotherapy can feel unfamiliar, but at Rapharehab, we make your experience comfortable, professional, and goal-oriented.</p>
                                            <p className="mt_20">Here’s what you can expect during your first visit.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* Section 2: Steps Timeline */}
                <section
                    className="pt_90 pb_90"
                    style={{
                        backgroundImage: "url(/assets/images/what-we-expect/what-to-expect-your-first-visit.webp)",
                        backgroundAttachment: "fixed",
                        backgroundSize: "cover",
                        backgroundPosition: "center",
                        position: "relative",
                    }}
                >
                    {/* Dark overlay for readability */}
                    <div style={{
                        position: 'absolute', inset: 0,
                        background: 'rgba(10,10,10,0.78)',
                        zIndex: 0
                    }}></div>

                    <div className="auto-container" style={{ position: 'relative', zIndex: 1 }}>
                        <div className="sec-title centred mb_50">
                            <span className="sub-title">Your Journey</span>
                            <h2 className="text-white">Your First Visit – Step by Step</h2>
                        </div>

                        <div className="row clearfix">
                            {/* Step 1 */}
                            <div className="col-lg-6 col-md-12 col-sm-12 mb_30">
                                <div className="inner-box p-4 rounded shadow-sm h-100 d-flex flex-column" style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.15)', backdropFilter: 'blur(6px)', height: '500px' }}>
                                    <span style={{
                                        display: 'inline-block', fontSize: '13px', fontWeight: '700',
                                        letterSpacing: '2px', textTransform: 'uppercase',
                                        color: '#fff', background: '#bc0000',
                                        padding: '4px 16px', borderRadius: '20px', marginBottom: '14px', alignSelf: 'flex-start'
                                    }}>Step - 1</span>
                                    <h3 className="text-white mb-3" style={{ fontSize: '20px' }}>Warm Welcome & Intake</h3>
                                    <p className="text-white mb-3">Our friendly front desk team will:</p>
                                    <ul className="list-style-one clearfix mb-4">
                                        <li className="text-white">Confirm your appointment</li>
                                        <li className="text-white">Review insurance information</li>
                                        <li className="text-white">Assist with intake forms</li>
                                        <li className="text-white">Answer initial questions</li>
                                    </ul>
                                    <p className="text-white mt-auto"><strong>We prioritize efficiency and professionalism.</strong></p>
                                </div>
                            </div>

                            {/* Step 2 */}
                            <div className="col-lg-6 col-md-12 col-sm-12 mb_30">
                                <div className="inner-box p-4 rounded shadow-sm h-100 d-flex flex-column" style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.15)', backdropFilter: 'blur(6px)' }}>
                                    <span style={{
                                        display: 'inline-block', fontSize: '13px', fontWeight: '700',
                                        letterSpacing: '2px', textTransform: 'uppercase',
                                        color: '#fff', background: '#bc0000',
                                        padding: '4px 16px', borderRadius: '20px', marginBottom: '14px', alignSelf: 'flex-start'
                                    }}>Step - 2</span>
                                    <h3 className="text-white mb-3" style={{ fontSize: '20px' }}>Detailed Assessment</h3>
                                    <p className="text-white mb-3">Your physiotherapist will conduct a thorough evaluation, including:</p>
                                    <ul className="list-style-one clearfix mb-4">
                                        <li className="text-white">Medical history review</li>
                                        <li className="text-white">Injury history discussion</li>
                                        <li className="text-white">Postural assessment</li>
                                        <li className="text-white">Movement testing</li>
                                        <li className="text-white">Range of motion evaluation</li>
                                        <li className="text-white">Strength testing</li>
                                    </ul>
                                    <p className="text-white mt-auto"><strong>This step identifies the root cause of your condition.</strong></p>
                                </div>
                            </div>

                            {/* Step 3 */}
                            <div className="col-lg-4 col-md-12 col-sm-12 mb_30">
                                <div className="inner-box p-4 rounded shadow-sm h-100 d-flex flex-column" style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.15)', backdropFilter: 'blur(6px)' }}>
                                    <span style={{
                                        display: 'inline-block', fontSize: '13px', fontWeight: '700',
                                        letterSpacing: '2px', textTransform: 'uppercase',
                                        color: '#fff', background: '#bc0000',
                                        padding: '4px 16px', borderRadius: '20px', marginBottom: '14px', alignSelf: 'flex-start'
                                    }}>Step - 3</span>
                                    <h3 className="text-white mb-3" style={{ fontSize: '20px' }}>Diagnosis & Treatment Plan</h3>
                                    <p className="text-white mb-3">After assessment, your therapist will:</p>
                                    <ul className="list-style-one clearfix mb-4">
                                        <li className="text-white">Explain findings clearly</li>
                                        <li className="text-white">Outline your diagnosis</li>
                                        <li className="text-white">Recommend a personalized treatment plan</li>
                                        <li className="text-white">Set measurable recovery goals</li>
                                    </ul>
                                    <p className="text-white mt-auto"><strong>You will understand exactly what is happening and how we will address it.</strong></p>
                                </div>
                            </div>

                            {/* Step 4 */}
                            <div className="col-lg-4 col-md-12 col-sm-12 mb_30">
                                <div className="inner-box p-4 rounded shadow-sm h-100 d-flex flex-column" style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.15)', backdropFilter: 'blur(6px)' }}>
                                    <span style={{
                                        display: 'inline-block', fontSize: '13px', fontWeight: '700',
                                        letterSpacing: '2px', textTransform: 'uppercase',
                                        color: '#fff', background: '#bc0000',
                                        padding: '4px 16px', borderRadius: '20px', marginBottom: '14px', alignSelf: 'flex-start'
                                    }}>Step - 4</span>
                                    <h3 className="text-white mb-3" style={{ fontSize: '20px' }}>First Treatment Session</h3>
                                    <p className="text-white mb-3">In many cases, treatment begins on the first visit. This may include:</p>
                                    <ul className="list-style-one clearfix mb-4">
                                        <li className="text-white">Manual therapy</li>
                                        <li className="text-white">Gentle mobility work</li>
                                        <li className="text-white">Soft tissue treatment</li>
                                        <li className="text-white">Introduction to rehabilitation exercises</li>
                                    </ul>
                                    <p className="text-white mt-auto"><strong>You will leave with a clear understanding of next steps.</strong></p>
                                </div>
                            </div>

                            {/* Step 5 */}
                            <div className="col-lg-4 col-md-12 col-sm-12 mb_30">
                                <div className="inner-box p-4 rounded shadow-sm h-100 d-flex flex-column" style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.15)', backdropFilter: 'blur(6px)', height: '470px' }}>
                                    <span style={{
                                        display: 'inline-block', fontSize: '13px', fontWeight: '700',
                                        letterSpacing: '2px', textTransform: 'uppercase',
                                        color: '#fff', background: '#bc0000',
                                        padding: '4px 16px', borderRadius: '20px', marginBottom: '14px', alignSelf: 'flex-start'
                                    }}>Step - 5</span>
                                    <h3 className="text-white mb-3" style={{ fontSize: '20px' }}>Ongoing Progress Monitoring</h3>
                                    <p className="text-white mb-3">At each visit, we monitor:</p>
                                    <ul className="list-style-one clearfix mb-4">
                                        <li className="text-white">Pain levels</li>
                                        <li className="text-white">Functional improvements</li>
                                        <li className="text-white">Strength gains</li>
                                        <li className="text-white">Mobility restoration</li>
                                    </ul>
                                    <p className="text-white mt-auto"><strong>Your treatment plan evolves as you improve.</strong></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* Section 3: What to Bring + Sessions Info */}
                <section className="feature-section pt_90 pb_70">
                    <div className="auto-container">
                        <div className="sec-title centred mb_50">
                            <span className="sub-title">Prepare for Your Visit</span>
                            <h2>Everything You Need to Know</h2>
                        </div>
                        <div className="row clearfix justify-content-center">

                            {/* Card 1: What to Bring */}
                            <div className="col-lg-6 col-md-6 col-sm-12 feature-block mb_30">
                                <div className="inner-box shadow-sm border rounded overflow-hidden text-center h-100" style={{ background: '#fff' }}>
                                    {/* Image */}
                                    <div style={{ overflow: 'hidden', maxHeight: '300px' }}>
                                        <img
                                            src="/assets/images/what-we-expect/what-to-expect-everything.webp"
                                            alt="What to Bring"
                                            style={{ width: '100%', objectFit: 'cover' }}
                                        />
                                    </div>
                                    {/* Content */}
                                    <div className="p-4 text-start">
                                        <h3 className="mb-3">What to Bring</h3>
                                        <p className="mb-3">Please bring:</p>
                                        <ul className="list-style-one clearfix">
                                            <li>Health card</li>
                                            <li>Insurance information</li>
                                            <li>Doctor's referral (if applicable)</li>
                                            <li>Comfortable clothing</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            {/* Card 2: How Many Sessions */}
                            <div className="col-lg-6 col-md-6 col-sm-12 feature-block mb_30">
                                <div className="inner-box shadow-sm border rounded overflow-hidden text-center h-100" style={{ background: '#fff' }}>
                                    {/* Image */}
                                    <div style={{ overflow: 'hidden', maxHeight: '300px' }}>
                                        <img
                                            src="/assets/images/what-we-expect/what-to-expect-everything-2.webp"
                                            alt="Recovery Timeline"
                                            style={{ width: '100%', objectFit: 'cover' }}
                                        />
                                    </div>
                                    {/* Content */}
                                    <div className="p-4 text-start">
                                        <h3 className="mb-3">How Many Sessions Will I Need?</h3>
                                        <p className="mb-3">Recovery timelines vary depending on:</p>
                                        <ul className="list-style-one clearfix">
                                            <li>Severity of injury</li>
                                            <li>Duration of condition</li>
                                            <li>Personal health factors</li>
                                            <li>Treatment compliance</li>
                                        </ul>
                                        {/* <p className="mt-3">Your physiotherapist will provide realistic expectations.</p> */}
                                    </div>
                                </div>
                            </div>

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

                {/* Section 4: Our Commitment CTA */}
                <section className="about-style-three pt_90 pb_90" style={{ backgroundImage: "url(/assets/images/what-we-expect/what-to-expect-our-commitment-bg.webp)", backgroundSize: 'cover', backgroundPosition: 'center' }}>
                    <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">Our Commitment to You</h2>
                                        </div>
                                        <div className="text-box mb_40">
                                            <p className="text-white mb-3">As one of the best physiotherapy clinics in Etobicoke, we promise:</p>
                                            <ul className="list-style-one clearfix">
                                                <li className="text-white"> Professional care</li>
                                                <li className="text-white"> Respectful communication</li>
                                                <li className="text-white"> Individualized treatment</li>
                                                <li className="text-white"> Evidence-based methods</li>
                                                <li className="text-white"> Supportive environment</li>
                                            </ul>
                                            <p className="text-white mt_20"><strong className="text-white">Your health and recovery are our priority.</strong></p>
                                        </div>
                                        <div className="btn-box">
                                            <Link href="/contact" className="theme-btn btn-one"><span>Book Your First Appointment</span></Link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-4 col-md-12 col-sm-12 image-column mt-5 mt-lg-0">
                                <div className="image_block_four">
                                    <div className="image-box">
                                        <figure className="image">
                                            <img src="/assets/images/what-we-expect/right.webp" alt="Our Commitment to You" className="img-fluid" />
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

            </Layout>
        </>
    )
}