website-new/frontend/src/pages/Home.jsx

//import FormSwitch from '../components/shared/FormSwitch';
import PageHeading from './../components/shared/PageHeading';
import SocialNetworks from '../components/shared/SocialNetworks';
import Contact from '../components/shared/Contact';
import BlogSection from '../components/BlogSection';
import WhyUsCard from '../components/WhyUsCard';
import HiringWidget from '../components/HiringWidget';

import Animation_Diligent from '../assets/animation_diligent.webm';

import '../styles/buttons.css';
import '../styles/cards.css';

//import bg_home from '../assets/logos/bg_home.png';
//import post_1 from '../assets/logos/post_1.png';

import { motion } from 'framer-motion';
import { useState, useEffect, useRef, useLayoutEffect, useContext } from 'react';
import axios from 'axios';
import OrbitOnScroll from '../components/shared/graphics/OrbitOnScroll';
import LandingSVG from '../components/shared/graphics/LandingSVG';
import ServicesHome from '../components/ServicesHome';
import Testimonials from '../components/Testimonials';
import LandingSVGv2 from '../components/shared/graphics/LandingSVG-v2';
import Landing from '../components/Landing';
import WhySection from '../components/WhySection';
import ProcessSection from '../components/ProcessSection';
import TechStack from '../components/TechStack';
import PortfolioSection from '../components/PortfolioSection';
import PageLayout from '../layout/PageLayout';
import MapDilig from '../components/Map';
import useDataApi from '../hooks/useDataApi';

//const api_url = process.env.REACT_APP_API_URL;
const api_url = 'http://localhost:1337';

//const query = '';

const strapiPopulate = [
  'Cards',
  'Cards.Card1',
  'Cards.Card1.Icon',
  'Cards.Card2',
  'Cards.Card2.Icon',
  'Cards.Card3',
  'Cards.Card3.Icon',
  'HeroNumbers',
  'HeroNumbers.number',
]

const stringBuilder = () => {
  let stringQuery = '';
  strapiPopulate.map((item,index) => {
    if (index !== 0) stringQuery += '&';
    stringQuery += `populate=${item}`;
  });
  return stringQuery;
};

export default function Home({forwardedRef}) {
  const [cnt, setCnt] = useState('');

  const [contactRef, setRef] = useState(forwardedRef)



  const [{data, isLoading, isError}, doFetch] = useDataApi(`${api_url}/api/w-home-page?${stringBuilder()}`);

  const landingData = {
    data
  }

  useEffect(() => {
    document.title = 'Diligent Software';
  },[]);

  useEffect(() => {
    console.log(data);
    //stringBuilder();
  },[data]);



  // useEffect(() => {
  //   var vid = document.getElementById('animation');
  //   vid.playbackRate = 2;
  //   axios
  //     .get(
  //       `${api_url}/api/homepage?populate[0]=landing&populate[1]=why&populate[2]=why.heading&populate[3]=why.card_left.icon&populate[4]=why.card_mid.icon&populate[5]=why.card_right.icon&populate[6]=why.card_left.icon&populate[7]=why.card_mid.icon&populate[8]=why.card_right.icon&populate[9]=landing.heading`,
  //       // api/homepage?&populate[0]=why&populate[1]=why.heading&populate[2]=why.card_left.icon&populate[3]=why.card_mid.icon&populate[4]=why.card_right.icon&populate[5]=why.card_left.icon&populate[6]=why.card_mid.icon&populate[7]=why.card_right.icon
  //     )
  //     .then(res => {
  //       setCnt(res.data.data.attributes);
  //       //console.log(res)
  //       setIsLoaded(true);
  //     })
  //     .catch(err => {
  //       console.log(err);
  //       setIsLoaded(false);
  //     });
  // }, []);

  useEffect(() => {
    
   
    const url = window.location.pathname;
    const h = window.document.body.offsetHeight;

  }, [contactRef, cnt])

  if (isLoading) {
    return (
      <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 overflow-hidden dark:text-white flex items-center justify-center text-3xl font-semibold">
        <video id="animation" width="540" height="540" autoPlay muted loop>
          <source src={Animation_Diligent} type="video/webm" />
          Loading...
        </video>
      </div>
    );
  } else {
    return (
      <PageLayout>
      <div className="bg-white dark:bg-dg-primary-1700 w-full pt-32 overflow-hidden">
        {/* <FormSwitch /> */}

        {/* <Tab.Group>
      <Tab.List>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel><ClientForm /></Tab.Panel>
        <Tab.Panel><JobForm /></Tab.Panel>
      </Tab.Panels>
    </Tab.Group> */}

        {/* Landing Section */}
       <Landing />

        {/* Why Us Section */}
        <WhySection data={cnt.why} />

        {/* Our Services Section */}
        {/* <ServicesHome /> */}

        {/* Our Process Section */}
        <ProcessSection />

        {/* Our Process Section */}
        <TechStack />

        {/* Testimonials Section*/}
        <Testimonials
        />

        {/* Social Networks Section */}
        {/* <section
          id="socials"
          className="h-fit bg-white dark:bg-dg-primary-1700 flex flex-col items-center px-4"
        >
          <SocialNetworks />
        </section> */}

        <PortfolioSection />

        {/* Contact Section */}
        <section id="contact" className="" ref={forwardedRef}>
          <Contact defaultIndex={0} />
        </section>


        <MapDilig />
       
      </div>
      </PageLayout>
    );
  }
}