text: import React, { useRef } from 'react';
  
  import { useHasBeenVisible } from '../hooks/useVisibility';
  import Layout from "../components/Layout/index.js"
  import Seo from "../components/seo"
  import Hero from '../components/HeroSections/Hero'
  /* import OfferIntro from "../components/OfferIntro" */
  import Testimonials from "../components/Testimonials"
  import Stats from "../components/Stats"
  import Email from "../components/Email"
  import FullWidthSection from '../components/FullWidthSection';
  import FeaturedProductsBox from '../containers/FeaturedProductsBox';
  
  import { graphql, useStaticQuery } from 'gatsby';
  import { getImage } from 'gatsby-plugin-image';
  import { convertToBgImage } from 'gbimage-bridge';
  
  import Video from '../assets/videos/pierogi1.mp4'
  import StyledHero from '../components/HeroSections/StyledHero'
  
  
  
  function IndexPage() {
    const { placeholderImage } = useStaticQuery(
      graphql`
        query {
            placeholderImage: file(relativePath: {eq: "email-1.jpg"}) {
        childImageSharp {
        gatsbyImageData(
            width: 1200, 
            quality: 60, 
            webpOptions: {quality: 75})
        }
    }
  }
  `
  );
  const image = getImage(placeholderImage);
  const bgImage = convertToBgImage(image);
  
  
    const halfPage = useRef();
    const preload = useRef();
    const hasScrolled = useHasBeenVisible(halfPage);
    const isScrolling = useHasBeenVisible(preload);
    return(
      <Layout>
        <Seo title="Home" />
        <StyledHero
              Video={Video}
              bgImage={bgImage}
              HeroPoster="https://th.bing.com/th/id/R579b4552f248f5f3b8c22ec8de678f6d?rik=CZn5ZpmoPRhhWA&riu=http%3a%2f%2f1.s.dziennik.pl%2fpliki%2f2465000%2f2465139-lew-900-665.jpg&ehk=rOGUdngXo%2b2ZE6G%2bXYh1k730AK3lbwEv%2fptsUHZ6DK4%3d&risl=&pid=ImgRaw"
              HeroTitle="O nas"
              HeroMotto="Szybko, Smacznie, Świeżo"
              HeroBtnText="menu"
              HeroBtnPath="/menu"
              HeroHeight="100vh"
              HeroHeightMedia="100vh"
  
               />
        {hasScrolled || isScrolling ? (
          <>
        <FeaturedProductsBox heading="Serdecznie polecamy" />
        <Testimonials />
        <Stats />
        <Email />
          </>
        ) : (
          <FullWidthSection ref={halfPage} height='2286px' minHeight='3448px' />
        )}
  
      </Layout>
    )
    
  
  }
  
  export default IndexPage
  