/* VARIANTE C · MAGAZINE
   Grid asimétrico tipo revista, microinteracciones, sticky CTA.
*/

const { useState: useStateC, useEffect: useEffectC } = React;

function VariantC({ accent }){
  const { cart, total, final, add, reset, checkout, warning } = useCart();
  const [issue] = useStateC('Nº 01 · Verano 2026');
  const y = useScrollY();

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

      {/* MAGAZINE BAR */}
      <div className="vC-issue">
        <span>{issue}</span>
        <span className="vC-issue-mid">CØRDIAL · Coctelería congelada</span>
        <span>Lima, Perú</span>
      </div>

      <header className={`vC-nav ${y>40?'is-stick':''}`}>
        <a href="#" className="vC-brand" data-cursor>
          <span>C</span><span className="vC-o">Ø</span><span>RDIAL</span>
        </a>
        <nav className="vC-links">
          <a href="#vC-shop" data-cursor>01 Tienda</a>
          <a href="#vC-recetas" data-cursor>02 Recetas</a>
          <a href="#vC-caja" data-cursor>03 La caja</a>
          <a href="restaurantes.html" data-cursor>04 B2B</a>
        </nav>
        <button className="vC-cart" onClick={()=>document.getElementById('vC-caja').scrollIntoView({behavior:'smooth'})}
                data-cursor data-cursor-label="Pedido">
          Pedido [{total}]
        </button>
      </header>

      {/* HERO MAGAZINE — grid asimétrico */}
      <section className="vC-hero">
        <div className="vC-hero-grid">
          <div className="vC-hero-tl">
            <div className="vC-tag">Portada · Edición Verano</div>
            <h1 className="vC-h1">
              <span>Cocteles</span>
              <span className="vC-italic">de barra</span>
              <span>en tu</span>
              <span className="vC-underline">freezer.</span>
            </h1>
          </div>
          <div className="vC-hero-tr">
            <img src="images/01.png" alt=""/>
            <div className="vC-hero-tr-cap">N.º 01 · Maracuyá</div>
          </div>
          <div className="vC-hero-bl">
            <p className="vC-lede">
              Tres recetas peruanas, congeladas en su punto exacto. Vierte, agua, licúa.
              Un minuto al servicio.
            </p>
            <div className="vC-hero-cta">
              <a href="#vC-shop" className="vC-btn" data-cursor data-cursor-label="Comprar">
                Comprar caja S/120 →
              </a>
              <a href="#vC-recetas" className="vC-btn-ghost" data-cursor>Ver recetas</a>
            </div>
          </div>
          <div className="vC-hero-br">
            <div className="vC-hero-stat">
              <strong>03</strong>
              <span>Recetas firma</span>
            </div>
            <div className="vC-hero-stat">
              <strong>60s</strong>
              <span>Al servicio</span>
            </div>
            <div className="vC-hero-stat">
              <strong>−18°</strong>
              <span>Conservación</span>
            </div>
          </div>
        </div>
      </section>

      {/* TICKER */}
      <div className="vC-ticker">
        <div className="vC-ticker-track">
          {Array.from({length:3}).map((_,i)=>(
            <span key={i}>
              ✶ Pisco peruano ✶ Maracuyá ✶ Frambuesa ✶ Piña ✶ Edición limitada ✶ Lima ✶
            </span>
          ))}
        </div>
      </div>

      {/* SHOP — fichas tipo catálogo */}
      <section className="vC-shop" id="vC-shop">
        <div className="vC-spread">
          <div className="vC-spread-l">
            <div className="vC-tag">01 — La colección</div>
            <h2 className="vC-h2">Tres recetas. <em>Una obsesión.</em></h2>
            <p className="vC-p">
              Cada receta es el resultado de cientos de pruebas con bartenders peruanos.
              Pisco quebranta o italia según corresponda, fruta peruana en temporada.
            </p>
          </div>
          <div className="vC-spread-r">
            <div className="vC-pull">
              <div>“</div>
              Un minuto entre el freezer y la copa. Sin pretextos.
            </div>
          </div>
        </div>

        <div className="vC-cat">
          {PRODUCTS.map((p,i)=>(
            <article key={p.id} className="vC-card" style={{'--p-tone':p.tone}}>
              <div className="vC-card-head">
                <span>N.º {p.n}</span>
                <span>125 ml</span>
              </div>
              <div className="vC-card-img" data-cursor data-cursor-label="Añadir">
                <img src={p.label} alt={p.name}/>
              </div>
              <h3 className="vC-card-name">{p.short}</h3>
              <p className="vC-card-mood">{p.mood}</p>
              <div className="vC-card-foot">
                <div className="vC-card-price">S/{p.price}</div>
                <div className="vC-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>

      {/* RECETAS DESPLEGADAS */}
      <section className="vC-recetas" id="vC-recetas">
        {PRODUCTS.map((p,i)=>(
          <article key={p.id} className={`vC-receta ${i%2?'is-flip':''}`} style={{'--p-tone':p.tone}}>
            <div className="vC-receta-img">
              <img src={p.label} alt={p.name}/>
            </div>
            <div className="vC-receta-copy">
              <div className="vC-receta-num">N.º {p.n}</div>
              <h3 className="vC-receta-h">{p.short}</h3>
              <p className="vC-receta-notes">{p.notes}</p>
              <div className="vC-receta-mood">{p.mood}</div>
              <div className="vC-receta-foot">
                <div>S/{p.price} <small>/ud</small></div>
                <div className="vC-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>
        ))}
      </section>

      {/* RITUAL EN BANNER */}
      <section className="vC-ritual">
        <div className="vC-tag">02 — El ritual</div>
        <h2 className="vC-h2 vC-center">Un minuto. <em>Tres pasos.</em></h2>
        <div className="vC-ritual-grid">
          {[
            {n:'01', t:'Vierte', b:'125 ml en la licuadora.'},
            {n:'02', t:'Añade agua', b:'Llena el envase y echa.'},
            {n:'03', t:'Licúa y sirve', b:'10s a potencia alta.'},
          ].map((r,i)=>(
            <div key={i} className="vC-ritual-cell">
              <strong>{r.n}</strong>
              <h3>{r.t}</h3>
              <p>{r.b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CAJA */}
      <section className="vC-caja" id="vC-caja">
        <div className="vC-caja-grid">
          <div className="vC-caja-art">
            <img src="images/psf.png" alt=""/>
          </div>
          <div className="vC-caja-build">
            <div className="vC-tag">03 — La caja</div>
            <h2 className="vC-h2">Compón <em>doce.</em></h2>
            <p className="vC-p">12 unidades, 3 recetas, S/120. Combina como quieras.</p>

            <div className="vC-builder">
              <div className="vC-builder-head">
                <span>Tu selección</span>
                <strong>{total}/{PACK_QTY}</strong>
              </div>
              <div className="vC-builder-bar">
                <div className="vC-builder-fill" style={{width:`${(total/PACK_QTY)*100}%`}}></div>
                {Array.from({length:11}).map((_,i)=>(
                  <span key={i} className="vC-builder-tick" style={{left:`${((i+1)/12)*100}%`}}/>
                ))}
              </div>
              {PRODUCTS.map(p=>(
                <div key={p.id} className={`vC-builder-row ${cart[p.id]?'is-on':''}`}>
                  <div className="vC-builder-name">
                    <span className="vC-dot" style={{background:p.tone}}></span>
                    {p.name}
                  </div>
                  <div className="vC-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="vC-price-block">
              <div className="vC-price-now">S/{final}</div>
              {total === PACK_QTY && <div className="vC-price-save"><s>S/180</s> Ahorras S/60</div>}
            </div>

            <div className="vC-cta-row">
              <button className={`vC-btn ${warning?'is-warn':''}`} onClick={checkout}
                      data-cursor data-cursor-label="Pedir">
                {warning ? warning : (total===0 ? 'Componer caja →' : `Pedir · S/${final} →`)}
              </button>
              <button className="vC-btn-ghost" onClick={reset} data-cursor>Vaciar</button>
            </div>
          </div>
        </div>
      </section>

      {/* B2B */}
      <section className="vC-b2b">
        <div className="vC-b2b-grid">
          <div className="vC-tag">04 — B2B</div>
          <h2 className="vC-h2">Para <em>bares,</em> restaurantes y hoteles.</h2>
          <p className="vC-p">Programa con precios mayoristas, soporte de carta y entrega programada.</p>
          <a href="restaurantes.html" className="vC-btn" data-cursor data-cursor-label="Ver">
            Propuesta para empresas →
          </a>
        </div>
      </section>

      {/* STICKY CTA */}
      {total > 0 && (
        <div className="vC-sticky">
          <div className="vC-sticky-info">
            <strong>{total}</strong>
            <span>{total===PACK_QTY ? 'Caja completa' : `${total} × S/15`}</span>
          </div>
          <div className="vC-sticky-price">S/{final}</div>
          <button className="vC-btn vC-sticky-btn" onClick={checkout} data-cursor data-cursor-label="Pedir">
            Pedir →
          </button>
        </div>
      )}

      {/* FOOT */}
      <footer className="vC-foot">
        <div className="vC-foot-mark">C<span className="vC-o">Ø</span>RDIAL</div>
        <div className="vC-foot-grid">
          <div>
            <span>Tienda</span>
            <a href="#vC-shop" data-cursor>Colección</a>
            <a href="#vC-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.VariantC = VariantC;