// Hero — the newsstand with hanging albums
const { useState: uS_h, useEffect: uE_h } = React;

function Hero() {
  const { setRoute } = useRoute();
  const hanging = window.PRODUCTS.filter(p => p.stock > 0).slice(0, 8);

  return (
    <section className="hero" data-screen-label="02 Hero">
      <div className="hero-sign" style={{display:'flex',alignItems:'flex-end',justifyContent:'center',gap:'32px',flexWrap:'wrap'}}>
        <div className="hero-logo-wrap" style={{flex:'0 0 auto'}}>
          <span className="hero-burst hb-left" aria-hidden="true"></span>
          <img src="logo.png" alt="Buffet Games" className="hero-logo" style={{margin:0}}/>
          <span className="hero-burst hb-right" aria-hidden="true"></span>
        </div>
        <div style={{display:'flex',flexDirection:'column',alignItems:'flex-start',paddingBottom:'12px'}}>
          <div className="kicker">YO SOY SPANKI · BUFFET GAMES</div>
          <div className="tag" style={{textAlign:'left',marginTop:8}}>la tiendita de coleccionables y<br/>promocionales más grande de México</div>
        </div>
      </div>

      <div className="clothesline-wrap">
        <div className="clothesline">
          {hanging.map((p, i) => {
            const left = i / (hanging.length - 1) * 92 + 2;
            const drop = 8 + i % 3 * 14;
            return (
              <div
                key={p.id}
                className="hanging-album"
                style={{ left: `${left}%`, top: `${drop}px`, animationDelay: `${-i * 0.4}s`, marginLeft: '-90px' }}
                onClick={() => setRoute({ page: 'producto', slug: p.slug })}
                role="button"
                aria-label={p.nombre}>
                
                <div className="clothespin">
                  <div className="clothespin-spring" />
                </div>
                <div className="album-img-wrap">
                  <img src={p.img} alt={p.nombre} loading="lazy" />
                </div>
                {p.stock === 1 && (
                  <div style={{position:'absolute', top:20, right:-15, background:'var(--red)', color:'#fff', fontFamily:'Bungee', fontSize:10, padding:'4px 8px', border:'2px solid var(--ink)', transform:'rotate(15deg)', boxShadow:'3px 3px 0 var(--ink)', zIndex:10}}>
                    ¡ÚLTIMO!
                  </div>
                )}
                <div className="album-price-tag">${p.precio.toLocaleString('es-MX')}</div>
              </div>);

          })}
        </div>
      </div>

      <div className="hero-peek">
        <span style={{ fontSize: 14 }}>HAY MÁS DE</span>
        <span className="big">{window.PRODUCTS.length}</span>
        <span style={{ fontSize: 12, letterSpacing: 1 }}>COLECCIONABLES</span>
      </div>

      <div className="hero-ground" />
    </section>);

}

Object.assign(window, { Hero });