'use client';

// @ts-nocheck
import { FooterWebsite } from '../footer/FooterWebsite';
import Card from '@/components/card/Card';
import Faq from '@/components/landing/faq';
import InnerContent from '@/components/layout/innerContent';
import NavbarFixed from '@/components/navbar/NavbarFixed';
import { Database } from '@/types_db';
import { getStripe } from '@/utils/stripe/client';
import {
  Badge,
  Button,
  Flex,
  Icon,
  Link,
  SimpleGrid,
  Text,
  useColorModeValue
} from '@chakra-ui/react';
import { User } from '@supabase/supabase-js';
import { usePathname, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import {
  FaCcVisa,
  FaCcMastercard,
  FaCcPaypal,
  FaCcAmex,
  FaCcApplePay
} from 'react-icons/fa';
import {
  MdChevronRight,
  MdCheckCircle,
  MdAttachMoney,
  MdLock,
  MdOutlineDoDisturbOn
} from 'react-icons/md';
import { checkoutWithStripe } from '@/utils/stripe/server';
import { getErrorRedirect } from '@/utils/helpers';

type Subscription = Database['public']['Tables']['subscriptions']['Row'];
type Product = Database['public']['Tables']['products']['Row'];
type Price = Database['public']['Tables']['prices']['Row'];
interface ProductWithPrices extends Product {
  prices: Price[];
}
interface PriceWithProduct extends Price {
  products: Product | null;
}
interface SubscriptionWithProduct extends Subscription {
  prices: PriceWithProduct | null;
}

interface Props {
  user: User | null | undefined;
  products: ProductWithPrices[];
  subscription: SubscriptionWithProduct | null;
}

export default function Pricing({ user, products, subscription }: Props) {
  const router = useRouter();
  const currentPath = usePathname();
  const [priceIdLoading, setPriceIdLoading] = useState<string>();
  const handleCheckout = async (price: Price) => {
    setPriceIdLoading(price.id);

    if (!user) {
      setPriceIdLoading(undefined);
      return router.push('/signin/signup');
    }

    const { errorRedirect, sessionId } = await checkoutWithStripe(
      price,
      currentPath
    );

    if (errorRedirect) {
      setPriceIdLoading(undefined);
      return router.push(errorRedirect);
    }

    if (!sessionId) {
      setPriceIdLoading(undefined);
      return router.push(
        getErrorRedirect(
          currentPath,
          'An unknown error occurred.',
          'Please try again later or contact a system administrator.'
        )
      );
    }

    const stripe = await getStripe();
    stripe?.redirectToCheckout({ sessionId });

    setPriceIdLoading(undefined);
  };
  const [version, setVersion] = useState('monthly');
  const textColor = useColorModeValue('#120F43', 'white');
  const brandColor = useColorModeValue('brand.500', 'white');
  const brandColorPrice = useColorModeValue('brand.500', 'white');
  const card = useColorModeValue('#fff', 'rgba(255, 255, 255, 0.05)');

  return (
    <Flex
      id="pricing"
      bgSize="cover"
      w="100%"
      direction={{ base: 'column' }}
      pt={{ base: '120px', md: '180px' }}
      overflow="hidden"
      position="relative"
    >
      <NavbarFixed />
      <InnerContent
        zIndex="1"
        maxW={{ base: '100%', md: '100%', xl: '1170px' }}
        pb={{ base: '60px', md: '100px' }}
      >
        {/* Title */}
        <Flex
          px={{ base: '20px', md: '0px' }}
          w="100%"
          mb="40px"
          direction={{ base: 'column' }}
        >
          <Flex
            direction="column"
            textAlign="start"
            px={{ base: '20px', md: '40px', xl: '0px' }}
            mb={{ base: '0px', lg: '30px' }}
            justify="center"
            align="center"
          >
            <Text
              as="h3"
              textAlign={{ base: 'center', lg: 'center' }}
              fontWeight="700"
              letterSpacing="2px"
              color={brandColorPrice}
              fontSize={{ base: 'xs', md: 'md' }}
              w="100%"
              mb="10px"
            >
              PRICING PLANS
            </Text>
            <Text
              as="h2"
              textAlign={{ base: 'center', lg: 'center' }}
              color={textColor}
              fontWeight="800"
              fontSize={{ base: '28px', md: '40px', lg: '40px', xl: '48px' }}
              lineHeight={{ base: '38px', md: '50px', lg: '50px', xl: '60px' }}
              w={{ base: '100%', md: '90%', lg: '80%', xl: '74%' }}
            >
              Create outstanding Essays for less than a Netflix subscription per
              month
            </Text>
          </Flex>
        </Flex>
        <SimpleGrid
          px={{ base: '20px', md: '0px' }}
          w="100%"
          columns={{ base: 1, lg: 3 }}
          gap="20px"
          mb="20px"
        >
          <Card
            borderRadius="16px"
            bg={card}
            maxW="377px"
            mx="auto"
            alignItems={{ base: 'start', lg: 'center' }}
            p={{ base: '16px', md: '26px' }}
            pt={{ base: '26px', md: '36px' }}
            flexDirection="column"
          >
            <Flex mb="20px" mx="auto">
              <Text
                fontSize="22px"
                letterSpacing="0px"
                textAlign="center"
                fontWeight="700"
                color={textColor}
              >
                Demo Plan
              </Text>
            </Flex>
            <Flex
              zIndex="1"
              px={{ base: '18px', md: '34px' }}
              pt="40px"
              pb="40px"
              borderRadius="16px"
              bg="#F3F5FA"
              mb="40px"
              direction="column"
              w="100%"
            >
              <Flex mb="30px" direction="row" justify="center">
                <Text
                  color="#120F43"
                  fontSize={{ base: '48px', md: '54px' }}
                  lineHeight="100%"
                  letterSpacing="0px"
                  fontWeight="extrabold"
                >
                  Free
                </Text>
              </Flex>
              <Link href="/dashboard/signin">
                <Button
                  py="20px"
                  px="16px"
                  fontSize="sm"
                  variant="checkout"
                  mx="auto"
                  borderRadius="45px"
                  w="100%"
                  h="54px"
                >
                  {subscription ? 'Manage' : 'Get started now'}
                  <Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
                </Button>
              </Link>
            </Flex>

            <Flex w={{ base: '100%', xl: '100%' }} direction="column">
              <Flex alignItems="center" mb="30px">
                <Icon
                  me="10px"
                  w="20px"
                  h="20px"
                  color={brandColor}
                  as={MdCheckCircle}
                />
                <Text
                  as="span"
                  fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                  fontWeight="600"
                  color={textColor}
                  letterSpacing="0px"
                >
                  Standard Essays
                </Text>
              </Flex>
              <Flex alignItems="center" mb="30px">
                <Icon
                  me="10px"
                  w="20px"
                  h="20px"
                  color={brandColor}
                  as={MdCheckCircle}
                />
                <Text
                  as="span"
                  fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                  fontWeight="600"
                  color={textColor}
                  letterSpacing="0px"
                >
                  Up to 4 Essay types
                </Text>
              </Flex>
              <Flex alignItems="center" mb="30px">
                <Icon
                  me="10px"
                  w="20px"
                  h="20px"
                  color={brandColor}
                  as={MdCheckCircle}
                />
                <Text
                  as="span"
                  fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                  fontWeight="600"
                  color={textColor}
                  letterSpacing="0px"
                >
                  Up to 300 words per Essay
                </Text>
              </Flex>
              <Flex alignItems="center" mb="30px">
                <Icon
                  me="10px"
                  w="20px"
                  h="20px"
                  color="gray.400"
                  as={MdOutlineDoDisturbOn}
                />
                <Text
                  as="span"
                  fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                  fontWeight="600"
                  color="gray.400"
                  letterSpacing="0px"
                >
                  Essay Tones (Academic, etc.)
                </Text>
              </Flex>
              <Flex alignItems="center" mb="30px">
                <Icon
                  me="10px"
                  w="20px"
                  h="20px"
                  color="gray.400"
                  as={MdOutlineDoDisturbOn}
                />
                <Text
                  as="span"
                  fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                  fontWeight="600"
                  color="gray.400"
                  letterSpacing="0px"
                >
                  Academic Citation formats (APA, etc)
                </Text>
              </Flex>
              <Flex alignItems="center" mb="30px">
                <Icon
                  me="10px"
                  w="20px"
                  h="20px"
                  color="gray.400"
                  as={MdOutlineDoDisturbOn}
                />
                <Text
                  as="span"
                  fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                  fontWeight="600"
                  color="gray.400"
                  letterSpacing="0px"
                >
                  Academic Levels (Master, etc.)
                </Text>
              </Flex>
              <Flex alignItems="center" mb="30px">
                <Icon
                  me="10px"
                  w="20px"
                  h="20px"
                  color="gray.400"
                  as={MdOutlineDoDisturbOn}
                />
                <Text
                  as="span"
                  fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                  fontWeight="600"
                  color="gray.400"
                  letterSpacing="0px"
                >
                  Premium features
                </Text>
              </Flex>
              <Flex alignItems="center" mb="30px">
                <Icon
                  me="10px"
                  w="20px"
                  h="20px"
                  color="gray.400"
                  as={MdOutlineDoDisturbOn}
                />
                <Text
                  as="span"
                  fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                  fontWeight="600"
                  color="gray.400"
                  letterSpacing="0px"
                >
                  Priority Support
                </Text>
              </Flex>
            </Flex>
          </Card>
          {products.map((product) => {
            const price = product?.prices?.find(
              (price) => price.id === 'price_1P3gGXGx8VbJPRgzdEZODy8K'
            );
            if (product.id === 'prod_PtTCPDFZbburMa') {
              if (!price) return null;
              return (
                <Card
                  key={product.id}
                  borderRadius="16px"
                  bg="#120F43"
                  maxW="377px"
                  mx="auto"
                  alignItems={{ base: 'start', lg: 'center' }}
                  p={{ base: '16px', md: '26px' }}
                  pt={{ base: '26px', md: '36px' }}
                  flexDirection="column"
                >
                  {/* @ts-ignore-nextline */}
                  <Flex mb="20px" mx="auto">
                    <Text
                      fontSize="22px"
                      letterSpacing="0px"
                      textAlign="center"
                      fontWeight="700"
                      color="white"
                    >
                      {product.name?.toString()}
                    </Text>
                  </Flex>
                  <Flex
                    zIndex="1"
                    px={{ base: '18px', md: '34px' }}
                    pt="40px"
                    pb="40px"
                    borderRadius="16px"
                    bg="#120F43"
                    boxShadow="0px 8px 25px -4px rgba(255, 255, 255, 0.30) inset"
                    mb="40px"
                    direction="column"
                    w="100%"
                  >
                    <Flex mb="30px" direction="row" justify="center">
                      <Text
                        color="white"
                        fontSize={{ base: '48px', md: '54px' }}
                        lineHeight="100%"
                        letterSpacing="0px"
                        fontWeight="extrabold"
                      >
                        $
                        {price.unit_amount !== null
                          ? price.unit_amount / 100
                          : price.unit_amount}
                      </Text>
                      <Flex direction="column">
                        <Text
                          color="white"
                          letterSpacing="0px"
                          fontWeight="700"
                          fontSize="sm"
                          mt="auto"
                        >
                          {version !== 'yearly' ? '/month' : '/month'}
                        </Text>
                        {/* <Text
                          color="white"
                          letterSpacing="0px"
                          fontWeight="500"
                          fontSize="sm"
                          textDecoration="line-through"
                        >
                          {version !== 'yearly' ? 'reg. $24' : 'reg. $24'}
                        </Text> */}
                      </Flex>
                    </Flex>
                    <Button
                      py="20px"
                      px="16px"
                      fontSize="sm"
                      variant="checkoutDark"
                      mx="auto"
                      borderRadius="45px"
                      w="100%"
                      h="54px"
                      onClick={() => handleCheckout(price)}
                    >
                      {subscription ? 'Manage' : 'Get started now'}
                      <Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
                    </Button>
                  </Flex>

                  {/* Features */}
                  <Flex w={{ base: '100%', xl: '100%' }} direction="column">
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color="white"
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color="white"
                        letterSpacing="0px"
                      >
                        Unlimited Premium Essays / month
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color="white"
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color="white"
                        letterSpacing="0px"
                      >
                        Access to 12+ Essay types
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color="white"
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color="white"
                        letterSpacing="0px"
                      >
                        Up to 1500 words per Essay
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color="white"
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color="white"
                        letterSpacing="0px"
                      >
                        Academic Citation formats (APA, etc)
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color="white"
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color="white"
                        letterSpacing="0px"
                      >
                        Essay Tones (Academic, etc.)
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color="white"
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color="white"
                        letterSpacing="0px"
                      >
                        Academic Levels (Master, etc.)
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color="white"
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color="white"
                        letterSpacing="0px"
                      >
                        Exceptional Essays in seconds
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color="white"
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color="white"
                        letterSpacing="0px"
                      >
                        Easy-to-use Essay Generator
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color="white"
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color="white"
                        letterSpacing="0px"
                      >
                        Priority Support
                      </Text>
                    </Flex>
                  </Flex>
                </Card>
              );
            }
          })}
          {products.map((product) => {
            const price = product?.prices?.find(
              (price) => price.id === 'price_1P3gMyGx8VbJPRgzkoB6Fp8F'
            );
            if (product.id === 'prod_PtTJ6R3RnzmIPX') {
              if (!price) return null;
              return (
                <Card
                  key={product.id}
                  borderRadius="16px"
                  bg={card}
                  maxW="377px"
                  mx="auto"
                  alignItems={{ base: 'start', lg: 'center' }}
                  p={{ base: '16px', md: '26px' }}
                  pt={{ base: '26px', md: '36px' }}
                  flexDirection="column"
                >
                  <Flex mb="20px" mx="auto">
                    <Text
                      fontSize="22px"
                      letterSpacing="0px"
                      textAlign="center"
                      fontWeight="700"
                      color={textColor}
                    >
                      {product.name?.toString()}
                    </Text>
                    <Badge
                      display="flex"
                      bg="#F2EFFF"
                      alignItems="center"
                      borderRadius="99px"
                      px="6px"
                      pb="8px"
                      ms="10px"
                      textColor={brandColor}
                    >
                      Save 35%
                    </Badge>
                  </Flex>
                  <Flex
                    zIndex="1"
                    px={{ base: '18px', md: '34px' }}
                    pt="40px"
                    pb="40px"
                    borderRadius="16px"
                    bg="#F3F5FA"
                    mb="40px"
                    direction="column"
                    w="100%"
                  >
                    <Flex mb="30px" direction="row" justify="center">
                      <Text
                        color={'transparent'}
                        fontSize={{ base: '48px', md: '54px' }}
                        lineHeight="100%"
                        letterSpacing="0px"
                        fontWeight="extrabold"
                        bgGradient="linear-gradient(91deg, #3D1DFF 0%, #6147FF 22.40%, #D451FF 46.35%, #EC458D 75.00%, #FFCA8B 100%)"
                        bgClip="text"
                      >
                        $
                        {price.unit_amount !== null
                          ? price.unit_amount / 100
                          : price.unit_amount}
                      </Text>
                      <Flex direction="column" ms="8px">
                        <Text
                          color={textColor}
                          letterSpacing="0px"
                          fontWeight="700"
                          fontSize="sm"
                          mt="auto"
                        >
                          {version !== 'yearly' ? '/year' : '/year'}
                        </Text>
                        <Text
                          color={textColor}
                          letterSpacing="0px"
                          fontWeight="500"
                          textDecoration="line-through"
                          fontSize="sm"
                          mt="2px"
                        >
                          {version !== 'yearly' ? 'reg.$108' : 'reg.$108'}
                        </Text>
                      </Flex>
                    </Flex>
                    <Button
                      py="20px"
                      px="16px"
                      fontSize="sm"
                      variant="checkout"
                      mx="auto"
                      borderRadius="45px"
                      w="100%"
                      h="54px"
                      onClick={() => handleCheckout(price)}
                    >
                      {subscription ? 'Manage' : 'Get started now'}
                      <Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
                    </Button>
                  </Flex>

                  {/* Features */}
                  <Flex w={{ base: '100%', xl: '100%' }} direction="column">
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color={brandColor}
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color={textColor}
                        letterSpacing="0px"
                      >
                        Unlimited Premium Essays / year
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color={brandColor}
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color={textColor}
                        letterSpacing="0px"
                      >
                        Access to 12+ Essay types
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color={brandColor}
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color={textColor}
                        letterSpacing="0px"
                      >
                        Up to 1500 words per Essay
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color={brandColor}
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color={textColor}
                        letterSpacing="0px"
                      >
                        Academic Citation formats (APA, etc)
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color={brandColor}
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color={textColor}
                        letterSpacing="0px"
                      >
                        Essay Tones (Academic, etc.)
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color={brandColor}
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color={textColor}
                        letterSpacing="0px"
                      >
                        Academic Levels (Master, etc.)
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color={brandColor}
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color={textColor}
                        letterSpacing="0px"
                      >
                        Exceptional Essays in seconds
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color={brandColor}
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color={textColor}
                        letterSpacing="0px"
                      >
                        Easy-to-use Essay Generator
                      </Text>
                    </Flex>
                    <Flex alignItems="center" mb="30px">
                      <Icon
                        me="10px"
                        w="20px"
                        h="20px"
                        color={brandColor}
                        as={MdCheckCircle}
                      />
                      <Text
                        as="span"
                        fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
                        fontWeight="600"
                        color={textColor}
                        letterSpacing="0px"
                      >
                        Priority Support
                      </Text>
                    </Flex>
                  </Flex>
                </Card>
              );
            }
          })}
        </SimpleGrid>
        <Flex
          px={{ base: '20px', md: '0px' }}
          direction="column"
          alignItems="center"
          mt="30px"
        >
          <Flex alignItems="center" mb="20px">
            <Icon
              me="4px"
              w="24px"
              h="24px"
              color={textColor}
              as={MdAttachMoney}
            />
            <Text
              as="span"
              fontSize="sm"
              fontWeight="500"
              color={textColor}
              letterSpacing="0px"
            >
              7-Days money back
            </Text>
          </Flex>
          <Flex alignItems="center" mb="20px">
            <Icon me="4px" w="24px" h="24px" color={textColor} as={MdLock} />
            <Text
              as="span"
              fontSize="sm"
              fontWeight="500"
              color={textColor}
              letterSpacing="0px"
            >
              Secured AES-256 Encrypted payments powered by Stripe:
            </Text>
          </Flex>
          <Flex alignItems="center" mb="20px">
            <Icon me="10px" w="30px" h="30px" color={textColor} as={FaCcVisa} />
            <Icon
              me="10px"
              w="30px"
              h="30px"
              color={textColor}
              as={FaCcMastercard}
            />
            <Icon
              me="10px"
              w="30px"
              h="30px"
              color={textColor}
              as={FaCcPaypal}
            />
            <Icon
              me="10px"
              w="30px"
              h="30px"
              color={textColor}
              as={FaCcApplePay}
            />
            <Icon w="30px" h="30px" color={textColor} as={FaCcAmex} />
          </Flex>
        </Flex>
      </InnerContent>
      <Faq />
      <FooterWebsite />
    </Flex>
  );
}