/* WELT — Site Header
 * Center logo lockup, anchor nav on sides.
 */
const { useEffect, useState } = React;

function SiteHeader() {
  return (
    <header className="site-header">
      <div className="container inner">
        <nav className="nav-left">
          <a href="#coleccion">Colección</a>
          <a href="#tecnologia">Tecnología</a>
          <a href="#por-que">Marca</a>
        </nav>
        <a href="#top" className="logo-mark" aria-label="WELT">WELT</a>
        <div className="nav-right">
          <a href="#materiales" className="hide-sm" style={{fontSize:'13px', letterSpacing:'0.04em', color:'var(--fg-2)'}}>Packaging</a>
          <a href="https://amazon.es" target="_blank" rel="noopener" className="btn btn--sm">
            <span className="desktop-cta">Comprar en Amazon</span>
            <span className="mobile-cta" style={{display:'none'}}>Amazon <span className="ext-arrow" aria-hidden="true">↗</span></span>
          </a>
        </div>
      </div>
    </header>
  );
}

window.SiteHeader = SiteHeader;