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,
  ContactFormDesigns,
  FaqDesigns,
} from '../../components/WebPageComponents/designs';

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

import ContactFormSection from '../../components/WebPageComponents/ContactFormComponent';

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 = 'CTPLERP';

  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 comprehensive platform that integrates HR, IT, and Finance operations into a single, seamless system. It automates routine tasks, enhances productivity, and ensures compliance across various functions.',
    },
    {
      question: 'How can ${projectName} benefit my organization?',
      answer:
        '${projectName} streamlines processes, reduces manual effort, and provides real-time insights, allowing your team to focus on strategic initiatives. It also ensures compliance with local regulations globally.',
    },
    {
      question: 'Is ${projectName} suitable for global operations?',
      answer:
        'Yes, ${projectName} is designed to support multi-country payroll and employment standards, making it ideal for organizations with global operations.',
    },
    {
      question: 'What kind of support does ${projectName} offer?',
      answer:
        'Our dedicated support team is available to assist you with any inquiries or technical issues. We offer prompt responses and comprehensive solutions to ensure your operations run smoothly.',
    },
    {
      question: 'How secure is the data on ${projectName}?',
      answer:
        '${projectName} employs robust security measures, including encryption and access controls, to protect your data. We prioritize data privacy and compliance with industry standards.',
    },
    {
      question: 'Can ${projectName} integrate with other systems?',
      answer:
        'Yes, ${projectName} offers seamless integration with various third-party applications, ensuring a cohesive and efficient workflow across your organization.',
    },
    {
      question: 'What are the pricing options for ${projectName}?',
      answer:
        "${projectName} offers flexible pricing plans tailored to your organization's needs. Contact our sales team for a detailed quote and to discuss the best plan for you.",
    },
  ];

  return (
    <div className='flex flex-col min-h-screen'>
      <Head>
        <title>{`Contact Us - Rippling HRMS`}</title>
        <meta
          name='description'
          content={`Get in touch with Rippling HRMS for any inquiries or support. Our team is ready to assist you with all your HR, IT, and Finance needs.`}
        />
      </Head>
      <WebSiteHeader projectName={'CTPLERP'} />
      <main className={`flex-grow    bg-white  rounded-none  `}>
        <HeroSection
          projectName={'CTPLERP'}
          image={['Customer service team ready']}
          mainText={`Connect with ${projectName} Today`}
          subTitle={`We're here to help with any questions or support you need. Reach out to ${projectName} and let us assist you in optimizing your HR, IT, and Finance operations.`}
          design={HeroDesigns.TEXT_CENTER || ''}
          buttonText={`Contact Us Now`}
        />

        <FaqSection
          projectName={'CTPLERP'}
          design={FaqDesigns.ACCORDION || ''}
          faqs={faqs}
          mainText={`Frequently Asked Questions about ${projectName} `}
        />

        <ContactFormSection
          projectName={'CTPLERP'}
          design={ContactFormDesigns.HIGHLIGHTED || ''}
          image={['Team ready to assist you']}
          mainText={`Reach Out to ${projectName} `}
          subTitle={`We're available to assist you with any inquiries or support needs. Expect a prompt response from our dedicated team at ${projectName}.`}
        />
      </main>
      <WebSiteFooter projectName={'CTPLERP'} />
    </div>
  );
}

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