import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import { useAppSelector } from '../../stores/hooks';
import LayoutGuest from '../../layouts/Guest';
import WebSiteHeader from '../../components/WebPageComponents/Header';
import WebSiteFooter from '../../components/WebPageComponents/Footer';
import {
  HeroDesigns,
  FaqDesigns,
} from '../../components/WebPageComponents/designs';

import HeroSection from '../../components/WebPageComponents/HeroComponent';

import FaqSection from '../../components/WebPageComponents/FaqComponent';

export default function WebSite() {
  const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
  const projectName = 'yarkoop';

  useEffect(() => {
    const darkElement = document.querySelector('body .dark');
    if (darkElement) {
      darkElement.classList.remove('dark');
    }
  }, []);

  const faqs = [
    {
      question: 'What is ${projectName} and how does it work?',
      answer:
        '${projectName} is a cooperative platform designed to foster mutual assistance and business growth. It offers tools for member management, financial tracking, and project collaboration, enabling cooperatives to operate efficiently and effectively.',
    },
    {
      question: 'How can I join ${projectName}?',
      answer:
        "Joining ${projectName} is simple. Visit our website, click on the 'Join Us' button, and fill out the registration form. Once your application is reviewed and approved, you'll gain access to all our features.",
    },
    {
      question: 'What features does ${projectName} offer?',
      answer:
        '${projectName} provides comprehensive member management, dynamic financial tools, and a collaborative project platform. These features are designed to enhance cooperative operations and foster community engagement.',
    },
    {
      question: 'Is there a cost to use ${projectName}?',
      answer:
        '${projectName} offers various pricing plans to suit different cooperative needs. Please visit our pricing page for detailed information on the available plans and their respective features.',
    },
    {
      question: 'How does ${projectName} ensure data security?',
      answer:
        '${projectName} prioritizes data security by implementing robust encryption protocols and regular security audits. We ensure that all user data is protected and handled with the utmost care.',
    },
    {
      question: 'Can I customize the features of ${projectName}?',
      answer:
        'Yes, ${projectName} offers customizable features to meet the unique needs of your cooperative. You can tailor the platform to align with your specific goals and operational requirements.',
    },
    {
      question: 'How can I get support if I encounter issues?',
      answer:
        "Our support team is available to assist you with any issues you may encounter. You can reach out to us via the contact form on our website, and we'll respond promptly to address your concerns.",
    },
  ];

  return (
    <div className='flex flex-col min-h-screen'>
      <Head>
        <title>{`Yarkoop FAQ - Frequently Asked Questions`}</title>
        <meta
          name='description'
          content={`Find answers to common questions about Yarkoop, our services, and how we can assist you. Explore our FAQ section for more information.`}
        />
      </Head>
      <WebSiteHeader projectName={'yarkoop'} />
      <main
        className={`flex-grow   bg-skyBlueTheme-websiteBG   rounded-none  `}
      >
        <HeroSection
          projectName={'yarkoop'}
          image={['FAQ section with question marks']}
          mainText={`Your Questions Answered at ${projectName}`}
          subTitle={`Explore our comprehensive FAQ section to find answers to your questions about ${projectName}. We're here to help you understand our services better.`}
          design={HeroDesigns.IMAGE_BG || ''}
          buttonText={`Learn More`}
        />

        <FaqSection
          projectName={'yarkoop'}
          design={FaqDesigns.ACCORDION || ''}
          faqs={faqs}
          mainText={`Frequently Asked Questions about ${projectName} `}
        />
      </main>
      <WebSiteFooter projectName={'yarkoop'} />
    </div>
  );
}

WebSite.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
