'use client'
import Layout from "@/components/layout/Layout";
import Link from "next/link";
import { useState } from 'react';

export default function Home() {

    const [isActive, setIsActive] = useState({
        status: false,
        key: 1,
    })

    const handleToggle = (key) => {
        if (isActive.key === key) {
            setIsActive({
                status: false,
            })
        } else {
            setIsActive({
                status: true,
                key,
            })
        }
    }
    return (
        <>
            <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Caregivers" bannerImage="/assets/images/caregivers/caregivers-banner.webp">
                <section className="feature-section pt_90 pb_90">
                    <div className="shape" style={{ backgroundImage: 'url(/assets/images/shape/shape-6.png)' }}></div>
                    <div className="auto-container">
                        <div className="sec-title centred mb_50">
                            <span className="sub-title">Caregivers</span>
                            <h2>We don’t just give care  <br />We take care as well</h2>
                        </div>
                        <div className="row clearfix">
                            <div className="col-lg-4 col-md-6 col-sm-12 feature-block">
                                <div className="feature-block-one">
                                    <div className="inner-box">
                                        <div className="icon-box"><img src="/assets/images/caregivers/caring.webp" alt="Caring with a smile" /></div>
                                        <h3><Link href="/">Caring with a smile</Link></h3>
                                        <p>It’s not what we do as a home care agency, but how we do it. All of our elderly caregiving services are delivered with a smile. And we all know that a smile can be infectious.</p>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-4 col-md-6 col-sm-12 feature-block">
                                <div className="feature-block-one">
                                    <div className="inner-box">
                                        <div className="icon-box"><img src="/assets/images/caregivers/attentive.webp" alt="Attentive listener" /></div>
                                        <h3><Link href="/">Attentive listener</Link></h3>
                                        <p>How do you like things done? Where would you like to go? Listening to your needs, and having conversations with you, helps us make sure we bring you the perfect match.</p>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-4 col-md-6 col-sm-12 feature-block">
                                <div className="feature-block-one">
                                    <div className="inner-box">
                                        <div className="icon-box"><img src="/assets/images/caregivers/qualified.webp" alt="Qualified" /></div>
                                        <h3><Link href="/">Qualified</Link></h3>
                                        <p>Whether you just need someone to take you for a walk or a to provide attentive complex caring – we, as a home care agency, can provide a caregiver that is qualified to meet your needs.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="about-style-three pt_90 pb_90 bg-color-1">
                    <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">
                                        <figure className="image image-1"><img src="/assets/images/caregivers/right.webp" alt="A professional and friendly care provider" /></figure>
                                        <figure className="image image-2"><img src="/assets/images/caregivers/left.webp" alt="A professional and friendly care provider" /></figure>
                                        <div className="icon-box"><img src="/assets/images/caregivers/rapharehab-web-images.webp" alt="A professional and friendly care provider" /></div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-6 col-md-12 col-sm-12 content-column mt-5">
                                <div className="content_block_one">
                                    <div className="content-box">
                                        <div className="sec-title-1 mb_15 mt_15">
                                            <span className="sub-title-1">At NanoCare</span>
                                             <h2>A professional and friendly care provider</h2>
                                        </div>
                                        <div className="text-box mb_40">
                                            <p className="text-white">At NanoCare, we select Caregivers who are passionate about providing in home care to those in need on a daily basis.</p>
                                        </div>
                                        <div className="btn-box">
                                            <Link href="/contact" className="theme-btn btn-one-new"><span>Become A Caregiver</span></Link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="service-section pb_90 pt_90  bg-color-1" id="service">
                    <div className="auto-container">
                        <div className="row clearfix">
                            <div className="col-lg-4 col-md-6 col-sm-12 service-block">
                                <div className="service-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
                                    <div className="inner-box">
                                        <div className="image-box">
                                            <figure className="image"><img src="/assets/images/caregivers/1.webp" alt="Keira Knightley" /></figure>
                                            {/* <div className="icon-box"><i className="icon-15"></i></div> */}
                                        </div>
                                        <div className="lower-content2">
                                            <h3>Keira Knightley</h3>
                                            <h5 className="mb-3">Care Manager</h5>
                                            <p>Keira Knightley has thirty-six years of nursing experience across a range of services, including hospital, community, nursing and care homes.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-4 col-md-6 col-sm-12 service-block">
                                <div className="service-block-one wow fadeInUp animated" data-wow-delay="300ms" data-wow-duration="1500ms">
                                    <div className="inner-box">
                                        <div className="image-box">
                                            <figure className="image"><img src="/assets/images/caregivers/2.webp" alt="Katherine waterston" /></figure>
                                            {/* <div className="icon-box"><i className="icon-16"></i></div> */}
                                        </div>
                                        <div className="lower-content2">
                                            <h3>Katherine waterston</h3>
                                            <h5 className="mb-3">Care Manager</h5>
                                            <p>At Nano Care, Katherine ensures that the each and every client of Nano Care is looked after according to the company’s core mission, values and vision.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-4 col-md-6 col-sm-12 service-block">
                                <div className="service-block-one wow fadeInUp animated" data-wow-delay="600ms" data-wow-duration="1500ms">
                                    <div className="inner-box">
                                        <div className="image-box">
                                            <figure className="image"><img src="/assets/images/caregivers/3.webp" alt="Anna faris" /></figure>
                                            {/* <div className="icon-box"><i className="icon-17"></i></div> */}
                                        </div>
                                        <div className="lower-content2">
                                            <h3>Anna faris</h3>
                                            <h5 className="mb-3">Care Manager</h5>
                                            <p>Anna ensures that all the staff and support workers at Nano Care adhere to the company’s ethos of providing the highest care standards in every service we offer</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="auto-container">
                        <div className="row clearfix">
                            <div className="col-lg-4 col-md-6 col-sm-12 service-block">
                                <div className="service-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
                                    <div className="inner-box">
                                        <div className="image-box">
                                            <figure className="image"><img src="/assets/images/caregivers/4.webp" alt="David walliams" /></figure>
                                            {/* <div className="icon-box"><i className="icon-15"></i></div> */}
                                        </div>
                                        <div className="lower-content2">
                                            <h3>David walliams</h3>
                                            <h5 className="mb-3">Care Co-Ordinator</h5>
                                            <p>David walliams has over thirty eight years of experience in the Care and Services Industry. Previously working in Germany for many years.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-4 col-md-6 col-sm-12 service-block">
                                <div className="service-block-one wow fadeInUp animated" data-wow-delay="300ms" data-wow-duration="1500ms">
                                    <div className="inner-box">
                                        <div className="image-box">
                                            <figure className="image"><img src="/assets/images/caregivers/5.webp" alt="John henry" /></figure>
                                            {/* <div className="icon-box"><i className="icon-16"></i></div> */}
                                        </div>
                                        <div className="lower-content2">
                                            <h3>John henry</h3>
                                            <h5 className="mb-3">Care Co-Ordinator</h5>
                                            <p>John has experience in ensuring that the level of care that is provided to our clients does not fall short of any expectations that is expected of a care provider.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-4 col-md-6 col-sm-12 service-block">
                                <div className="service-block-one wow fadeInUp animated" data-wow-delay="600ms" data-wow-duration="1500ms">
                                    <div className="inner-box">
                                        <div className="image-box">
                                            <figure className="image"><img src="/assets/images/caregivers/6.webp" alt="Sophia jabola" /></figure>
                                            {/* <div className="icon-box"><i className="icon-17"></i></div> */}
                                        </div>
                                        <div className="lower-content2">
                                            <h3>Sophia jabola</h3>
                                            <h5 className="mb-3">Care Co-Ordinator</h5>
                                            <p>She has previously trained as a midwife. Her nine years’ experience as a nurse included working in the Hospital Medical Ward and Accident and Emergency.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="faq-section pt_90 pb_90">
                    <div className="auto-container">
                        <div className="sec-title centred mb_50">
                            <span className="sub-title">Nano Care</span>
                            <h2>Do You Have Any Nano Care <br />Questions?</h2>
                        </div>

                        <div className="row align-items-center clearfix">

                            {/* Left Side Image */}
                            <div className="col-lg-6 col-md-12 col-sm-12 image-column mb-5 text-center text-lg-start">
                                <div className="image_block_four">
                                    <div className="image-box">
                                        <figure>
                                            <img
                                                src="/assets/images/caregivers/nanocare.webp"
                                                alt="o You Have Any Nano Care Questions"
                                                className="img-fluid"
                                            />
                                        </figure>
                                    </div>
                                </div>
                            </div>

                            {/* Right Side FAQ Content */}
                            <div className="col-lg-6 col-md-12 col-sm-12 content-column">
                                <div className="content-box">
                                    <ul className="accordion-box">

                                        {/* FAQ 1 */}
                                        <li className="accordion block">
                                            <div
                                                className={isActive.key === 1 ? "acc-btn active" : "acc-btn"}
                                                onClick={() => handleToggle(1)}
                                            >
                                                <div className="icon-box"><i className="icon-34"></i></div>
                                                <h5>Why Should I apply to NanoCare?</h5>
                                            </div>
                                            <div className={isActive.key === 1 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <p>We are an award winning home care agency We care for our clients and our employees. We provide our caregivers with health insurance after qualification, appreciation events, prizes, and extended education and training opportunities.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>

                                        {/* FAQ 2 */}
                                        <li className="accordion block">
                                            <div
                                                className={isActive.key === 2 ? "acc-btn active" : "acc-btn"}
                                                onClick={() => handleToggle(2)}
                                            >
                                                <div className="icon-box"><i className="icon-34"></i></div>
                                                <h5>Where can I work?</h5>
                                            </div>
                                            <div className={isActive.key === 2 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <p>We currently have 6 branch offices throughout California, Scottsdale, AZ and Dallas, TX! You can work for the branch office that is most convenient for you and you can choose the cases that are closer to your home.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>

                                        {/* FAQ 3 */}
                                        <li className="accordion block">
                                            <div
                                                className={isActive.key === 3 ? "acc-btn active" : "acc-btn"}
                                                onClick={() => handleToggle(3)}
                                            >
                                                <div className="icon-box"><i className="icon-34"></i></div>
                                                <h5>What types of shifts do you offer?</h5>
                                            </div>
                                            <div className={isActive.key === 3 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <p>We are constantly growing and have a wide variety of shifts you can choose from. We have long shifts, short shifts, day shifts, night shifts, transportation shifts and live-ins*. (Live-ins available through our Dallas and Scottsdale offices only). We are available 24hrs a day 7 days a week so we are flexible and will work around your schedule.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>

                                        {/* FAQ 4 */}
                                        <li className="accordion block">
                                            <div
                                                className={isActive.key === 3 ? "acc-btn active" : "acc-btn"}
                                                onClick={() => handleToggle(3)}
                                            >
                                                <div className="icon-box"><i className="icon-34"></i></div>
                                                <h5>Do you hire W-2, 1099, or private contractors?</h5>
                                            </div>
                                            <div className={isActive.key === 3 ? "acc-content current" : "acc-content"}>
                                                <div className="content">
                                                    <div className="text">
                                                        <p>At NanoCare, you are part of the team. You will be considered an employee of NanoCare which means payroll taxes are automatically deducted from your bi-weekly paycheck and if there are any questions, we are here for you! We are fully bonded and insured and are there for you every step of your employment with us.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </Layout>
        </>
    );
}
