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

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

    const content = {
        history: `It all began in 1986 when Multiple Sclerosis Limited (MSL) identified the need for high-quality care services for people living with this chronic disease.

By 1999, MSL recognised the time had come to establish NanoCare as a separate legal entity. A savvy and experienced Board was appointed and we were firmly on the path to growth.

This growth was boosted by a series of acquisitions within the care sector between 2001 and 2008. By then, we had earned a reputation as an experienced and sizeable private care service provider.

In 2010, the purchase and integration of Nationwide Health & Aged Care Services represented a major milestone in our growth as specialist cleaning and laundry services bolstered our business portfolio.

At around the same time, NanoCare partnered with the US-based Healthcare at Home. In 2013, NanoCare acquired the business. This nurse-led service has provided a safe, high-quality alternative to hospital care for people with cancer and chronic disease.

Today, we are proud to continue our work as a wholly-owned, not-for-profit subsidiary of MSL.`,

        mission: `NanoCare is committed to providing high-quality health care services to individual clients and their families, as well as to other healthcare organizations in need of supplemental staffing (such as certified home health and hospice agencies, health plans, hospitals, nursing homes and assisted living facilities).

Our priority is to provide state-of-the-art and compassionate in-home care from highly-trained medical professionals and aides. To make good on this promise, proper training is paramount. Not only do we hire the most experienced personnel, but we provide them with in-depth disease-specific training so that they can deliver specialized care to our clients.

At NanoCare, we believe everyone should have the opportunity to live a healthy, active and fulfilling life. This ethos is at the heart of everything we do.

We provide everyone we support with the opportunity to continue to live life to the full. We actively encourage Service Users to become more self-reliant, to make decisions for themselves, and ultimately, to move on to more independent living arrangements.

We facilitate and support our Service Users to pursue meaningful and personalised lifestyles. We provide individually planned education & leisure opportunities to support each individual in their ongoing development.`,

        leadership: `Our home health care management team is highly experienced in delivering exceptional care and support for clients – regardless of age or specific medical needs.

The leadership team at NanoCare discusses what home care means to them and how NanoCare is changing the way the world ages.`
    }

    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>
        </>
    )
}
