/* VARIANTE A · EDITORIAL
   Inspirado en Kettmeir: serif elegante, foto enorme, mucho aire,
   tono cálido, scroll storytelling sereno.
*/

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

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

  return (
    <div className="vA" style={{ '--accent': accent }}>
      {/* NAV */}
      <header className={`vA-nav ${y>40?'is-stick':''}`}>
        <a href="#" className="vA-brand" data-cursor>C<span className="vA-o">Ø</span>RDIAL</a>
        <nav className="vA-links">
          <a href="#vA-coleccion" data-cursor>Colección</a>
          <a href="#vA-historia" data-cursor>Origen</a>
          <a href="#vA-caja" data-cursor>La Caja</a>
          <a href="#vA-empresas" data-cursor>Empresas</a>
        </nav>
        <div className="vA-nav-right">
          <span className="vA-cart-cnt">Pedido · {total}</span>
          <button className="vA-shop-btn" data-cursor data-cursor-label="Comprar"
                  onClick={()=>document.getElementById('vA-caja').scrollIntoView({behavior:'smooth'})}>
            Comprar
          </button>
        </div>
      </header>

      {/* HERO */}
      <section className="vA-hero">
        <div className="vA-hero-bg" style={{transform:`translateY(${y*0.18}px) scale(${1+y*0.0002})`}}>
          <img src="images/01.png" alt="" />
          <div className="vA-hero-veil"></div>
        </div>
        <div className="vA-hero-content">
          <div className="vA-eye">— Coctelería congelada · Lima desde 2024</div>
          <h1 className="vA-h1">
            Un cóctel<br/>
            <em>perfecto,</em><br/>
            congelado.
          </h1>
          <div className="vA-hero-foot">
            <p className="vA-lede">
              Tres recetas peruanas selladas en su punto exacto.<br/>
              Vierte, añade agua, licúa. Un minuto al servicio.
            </p>
            <div className="vA-hero-cta">
              <a href="#vA-caja" className="vA-cta-primary" data-cursor data-cursor-label="Pedir">
                Pedir la caja <span>→</span>
              </a>
              <a href="#vA-historia" className="vA-cta-link" data-cursor>Conocer la historia</a>
            </div>
          </div>
        </div>
        <div className="vA-hero-scroll">
          <span>Desliza</span>
          <div className="vA-hero-line"></div>
        </div>
      </section>

      {/* MARQUEE */}
      <div className="vA-marquee" aria-hidden="true">
        <div className="vA-marquee-track">
          {Array.from({length:3}).map((_,i)=>(
            <span key={i}>
              Pisco peruano <i>·</i> Tres recetas <i>·</i> 125 ml <i>·</i> −18°C <i>·</i> Listo en un minuto <i>·</i> Pisco peruano <i>·</i>
            </span>
          ))}
        </div>
      </div>

      {/* HISTORIA */}
      <section className="vA-historia" id="vA-historia">
        <div className="vA-historia-grid">
          <div className="vA-historia-img">
            <img src="images/psf.png" alt="Pisco Sour servido"/>
          </div>
          <div className="vA-historia-copy">
            <div className="vA-num">I. La idea</div>
            <h2 className="vA-h2">El bar más exigente, en tu cocina.</h2>
            <p className="vA-p">
              Cada cóctel se prepara como en barra: pisco peruano, fruta fresca y los proporciones
              que un buen bartender mediría al milímetro. Lo congelamos en el momento, antes de
              que algo se oxide o se diluya.
            </p>
            <p className="vA-p">
              Llega a tu casa intacto. Se sirve en un minuto. Sabe como debe saber.
            </p>
            <div className="vA-historia-stats">
              <div><strong>03</strong><span>recetas firma</span></div>
              <div><strong>125</strong><span>ml por unidad</span></div>
              <div><strong>−18°</strong><span>conservación</span></div>
            </div>
          </div>
        </div>
      </section>

      {/* COLECCIÓN */}
      <section className="vA-coleccion" id="vA-coleccion">
        <div className="vA-sec-head">
          <div className="vA-num">II. La colección</div>
          <h2 className="vA-h2">Tres recetas. <em>Una obsesión.</em></h2>
        </div>

        <div className="vA-prod-list">
          {PRODUCTS.map((p,i)=>(
            <article key={p.id} className="vA-prod" style={{'--p-tone':p.tone}}>
              <div className="vA-prod-meta">
                <div className="vA-prod-n">N.º {p.n}</div>
                <div className="vA-prod-line"></div>
                <div className="vA-prod-mood">{p.mood}</div>
              </div>
              <div className="vA-prod-img" data-cursor data-cursor-label="Añadir">
                <img src={p.label} alt={p.name} loading="lazy"/>
              </div>
              <div className="vA-prod-info">
                <h3 className="vA-prod-name">
                  <em>{p.short.split(' ')[0]}</em>
                  <span>{p.name.replace(p.short,'').trim() || p.fruit}</span>
                </h3>
                <p className="vA-prod-notes">{p.notes}</p>
                <div className="vA-prod-foot">
                  <div className="vA-prod-price">S/{p.price}<small>/ud · 125 ml</small></div>
                  <div className="vA-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>
            </article>
          ))}
        </div>
      </section>

      {/* RITUAL */}
      <section className="vA-ritual">
        <div className="vA-sec-head">
          <div className="vA-num">III. El ritual</div>
          <h2 className="vA-h2">Un minuto. <em>Tres pasos.</em></h2>
        </div>
        <div className="vA-ritual-grid">
          {[
            {n:'01', t:'Vierte', b:'Echa todo el contenido (125 ml) en la licuadora.', s:'20 segundos'},
            {n:'02', t:'Añade agua', b:'Llena el envase vacío con agua fría y agrégalo.', s:'20 segundos'},
            {n:'03', t:'Licúa y sirve', b:'Potencia alta por 10 segundos. Sirve en copa fría.', s:'10 segundos'},
          ].map((r,i)=>(
            <div key={i} className="vA-ritual-cell">
              <div className="vA-ritual-n">{r.n}</div>
              <h3>{r.t}</h3>
              <p>{r.b}</p>
              <span className="vA-ritual-s">{r.s}</span>
            </div>
          ))}
        </div>
      </section>

      {/* CAJA */}
      <section className="vA-caja" id="vA-caja">
        <div className="vA-caja-grid">
          <div className="vA-caja-imgs">
            <img src="images/psf.png" alt="" className="vA-caja-img-main"/>
            <div className="vA-caja-stamp">
              <div>Edición</div>
              <strong>S/120</strong>
              <div>doce unidades</div>
            </div>
          </div>
          <div className="vA-caja-side">
            <div className="vA-num">IV. La caja</div>
            <h2 className="vA-h2">Compón tu <em>caja</em>.</h2>
            <p className="vA-p">Doce unidades a S/120. Tres recetas, tu mezcla. Sin la caja completa,
              S/15 cada una desde 3 unidades.</p>

            <div className="vA-builder">
              <div className="vA-builder-head">
                <span>Tu selección</span>
                <strong>{total} / {PACK_QTY}</strong>
              </div>
              <div className="vA-builder-bar">
                <div className="vA-builder-fill" style={{width: `${(total/PACK_QTY)*100}%`}}></div>
              </div>
              {PRODUCTS.map(p=>(
                <div key={p.id} className={`vA-builder-row ${cart[p.id]?'is-on':''}`}>
                  <div className="vA-builder-name">
                    <span className="vA-dot" style={{background:p.tone}}></span>
                    {p.name}
                  </div>
                  <div className="vA-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="vA-price-row">
              <div>
                <div className="vA-price-now">S/{final}</div>
                {total === PACK_QTY && (
                  <div className="vA-price-was">
                    <s>S/180</s> <span>—Ahorras S/60</span>
                  </div>
                )}
              </div>
              <div className="vA-price-cta">
                <button className={`vA-cta-primary ${warning?'is-warn':''}`}
                        onClick={checkout} data-cursor data-cursor-label="Pedir">
                  {warning ? warning : (total===0 ? 'Componer →' : `Pedir · S/${final} →`)}
                </button>
                <button className="vA-cta-link" onClick={reset} data-cursor>Vaciar</button>
              </div>
            </div>

            <div className="vA-caja-specs">
              <div><span>Unidades</span><strong>12</strong></div>
              <div><span>Recetas</span><strong>3</strong></div>
              <div><span>Volumen</span><strong>125 ml</strong></div>
              <div><span>Conserva</span><strong>−18°C</strong></div>
            </div>
          </div>
        </div>
      </section>

      {/* EMPRESAS */}
      <section className="vA-empresas" id="vA-empresas">
        <div className="vA-empresas-inner">
          <div className="vA-num">V. Para empresas</div>
          <h2 className="vA-h2">¿Restaurante, hotel o catering?</h2>
          <p className="vA-p">Programa B2B con precios mayoristas, soporte de carta y entrega
            programada. Trabajamos con bares y hoteles de Lima.</p>
          <a href="restaurantes.html" className="vA-cta-primary" data-cursor data-cursor-label="Ver">
            Ver propuesta para empresas <span>→</span>
          </a>
        </div>
      </section>

      {/* FOOT */}
      <footer className="vA-foot">
        <div className="vA-foot-mark">C<span className="vA-o">Ø</span>RDIAL</div>
        <div className="vA-foot-tag">Coctelería congelada · Hecha en Lima</div>
        <div className="vA-foot-grid">
          <div>
            <div className="vA-foot-h">Tienda</div>
            <a href="#vA-coleccion" data-cursor>Colección</a>
            <a href="#vA-caja" data-cursor>La caja</a>
            <a href="restaurantes.html" data-cursor>Empresas</a>
          </div>
          <div>
            <div className="vA-foot-h">Contacto</div>
            <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>
            <div className="vA-foot-h">Legal</div>
            <span>+18 · Beber con moderación</span>
            <span>© CØRDIAL · Lima 2026</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

window.VariantA = VariantA;