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

// ============================================================
// 02 — SHOP
// ============================================================
const ShopScreen = ({ onNav }) => {
  const [view, setView] = useState('grid');
  const [openFilters, setOpenFilters] = useState({ cat: true, brand: true, capacity: true, power: true });
  return (
    <React.Fragment>
      <style>{`
        .p3-shop { padding: 28px 0 140px; }
        .p3-breadcrumb { display: flex; gap: 8px; padding: 14px 0 18px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; margin-bottom: 28px; }
        .p3-breadcrumb a:hover { color: var(--forest); }
        .p3-breadcrumb .sep { color: var(--ink-4); }
        .p3-breadcrumb .current { color: var(--forest); }

        .p3-cat-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 36px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
        .p3-cat-head .left { max-width: 720px; }
        .p3-cat-head .num { font-family: 'Fraunces', serif; font-style: italic; font-size: 16px; color: var(--ink-3); margin-bottom: 12px; }
        .p3-cat-head h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 72px; line-height: 0.92; letter-spacing: -0.03em; color: var(--forest-deep); }
        .p3-cat-head h1 em { font-style: italic; color: var(--green-deep); }
        .p3-cat-head .meta { font-size: 13px; color: var(--ink-3); margin-top: 14px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }
        .p3-cat-head .quick { display: flex; gap: 6px; flex-wrap: wrap; max-width: 460px; }
        .p3-cat-head .quick a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; color: var(--ink-2); font-weight: 500; }
        .p3-cat-head .quick a:hover, .p3-cat-head .quick a.active { background: var(--forest-deep); color: var(--paper); border-color: var(--forest-deep); }

        .p3-shop-grid { display: grid; grid-template-columns: 260px 1fr; gap: 36px; }

        .p3-side { display: flex; flex-direction: column; gap: 0; }
        .p3-side .top-bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
        .p3-side .top-bar h3 { font-family: 'Fraunces', serif; font-size: 22px; color: var(--forest-deep); letter-spacing: -0.02em; font-weight: 500; }
        .p3-side .top-bar button { font-size: 12px; color: var(--forest); font-weight: 600; }

        .p3-side .filter-block { border-bottom: 1px solid var(--line); padding: 8px 0 14px; }
        .p3-side .filter-block > header { padding: 12px 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; font-family: 'Fraunces', serif; font-size: 18px; color: var(--forest-deep); font-weight: 500; letter-spacing: -0.01em; }
        .p3-side .filter-block > header svg { width: 14px; height: 14px; transition: transform 0.2s; color: var(--ink-3); }
        .p3-side .filter-block.open > header svg { transform: rotate(180deg); }
        .p3-side .filter-block > .body { padding: 2px 0 8px; }
        .p3-side .filter-block.collapsed > .body { display: none; }
        .p3-side .filter-block .opt { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--ink-2); cursor: pointer; }
        .p3-side .filter-block .opt input { width: 14px; height: 14px; accent-color: var(--forest); }
        .p3-side .filter-block .opt .count { margin-left: auto; font-size: 10px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }

        .p3-side .price-range { display: flex; gap: 8px; margin-top: 6px; }
        .p3-side .price-range input { flex: 1; padding: 9px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; outline: 0; font-family: 'JetBrains Mono', monospace; }

        .p3-results-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; background: var(--cream); border-radius: 12px; margin-bottom: 22px; }
        .p3-results-bar .count { font-size: 13px; color: var(--ink); }
        .p3-results-bar .count strong { color: var(--forest); font-weight: 700; font-family: 'JetBrains Mono', monospace; }
        .p3-results-bar .right { display: flex; gap: 10px; align-items: center; }
        .p3-results-bar .view-toggle { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); }
        .p3-results-bar .view-toggle button { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
        .p3-results-bar .view-toggle button.active { background: var(--forest-deep); color: var(--paper); }
        .p3-results-bar .view-toggle svg { width: 14px; height: 14px; }
        .p3-results-bar select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; background: var(--paper); }

        .p3-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
        .p3-chips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--ink-2); }
        .p3-chips .chip button { color: var(--ink-3); }

        .p3-shop-grid .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        .p3-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 40px; }
        .p3-pager button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-2); font-size: 13px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
        .p3-pager button.active { background: var(--forest-deep); color: var(--paper); border-color: var(--forest-deep); }
        .p3-pager button:hover:not(.active) { border-color: var(--forest); color: var(--forest); }
      `}</style>
      <Header active="shop" onNav={onNav} />
      <main className="container p3-shop">
        <nav className="p3-breadcrumb">
          <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="p3-cat-head">
          <div className="left">
            <h1>Cámaras CCTV<br />y <em>accesorios.</em></h1>
          </div>
        </div>

        <div className="p3-shop-grid">
          {/* SIDEBAR */}
          <aside className="p3-side">
            <div className="top-bar">
              <h3>Filtros</h3>
              <button>Limpiar todo</button>
            </div>

            {FILTERS.map((f, i) => {
              const open = openFilters[f.key] !== false;
              return (
                <div key={f.key} className={`filter-block ${open ? 'open' : 'collapsed'}`}>
                  <header onClick={() => setOpenFilters((s) => ({ ...s, [f.key]: !open }))}>
                    {f.label}{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 open">
              <header>Precio (USD){Ic.chevDown}</header>
              <div className="body">
                <div className="price-range">
                  <input placeholder="Min" />
                  <input placeholder="Max" />
                </div>
                <button className="btn btn-outline" style={{ marginTop: 12, padding: '8px 14px', fontSize: 12, width: '100%' }}>Aplicar</button>
              </div>
            </div>
          </aside>

          {/* RESULTS */}
          <div>
            <div className="p3-results-bar">
              <div className="count">Mostrando <strong>1–24</strong> de <strong>121</strong> artículos</div>
              <div className="right">
                <select><option>Relevancia</option><option>Precio: menor</option><option>Precio: mayor</option></select>
                <select><option>24 por página</option><option>48 por página</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="p3-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];
  const discount = Math.round((1 - p.price / p.oldPrice) * 100);
  return (
    <React.Fragment>
      <style>{`
        .p3-pdp { padding: 28px 0 90px; }
        .p3-pdp .top { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; padding: 32px 0; }

        .p3-pdp .gallery .main-img { aspect-ratio: 1; background: var(--cream); border-radius: 16px; padding: 70px; position: relative; display: flex; align-items: center; justify-content: center; }
        .p3-pdp .price-box .discount.oferta-label { padding: 5px 14px; background: #B33A1F; color: white; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; font-family: 'JetBrains Mono', monospace; }
        .p3-pdp .gallery .main-img .badge { position: absolute; top: 22px; left: 22px; padding: 6px 16px; background: #B33A1F; color: white; border-radius: 999px; font-size: 12px; font-weight: 700; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.08em; }
        .p3-pdp .gallery .main-img .ix-num { position: absolute; top: 22px; right: 28px; font-family: 'Fraunces', serif; font-style: italic; color: var(--ink-3); font-size: 18px; }
        .p3-pdp .gallery .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
        .p3-pdp .gallery .thumbs button { aspect-ratio: 1; background: var(--cream); border: 2px solid transparent; border-radius: 10px; padding: 18px; }
        .p3-pdp .gallery .thumbs button.active { border-color: var(--forest); }

        .p3-pdp .info { padding: 4px 0; }
        .p3-pdp .info .ix-num { font-family: 'Fraunces', serif; font-style: italic; color: var(--ink-3); font-size: 14px; margin-bottom: 8px; display: block; }
        .p3-pdp .info .brand-line { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--green-deep); letter-spacing: 0.1em; margin-bottom: 12px; }
        .p3-pdp .info h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: -0.025em; color: var(--forest-deep); margin-bottom: 18px; }
        .p3-pdp .info h1 em { font-style: italic; color: var(--green-deep); }
        .p3-pdp .info .meta-row { display: flex; gap: 18px; font-size: 12px; color: var(--ink-3); align-items: center; margin-bottom: 24px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
        .p3-pdp .info .stars { display: flex; gap: 2px; color: var(--green-deep); }
        .p3-pdp .info .stars svg { width: 13px; height: 13px; }

        .p3-pdp .price-box { background: var(--cream); border-radius: 14px; padding: 22px 28px; margin-bottom: 22px; display: flex; justify-content: space-between; align-items: end; }
        .p3-pdp .price-box .left .label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; margin-bottom: 6px; }
        .p3-pdp .price-box .price { font-family: 'Fraunces', serif; font-size: 52px; font-weight: 500; color: var(--forest-deep); letter-spacing: -0.025em; line-height: 1; }
        .p3-pdp .price-box .old-line { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
        .p3-pdp .price-box .old { font-size: 14px; color: var(--ink-3); text-decoration: line-through; }
        .p3-pdp .price-box .discount { padding: 3px 10px; background: var(--forest-deep); color: var(--green); border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; font-family: 'JetBrains Mono', monospace; }
        .p3-pdp .price-box .stock { font-size: 12px; color: var(--green-deep); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
        .p3-pdp .price-box .stock::before { content: ""; width: 8px; height: 8px; background: var(--green-deep); border-radius: 50%; }

        .p3-pdp .desc { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin-bottom: 22px; }
        .p3-pdp .desc em { font-family: 'Fraunces', serif; font-style: italic; color: var(--forest); font-size: 16px; }

        .p3-pdp .qty-row { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
        .p3-pdp .qty-label { font-size: 12px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; }
        .p3-pdp .qty { display: flex; align-items: center; background: var(--cream); border-radius: 999px; }
        .p3-pdp .qty button { width: 36px; height: 40px; font-size: 16px; color: var(--ink-2); }
        .p3-pdp .qty input { width: 36px; text-align: center; border: 0; font-size: 14px; font-weight: 700; outline: 0; background: transparent; }

        .p3-pdp .cta-row { display: flex; gap: 8px; margin-bottom: 28px; }
        .p3-pdp .cta-row .btn-primary { flex: 1; padding: 13px 22px; }

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

        .p3-pdp .ship-calc { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--cream); border-radius: 10px; font-size: 13px; color: var(--ink-2); }
        .p3-pdp .ship-calc svg { color: var(--forest); width: 18px; height: 18px; }
        .p3-pdp .ship-calc input { flex: 1; padding: 9px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; outline: 0; }

        .p3-pdp-tabs { padding: 40px 0; border-top: 1px solid var(--line); margin-top: 32px; }
        .p3-pdp-tabs .tabbar { display: flex; gap: 4px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
        .p3-pdp-tabs .tabbar button { padding: 14px 0; margin-right: 32px; font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; color: var(--ink-3); letter-spacing: -0.01em; border-bottom: 2px solid transparent; margin-bottom: -1px; }
        .p3-pdp-tabs .tabbar button.active { color: var(--forest-deep); border-bottom-color: var(--forest-deep); }
        .p3-pdp-tabs .tabbar button .num { font-size: 11px; color: var(--ink-4); margin-right: 8px; font-family: 'JetBrains Mono', monospace; vertical-align: middle; }

        .p3-pdp-tabs .content { font-size: 14px; line-height: 1.75; color: var(--ink-2); max-width: 800px; }
        .p3-pdp-tabs .content p { margin-bottom: 14px; }
        .p3-pdp-tabs .content p:first-letter { font-family: 'Fraunces', serif; font-size: 56px; line-height: 0.85; float: left; margin: 4px 10px 0 0; color: var(--forest-deep); }
        .p3-pdp-tabs .content ul { padding-left: 22px; margin: 12px 0; }
        .p3-pdp-tabs .content ul li { margin-bottom: 6px; }
        .p3-pdp-tabs .content strong { color: var(--ink); }
        .p3-pdp-tabs .spec-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
        .p3-pdp-tabs .spec-table td { padding: 14px 22px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
        .p3-pdp-tabs .spec-table tr:last-child td { border-bottom: 0; }
        .p3-pdp-tabs .spec-table td:first-child { color: var(--ink-3); width: 240px; background: var(--cream); font-weight: 500; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
        .p3-pdp-tabs .spec-table td:last-child { color: var(--ink); }
      `}</style>
      <Header active="product" onNav={onNav} />
      <main className="container p3-pdp">
        <nav className="p3-breadcrumb">
          <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>
          <span className="current">{p.sku}</span>
        </nav>

        <div className="top">
          <div className="gallery">
            <div className="main-img">
              <span className="badge">OFERTA</span>
              <span className="ix-num">— 01 / 04</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">
            <span className="ix-num">— Producto 01</span>
            <div className="brand-line">// MARCA · {p.brand.toUpperCase()}</div>
            <h1>{p.name.split(' ').slice(0, 5).join(' ')}<br /><em>{p.name.split(' ').slice(5).join(' ')}.</em></h1>

            <div className="price-box">
              <div className="left">
                <div className="label">PRECIO SIN IVA · ENVÍO APARTE</div>
                <div className="price">${p.price.toFixed(2)}</div>
                <div className="old-line">
                  <span className="old">${p.oldPrice.toFixed(2)}</span>
                  <span className="discount oferta-label">OFERTA</span>
                </div>
              </div>
              <span className="stock">En stock · {p.stock} und</span>
            </div>

            <p className="desc"><em>Diseñada</em> para vigilancia profesional en exteriores. Sensor SONY 1/1.8" con baja luminosidad real, zoom óptico 22x, visión nocturna IR de 60m y resistencia IP67. Compatible con la mayoría de software de vigilancia.</p>

            <div className="qty-row">
              <span className="qty-label">CANTIDAD:</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>
              <button style={{ marginLeft: 8, color: 'var(--ink-3)', fontSize: 13, display: 'flex', alignItems: 'center', gap: 6 }}>{Ic.heart} Favoritos</button>
            </div>

            <div className="cta-row">
              <button className="btn btn-primary" style={{ height: "50px" }}>{Ic.cart} Agregar al carrito</button>
            </div>
          </div>
        </div>

        <section className="p3-pdp-tabs">
          <div className="tabbar">
            <button className={tab === 'desc' ? 'active' : ''} onClick={() => setTab('desc')}><span className="num">01</span>Descripción</button>
            <button className={tab === 'specs' ? 'active' : ''} onClick={() => setTab('specs')}><span className="num">02</span>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 una imagen detallada y precisa. El sensor SONY 1/1.8" combinado con el procesamiento por IA detecta personas, vehículos y movimientos sospechosos con precisión superior al 95%.</p>
              <p>Su diseño tipo domo IP67 está fabricado en aluminio reforzado para resistir polvo, lluvia y temperaturas extremas. Los 60 metros de visión nocturna por IR la convierten en una 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 técnico 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 Ultra HD · 3840 × 2160 · 8 megapíxeles</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 óptico 22x</td></tr>
                <tr><td>Ángulo de visión</td><td>62.6° (Horizontal) · 35.6° (Vertical)</td></tr>
                <tr><td>Visión nocturna</td><td>IR Smart con alcance de 60 metros</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>Audio</td><td>Bidireccional · Mic / Speaker integrado</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: 28 }}>
            <div className="left">
              <div className="kicker">SECCIÓN 06 · RELACIONADOS</div>
              <h2 className="serif" style={{ fontSize: 38 }}>Quienes compraron esto,<br />también <em>llevaron:</em></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>{`
        .p3-cart { padding: 32px 0 90px; }
        .p3-cart .head-block { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
        .p3-cart .head-block .ix-num { font-family: 'Fraunces', serif; font-style: italic; color: var(--ink-3); font-size: 15px; margin-bottom: 12px; display: block; }
        .p3-cart h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 72px; line-height: 0.92; letter-spacing: -0.03em; color: var(--forest-deep); margin-bottom: 12px; }
        .p3-cart h1 em { font-style: italic; color: var(--green-deep); }
        .p3-cart .sub { font-size: 13px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }

        .p3-cart .grid { display: grid; grid-template-columns: 1fr 380px; gap: 32px; }
        .p3-cart .items-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
        .p3-cart .head { display: grid; grid-template-columns: 1fr 130px 120px 100px 40px; padding: 16px 22px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); border-bottom: 1px solid var(--line); font-weight: 600; font-family: 'JetBrains Mono', monospace; background: var(--cream); gap: 14px; }
        .p3-cart .item { display: grid; grid-template-columns: 1fr 130px 120px 100px 40px; padding: 22px; align-items: center; border-bottom: 1px solid var(--line); gap: 14px; }
        .p3-cart .item:last-child { border-bottom: 0; }
        .p3-cart .item .name-block { display: flex; gap: 16px; align-items: center; }
        .p3-cart .item .ph-wrap { width: 80px; height: 80px; background: var(--cream); border-radius: 8px; padding: 14px; flex-shrink: 0; }
        .p3-cart .item .name-block .meta .sku { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.05em; }
        .p3-cart .item .name-block .meta h4 { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 500; margin: 4px 0; line-height: 1.2; letter-spacing: -0.01em; color: var(--forest-deep); }
        .p3-cart .item .name-block .meta .brand { font-size: 12px; color: var(--ink-3); }
        .p3-cart .item .qty { display: inline-flex; align-items: center; background: var(--cream); border-radius: 999px; }
        .p3-cart .item .qty button { width: 28px; height: 32px; font-size: 13px; color: var(--ink-2); }
        .p3-cart .item .qty input { width: 28px; text-align: center; border: 0; font-size: 13px; font-weight: 700; outline: 0; background: transparent; }
        .p3-cart .item .price { font-size: 13px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }
        .p3-cart .item .total { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--forest-deep); text-align: right; letter-spacing: -0.02em; }
        .p3-cart .item .rm { color: var(--ink-3); }
        .p3-cart .item .rm:hover { color: var(--hot); }

        .p3-cart .actions-row { padding: 18px 22px; display: flex; gap: 12px; background: var(--cream); justify-content: space-between; }

        .p3-summary { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 28px; height: fit-content; position: sticky; top: 100px; }
        .p3-summary .ix-num { font-family: 'Fraunces', serif; font-style: italic; color: var(--ink-3); font-size: 13px; display: block; margin-bottom: 8px; }
        .p3-summary h3 { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; margin-bottom: 20px; color: var(--forest-deep); letter-spacing: -0.02em; }
        .p3-summary .line { display: flex; justify-content: space-between; font-size: 13px; padding: 9px 0; }
        .p3-summary .line.muted { color: var(--ink-3); }
        .p3-summary .divider { height: 1px; background: var(--line); margin: 8px 0; }
        .p3-summary .total-line { padding-top: 12px; align-items: end; }
        .p3-summary .total-line span:first-child { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; }
        .p3-summary .total-line span:last-child { font-family: 'Fraunces', serif; font-size: 32px; font-weight: 500; color: var(--forest-deep); letter-spacing: -0.02em; line-height: 1; }
        .p3-summary .coupon { display: flex; gap: 6px; margin: 18px 0 22px; }
        .p3-summary .coupon input { flex: 1; padding: 11px 14px; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; outline: 0; }
        .p3-summary .coupon button { padding: 11px 18px; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; }

        .p3-summary .trust { margin-top: 20px; padding: 14px; background: var(--cream); border-radius: 10px; font-size: 12px; line-height: 1.45; color: var(--ink-2); display: flex; gap: 10px; }
        .p3-summary .trust svg { color: var(--green-deep); width: 16px; height: 16px; flex-shrink: 0; }
      `}</style>
      <Header active="cart" onNav={onNav} />
      <main className="container p3-cart">
        <nav className="p3-breadcrumb">
          <a onClick={() => onNav('home')}>// INICIO</a><span className="sep">/</span><span className="current">CARRITO</span>
        </nav>

        <div className="head-block">
          <span className="ix-num">— Sección 04 / Carrito</span>
          <h1>Tu <em>carrito.</em></h1>
          <span className="sub">// {items.length} ITEMS · TOTAL ESTIMADO ${(subtotal + iva).toFixed(2)}</span>
        </div>

        <div className="grid">
          <div className="items-card">
            <div className="head">
              <span>// PRODUCTO</span>
              <span style={{ textAlign: 'center' }}>CANTIDAD</span>
              <span style={{ textAlign: 'center' }}>PRECIO</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">Marca: {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-outline" onClick={() => onNav('shop')}>← Seguir comprando</button>
            </div>
          </div>

          <aside className="p3-summary">
            <span className="ix-num">— Resumen</span>
            <h3>El pedido.</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 ESTIMADO</span><span>${(subtotal + iva).toFixed(2)}</span></div>

            <button className="btn btn-primary btn-block" style={{ padding: '13px 22px', 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;