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

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

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

import AboutUsSection from '../../components/WebPageComponents/AboutUsComponent';

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

  useEffect(() => {
    const darkElement = document.querySelector('body .dark');
    if (darkElement) {
      darkElement.classList.remove('dark');
    }
  }, []);
  const pages = [
    {
      href: '/home',
      label: 'home',
    },

    {
      href: '/about',
      label: 'about',
    },

    {
      href: '/services',
      label: 'services',
    },

    {
      href: '/contact',
      label: 'contact',
    },

    {
      href: '/faq',
      label: 'FAQ',
    },
  ];

  const features_points = [
    {
      name: 'Task Management',
      description:
        'Effortlessly organize and prioritize tasks with our intuitive task management system. Stay on top of deadlines and ensure nothing falls through the cracks.',
      icon: 'mdiClipboardCheck',
    },
    {
      name: 'Team Collaboration',
      description:
        'Enhance team communication and collaboration with real-time updates and shared workspaces. Keep everyone aligned and working towards common goals.',
      icon: 'mdiAccountGroup',
    },
    {
      name: 'Progress Tracking',
      description:
        'Monitor project progress with detailed analytics and reports. Gain insights into team performance and make informed decisions to drive success.',
      icon: 'mdiChartLine',
    },
  ];

  const faqs = [
    {
      question: 'What is ${projectName} and how does it work?',
      answer:
        '${projectName} is a project management tool designed to streamline workflows and enhance team collaboration. It offers features like task management, progress tracking, and team communication to help you manage projects efficiently.',
    },
    {
      question: 'Is there a free trial available for ${projectName}?',
      answer:
        'Yes, ${projectName} offers a free trial period for new users to explore its features and determine if it meets their project management needs.',
    },
    {
      question: 'How secure is my data with ${projectName}?',
      answer:
        'We prioritize data security and use advanced encryption methods to protect your information. Regular security audits ensure that your data remains safe and confidential.',
    },
    {
      question: 'Can I integrate ${projectName} with other tools?',
      answer:
        'Absolutely! ${projectName} supports integrations with popular tools like Slack, Google Drive, and Trello, allowing you to seamlessly connect your existing workflows.',
    },
    {
      question: 'What support options are available for ${projectName} users?',
      answer:
        'We offer 24/7 customer support through email and live chat. Our dedicated support team is always ready to assist you with any questions or issues you may encounter.',
    },
    {
      question: 'How customizable is ${projectName} for different teams?',
      answer:
        "${projectName} is highly customizable, allowing teams to tailor the tool to their specific needs. You can adjust settings, create custom workflows, and personalize dashboards to suit your team's preferences.",
    },
  ];

  return (
    <div className='flex flex-col min-h-screen'>
      <Head>
        <title>{`Project Management Tool - Streamline Your Workflow`}</title>
        <meta
          name='description'
          content={`Discover our innovative project management tool designed to enhance productivity and streamline your workflow. Explore features, learn about our mission, and get in touch with us today.`}
        />
      </Head>
      <WebSiteHeader projectName={'FLPMSUPERSTAR'} pages={pages} />
      <main className={`flex-grow    bg-white  rounded-none  `}>
        <HeroSection
          projectName={'FLPMSUPERSTAR'}
          image={['Team collaborating on project tasks']}
          mainText={`Revolutionize Your Workflow with ${projectName}`}
          subTitle={`${projectName} is your ultimate project management tool, designed to streamline tasks, enhance collaboration, and boost productivity. Experience seamless project handling like never before.`}
          design={HeroDesigns.IMAGE_RIGHT || ''}
          buttonText={`Get Started Now`}
        />

        <FeaturesSection
          projectName={'FLPMSUPERSTAR'}
          image={['Dashboard showcasing project overview']}
          withBg={1}
          features={features_points}
          mainText={`Explore ${projectName} Features`}
          subTitle={`Discover the powerful features of ${projectName} that simplify project management and enhance team collaboration.`}
          design={FeaturesDesigns.CARDS_GRID_WITH_ICONS || ''}
        />

        <AboutUsSection
          projectName={'FLPMSUPERSTAR'}
          image={['Team brainstorming innovative solutions']}
          mainText={`Discover the Vision Behind ${projectName}`}
          subTitle={`At ${projectName}, we are committed to transforming the way teams manage projects. Our mission is to provide intuitive tools that empower teams to achieve their goals efficiently and effectively.`}
          design={AboutUsDesigns.IMAGE_LEFT || ''}
          buttonText={`Learn More About Us`}
        />

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

        <ContactFormSection
          projectName={'FLPMSUPERSTAR'}
          design={ContactFormDesigns.WITH_IMAGE || ''}
          image={['Person typing on a laptop']}
          mainText={`Get in Touch with ${projectName} `}
          subTitle={`We're here to help! Reach out to us anytime, and we'll respond promptly to assist you with any inquiries or support you need.`}
        />
      </main>
      <WebSiteFooter projectName={'FLPMSUPERSTAR'} pages={pages} />
    </div>
  );
}

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