text: // @import plugins
  import React, { useEffect, useState } from "react"
  import { graphql } from "gatsby"
  import BackgroundImage from "gatsby-background-image"
  
  // @import components
  import Layout from "../components/layout"
  import Seo from "../components/seo"
  import Content from "../components/content"
  import Navtabs from "../components/navtabs"
  
  
  
  
  
  function IndexPage(props) {
  
    // @backend
  
  
    function ScrollPage() {
      useEffect(() => {
        document.addEventListener('scroll', _ => document.getElementById('logo').style.setProperty('--v-adjust', window.scrollY + 'px'))
        console.log('SCROLLED', window.scrollY)
      })
  
    }
    const [name, setName] = useState('mario')
     setName()={
     
    }
    // let name = 'luigi'
    const handleClick = () => {
      // setName('homer')
      console.log('hello ' + name)
    }
  
    // @frontend
    return (
      <Layout onScroll={ScrollPage}>
        <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={handleClick}>console.log + {name} </button>
                  </h3>
                </div>
  
              </div>
            </BackgroundImage>
            <Navtabs />
          </div>
        </section >
  
        {/* The main content */}
        <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
              }
          }
      }
  }
  `;