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

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

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

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

import TestimonialsSection from '../components/WebPageComponents/TestimonialsComponent';

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 = '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 features_points = [
    {
      name: 'Comprehensive Financial Management',
      description:
        'Manage your finances with ease using our multi-currency and multi-company support, automated transaction matching, and detailed financial reporting.',
      icon: 'mdiCurrencyUsd',
    },
    {
      name: 'Advanced CRM Solutions',
      description:
        'Enhance customer relationships with lead management, automated follow-ups, and integration with marketing tools for seamless customer engagement.',
      icon: 'mdiAccountGroup',
    },
    {
      name: 'Efficient Inventory Control',
      description:
        'Optimize stock levels with real-time tracking, automated reordering, and multi-warehouse management to prevent overstocking or shortages.',
      icon: 'mdiWarehouse',
    },
  ];

  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 testimonials = [
    {
      text: "${projectName} has transformed our business operations, making everything more efficient and streamlined. We couldn't be happier with the results!",
      company: 'Tech Innovators Inc.',
      user_name: 'John Doe, CEO',
    },
    {
      text: "The intuitive interface and powerful features of ${projectName} have significantly improved our team's productivity. Highly recommended!",
      company: 'Creative Solutions Ltd.',
      user_name: 'Jane Smith, Operations Manager',
    },
    {
      text: "Thanks to ${projectName}, our financial management is now seamless and accurate. It's a game-changer for our accounting team.",
      company: 'Finance Gurus Co.',
      user_name: 'Michael Brown, Finance Director',
    },
    {
      text: 'Our customer relationships have never been better. ${projectName} has provided us with the tools to engage effectively and grow our client base.',
      company: 'Client Connect LLC',
      user_name: 'Emily White, CRM Specialist',
    },
    {
      text: "Inventory management used to be a headache, but with ${projectName}, it's now a breeze. Our stock levels are always optimized.",
      company: 'Retail Masters',
      user_name: 'David Green, Inventory Manager',
    },
    {
      text: 'The support team at ${projectName} is fantastic. They are always ready to help and ensure we get the most out of the software.',
      company: 'Service Excellence Group',
      user_name: 'Sarah Johnson, Customer Support Lead',
    },
  ];

  return (
    <div className='flex flex-col min-h-screen'>
      <Head>
        <title>{`Comprehensive ERP Solutions for Your Business`}</title>
        <meta
          name='description'
          content={`Explore our all-in-one ERP software designed to streamline your business operations, from accounting to CRM, inventory management, and more. Discover our features, pricing, and customer testimonials.`}
        />
      </Head>
      <WebSiteHeader projectName={'susatechnology'} pages={pages} />
      <main className={`flex-grow    bg-white  rounded-none  `}>
        <HeroSection
          projectName={'susatechnology'}
          image={['Business team collaborating efficiently']}
          mainText={`Transform Your Business with ${projectName}`}
          subTitle={`Discover the power of ${projectName}, an all-in-one ERP solution designed to streamline operations, enhance productivity, and drive growth across your organization.`}
          design={HeroDesigns.IMAGE_RIGHT || ''}
          buttonText={`Get Started Now`}
        />

        <FeaturesSection
          projectName={'susatechnology'}
          image={['Team analyzing data on screen']}
          withBg={0}
          features={features_points}
          mainText={`Unlock Efficiency with ${projectName} Features`}
          subTitle={`Explore the powerful features of ${projectName} designed to streamline your business operations and drive growth.`}
          design={FeaturesDesigns.CARDS_GRID_WITH_ICONS || ''}
        />

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

        <TestimonialsSection
          projectName={'susatechnology'}
          design={TestimonialsDesigns.MULTI_CARD_DISPLAY || ''}
          testimonials={testimonials}
          mainText={`What Our Clients Say About ${projectName} `}
        />

        <ContactFormSection
          projectName={'susatechnology'}
          design={ContactFormDesigns.WITH_IMAGE || ''}
          image={['Person typing on a laptop']}
          mainText={`Get in Touch with ${projectName} `}
          subTitle={`Reach out to us anytime. Our team is here to assist you with any inquiries or support you need. Expect a prompt response from ${projectName}.`}
        />
      </main>
      <WebSiteFooter projectName={'susatechnology'} pages={pages} />
    </div>
  );
}

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