text: // @import plugins
  import React, { useState, useEffect, useRef } from "react"
  import { graphql, useStaticQuery } from "gatsby"
  import BackgroundImage from "gatsby-background-image"
  
  // @import components
  import Header from "../components/header"
  
  import Layout from "../components/layout"
  import Seo from "../components/seo"
  import Content from "../components/content"
  import Navtabs from "../components/navtabs"
  
  function IndexPage(props){
  
    const [navSize, Sizsetnave] = useState("10rem");
    const [navColor, setnavColor] = useState("transparent");
    
    const listenScrollEvent = () => {
      window.scrollY > 10 ? setnavColor("#252734") : setnavColor("transparent");
      window.scrollY > 10 ? setnavSize("5rem") : setnavSize("10rem");
    };
  
    useEffect(() => {
      window.addEventListener("scroll", listenScrollEvent);
      return () => {
        window.removeEventListener("scroll", listenScrollEvent);
      };
    }, []);
  
    
    return (
      <Layout >
        <Header siteTitle={props.data.site.siteMetadata?.title || `Title`} />
        <Seo title="Home" />
        <section className="gpo-hero-tabs"  >
          <div className="wrapper" >
            <BackgroundImage
              className="gpo-heroImage"
              fluid={props.data.indexImage.childImageSharp.fluid}
              fadeIn
            >
              <div className="gpo-black-overlay" >
                <div className="gpo-content-box">
                  <h3>
                    <button onClick={()=>{console.log('clicked')}}>Call To Action</button>
                  </h3>
                </div>
  
              </div>
            </BackgroundImage>
            <Navtabs />
          </div>
        </section >
        <Content />
      </Layout>
    )
  }
  // const IndexPageFormer = (props) => ()
  
  export default IndexPage
  
  export const pageQuery = graphql`
  query{
      indexImage:file(relativePath:{
          eq:"gpo-hero-webp.webp"
      }){
          childImageSharp{
              fluid(maxWidth:1800){
                  ...GatsbyImageSharpFluid
              }
          }
      },
      site {
        siteMetadata {
          title
        }
      }
  }
  
  `;