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

// ============================================================
// 02 — SHOP / PLP
// ============================================================
const ShopScreen = ({ onNav }) => {
  const [view, setView] = useState('grid');
  const [openFilters, setOpenFilters] = useState({ cat: true, brand: true, capacity: true, power: true, price: true });
  return (
    <React.Fragment>
      <style>{`
        .p1-shop { padding: 24px 0 80px; }
        .p1-breadcrumb { display: flex; gap: 8px; font-size: 13px; color: var(--ink-3); margin-bottom: 28px; padding: 14px 0; border-bottom: 1px solid var(--line); }
        .p1-breadcrumb a { color: var(--ink-3); }
        .p1-breadcrumb a:hover { color: var(--green-dark); }
        .p1-breadcrumb .sep { color: var(--ink-4); }
        .p1-breadcrumb .current { color: var(--ink); font-weight: 500; }

        .p1-shop-grid { display: grid; grid-template-columns: 280px 1fr; gap: 28px; }
        .p1-side { display: flex; flex-direction: column; gap: 14px; }
        .p1-filter-card { background: white; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
        .p1-filter-card > header {
          padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;
          cursor: pointer; user-select: none;
          font-size: 14px; font-weight: 600; color: var(--ink);
        }
        .p1-filter-card > header svg { width: 14px; height: 14px; transition: transform 0.2s; color: var(--ink-3); }
        .p1-filter-card.open > header svg { transform: rotate(180deg); }
        .p1-filter-card > .body { padding: 0 20px 20px; }
        .p1-filter-card.collapsed > .body { display: none; }
        .p1-filter-card .opt {
          display: flex; align-items: center; gap: 10px; padding: 6px 0;
          font-size: 13px; color: var(--ink-2);
          cursor: pointer; user-select: none;
        }
        .p1-filter-card .opt input { width: 16px; height: 16px; accent-color: var(--green-dark); }
        .p1-filter-card .opt .count { margin-left: auto; font-size: 11px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }

        .p1-price-range { display: flex; gap: 8px; margin-top: 12px; }
        .p1-price-range input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }

        .p1-filters-top {
          display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
        }
        .p1-filters-top h3 { font-size: 16px; font-weight: 600; }
        .p1-filters-top button { font-size: 12px; color: var(--green-dark); font-weight: 500; }

        .p1-results-bar {
          display: flex; align-items: center; justify-content: space-between;
          background: white; border: 1px solid var(--line); border-radius: 12px;
          padding: 12px 18px; margin-bottom: 16px;
        }
        .p1-results-bar .left { display: flex; align-items: center; gap: 16px; }
        .p1-results-bar .count { font-size: 13px; color: var(--ink-2); }
        .p1-results-bar .count strong { color: var(--ink); font-weight: 600; }
        .p1-results-bar .view-toggle { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
        .p1-results-bar .view-toggle button { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
        .p1-results-bar .view-toggle button.active { background: var(--forest); color: white; }
        .p1-results-bar .view-toggle svg { width: 14px; height: 14px; }
        .p1-results-bar select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: white; }

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

        .p1-shop-grid .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        .p1-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 36px; }
        .p1-pager button {
          width: 38px; height: 38px;
          border: 1px solid var(--line); border-radius: 8px;
          background: white; color: var(--ink-2); font-size: 14px; font-weight: 500;
        }
        .p1-pager button.active { background: var(--forest); color: white; border-color: var(--forest); }
        .p1-pager button:hover:not(.active) { border-color: var(--green-soft); }
        .p1-pager .gap { padding: 0 6px; color: var(--ink-3); font-size: 14px; }

        .p1-cat-banner {
          background: linear-gradient(120deg, #102921 0%, #1A4530 100%);
          border-radius: 14px; padding: 28px 32px; margin-bottom: 18px;
          display: flex; justify-content: space-between; align-items: center;
          color: white; position: relative; overflow: hidden;
        }
        .p1-cat-banner::after {
          content:""; position: absolute; right: -40px; top: -40px;
          width: 200px; height: 200px;
          background: url('assets/logos/mark-green.png') center/contain no-repeat;
          opacity: 0.10;
        }
        .p1-cat-banner h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; position: relative; }
        .p1-cat-banner p { font-size: 13px; color: var(--green); font-family: 'JetBrains Mono', monospace; margin-top: 4px; letter-spacing: 0.08em; position: relative; }
        .p1-cat-banner .quick { display: flex; gap: 8px; position: relative; }
        .p1-cat-banner .quick a { padding: 8px 14px; background: rgba(255,255,255,0.08); border-radius: 999px; font-size: 12px; color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.12); }
        .p1-cat-banner .quick a:hover { background: var(--green); color: var(--forest-deep); }
      `}</style>
      <Header active="shop" onNav={onNav} />
      <main className="container p1-shop">
        <nav className="p1-breadcrumb">
          <a onClick={() => onNav('home')}>Inicio</a>
          <span className="sep">/</span>
          <a>Tienda</a>
          <span className="sep">/</span>
          <span className="current">Cámaras de seguridad y accesorios CCTV</span>
        </nav>

        <div className="p1-cat-banner">
          <div>
            <p>CATEGORÍA · 121 ARTÍCULOS</p>
            <h1>Cámaras de seguridad y accesorios CCTV</h1>
          </div>
        </div>

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

            {FILTERS.map((f) => {
              const open = openFilters[f.key] !== false;
              return (
                <div key={f.key} className={`p1-filter-card ${open ? 'open' : 'collapsed'}`}>
                  <header onClick={() => setOpenFilters((s) => ({ ...s, [f.key]: !open }))}>
                    {f.label}{Ic.chevDown}
                  </header>
                  <div className="body">
                    {f.opts.map((o, i) =>
                    <label className="opt" key={i}><input type="checkbox" defaultChecked={i === 0 && f.key === 'cat'} />{o}<span className="count">{Math.floor(Math.random() * 40) + 2}</span></label>
                    )}
                  </div>
                </div>);

            })}

            <div className="p1-filter-card open">
              <header>Precio (USD){Ic.chevDown}</header>
              <div className="body">
                <div className="p1-price-range">
                  <input placeholder="Desde" style={{ width: "120px" }} />
                  <input placeholder="Hasta" style={{ width: "120px" }} />
                </div>
                <button className="btn btn-outline" style={{ marginTop: 12, padding: '10px 16px', fontSize: 12, width: '100%' }}>Aplicar rango</button>
              </div>
            </div>
          </aside>

          {/* RESULTS */}
          <div>
            <div className="p1-results-bar">
              <div className="left">
                <div className="count">Mostrando <strong>1–24</strong> de <strong>121</strong> artículos</div>
              </div>
              <div style={{ display: 'flex', gap: 10 }}>
                <select><option>Relevancia</option><option>Precio: menor</option><option>Precio: mayor</option><option>Más nuevos</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="p1-pager">
              <button>‹</button>
              <button className="active">1</button>
              <button>2</button>
              <button>3</button>
              <button>4</button>
              <span className="gap">…</span>
              <button>9</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>{`
        .p1-pdp { padding: 24px 0 80px; }
        .p1-breadcrumb { display: flex; gap: 8px; font-size: 13px; color: var(--ink-3); padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 28px; flex-wrap: wrap; }
        .p1-breadcrumb a { color: var(--ink-3); cursor: pointer; }
        .p1-breadcrumb a:hover { color: var(--green-dark); }
        .p1-breadcrumb .sep { color: var(--ink-4); }
        .p1-breadcrumb .current { color: var(--ink); font-weight: 500; }
        .p1-pdp .top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; padding: 32px 0; }
        .p1-pdp .gallery .main-img {
          aspect-ratio: 1; background: var(--paper-2);
          border-radius: 14px; padding: 60px;
          position: relative; display: flex; align-items: center; justify-content: center;
        }
        .p1-pdp .gallery .main-img .badge-sale {
          position: absolute; top: 24px; left: 24px;
          padding: 6px 16px; background: #C6452B; color: white;
          border-radius: 999px; font-size: 13px; font-weight: 700;
          letter-spacing: 0.05em; text-transform: uppercase;
        }
        .p1-pdp .gallery .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
        .p1-pdp .gallery .thumbs button {
          aspect-ratio: 1; background: var(--paper-2);
          border: 2px solid transparent; border-radius: 10px; padding: 18px;
        }
        .p1-pdp .gallery .thumbs button.active { border-color: var(--green-dark); }

        .p1-pdp .info .brand-line { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--green-dark); letter-spacing: 0.12em; margin-bottom: 10px; }
        .p1-pdp .info h1 { font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--forest-deep); margin-bottom: 14px; }
        .p1-pdp .info .meta-row { display: flex; gap: 18px; font-size: 13px; color: var(--ink-3); align-items: center; margin-bottom: 22px; }
        .p1-pdp .info .meta-row strong { color: var(--ink); font-weight: 500; }
        .p1-pdp .info .stars { display: flex; gap: 2px; color: var(--green-dark); }
        .p1-pdp .info .stars svg { width: 13px; height: 13px; }

        .p1-pdp .price-box {
          background: var(--paper-2); border-radius: 12px;
          padding: 22px 26px; margin-bottom: 22px;
          display: flex; align-items: end; justify-content: space-between;
        }
        .p1-pdp .price-box .price { font-size: 38px; font-weight: 700; color: var(--forest-deep); letter-spacing: -0.02em; }
        .p1-pdp .price-box .old { font-size: 16px; color: var(--ink-3); text-decoration: line-through; margin-left: 12px; }
        .p1-pdp .price-box .discount-oferta { padding: 4px 12px; background: #C6452B; color: white; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; margin-left: 10px; text-transform: uppercase; }
        .p1-pdp .price-box .note { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
        .p1-pdp .stock-line {
          display: flex; align-items: center; gap: 8px;
          font-size: 13px; color: var(--green-dark); font-weight: 500;
          margin-bottom: 20px;
        }
        .p1-pdp .stock-line .dot { width: 8px; height: 8px; background: var(--green-dark); border-radius: 50%; }

        .p1-pdp .qty-row { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
        .p1-pdp .qty {
          display: flex; align-items: center;
          background: white; border: 1px solid var(--line); border-radius: 999px;
        }
        .p1-pdp .qty button { width: 40px; height: 44px; font-size: 16px; color: var(--ink-2); }
        .p1-pdp .qty input { width: 40px; text-align: center; border: 0; font-size: 14px; font-weight: 600; outline: 0; }

        .p1-pdp .cta-row { display: flex; gap: 10px; margin-bottom: 24px; }
        .p1-pdp .cta-row .btn { padding: 10px 16px; font-size: 13px; }
        .p1-pdp .cta-row .btn-primary { flex: 1; }

        .p1-pdp .quick-specs {
          padding: 18px 22px;
          background: white; border: 1px solid var(--line); border-radius: 12px;
          margin-bottom: 24px;
        }
        .p1-pdp .quick-specs h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; font-family: 'JetBrains Mono', monospace; }
        .p1-pdp .quick-specs ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
        .p1-pdp .quick-specs li { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px dotted var(--line); }
        .p1-pdp .quick-specs li span:first-child { color: var(--ink-3); }
        .p1-pdp .quick-specs li span:last-child { color: var(--ink); font-weight: 500; }

        .p1-pdp .ship-calc {
          display: flex; align-items: center; gap: 12px;
          padding: 14px 18px; background: var(--cream); border-radius: 10px;
          font-size: 13px;
        }
        .p1-pdp .ship-calc input { flex: 1; padding: 10px 14px; background: white; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; outline: 0; }
        .p1-pdp .ship-calc .btn { padding: 10px 18px; font-size: 13px; }

        .p1-pdp-tabs { padding: 32px 0; border-top: 1px solid var(--line); margin-top: 24px; }
        .p1-pdp-tabs .tabbar { display: flex; gap: 4px; background: white; padding: 6px; border-radius: 999px; border: 1px solid var(--line); width: fit-content; margin-bottom: 28px; }
        .p1-pdp-tabs .tabbar button { padding: 10px 22px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
        .p1-pdp-tabs .tabbar button.active { background: var(--forest); color: white; }
        .p1-pdp-tabs .content { font-size: 14px; line-height: 1.7; color: var(--ink-2); max-width: 800px; }
        .p1-pdp-tabs .content p { margin-bottom: 14px; }
        .p1-pdp-tabs .content ul { padding-left: 22px; margin: 12px 0; }
        .p1-pdp-tabs .content ul li { margin-bottom: 6px; }
        .p1-pdp-tabs .spec-table {
          width: 100%; border-collapse: separate; border-spacing: 0;
          background: white; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
        }
        .p1-pdp-tabs .spec-table td { padding: 14px 22px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
        .p1-pdp-tabs .spec-table tr:last-child td { border-bottom: 0; }
        .p1-pdp-tabs .spec-table td:first-child { color: var(--ink-3); width: 240px; background: var(--paper-2); font-weight: 500; }
        .p1-pdp-tabs .spec-table td:last-child { color: var(--ink); }

        .p1-related { padding: 24px 0 0; }
      `}</style>
      <Header active="product" onNav={onNav} />
      <main className="container p1-pdp">
        <nav className="p1-breadcrumb">
          <a onClick={() => onNav('home')}>Inicio</a><span className="sep">/</span>
          <a onClick={() => onNav('shop')}>Tienda</a><span className="sep">/</span>
          <a>Cámaras 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">
              <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>
                <div>
                  <span className="price">${p.price.toFixed(2)}</span>
                  <span className="old">${p.oldPrice.toFixed(2)}</span>
                  <span className="discount-oferta">Oferta</span>
                </div>
                <div className="note">Precio sin IVA · El IVA se calcula en el checkout</div>
              </div>
            </div>

            <div className="stock-line"><span className="dot"></span>En stock · {p.stock} unidades disponibles</div>

            <div className="qty-row">
              <span style={{ fontSize: 14, color: 'var(--ink-3)' }}>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, width: "187px" }}>{Ic.heart} Agregar a favoritos</button>
            </div>

            <div className="cta-row">
              <button className="btn btn-primary btn-block">{Ic.cart} Agregar al carrito</button>
            </div>
          </div>
        </div>

        <section className="p1-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 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 una 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 la mayoría de 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>Almacenamiento</td><td>microSD hasta 256GB · Servidor / NVR</td></tr>
                <tr><td>Garantía</td><td>24 meses · Don Juan Security</td></tr>
              </tbody>
            </table>
          }
        </section>

        <section className="p1-related">
          <div className="section-head" style={{ marginBottom: 24 }}>
            <div>
              <div className="kicker">PRODUCTOS RELACIONADOS</div>
              <h2 style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--forest-deep)' }}>Los clientes que 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>{`
        .p1-cart { padding: 30px 0 80px; }
        .p1-breadcrumb { display: flex; gap: 8px; font-size: 13px; color: var(--ink-3); padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 28px; flex-wrap: wrap; }
        .p1-breadcrumb a { color: var(--ink-3); cursor: pointer; }
        .p1-breadcrumb a:hover { color: var(--green-dark); }
        .p1-breadcrumb .sep { color: var(--ink-4); }
        .p1-breadcrumb .current { color: var(--ink); font-weight: 500; }
        .p1-cart h1 { font-size: 38px; font-weight: 600; letter-spacing: -0.02em; color: var(--forest-deep); margin-bottom: 8px; }
        .p1-cart .sub { font-size: 14px; color: var(--ink-3); margin-bottom: 36px; }
        .p1-cart .grid { display: grid; grid-template-columns: 1fr 380px; gap: 28px; }
        .p1-cart .items-card { background: white; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
        .p1-cart .head { display: grid; grid-template-columns: 1fr 130px 130px 100px 40px; padding: 16px 22px; font-size: 12px; 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; }
        .p1-cart .item {
          display: grid; grid-template-columns: 1fr 130px 130px 100px 40px;
          padding: 22px; align-items: center; border-bottom: 1px solid var(--line);
          gap: 16px;
        }
        .p1-cart .item:last-child { border-bottom: 0; }
        .p1-cart .item .name-block { display: flex; gap: 18px; align-items: center; }
        .p1-cart .item .ph-wrap { width: 84px; height: 84px; background: var(--paper-2); border-radius: 10px; padding: 14px; }
        .p1-cart .item .name-block .meta .sku { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.05em; }
        .p1-cart .item .name-block .meta h4 { font-size: 15px; font-weight: 500; margin: 4px 0; line-height: 1.3; }
        .p1-cart .item .name-block .meta .brand { font-size: 12px; color: var(--ink-3); }
        .p1-cart .item .qty {
          display: inline-flex; align-items: center;
          border: 1px solid var(--line); border-radius: 999px;
        }
        .p1-cart .item .qty button { width: 30px; height: 36px; font-size: 14px; color: var(--ink-2); }
        .p1-cart .item .qty input { width: 30px; text-align: center; border: 0; font-size: 13px; font-weight: 600; outline: 0; }
        .p1-cart .item .price { font-size: 14px; color: var(--ink-3); }
        .p1-cart .item .total { font-size: 16px; font-weight: 600; color: var(--forest-deep); }
        .p1-cart .item .rm { color: var(--ink-3); }
        .p1-cart .item .rm:hover { color: var(--hot); }

        .p1-cart .actions-row {
          padding: 20px 22px; display: flex; gap: 12px;
          background: var(--paper-2); border-top: 1px solid var(--line);
          justify-content: space-between;
        }

        .p1-summary {
          background: white; border: 1px solid var(--line); border-radius: 14px;
          padding: 28px; height: fit-content;
          position: sticky; top: 100px;
        }
        .p1-summary h3 { font-size: 18px; font-weight: 600; margin-bottom: 20px; color: var(--forest-deep); }
        .p1-summary .line { display: flex; justify-content: space-between; font-size: 14px; padding: 10px 0; }
        .p1-summary .line.muted { color: var(--ink-3); }
        .p1-summary .divider { height: 1px; background: var(--line); margin: 8px 0; }
        .p1-summary .total-line { font-size: 18px; font-weight: 700; color: var(--forest-deep); padding-top: 8px; }
        .p1-summary .coupon { display: flex; gap: 6px; margin: 18px 0 22px; }
        .p1-summary .coupon input { flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; outline: 0; }
        .p1-summary .coupon button { padding: 11px 16px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--ink); }

        .p1-summary .trust { margin-top: 22px; padding: 14px; background: var(--paper-2); border-radius: 10px; font-size: 12px; line-height: 1.45; color: var(--ink-2); display: flex; gap: 10px; }
        .p1-summary .trust svg { color: var(--green-dark); width: 16px; height: 16px; flex-shrink: 0; }
      `}</style>
      <Header active="cart" onNav={onNav} />
      <main className="container p1-cart">
        <nav className="p1-breadcrumb" style={{ marginBottom: 18 }}>
          <a onClick={() => onNav('home')}>Inicio</a><span className="sep">/</span><span className="current">Tu carrito</span>
        </nav>
        <h1>Tu carrito</h1>
        <p className="sub">{items.length} productos en tu carrito · Revisa los detalles antes de continuar al pago.</p>

        <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 /></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" style={{ textAlign: 'right' }}>${(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')}>← Continuar comprando</button>
            </div>
          </div>

          <aside className="p1-summary">
            <h3>Resumen del 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>Calculado 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-green 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;