'use client'
import { useState } from "react"

export default function PortfolioFilter1() {
    const [activeTab, setActiveTab] = useState("history")

    const content = {
        history: `Rapharehab was founded in 2014 with a simple mission - to provide accessible, evidence-based physiotherapy and rehabilitation for individuals recovering from injury, surgery, or chronic pain.

What began as a small, patient-focused clinic quickly grew as more families, physicians, and local health partners recognized our commitment to quality care and meaningful recovery outcomes.

Between 2016 and 2020, we expanded our services to include specialized programs in sports injury recovery, neurological rehabilitation, chronic pain management, and post-surgical physiotherapy. Each expansion was supported by experienced clinicians, advanced treatment methods, and a deep dedication to patient-centered care.

By 2021, Rapharehab became a trusted partner for multiple primary care physicians, medical specialists, and community programs across the region. This growth allowed us to invest in state-of-the-art equipment, a larger interdisciplinary team, and enhanced patient support services.

Today, we are proud to operate as a leading rehabilitation provider, known for personalized care plans, clinical excellence, and compassionate service. Our team continues to innovate, grow, and raise the standard of physiotherapy care across our community - one patient at a time.
`,

        mission: `At Rapharehab, our mission is to provide high-quality, evidence-based physiotherapy and rehabilitation services that help individuals restore movement, reduce pain, and regain confidence in their daily lives. We are committed to delivering care with compassion, clinical excellence, and a personalized approach for every patient we serve.

 We envision a community where every individual - regardless of age, condition, or background - has access to rehabilitation that empowers them to live an active, healthy, and fulfilling life. Our goal is to set a new standard for physiotherapy by combining advanced treatment methods, skilled clinicians, and a supportive patient experience.

 We believe every person deserves a treatment plan tailored to their unique needs, goals, and lifestyle. This commitment guides every decision we make.

 Our team of trained and registered physiotherapists continuously advance their knowledge and skills to provide safe, effective, and state-of-the-art rehabilitation.

 We equip our patients with the knowledge, tools, and exercises they need to take an active role in their healing and long-term physical well-being.
`,

        leadership: `Rapharehab is led by an experienced team committed to clinical excellence and patient-centered care. Their guidance ensures every service we provide meets the highest standards in rehabilitation.
        
With strong backgrounds in physiotherapy, healthcare management, and innovation, our leaders support our clinicians and continually strengthen the quality of care we deliver to every patient.
`
    }

    return (
        <>
            <section className="about-tabs-section">
                <div className="auto-container">
                    {/* Tabs */}
                    <div className="filters centred mb_40">
                        <ul className="filter-tabs filter-btns clearfix">
                            <li
                                className={activeTab === "history" ? "active" : ""}
                                onClick={() => setActiveTab("history")}
                                style={{ cursor: "pointer" }}
                            >
                                Our Proud History
                            </li>
                            <li
                                className={activeTab === "mission" ? "active" : ""}
                                onClick={() => setActiveTab("mission")}
                                style={{ cursor: "pointer" }}
                            >
                                Our Mission and Vision
                            </li>
                            <li
                                className={activeTab === "leadership" ? "active" : ""}
                                onClick={() => setActiveTab("leadership")}
                                style={{ cursor: "pointer" }}
                            >
                                Our Leadership Team
                            </li>
                        </ul>
                    </div>

                    <div className="tab-content centred">
                        <p className="tex-color-1" style={{ whiteSpace: "pre-line", textAlign: "justify" }}>
                            {content[activeTab]}
                        </p>
                    </div>
                </div>
            </section>
        </>
    )
}
