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

import PricingSection from '../../components/WebPageComponents/PricingComponent';

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

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

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

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

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

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

  const pricing_features = {
    standard: {
      features: ['Core Accounting', 'Basic CRM', 'Inventory Management'],
      limited_features: ['Limited Multi-Currency Support', 'Basic Reporting'],
    },
    premium: {
      features: [
        'Advanced CRM',
        'Comprehensive Financial Management',
        'Enhanced Inventory Control',
      ],
      also_included: [
        'Multi-Currency Support',
        'Advanced Reporting',
        'Priority Support',
      ],
    },
    business: {
      features: [
        'Full ERP Suite',
        'Custom Integrations',
        'Dedicated Account Manager',
      ],
    },
  };

  const description = {
    standard:
      'Ideal for individuals or freelancers looking to manage their finances and customer relationships efficiently.',
    premium:
      'Perfect for small startups or agencies seeking advanced CRM capabilities and comprehensive financial management.',
    business:
      'Designed for enterprises requiring a full ERP suite with custom integrations and dedicated support.',
  };

  const faqs = [
    {
      question: 'What features are included in the Standard plan?',
      answer:
        "The Standard plan includes core accounting, basic CRM, and inventory management features. It's perfect for individuals or freelancers looking to manage their finances and customer relationships efficiently.",
    },
    {
      question: 'Can I upgrade from the Standard to the Premium plan?',
      answer:
        'Yes, you can easily upgrade from the Standard to the Premium plan at any time. Simply contact our support team, and they will assist you with the transition.',
    },
    {
      question: 'Is there a free trial available for ${projectName}?',
      answer:
        'Yes, we offer a 14-day free trial for all new users. This allows you to explore the features and benefits of ${projectName} before committing to a plan.',
    },
    {
      question: 'How does ${projectName} handle data security?',
      answer:
        '${projectName} employs advanced security measures, including encryption and regular audits, to ensure your data is protected. We comply with industry standards to maintain the highest level of security.',
    },
    {
      question: 'What kind of support is available with the Business plan?',
      answer:
        'The Business plan includes dedicated account management and priority support. Our team is available 24/7 to assist with any queries or issues you may encounter.',
    },
    {
      question: 'Can I customize ${projectName} to fit my business needs?',
      answer:
        'Yes, ${projectName} offers customization options, especially in the Business plan, allowing you to tailor the software to meet your specific business requirements.',
    },
    {
      question: 'Are there any hidden fees in the pricing plans?',
      answer:
        'No, our pricing is transparent, and there are no hidden fees. The cost you see is the cost you pay, with no surprises.',
    },
  ];

  return (
    <div className='flex flex-col min-h-screen'>
      <Head>
        <title>{`Flexible Pricing Plans for ${projectName}`}</title>
        <meta
          name='description'
          content={`Explore our competitive pricing plans tailored to meet the needs of businesses of all sizes. Choose the right plan for your organization and unlock the full potential of ${projectName}.`}
        />
      </Head>
      <WebSiteHeader projectName={'susatechnology'} pages={pages} />
      <main className={`flex-grow    bg-white  rounded-none  `}>
        <HeroSection
          projectName={'susatechnology'}
          image={['Pricing plans on a screen']}
          mainText={`Choose Your Perfect ${projectName} Plan`}
          subTitle={`Discover flexible pricing options designed to fit businesses of all sizes. Unlock the full potential of ${projectName} with a plan that suits your needs and budget.`}
          design={HeroDesigns.IMAGE_BG || ''}
          buttonText={`View Pricing Plans`}
        />

        <PricingSection
          projectName={'susatechnology'}
          withBg={0}
          features={pricing_features}
          description={description}
        />

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

        <ContactFormSection
          projectName={'susatechnology'}
          design={ContactFormDesigns.HIGHLIGHTED_DIVERSITY || ''}
          image={['Person typing on a laptop']}
          mainText={`Reach Out to ${projectName} Support `}
          subTitle={`Have questions about our pricing plans or need assistance? Contact us anytime, and our team will respond promptly to help you with your inquiries.`}
        />
      </main>
      <WebSiteFooter projectName={'susatechnology'} pages={pages} />
    </div>
  );
}

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