import Layout from "../components/layout/Layout"
import Link from "next/link"
import { useState } from "react"

const tabs = [
    {name: 'Getting Started', icon: 'flaticon-mechanics'},
    {name: 'My Account', icon: 'flaticon-suit'},
    {name: 'Pricing Plans', icon: 'flaticon-price-label'},
    {name: 'Other Questions', icon: 'flaticon-screenplay'}
]

const tabContents = {
    'Getting Started' : [
            {title: 'What is MERMS, and how does it work?', desc: `MERMS operates on a cloud-based model, allowing users to access the software from anywhere, at any time. By leveraging advanced technology, MERMS streamlines processes, enhances collaboration, and provides real-time data analytics. This system automates routine tasks, enabling teams to focus on more strategic initiatives.`},
            {title: 'What can I do with MERMS?', desc: `With MERMS, users can manage projects, track budgets, oversee inventory, and collaborate across different departments. Whether you're in finance, marketing, or operations, MERMS offers customizable solutions to cater to your specific needs. Not only can you streamline processes, but you can also improve decision-making with data-driven insights.`},
            {title: 'Which Product and Tools does MERMS support?', desc: `MERMS supports a wide array of tools, including CRM systems, project management software, and financial applications. It integrates seamlessly with popular platforms like Slack, Microsoft Teams, and Google Workspace, allowing for a comprehensive management experience without losing functionality.`},
            {title: 'Can I Automate with MERMS?', desc: `Yes! MERMS offers robust automation capabilities. Users can set up automated workflows for routine tasks, such as reporting, notifications, and data entry, minimizing human error and saving valuable time. This feature enhances productivity, making it easier for organizations to scale and adapt to changing needs.`}
        ],

    'My Account': [
            {title: 'Sign up and manage your account', desc: `Curabitur ac dapibus libero eu congue tristique neque.`},
        ],

    'Pricing Plans': [
            {title: 'How much does MERMS cost?', desc: `Curabitur ac dapibus libero eu congue tristique neque.`},
        ],

    'Other Questions': [
            {title: 'How do I get the error log?', desc: `Curabitur ac dapibus libero eu congue tristique neque.`},
        ]
    
}

export default function Home() {
    const [activeTab, setActiveTab] = useState(tabs[0])
    const handleOnClick = (tab) => {
        setActiveTab(tab)
    }


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

    const handleToggle = (key) => {
        if (isActive.key === key) {
            setIsActive({
                status: false,
            })
        } else {
            setIsActive({
                status: true,
                key,
            })
        }
    }
    return (
        <>
            <Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
                <div>
                    <section id="faqs-4" className="gr--whitesmoke inner-page-hero pb-100 faqs-section division">
                        <div className="container">
                            {/* SECTION TITLE */}
                            <div className="row justify-content-center">
                                <div className="col-lg-11 col-xl-10">
                                    <div className="inner-page-title">
                                        <h2 className="s-52 w-700">How Can We Help?</h2>
                                    </div>
                                </div>
                            </div>
                            {/* TABS NAVIGATION */}
                            <div className="row">
                                <div className="col">
                                    <div className="tabs-nav tabs--theme clearfix">
                                        <ul className="tabs-1">
                                            {/* TAB-1 LINK */}
                                            {tabs.map((tab, index)=>(
                                                <li key={index} className={activeTab?.name === tab?.name ? "tab-link ico-45 r-16 current" : "tab-link ico-45 r-16"} onClick={() => handleOnClick(tab)}>
                                                    <div className="tab-link-ico"><span className={tab.icon} /></div>
                                                    <p>{tab.name}</p>
                                                </li>
                                            ))}
                                        </ul>
                                    </div>
                                </div>
                            </div>	{/* END TABS NAVIGATION */}
                            {/* TABS CONTENT */}
                            <div className="tabs-content">
                                <div className="row justify-content-center">
                                    <div className="col-xl-10">
                                        {/* CONTENT */}
                                        {tabs.map((tab, index)=>(
                                            <div key={index} id="tab-1" className={activeTab?.name === tab?.name ? "tab-content current" : "tab-content "}>
                                                <div className="accordion-wrapper">
                                                    <ul className="accordion">
                                                        {tabContents[activeTab.name]?.map((content, index)=>(
                                                            <li key={index} className={isActive.key == index ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(index)}>
                                                                {/* Question */}
                                                                <div className="accordion-thumb">
                                                                    <h5 className="s-22 w-700">{content?.title}</h5>
                                                                </div>
                                                                {/* Answer */}
                                                                <div className="accordion-panel color--grey" style={{ display: `${isActive.key == index ? "block" : "none"}` }}>
                                                                    {/* Text */}
                                                                    <p>{content?.desc}</p>
                                                                </div>
                                                            </li>
                                                        ))}
                                                    </ul>
                                                </div>
                                            </div>
                                        ))}
                                        {/* END OF CONTENT */}
                                    </div>
                                </div> {/* End row */}
                            </div>	{/* END TABS CONTENT */}
                        </div>     {/* End container */}
                    </section>	{/* END  FAQs-4 */}
                    {/* BANNER-9
			============================================= */}
                    <section id="banner-9" className="bg--02 py-70 x-border banner-section">
                        <div className="container">
                            {/* BANNER-9 WRAPPER */}
                            <div className="banner-7-wrapper">
                                <div className="row justify-content-center d-flex align-items-center">
                                    {/* BANNER-9 TEXT */}
                                    <div className="col-md-7 col-xl-5">
                                        <div className="banner-9-txt">
                                            {/* Title */}
                                            <h3 className="s-40 w-700">Still need help?</h3>
                                            {/* Text */}
                                            <p className="p-lg">Don't hesitate to contact us about any question you might be interested in</p>
                                            {/* Button */}
                                            <Link href="/contacts" className="btn r-04 btn--theme hover--theme">Ask your question here</Link>
                                        </div>
                                    </div>
                                    {/* BANNER-9 IMAGE */}
                                    <div className="col-md-5 col-xl-5">
                                        <div className="banner-9-img text-end">
                                            <img className="img-fluid" src="/images/help.png" alt="banner-image" />
                                        </div>
                                    </div>
                                </div>     {/* End row */}
                            </div>    {/* END BANNER-9 WRAPPER */}
                        </div>     {/* End container */}
                    </section>
                </div>

            </Layout>
        </>
    )
}