import TrastedPartners from 'components/Sections/TrastedPartners';
import OurProducts from 'components/Sections/OurProducts/';
import Feauters from 'components/Sections/Features';
import UseCases from '../../components/Sections/UseCases/index';
import Reviews from 'components/Sections/Reviews';
import AboutUsSection from 'components/Sections/AboutUs';
import ApiIntegraion from './ApiIntegration';
import GetStarted from 'components/Sections/GetStarted';
import Locations from './Locations';
import ProxyManagement from 'components/Sections/ProxyManagement';
import Hero from './Hero';
import { useSelector } from 'react-redux';
import {
    selectHomepagePartners,
    selectHomepageProducts,
    selectHomepageFeatures,
    selectHomepageDashboard,
    selectHomepageReviews,
    selectHomepageLocations,
    selectHomepageAboutUs,
    selectHomepageCta,
    selectHomepageUsecases,
    selectHomepageIsLoading,
} from 'store/slices/HomepageSlice';
import { selectFeatures } from 'store/slices/FeaturesSlice';
import { Helmet } from 'react-helmet';
import { selectBreadcrumbList } from 'store/slices/GeneralSlice';
import { useEffect, useState } from 'react';
import { useImageLoaded } from 'hooks/useImageLoaded';


const Home = () => {
    const isLoadedImages = useImageLoaded();
    const [isLoading, setIsLoading] = useState(true);

    const { tag, title, product_card } = useSelector(selectHomepageProducts);
    const BreadcrumbList = useSelector(selectBreadcrumbList);
    const partners = useSelector(selectHomepagePartners);
    const featuresSideText = useSelector(selectHomepageFeatures);
    const dashboard = useSelector(selectHomepageDashboard);
    const useCases = useSelector(selectHomepageUsecases);
    const reviews = useSelector(selectHomepageReviews);
    const locationsText = useSelector(selectHomepageLocations);
    const aboutUs = useSelector(selectHomepageAboutUs);
    const cta = useSelector(selectHomepageCta);
    const features = useSelector(selectFeatures);

    const homepageIsLoading = useSelector(selectHomepageIsLoading);


    useEffect(() => {
        if (isLoadedImages && !homepageIsLoading) {
            setIsLoading(false)
        }
    }, [isLoadedImages, homepageIsLoading]);

    return (
        <>
            <Helmet
                script={[
                    {
                        type: "application/ld+json",
                        innerHTML: `{
                "@context": "http://schema.org",
                "@type": "WebSite",
                "name": "Ping Proxies",
                "url": "https://www.pingproxies.com",
                "potentialAction": {
                    "@type": "OrderAction",
                    "target": "https://site-ping-proxies.goodface.com.ua/pricing"
                }
            }`
                    },
                    {
                        type: "application/ld+json",
                        innerHTML: `{
                "@context": "http://schema.org",
                "@type": "Organization",
                "name": "Ping Proxies",
                "url": "https://www.pingproxies.com",
                "logo": "https://www.pingproxies.com/logo.png",
                "aggregateRating": {
                    "@type": "AggregateRating",
                    "ratingValue": "4.8",
                    "reviewCount": "84"
                },
                "sameAs": [
                    "https://www.twitter.com/PingProxies"
                ]
            }`
                    },
                    {
                        type: "application/ld+json",
                        innerHTML: `{
                "@context": "http://schema.org",
                "@type": "BreadcrumbList",
                "itemListElement": ${JSON.stringify(BreadcrumbList.map((item, index) => (
                            {
                                "@type": "ListItem",
                                "position": index + 1,
                                "name": item.title,
                                "item": `https://www.pingproxies.com${item.link}`
                            }
                        )))}
            }`
                    }
                ]}
            />
            <Hero isLoading={isLoading} />
            <TrastedPartners data={partners} isLoading={isLoading} />
            <OurProducts title={title} tag={tag} products={product_card} isLoading={isLoading} />
            <Feauters featuresSideText={featuresSideText} features={features} isLoading={isLoading} />
            <ProxyManagement dashboard={dashboard} isLoading={isLoading} />
            <ApiIntegraion isLoading={isLoading} />
            <UseCases useCases={useCases} isLoading={isLoading} />
            <Reviews reviews={reviews} isLoading={isLoading} />
            <Locations locationsText={locationsText} />
            <AboutUsSection aboutUs={aboutUs} isLoading={isLoading} />
            <GetStarted cta={cta} isLoading={isLoading} />
        </>
    );
};

export default Home;

• [D] ApiIntegration
• [D] Hero
• [D] Locations
• [F] index.jsx
  Delete