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

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

import FeaturesSection from '../../components/WebPageComponents/FeaturesComponent';

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

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

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

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

  const features_points = [
    {
      name: 'Automated Workflow Management',
      description:
        'Simplify your legal processes with automated workflows. Reduce manual tasks and focus on what truly matters—serving your clients.',
      icon: 'mdiAutorenew',
    },
    {
      name: 'Real-Time Analytics',
      description:
        'Gain insights with real-time analytics. Make informed decisions and track performance metrics to optimize your legal operations.',
      icon: 'mdiChartBar',
    },
    {
      name: 'Secure Document Storage',
      description:
        'Keep your documents safe and accessible. Our secure storage solution ensures your legal files are protected and organized.',
      icon: 'mdiLockOutline',
    },
  ];

  const faqs = [
    {
      question: 'What is ${projectName} and who is it for?',
      answer:
        '${projectName} is a CRM solution tailored for the legal industry, designed to streamline operations and enhance collaboration among departments like sales, customer service, and marketing.',
    },
    {
      question: 'How does ${projectName} improve workflow efficiency?',
      answer:
        '${projectName} automates routine tasks, integrates department functions, and provides real-time analytics, allowing legal professionals to focus on client service and strategic decision-making.',
    },
    {
      question: 'Is my data secure with ${projectName}?',
      answer:
        'Yes, ${projectName} employs advanced security measures, including encrypted document storage and secure access protocols, to ensure your data is protected at all times.',
    },
    {
      question: "Can I customize ${projectName} to fit my firm's needs?",
      answer:
        'Absolutely! ${projectName} offers customizable features and settings, allowing you to tailor the CRM to your specific legal practice requirements.',
    },
    {
      question: 'What kind of support is available for ${projectName} users?',
      answer:
        'We offer comprehensive support, including a dedicated help center, live chat, and email support to assist you with any questions or issues you may encounter.',
    },
    {
      question: 'Does ${projectName} offer a free trial?',
      answer:
        'Yes, we provide a free trial period so you can explore the features and benefits of ${projectName} before committing to a subscription.',
    },
  ];

  return (
    <div className='flex flex-col min-h-screen'>
      <Head>
        <title>{`Our Services - Legal CRM Solutions`}</title>
        <meta
          name='description'
          content={`Explore the comprehensive services offered by our CRM solution, designed to enhance efficiency and collaboration in the legal industry.`}
        />
      </Head>
      <WebSiteHeader projectName={'Vehicle Inspection Booking System'} />
      <main className={`flex-grow    bg-white  rounded-none  `}>
        <HeroSection
          projectName={'Vehicle Inspection Booking System'}
          image={['Legal team discussing strategy']}
          mainText={`Transform Your Legal Services with ${projectName}`}
          subTitle={`Discover how ${projectName} can revolutionize your legal operations. Our tailored CRM services enhance efficiency, streamline processes, and foster collaboration across your firm.`}
          design={HeroDesigns.IMAGE_BG || ''}
          buttonText={`Explore Our Services`}
        />

        <FeaturesSection
          projectName={'Vehicle Inspection Booking System'}
          image={['Icons representing CRM features']}
          withBg={1}
          features={features_points}
          mainText={`Unleash the Power of ${projectName}`}
          subTitle={`Explore the robust features of ${projectName} designed to elevate your legal practice. Enhance productivity, streamline operations, and drive success.`}
          design={FeaturesDesigns.CARDS_GRID_WITH_ICONS || ''}
        />

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

        <ContactFormSection
          projectName={'Vehicle Inspection Booking System'}
          design={ContactFormDesigns.HIGHLIGHTED || ''}
          image={['Person using a laptop']}
          mainText={`Connect with ${projectName} Support `}
          subTitle={`Reach out to us anytime for inquiries or assistance. Our team at ${projectName} is ready to respond promptly and help you with any questions.`}
        />
      </main>
      <WebSiteFooter projectName={'Vehicle Inspection Booking System'} />
    </div>
  );
}

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