/* 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="#galeria">Galería</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://www.amazon.es/dp/B0H35NS8W1" target="_blank" rel="noopener" className="btn btn--sm">
            <span className="desktop-cta">Comprar en Amazon</span>
            <span className="mobile-cta" style={{display:'none'}}>
              Amazon
              <svg className="ext-arrow" width="10" height="10" viewBox="0 0 10 10" aria-hidden="true" focusable="false">
                <path d="M2.5 7.5 L7.5 2.5 M3.5 2.5 L7.5 2.5 L7.5 6.5" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="square"/>
              </svg>
            </span>
          </a>
        </div>
      </div>
    </header>
  );
}

window.SiteHeader = SiteHeader;
