// Screens 02-04 for Propuesta 2: Shop, Product, Cart

// ============================================================
// 02 — SHOP / PLP
// ============================================================
const ShopScreen = ({ onNav }) => {
  const [view, setView] = useState('grid');
  return (
    <React.Fragment>
      <style>{`
        .p2-shop { padding: 24px 0 80px; }

        .p2-cat-header { padding: 28px 0 32px; border-bottom: 1px solid var(--line); margin-bottom: 28px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
        .p2-cat-header .num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--green); letter-spacing: 0.12em; margin-bottom: 8px; }
        .p2-cat-header h1 { font-size: 56px; line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
        .p2-cat-header .quick { display: flex; gap: 6px; flex-wrap: wrap; max-width: 480px; }
        .p2-cat-header .quick a { padding: 7px 14px; font-size: 11px; color: var(--ink-2); border: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; }
        .p2-cat-header .quick a:hover, .p2-cat-header .quick a.active { background: var(--green); color: var(--bg); border-color: var(--green); }

        .p2-shop-grid { display: grid; grid-template-columns: 280px 1fr; gap: 24px; }

        .p2-side { display: flex; flex-direction: column; }
        .p2-side .filter-block {
          border: 1px solid var(--line); margin-bottom: -1px;
          background: var(--surface);
        }
        .p2-side .filter-block > header {
          padding: 14px 20px; display: flex; align-items: center; justify-content: space-between;
          font-family: 'JetBrains Mono', monospace; font-size: 11px;
          color: var(--green); letter-spacing: 0.1em;
          cursor: pointer; user-select: none;
        }
        .p2-side .filter-block > header svg { width: 12px; height: 12px; }
        .p2-side .filter-block > .body { padding: 0 20px 18px; }
        .p2-side .filter-block .opt {
          display: flex; align-items: center; gap: 10px; padding: 5px 0;
          font-size: 13px; color: var(--ink-2);
          cursor: pointer;
        }
        .p2-side .filter-block .opt input { width: 14px; height: 14px; accent-color: var(--green); }
        .p2-side .filter-block .opt .count { margin-left: auto; font-size: 10px; color: var(--ink-4); font-family: 'JetBrains Mono', monospace; }

        .p2-filters-top {
          padding: 12px 20px;
          background: var(--surface-2); border: 1px solid var(--line);
          margin-bottom: -1px;
          display: flex; align-items: center; justify-content: space-between;
        }
        .p2-filters-top h3 { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--green); font-family: 'JetBrains Mono', monospace; }
        .p2-filters-top button { font-size: 11px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; }

        .p2-price-range { display: flex; gap: 8px; }
        .p2-price-range input { flex: 1; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-size: 12px; outline: 0; font-family: 'JetBrains Mono', monospace; }

        .p2-results-bar {
          display: flex; align-items: center; justify-content: space-between;
          padding: 14px 18px;
          background: var(--surface); border: 1px solid var(--line);
          margin-bottom: 18px;
        }
        .p2-results-bar .left { display: flex; align-items: center; gap: 18px; }
        .p2-results-bar .count { font-size: 12px; color: var(--ink-2); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; }
        .p2-results-bar .count strong { color: var(--green); font-weight: 600; }
        .p2-results-bar .view-toggle { display: flex; border: 1px solid var(--line); }
        .p2-results-bar .view-toggle button { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); background: var(--bg); }
        .p2-results-bar .view-toggle button.active { background: var(--green); color: var(--bg); }
        .p2-results-bar .view-toggle svg { width: 14px; height: 14px; }
        .p2-results-bar select { padding: 8px 12px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; color: var(--ink); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; outline: 0; }

        .p2-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
        .p2-chips .chip {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 5px 8px 5px 12px;
          background: var(--surface); border: 1px solid var(--line-strong);
          font-size: 11px; color: var(--ink);
          font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em;
        }
        .p2-chips .chip button { color: var(--green); }

        .p2-shop-grid .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .p2-pager { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 40px; }
        .p2-pager button {
          width: 38px; height: 38px;
          border: 1px solid var(--line);
          background: var(--surface); color: var(--ink-2);
          font-size: 13px; font-weight: 500;
          font-family: 'JetBrains Mono', monospace;
        }
        .p2-pager button.active { background: var(--green); color: var(--bg); border-color: var(--green); }
        .p2-pager button:hover:not(.active) { border-color: var(--green); color: var(--green); }
      `}</style>
      <Header active="shop" onNav={onNav}/>
      <main className="container p2-shop">
        <nav className="p2-breadcrumb">
          <span className="prompt">//</span>
          <a onClick={()=>onNav('home')}>Inicio</a>
          <span className="sep">/</span>
          <a>Tienda</a>
          <span className="sep">/</span>
          <span className="current">CCTV · Cámaras de seguridad</span>
        </nav>

        <div className="p2-cat-header">
          <div>
            <h1>Cámaras CCTV<br/>y accesorios.</h1>
          </div>
        </div>

        <div className="p2-shop-grid">
          {/* SIDEBAR */}
          <aside className="p2-side">
            <div className="p2-filters-top">
              <h3>// FILTROS · 3 ACTIVOS</h3>
              <button>LIMPIAR</button>
            </div>

            {FILTERS.map((f, i) => (
              <div className="filter-block" key={f.key}>
                <header>{f.label.toUpperCase()}{Ic.chevDown}</header>
                <div className="body">
                  {f.opts.map((o, j) => (
                    <label className="opt" key={j}><input type="checkbox" defaultChecked={i===0 && j===0}/>{o}<span className="count">{Math.floor(Math.random()*40)+2}</span></label>
                  ))}
                </div>
              </div>
            ))}

            <div className="filter-block">
              <header>PRECIO (USD){Ic.chevDown}</header>
              <div className="body">
                <div className="p2-price-range">
                  <input placeholder="Min"/>
                  <input placeholder="Max"/>
                </div>
                <button className="btn btn-outline" style={{marginTop:12, padding:'9px 16px', fontSize: 11, width:'100%'}}>APLICAR RANGO</button>
              </div>
            </div>
          </aside>

          {/* RESULTS */}
          <div>
            <div className="p2-results-bar">
              <div className="left">
                <div className="count">MOSTRANDO <strong>1–24</strong> DE <strong>121</strong></div>
              </div>
              <div style={{display:'flex',gap:10}}>
                <select><option>// SORT · RELEVANCIA</option><option>Precio: menor</option><option>Precio: mayor</option><option>Más nuevos</option></select>
                <select><option>24 / PAGE</option><option>48 / PAGE</option></select>
              </div>
            </div>

            <div className="pgrid">
              {PRODUCTS.concat(PRODUCTS).slice(0,9).map((p,i) => (
                <ProductCard key={i} p={p} onClick={()=>onNav('product')}/>
              ))}
            </div>

            <div className="p2-pager">
              <button>‹</button>
              <button className="active">01</button>
              <button>02</button>
              <button>03</button>
              <button>04</button>
              <button>…</button>
              <button>09</button>
              <button>›</button>
            </div>
          </div>
        </div>
      </main>
      <Footer onNav={onNav}/>
      <WAFloat/>
    </React.Fragment>
  );
};

// ============================================================
// 03 — PRODUCT DETAIL
// ============================================================
const ProductScreen = ({ onNav }) => {
  const [active, setActive] = useState(0);
  const [tab, setTab] = useState('desc');
  const [qty, setQty] = useState(1);
  const p = PRODUCTS[0];
  return (
    <React.Fragment>
      <style>{`
        .p2-pdp { padding: 24px 0 80px; }
        .p2-pdp .top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; padding: 32px 0; }

        .p2-pdp .gallery .main-img {
          aspect-ratio: 1; background: var(--surface);
          border: 1px solid var(--line); padding: 60px;
          position: relative; display: flex; align-items: center; justify-content: center;
          overflow: hidden;
        }
        .p2-pdp .gallery .main-img .corners span {
          position: absolute; width: 24px; height: 24px; border-color: var(--green);
        }
        .p2-pdp .gallery .main-img .corners .tl { top: 16px; left: 16px; border-top: 2px solid; border-left: 2px solid; }
        .p2-pdp .gallery .main-img .corners .tr { top: 16px; right: 16px; border-top: 2px solid; border-right: 2px solid; }
        .p2-pdp .gallery .main-img .corners .bl { bottom: 16px; left: 16px; border-bottom: 2px solid; border-left: 2px solid; }
        .p2-pdp .gallery .main-img .corners .br { bottom: 16px; right: 16px; border-bottom: 2px solid; border-right: 2px solid; }
        .p2-pdp .gallery .main-img .info {
          position: absolute; bottom: 20px; left: 20px; right: 20px;
          display: flex; justify-content: space-between; gap: 12px;
          font-family: 'JetBrains Mono', monospace; font-size: 10px;
          color: var(--green); letter-spacing: 0.1em;
        }
        .p2-pdp .gallery .main-img .badge-sale {
          position: absolute; top: 24px; right: 24px;
          padding: 6px 16px; background: #B33A1F; color: white;
          font-size: 12px; font-weight: 700;
          font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em;
        }
        .p2-pdp .gallery .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
        .p2-pdp .gallery .thumbs button {
          aspect-ratio: 1; background: var(--surface);
          border: 2px solid var(--line); padding: 18px;
        }
        .p2-pdp .gallery .thumbs button.active { border-color: var(--green); }

        .p2-pdp .info .brand-line { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--green); letter-spacing: 0.12em; margin-bottom: 12px; }
        .p2-pdp .info h1 { font-size: 38px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 18px; }
        .p2-pdp .info .meta-row { display: flex; gap: 18px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); align-items: center; margin-bottom: 26px; letter-spacing: 0.05em; }
        .p2-pdp .info .meta-row .stars { display: flex; gap: 2px; color: var(--green); }
        .p2-pdp .info .meta-row .stars svg { width: 13px; height: 13px; }

        .p2-pdp .price-box {
          background: var(--surface); border: 1px solid var(--line);
          padding: 22px 26px; margin-bottom: 22px;
          position: relative;
        }
        .p2-pdp .price-box::before {
          content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
          background: var(--green);
        }
        .p2-pdp .price-box .price { font-size: 44px; font-weight: 700; color: var(--green); letter-spacing: -0.02em; }
        .p2-pdp .price-box .old { font-size: 16px; color: var(--ink-3); text-decoration: line-through; margin-left: 14px; }
        .p2-pdp .price-box .discount { padding: 4px 14px; background: #B33A1F; color: white; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; margin-left: 10px; font-family: 'JetBrains Mono', monospace; }
        .p2-pdp .price-box .note { font-size: 11px; color: var(--ink-3); margin-top: 6px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; }

        .p2-pdp .stock-line {
          display: flex; align-items: center; gap: 8px;
          font-family: 'JetBrains Mono', monospace; font-size: 12px;
          color: var(--green); letter-spacing: 0.08em;
          margin-bottom: 24px; padding: 12px 16px;
          border: 1px dashed var(--green); background: var(--green-glow);
        }
        .p2-pdp .stock-line .dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; }

        .p2-pdp .qty-row { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
        .p2-pdp .qty {
          display: flex; align-items: center;
          background: var(--surface); border: 1px solid var(--line);
        }
        .p2-pdp .qty button { width: 38px; height: 44px; font-size: 16px; color: var(--ink-2); }
        .p2-pdp .qty button:hover { color: var(--green); }
        .p2-pdp .qty input { width: 40px; text-align: center; background: transparent; border: 0; font-size: 14px; font-weight: 600; outline: 0; color: var(--ink); font-family: 'JetBrains Mono', monospace; }

        .p2-pdp .cta-row { display: flex; gap: 10px; margin-bottom: 24px; }
        .p2-pdp .cta-row .btn-primary { flex: 1; }

        .p2-pdp .quick-specs {
          padding: 22px 26px;
          background: var(--surface); border: 1px solid var(--line);
          margin-bottom: 22px;
        }
        .p2-pdp .quick-specs h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--green); margin-bottom: 14px; font-family: 'JetBrains Mono', monospace; }
        .p2-pdp .quick-specs ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
        .p2-pdp .quick-specs li { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px dotted var(--line); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
        .p2-pdp .quick-specs li:last-child, .p2-pdp .quick-specs li:nth-last-child(2) { border-bottom: 0; }
        .p2-pdp .quick-specs li span:first-child { color: var(--ink-3); }
        .p2-pdp .quick-specs li span:last-child { color: var(--green); }

        .p2-pdp .ship-calc {
          display: flex; align-items: center; gap: 12px;
          padding: 14px 18px; background: var(--surface-2);
          border: 1px solid var(--line);
          font-size: 12px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em;
          color: var(--ink-2);
        }
        .p2-pdp .ship-calc input { flex: 1; padding: 10px 14px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; outline: 0; color: var(--ink); }
        .p2-pdp .ship-calc .btn { padding: 10px 18px; font-size: 11px; }

        .p2-pdp-tabs { padding: 40px 0; border-top: 1px solid var(--line); margin-top: 24px; }
        .p2-pdp-tabs .tabbar { display: flex; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line); width: fit-content; margin-bottom: 28px; }
        .p2-pdp-tabs .tabbar button { padding: 10px 22px; font-size: 12px; font-weight: 600; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; }
        .p2-pdp-tabs .tabbar button.active { background: var(--green); color: var(--bg); }
        .p2-pdp-tabs .content { font-size: 14px; line-height: 1.7; color: var(--ink-2); max-width: 800px; }
        .p2-pdp-tabs .content p { margin-bottom: 14px; }
        .p2-pdp-tabs .content ul { padding-left: 22px; margin: 12px 0; }
        .p2-pdp-tabs .content ul li { margin-bottom: 6px; }
        .p2-pdp-tabs .content strong { color: var(--ink); }
        .p2-pdp-tabs .spec-table {
          width: 100%; border-collapse: separate; border-spacing: 0;
          background: var(--surface); border: 1px solid var(--line);
        }
        .p2-pdp-tabs .spec-table td { padding: 14px 22px; border-bottom: 1px solid var(--line); font-size: 13px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
        .p2-pdp-tabs .spec-table tr:last-child td { border-bottom: 0; }
        .p2-pdp-tabs .spec-table td:first-child { color: var(--green); width: 260px; background: var(--surface-2); }
        .p2-pdp-tabs .spec-table td:last-child { color: var(--ink); }
      `}</style>
      <Header active="product" onNav={onNav}/>
      <main className="container p2-pdp">
        <nav className="p2-breadcrumb">
          <span className="prompt">//</span>
          <a onClick={()=>onNav('home')}>Inicio</a>
          <span className="sep">/</span>
          <a onClick={()=>onNav('shop')}>Tienda</a>
          <span className="sep">/</span>
          <a>CCTV</a>
          <span className="sep">/</span>
          <a>Cámaras IP</a>
          <span className="sep">/</span>
          <span className="current">{p.sku}</span>
        </nav>

        <div className="top">
          <div className="gallery">
            <div className="main-img">
              <div className="corners"><span className="tl"></span><span className="tr"></span><span className="bl"></span><span className="br"></span></div>
              <span className="badge-sale">OFERTA</span>
              <ProductImage/>
            </div>
            <div className="thumbs">
              {[0,1,2,3].map(i => (
                <button key={i} className={active===i?'active':''} onClick={()=>setActive(i)}>
                  <ProductImage/>
                </button>
              ))}
            </div>
          </div>

          <div className="info">
            <div className="brand-line">// MARCA · {p.brand.toUpperCase()}</div>
            <h1>{p.name}</h1>

            <div className="price-box">
              <div>
                <span className="price">${p.price.toFixed(2)}</span>
                <span className="old">${p.oldPrice.toFixed(2)}</span>
                <span className="discount">OFERTA</span>
              </div>
              <div className="note">// PRECIO SIN IVA · CALC. EN CHECKOUT</div>
            </div>

            <div className="stock-line"><span className="dot"></span>EN STOCK · 12 UNIDADES · ENVÍO INMEDIATO</div>

            <div className="qty-row">
              <span style={{fontSize:11, color: 'var(--ink-3)', fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.08em'}}>QTY:</span>
              <div className="qty">
                <button onClick={()=>setQty(q=>Math.max(1,q-1))}>−</button>
                <input value={qty} onChange={e=>setQty(parseInt(e.target.value)||1)}/>
                <button onClick={()=>setQty(q=>q+1)}>+</button>
              </div>
            </div>

            <div className="cta-row">
              <button className="btn btn-primary btn-lg" style={{flex:1}}>{Ic.cart} AGREGAR AL CARRITO</button>
              <button className="btn btn-outline btn-lg" onClick={()=>onNav('checkout')}>COMPRAR YA</button>
              <button className="btn btn-ghost btn-lg" style={{padding:'18px 16px', flex:'0 0 auto'}}>{Ic.heart}</button>
            </div>
          </div>
        </div>

        <section className="p2-pdp-tabs">
          <div className="tabbar">
            <button className={tab==='desc'?'active':''} onClick={()=>setTab('desc')}>DESCRIPCIÓN</button>
            <button className={tab==='specs'?'active':''} onClick={()=>setTab('specs')}>ESPECIFICACIONES</button>
          </div>
          {tab==='desc' && (
            <div className="content">
              <p>La <strong>{p.name}</strong> está diseñada para vigilancia profesional en exteriores e interiores donde se requiere imagen detallada. El sensor SONY 1/1.8" combinado con procesamiento por IA detecta personas, vehículos y movimientos sospechosos con precisión superior al 95%.</p>
              <p>Diseño tipo domo IP67 en aluminio reforzado para resistir polvo, lluvia y temperaturas extremas. Los 60 metros de visión nocturna por IR la convierten en solución ideal para estacionamientos, depósitos y perímetros amplios.</p>
              <ul>
                <li>Sensor SONY 1/1.8" con baja luminosidad real (0.001 lux)</li>
                <li>Zoom óptico 22x con autofoco continuo</li>
                <li>Compatibilidad con software de vigilancia (Hik-Connect, Dahua, ONVIF)</li>
                <li>Análisis de video por IA: reconocimiento facial, lectura de patentes</li>
                <li>Garantía oficial de 24 meses + soporte Don Juan Security</li>
              </ul>
            </div>
          )}
          {tab==='specs' && (
            <table className="spec-table">
              <tbody>
                <tr><td>MARCA</td><td>{p.brand}</td></tr>
                <tr><td>MODELO / SKU</td><td>{p.sku}</td></tr>
                <tr><td>RESOLUCIÓN</td><td>4K UHD · 3840 × 2160 · 8 MP</td></tr>
                <tr><td>SENSOR</td><td>1/1.8" PROGRESSIVE SCAN CMOS SONY</td></tr>
                <tr><td>LENTE</td><td>5.5–110MM · F1.6 · ZOOM 22X</td></tr>
                <tr><td>ÁNGULO DE VISIÓN</td><td>62.6° H · 35.6° V</td></tr>
                <tr><td>VISIÓN NOCTURNA</td><td>IR SMART · 60M</td></tr>
                <tr><td>ALIMENTACIÓN</td><td>12V DC · 3A · POE+ (IEEE 802.3AT)</td></tr>
                <tr><td>RESISTENCIA</td><td>IP67 · IK10 · -30°C A +65°C</td></tr>
                <tr><td>GARANTÍA</td><td>24 MESES · DON JUAN SECURITY</td></tr>
              </tbody>
            </table>
          )}
        </section>

        <section style={{padding:'32px 0 0'}}>
          <div className="section-head" style={{marginBottom: 24}}>
            <div>
              <div className="kicker">PRODUCTOS RELACIONADOS · X4</div>
              <h2 style={{fontSize:30, fontWeight:500, letterSpacing:'-0.02em', color:'var(--ink)'}}>Quienes compraron esto también llevaron:</h2>
            </div>
            <a className="more">VER MÁS {Ic.arrow}</a>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18}}>
            {PRODUCTS.slice(1,5).map(p => <ProductCard key={p.sku} p={p} onClick={()=>onNav('product')}/>)}
          </div>
        </section>
      </main>
      <Footer onNav={onNav}/>
      <WAFloat/>
    </React.Fragment>
  );
};

// ============================================================
// 04 — CART
// ============================================================
const CartScreen = ({ onNav }) => {
  const items = [
    { ...PRODUCTS[0], qty: 1 },
    { ...PRODUCTS[2], qty: 2 },
    { ...PRODUCTS[4], qty: 1 },
  ];
  const subtotal = items.reduce((s,i)=>s+i.price*i.qty,0);
  const iva = subtotal * 0.16;
  return (
    <React.Fragment>
      <style>{`
        .p2-cart { padding: 30px 0 80px; }
        .p2-cart h1 { font-size: 56px; font-weight: 500; letter-spacing: -0.03em; margin-bottom: 6px; }
        .p2-cart h1 em { font-style: normal; color: var(--green); }
        .p2-cart .sub { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-3); letter-spacing: 0.08em; margin-bottom: 36px; }
        .p2-cart .grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; }
        .p2-cart .items { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); }
        .p2-cart .head {
          display: grid; grid-template-columns: 1fr 130px 130px 100px 40px;
          padding: 14px 22px; gap: 16px;
          background: var(--surface);
          border-bottom: 1px solid var(--line);
          font-family: 'JetBrains Mono', monospace; font-size: 10px;
          color: var(--green); letter-spacing: 0.1em; font-weight: 600;
        }
        .p2-cart .item {
          display: grid; grid-template-columns: 1fr 130px 130px 100px 40px;
          padding: 22px; gap: 16px; align-items: center;
          background: var(--bg);
          border-bottom: 1px solid var(--line);
        }
        .p2-cart .item:last-child { border-bottom: 0; }
        .p2-cart .item .name-block { display: flex; gap: 18px; align-items: center; }
        .p2-cart .item .ph-wrap { width: 84px; height: 84px; background: var(--surface); border: 1px solid var(--line); padding: 14px; flex-shrink: 0; }
        .p2-cart .item .name-block .meta .sku { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--green); letter-spacing: 0.06em; }
        .p2-cart .item .name-block .meta h4 { font-size: 15px; font-weight: 500; margin: 4px 0; line-height: 1.3; color: var(--ink); }
        .p2-cart .item .name-block .meta .brand { font-size: 11px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
        .p2-cart .item .qty {
          display: inline-flex; align-items: center;
          background: var(--surface); border: 1px solid var(--line);
        }
        .p2-cart .item .qty button { width: 30px; height: 36px; color: var(--ink-2); font-size: 14px; }
        .p2-cart .item .qty input { width: 30px; text-align: center; border: 0; background: transparent; font-size: 13px; font-weight: 600; outline: 0; color: var(--ink); font-family: 'JetBrains Mono', monospace; }
        .p2-cart .item .price { font-size: 14px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }
        .p2-cart .item .total { font-size: 18px; font-weight: 700; color: var(--green); text-align: right; font-family: 'JetBrains Mono', monospace; letter-spacing: -0.02em; }
        .p2-cart .item .rm { color: var(--ink-3); }
        .p2-cart .item .rm:hover { color: var(--danger); }
        .p2-cart .actions-row {
          padding: 18px 22px; display: flex; gap: 12px;
          background: var(--surface);
          border-top: 1px solid var(--line);
          justify-content: space-between;
        }

        .p2-summary {
          background: var(--surface); border: 1px solid var(--line);
          padding: 28px; height: fit-content;
          position: sticky; top: 100px;
        }
        .p2-summary h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--green); margin-bottom: 22px; font-family: 'JetBrains Mono', monospace; }
        .p2-summary .line { display: flex; justify-content: space-between; font-size: 13px; padding: 9px 0; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
        .p2-summary .line.muted { color: var(--ink-3); }
        .p2-summary .divider { height: 1px; background: var(--line); margin: 8px 0; }
        .p2-summary .total-line { font-size: 22px; font-weight: 700; color: var(--green); padding-top: 12px; font-family: 'Space Grotesk'; letter-spacing: -0.02em; }
        .p2-summary .coupon { display: flex; gap: 6px; margin: 18px 0 22px; }
        .p2-summary .coupon input { flex: 1; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; color: var(--ink); outline: 0; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }
        .p2-summary .coupon button { padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11px; color: var(--ink); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.08em; }

        .p2-summary .trust { margin-top: 18px; padding: 14px; background: var(--green-glow); border: 1px solid var(--green); font-size: 12px; line-height: 1.45; color: var(--ink); display: flex; gap: 10px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.03em; }
        .p2-summary .trust svg { color: var(--green); width: 16px; height: 16px; flex-shrink: 0; }
      `}</style>
      <Header active="cart" onNav={onNav}/>
      <main className="container p2-cart">
        <nav className="p2-breadcrumb" style={{marginBottom: 18, borderBottom: 0, paddingBottom: 0}}>
          <span className="prompt">//</span>
          <a onClick={()=>onNav('home')}>Inicio</a>
          <span className="sep">/</span>
          <span className="current">Carrito</span>
        </nav>
        <h1>Tu <em>carrito.</em></h1>
        <p className="sub">// {items.length} ITEMS · REVISA ANTES DE CONTINUAR</p>

        <div className="grid">
          <div className="items">
            <div className="head">
              <span>// PRODUCTO</span>
              <span style={{textAlign:'center'}}>QTY</span>
              <span style={{textAlign:'center'}}>UNIT</span>
              <span style={{textAlign:'right'}}>TOTAL</span>
              <span></span>
            </div>
            {items.map((i, idx) => (
              <div className="item" key={idx}>
                <div className="name-block">
                  <div className="ph-wrap"><ProductImage small/></div>
                  <div className="meta">
                    <div className="sku">{i.sku}</div>
                    <h4>{i.name}</h4>
                    <span className="brand">{i.brand} · {i.power}</span>
                  </div>
                </div>
                <div style={{display:'flex',justifyContent:'center'}}>
                  <div className="qty"><button>−</button><input defaultValue={i.qty}/><button>+</button></div>
                </div>
                <span className="price" style={{textAlign:'center'}}>${i.price.toFixed(2)}</span>
                <span className="total">${(i.price*i.qty).toFixed(2)}</span>
                <button className="rm">{Ic.trash}</button>
              </div>
            ))}
            <div className="actions-row">
              <button className="btn btn-ghost" onClick={()=>onNav('shop')}>← CONTINUAR COMPRANDO</button>
            </div>
          </div>

          <aside className="p2-summary">
            <h3>// RESUMEN</h3>
            <div className="line"><span>SUBTOTAL · {items.length} ITEMS</span><span>${subtotal.toFixed(2)}</span></div>
            <div className="line muted"><span>ENVÍO</span><span>EN CHECKOUT</span></div>
            <div className="line muted"><span>IVA · 16%</span><span>${iva.toFixed(2)}</span></div>
            <div className="divider"/>
            <div className="line total-line"><span>TOTAL</span><span>${(subtotal+iva).toFixed(2)}</span></div>

            <button className="btn btn-primary btn-lg btn-block" style={{marginTop: 22}} onClick={()=>onNav('checkout')}>
              CONTINUAR AL CHECKOUT {Ic.arrow}
            </button>

            <div className="trust">
              {Ic.shield}
              <span>// UNA VEZ CONFIRMADO TU COMPROBANTE DE PAGO, TE ENVIAMOS LOS PRODUCTOS AL INSTANTE</span>
            </div>
          </aside>
        </div>
      </main>
      <Footer onNav={onNav}/>
      <WAFloat/>
    </React.Fragment>
  );
};

window.ShopScreen = ShopScreen;
window.ProductScreen = ProductScreen;
window.CartScreen = CartScreen;
