import { useContext, useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import HeroLayout from '../HeroLayout';
import { Hero } from './';
import WeAreBuildersData from './WeAreBuilders/data';
import HowWeDoItData from './HowWeDoIt/data';
import ChooseUOData from './ChooseUO/data';
import SuccessStoriesData from './SuccessStories/data';
import useMediaQuery from '@/hooks/useMediaQuery';
import { useInView } from 'react-intersection-observer';
import { Context } from '../Store';
import useIntro from '@/hooks/useIntro';
import { AnimatePresence } from 'framer-motion';
import Brands from '@/components/Brands';
/* import Script from 'next/script';
import DevFlag from './DevFlag'; */
import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
import Script from 'next/script';

const WeAreBuilders = dynamic(() => import('./WeAreBuilders'));
const HowWeDoIt = dynamic(() => import('./HowWeDoIt'));
const ChooseUO = dynamic(() => import('./ChooseUO'));
const SuccessStories = dynamic(() => import('./SuccessStories'));
const Contact = dynamic(() => import('./Contact'));
const ModalContact = dynamic(() => import('../ModalContact'));
const Footer = dynamic(() => import('../Footer'));
/* const FlagDev = dynamic(() => import('./FlagDev'), {
  ssr: false,
}); */

const bgImages = [
  { src: 'hero-bg-desktop-dev.jpg', className: 'portrait:hidden', id: 1 },
  { src: 'hero-bg-mobile-dev.jpg', className: 'landscape:hidden', id: 2 },
];

const App = ({ language, locale, macOs }) => {
  const { ref, inView } = useInView({
    threshold: 0.8,
  });
  /*   const tablet = useMediaQuery('md'); */
  const desktop = useMediaQuery('lg');
  const {
    state: { isModalOpen },
    dispatch,
  } = useContext(Context);
  const [heroHeight, setHeroHeight] = useState(900);

  useEffect(() => {
    desktop && dispatch({ type: 'setModalOpen', payload: false });
  }, [desktop]);

  useEffect(() => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'page_view_landing',
    });
    console.log('dataLayer:', dataLayer);
  }, []);

  const { Intro, animationOutComplete } = useIntro();

  return (
    <>
      <Script id='gtm-landing' strategy='afterInteractive'>
        {`
          (function(w,d,s,l,i){
            w[l]=w[l]||[];
            w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
            var f=d.getElementsByTagName(s)[0],
                j=d.createElement(s),
                dl=l!='dataLayer'?'&l='+l:'';
            j.async=true;
            j.src='https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','GTM-M3JN79C');
        `}
      </Script>
      <div
        className={`scrollbar-gutter h-full${
          animationOutComplete ? '' : ' overflow-hidden'
        }`}
      >
        <div
          className={`relative ${
            macOs ? 'bg-custom-grey-macos' : 'bg-heavy-metal'
          }`}
          style={{ paddingTop: `${heroHeight}px` }}
        >
          <GoogleReCaptchaProvider reCaptchaKey='6Lf2DPErAAAAAHrBGA4NwbY6E1F1i9_1vQX-1Lwn'>
            <HeroLayout
              bgImages={bgImages}
              overlay
              setHeroHeight={setHeroHeight}
            >
              <Hero ref={ref} locale={locale} />
            </HeroLayout>
            {/* <Script src='https://widget.clutch.co/static/js/widget.js' />
        <div
          className="clutch-widget before before:bg-[#fafafa] lg:before:absolute lg:before:-top-[100%] lg:before:h-full lg:before:w-full lg:before:content-['']"
          id='clutch-widtget'
          data-url='https://widget.clutch.co'
          data-widget-type='12'
          data-height='375'
          data-nofollow='true'
          data-expandifr='true'
          data-scale='100'
          data-reviews='2261831,2154159,2151371,2146021'
          data-clutchcompany-id='1997650'
        ></div> */}
            <WeAreBuilders data={WeAreBuildersData[language]} />
            {animationOutComplete && (
              <>
                <HowWeDoIt data={HowWeDoItData[language]} />
                <ChooseUO data={ChooseUOData[language]} />
                <SuccessStories
                  data={SuccessStoriesData[locale === 'mx' ? locale : language]}
                  locale={locale}
                />
                <Contact locale={locale} />
                <Brands dev />
                <Footer locale={locale} flag />
              </>
            )}
            <AnimatePresence>
              {isModalOpen && !desktop && (
                <ModalContact locale={locale} dev categoria='dev' />
              )}
            </AnimatePresence>
          </GoogleReCaptchaProvider>
          {/* <DevFlag
                    text={"Need a Quote?"}
                /> */}
        </div>
        {!animationOutComplete && <Intro />}
      </div>
    </>
  );
};

export default App;