text: import React, { useState, useEffect, useRef } from "react"
  import { useStaticQuery, graphql } from "gatsby"
  import PropTypes from "prop-types"
  import LogoSvg from "../images/gpo_logo_min.svg"
  import PhoneSvg from "../images/gpo-phone.svg"
  import GarageSvg from "../images/gpo-garage.svg"
  import BackgroundImage from "gatsby-background-image"
  import Navtabs from "../components/navtabs"
  
  
  
  function Header(props) {
  
    const [navClass, setNavClass] = useState("gpo-header")
    const [navColor, setNavColor] = useState("transparent")
    const headerHeight = 75
  
  const [tabsHeight, setTabsHeight]=useState(0)
  const tabsRef=useRef(null)
  
  // the logic should be hooked to reload/window
  useEffect(()=>{
    setTabsHeight(tabsRef.current.clientHeight)
  })
  
    const listenScrollEvent = () => {
      window.scrollY > headerHeight ? setNavColor("#252734") : setNavColor("transparent")
      window.scrollY > headerHeight ? setNavClass("gpo-header gpo-header--scrolled") : setNavClass("gpo-header")
    }
  
    useEffect(() => {
      window.addEventListener("scroll", listenScrollEvent)
      return () => {
        window.removeEventListener("scroll", listenScrollEvent)
      }
    }, [])
  
  console.log('TH',tabsHeight)
  
    const data = useStaticQuery(graphql`
    query{
        indexImage:file(relativePath:{
            eq:"gpo-hero-webp.webp"
        }){
            childImageSharp{
                fluid(maxWidth:1800){
                    ...GatsbyImageSharpFluid
                }
            }
        },
        
    }
    `);
  
  
    return (
  
      <>
        <header className={navClass} >
          <div className="gpo-header__left">
            <div className="gpo-tel-icon">
              <PhoneSvg />
            </div>
            <div className="gpo-tel-numbers">
              <a href="tel:+40751126339" className="gpo-header-phone">
                (+4)0751-126-339 <br />
              </a>
              <a href="tel:+40741093493" className="gpo-header-phone">
                (+4)0741-093-493
              </a>
            </div>
          </div>
          <div className="gpo-header__mid">
            <LogoSvg />
          </div>
          <div className="gpo-header__right">
            <GarageSvg />
          </div>
        </header>
  
        <section className="gpo-hero-tabs"  >
          <div className="wrapper" >
            <BackgroundImage
              className="gpo-heroImage"
              fluid={data.indexImage.childImageSharp.fluid}
              fadeIn
            >
              <div className="gpo-black-overlay" >
                <div className="gpo-content-box"ref={tabsRef}>
                  <h3>
                    <button onClick={() => { console.log('clicked') }}>Call To Action</button>
                  </h3>
                </div>
  
              </div>
            </BackgroundImage>
            <Navtabs />
          </div>
        </section >
      </>
  
    )
  
  }
  
  Header.propTypes = {
    siteTitle: PropTypes.string,
  }
  
  Header.defaultProps = {
    siteTitle: ``,
  }
  
  
  export default Header
  