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

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

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

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 = 'Build SaaS app that analysis stock in Nigeria';

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

  const pricing_features = {
    standard: {
      features: [
        'Access to top 2 undervalued stocks',
        'Basic stock analysis tools',
      ],
      limited_features: ['Limited chart views', 'Basic investor letters'],
    },
    premium: {
      features: [
        'Access to top 5 undervalued stocks',
        'Advanced stock analysis tools',
        'Interactive price charts',
      ],
      also_included: [
        'Comprehensive investor letters',
        'Priority customer support',
      ],
    },
    business: {
      features: [
        'Unlimited stock analysis',
        'Corporate user management',
        'Custom investor reports',
        'Dedicated account manager',
      ],
    },
  };

  const description = {
    standard:
      'Ideal for individual investors looking to explore basic stock insights and identify potential opportunities.',
    premium:
      'Perfect for small businesses or startups seeking advanced analysis tools and comprehensive stock recommendations.',
    business:
      'Designed for enterprises requiring extensive stock analysis, corporate management features, and personalized support.',
  };

  const faqs = [
    {
      question:
        'What is the difference between the Standard and Premium plans?',
      answer:
        'The Standard plan offers access to basic stock insights and limited features, ideal for individual investors. The Premium plan provides advanced analysis tools and comprehensive stock recommendations, suitable for small businesses.',
    },
    {
      question: 'Can I upgrade my plan at any time?',
      answer:
        'Yes, you can upgrade your plan at any time through your account settings. The new features will be available immediately after the upgrade.',
    },
    {
      question: 'How does ${projectName} identify undervalued stocks?',
      answer:
        '${projectName} uses AI to analyze fundamental, technical, and sentiment data from the Nigeria and US stock markets to identify stocks with high growth potential.',
    },
    {
      question: 'Is there a free trial available?',
      answer:
        'Yes, we offer a 7-day freemium trial that allows you to explore basic features and access limited stock insights.',
    },
    {
      question: 'What payment methods are accepted?',
      answer:
        'We accept payments via Stripe, which supports major credit and debit cards, ensuring secure and seamless transactions.',
    },
    {
      question: 'Can I cancel my subscription at any time?',
      answer:
        'Yes, you can cancel your subscription at any time through your account settings. Your access will continue until the end of the billing cycle.',
    },
    {
      question: 'How often are the stock recommendations updated?',
      answer:
        'Stock recommendations are updated regularly to reflect the latest market data and insights, ensuring you have access to the most current information.',
    },
  ];

  return (
    <div className='flex flex-col min-h-screen'>
      <Head>
        <title>{`StockSageAI Pricing Plans`}</title>
        <meta
          name='description'
          content={`Explore the flexible pricing plans of StockSageAI, designed to cater to individual investors, small businesses, and enterprises with AI-driven stock insights.`}
        />
      </Head>
      <WebSiteHeader
        projectName={'Build SaaS app that analysis stock in Nigeria'}
      />
      <main className={`flex-grow    bg-white  rounded-none  `}>
        <HeroSection
          projectName={'Build SaaS app that analysis stock in Nigeria'}
          image={['Diverse pricing plans illustration']}
          mainText={`Choose Your ${projectName} Plan Today`}
          subTitle={`Discover flexible pricing options with ${projectName} tailored to meet the needs of individual investors, startups, and enterprises. Unlock the power of AI-driven stock insights.`}
          design={HeroDesigns.IMAGE_BG || ''}
          buttonText={`View Plans`}
        />

        <PricingSection
          projectName={'Build SaaS app that analysis stock in Nigeria'}
          withBg={0}
          features={pricing_features}
          description={description}
        />

        <FaqSection
          projectName={'Build SaaS app that analysis stock in Nigeria'}
          design={FaqDesigns.ACCORDION || ''}
          faqs={faqs}
          mainText={`${projectName} Frequently Asked Questions `}
        />
      </main>
      <WebSiteFooter
        projectName={'Build SaaS app that analysis stock in Nigeria'}
      />
    </div>
  );
}

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