text: import React, { useEffect, useState } from "react"
  import { graphql } from "gatsby"
  import BackgroundImage from "gatsby-background-image"
  import FordSvg from "../images/gpo-ford-pimp.svg"
  import { Link } from "react-scroll";
  import Layout from "../components/layout"
  import Seo from "../components/seo"
  import Content from "../components/content"
  
  // @backend
  function ScrollPage() {
    useEffect(() => {
      document.addEventListener('scroll', _ => document.getElementById('logo').style.setProperty('--v-adjust', window.scrollY + 'px'))
      console.log('SCROLLED', window.scrollY)
    })
  }
  
  let name = 'dzsocsi'
  function clickHandleTwo(name, e) {
    name = 'luigi'
    console.log('hello ' + name +'==>' + e.target)
  }
  
  const [name,]=useState('')
  
  // @frontend
  
  const IndexPage = (props) => (
    <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={(e) => { clickHandleTwo('mario', e) }}>console.log + {name} </button>
                </h3>
              </div>
  
            </div>
          </BackgroundImage>
          <div className="gpo-hero-tabs-container" >
  
            <Link className="gpo-hero-tab" to="tab-oktatas" spy={true} smooth={true} offset={50} duration={500}>#Oktatás</Link>
            <Link className="gpo-hero-tab" to="tab-rolunk" spy={true} smooth={true} offset={50} duration={500}>#Rólunk</Link>
            <Link className="gpo-hero-tab" to="tab-tanuloink" spy={true} smooth={true} offset={50} duration={500}>#Tanulóink</Link>
            <Link className="gpo-hero-tab" to="tab-kapcsolat" spy={true} smooth={true} offset={50} duration={500}>#Kapcsolat</Link>
            <span className="gpo-hero-tab-slider" style={{
              maxWidth: '40px',
              width: '40px',
              display: "inline-block",
            }}>
              <FordSvg />
            </span>
          </div>
        </div>
      </section >
  
      {/* The main content */}
      <Content />
  
    </Layout>
  )
  
  export default IndexPage
  
  export const pageQuery = graphql`
  query{
      indexImage:file(relativePath:{
          eq:"gpo-hero-webp.webp"
      }){
          childImageSharp{
              fluid(maxWidth:1800){
                  ...GatsbyImageSharpFluid
              }
          }
      }
  }
  `;