/* VARIANTE B · BOLD
   Tipografía gigantesca, marquesinas, contraste extremo, scroll horizontal.
*/

const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

function VariantB({ accent }){
  const { cart, total, final, add, reset, checkout, warning } = useCart();
  const y = useScrollY();
  const heroRef = useRefB(null);

  return (
    <div className="vB" style={{ '--accent': accent }}>

      {/* TOP BAR */}
      <div className="vB-topbar">
        <span>Envío gratis a Lima Metropolitana en pedidos +S/180</span>
        <span>·</span>
        <span>Edición limitada</span>
      </div>

      <header className={`vB-nav ${y>40?'is-stick':''}`}>
        <a href="#" className="vB-brand" data-cursor>C/Ø</a>
        <nav className="vB-links">
          <a href="#vB-shop" data-cursor>Shop</a>
          <a href="#vB-ritual" data-cursor>Ritual</a>
          <a href="#vB-caja" data-cursor>La Caja</a>
          <a href="restaurantes.html" data-cursor>B2B</a>
        </nav>
        <button className="vB-cart" onClick={()=>document.getElementById('vB-caja').scrollIntoView({behavior:'smooth'})}
                data-cursor data-cursor-label="Ver">
          <span>Pedido</span>
          <strong>{total}</strong>
        </button>
      </header>

      {/* HERO BOLD */}
      <section className="vB-hero" ref={heroRef}>
        <div className="vB-hero-text">
          <div className="vB-hero-line vB-l1">
            <span className="vB-hero-word">CØRDIAL</span>
          </div>
          <div className="vB-hero-line vB-l2">
            <span className="vB-hero-word vB-italic">en frío</span>
            <span className="vB-hero-img-inline">
              <img src="images/01.png" alt=""/>
            </span>
          </div>
          <div className="vB-hero-line vB-l3">
            <span className="vB-hero-word">LISTO.</span>
          </div>
        </div>
        <div className="vB-hero-meta">
          <div className="vB-hero-ctaline">
            <a href="#vB-shop" className="vB-cta-pill" data-cursor data-cursor-label="Comprar">
              <span className="vB-cta-dot"></span> Pedir ahora — S/120 · 12u
            </a>
          </div>
          <div className="vB-hero-meta-info">
            <div><strong>03</strong> recetas firma</div>
            <div><strong>60s</strong> al servir</div>
            <div><strong>−18°</strong> conservación</div>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <div className="vB-marquee">
        <div className="vB-marquee-track">
          {Array.from({length:4}).map((_,i)=>(
            <span key={i}>
              MARACUYÁ <i>★</i> FRAMBUESA <i>★</i> PIÑA <i>★</i> 
            </span>
          ))}
        </div>
      </div>

      {/* SHOP — productos en horizontal grande */}
      <section className="vB-shop" id="vB-shop">
        <div className="vB-section-head">
          <span className="vB-tag">[ 01 — La colección ]</span>
          <h2>
            Tres recetas.<br/>
            <em>Una caja.</em>
          </h2>
        </div>

        <div className="vB-prods">
          {PRODUCTS.map((p,i)=>(
            <article key={p.id} className="vB-prod" style={{'--p-tone':p.tone}}>
              <div className="vB-prod-num">{p.n}</div>
              <div className="vB-prod-img" data-cursor data-cursor-label="Ver">
                <img src={p.label} alt={p.name}/>
                <div className="vB-prod-tone"></div>
              </div>
              <div className="vB-prod-info">
                <h3 className="vB-prod-h">{p.short}</h3>
                <p className="vB-prod-mood">{p.mood}</p>
                <p className="vB-prod-notes">{p.notes}</p>
              </div>
              <div className="vB-prod-buy">
                <div className="vB-prod-price">S/{p.price}<small>125ml</small></div>
                <div className="vB-qty">
                  <button onClick={()=>add(p.id,-1)} disabled={cart[p.id]<=0} data-cursor>−</button>
                  <span>{cart[p.id]}</span>
                  <button onClick={()=>add(p.id,+1)} disabled={total>=PACK_QTY} data-cursor>+</button>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* MANIFESTO */}
      <section className="vB-manifest">
        <div className="vB-manifest-inner">
          <span className="vB-tag">[ 02 — Manifesto ]</span>
          <h2 className="vB-manifest-h">
            El bar más exigente,<br/>
            ahora <em>en tu freezer.</em>
          </h2>
          <p className="vB-manifest-p">
            Cada cóctel se prepara como en barra: pisco peruano, fruta fresca, las proporciones
            exactas. Lo congelamos al instante para sellar el momento perfecto.
            En casa, lo despiertas en un minuto. Sabe como debe.
          </p>
        </div>
      </section>

      {/* RITUAL */}
      <section className="vB-ritual" id="vB-ritual">
        <div className="vB-section-head">
          <span className="vB-tag">[ 03 — El ritual ]</span>
          <h2>
            Un minuto.<br/>
            <em>Tres pasos.</em>
          </h2>
        </div>
        <div className="vB-ritual-grid">
          {[
            {n:'01', t:'Vierte', b:'125 ml en la licuadora', s:'20s'},
            {n:'02', t:'Agua fría', b:'Llena el envase y echa', s:'20s'},
            {n:'03', t:'Licúa', b:'10s a potencia alta. Sirve.', s:'10s'},
          ].map((r,i)=>(
            <div key={i} className="vB-ritual-cell">
              <div className="vB-ritual-row">
                <strong>{r.n}</strong>
                <span>{r.s}</span>
              </div>
              <h3>{r.t}</h3>
              <p>{r.b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CAJA */}
      <section className="vB-caja" id="vB-caja">
        <div className="vB-caja-grid">
          <div className="vB-caja-art">
            <div className="vB-caja-h-bg" aria-hidden="true">CAJA</div>
            <img src="images/psf.png" alt="" />
            <div className="vB-caja-stamp">
              <strong>S/120</strong>
              <span>12 uds · Edición</span>
            </div>
          </div>
          <div className="vB-caja-builder">
            <span className="vB-tag">[ 04 — La caja ]</span>
            <h2>Compón doce.</h2>
            <p>Tres recetas, tu mezcla. Caja completa: S/120 (ahorras S/60).</p>

            <div className="vB-builder">
              <div className="vB-builder-head">
                <span>Tu selección</span>
                <strong>{total}/{PACK_QTY}</strong>
              </div>
              <div className="vB-builder-bar">
                <div className="vB-builder-fill" style={{width:`${(total/PACK_QTY)*100}%`}}></div>
              </div>
              {PRODUCTS.map(p=>(
                <div key={p.id} className={`vB-builder-row ${cart[p.id]?'is-on':''}`}>
                  <div className="vB-builder-name">
                    <span className="vB-dot" style={{background:p.tone}}></span>
                    {p.name} <small>N.º {p.n}</small>
                  </div>
                  <div className="vB-qty">
                    <button onClick={()=>add(p.id,-1)} disabled={cart[p.id]<=0} data-cursor>−</button>
                    <span>{cart[p.id]}</span>
                    <button onClick={()=>add(p.id,+1)} disabled={total>=PACK_QTY} data-cursor>+</button>
                  </div>
                </div>
              ))}
            </div>

            <div className="vB-price-row">
              <div className="vB-price">
                <div className="vB-price-now">S/{final}</div>
                {total === PACK_QTY ? (
                  <div className="vB-price-was"><s>S/180</s> Ahorras S/60</div>
                ) : (
                  <div className="vB-price-was">{total} × S/15</div>
                )}
              </div>
              <button className={`vB-cta-big ${warning?'is-warn':''}`} onClick={checkout}
                      data-cursor data-cursor-label="Pedir">
                {warning ? warning : (total===0 ? 'Componer →' : `Pedir →`)}
              </button>
            </div>

            <button className="vB-cta-link" onClick={reset} data-cursor>Vaciar selección</button>
          </div>
        </div>
      </section>

      {/* B2B */}
      <section className="vB-b2b">
        <div className="vB-b2b-inner">
          <div>
            <span className="vB-tag">[ 05 — B2B ]</span>
            <h2>¿Restaurante, hotel o catering?</h2>
          </div>
          <a href="restaurantes.html" className="vB-cta-pill" data-cursor data-cursor-label="Ver">
            Ver propuesta empresas <span>→</span>
          </a>
        </div>
      </section>

      {/* FOOT */}
      <footer className="vB-foot">
        <div className="vB-foot-mark">C/Ø</div>
        <div className="vB-foot-grid">
          <div>
            <span>Tienda</span>
            <a href="#vB-shop" data-cursor>Colección</a>
            <a href="#vB-caja" data-cursor>La caja</a>
            <a href="restaurantes.html" data-cursor>Empresas</a>
          </div>
          <div>
            <span>Contacto</span>
            <a href="https://wa.me/51997331112" target="_blank" data-cursor>WhatsApp</a>
            <a href="mailto:cordialperu@gmail.com" data-cursor>Email</a>
            <a href="https://www.instagram.com/cordial.cocteles" target="_blank" data-cursor>Instagram</a>
          </div>
          <div>
            <span>Legal</span>
            <a>+18 · Beber con moderación</a>
            <a>© CØRDIAL · 2026</a>
          </div>
        </div>
      </footer>
    </div>
  );
}

window.VariantB = VariantB;