// pages.jsx — Páginas de MiPC y su Mundo
// Home, Categoría, Detalle Producto, Carrito, Checkout, Login, Búsqueda

const { useState: usePgState, useEffect: usePgEffect, useMemo: usePgMemo } = React;
const fmt = () => window.MiPCInventario.formatoCOP;

// ── HOME ─────────────────────────────────────────────────────────────
function HomePage({ onNavigate, addToCart, variant, showBanners }) {
  const all = window.MiPCInventario.todos();
  const destacados = all.filter(p => p.precioAntes && p.precioAntes > p.precio).slice(0, 8);
  const masVendidos = [...all].sort((a,b)=>(b.reviews||0)-(a.reviews||0)).slice(0,8);
  const nuevos = [...all].slice(-8);

  if (variant === 'B') {
    return <HomeB onNavigate={onNavigate} addToCart={addToCart} showBanners={showBanners} all={all}/>;
  }

  return (
    <div className="home">
      <Hero onNavigate={onNavigate} variant="A"/>
      <BenefitsStrip/>
      <CategoryCircles onNavigate={onNavigate}/>

      {showBanners && (
        <section className="banner-row">
          <PromoBanner color="#dc2626" kicker="TECNO DAYS" title="Portátiles desde" big="$1.999K" cta="Comprar" onClick={()=>onNavigate('/categoria/computadores')}/>
          <PromoBanner color="#1e3a8a" kicker="GAMING" title="Hasta" big="-30%" cta="Ver ofertas" onClick={()=>onNavigate('/categoria/gaming')}/>
          <PromoBanner color="#0891b2" kicker="AUDIO" title="JBL · Sony" big="2x1" cta="Aprovecha" onClick={()=>onNavigate('/categoria/audio')}/>
        </section>
      )}

      <ProductShelf title="🔥 Ofertas imperdibles" subtitle="Aprovecha antes que se acaben" items={destacados} onNavigate={onNavigate} addToCart={addToCart}/>

      <section className="cta-band">
        <div>
          <h2>¿Te asesoramos?</h2>
          <p>Nuestros expertos te ayudan a elegir el producto perfecto para ti. Chatea con nosotros sin compromiso.</p>
        </div>
        <button className="btn btn-light">💬 Abrir chat</button>
      </section>

      <ProductShelf title="⭐ Los más vendidos" items={masVendidos} onNavigate={onNavigate} addToCart={addToCart}/>
      <ProductShelf title="🆕 Recién llegados" items={nuevos} onNavigate={onNavigate} addToCart={addToCart}/>
    </div>
  );
}

// Home variante B — más editorial, menos colorida, foco en producto destacado
function HomeB({ onNavigate, addToCart, showBanners, all }) {
  const destacados = all.filter(p => p.precioAntes && p.precioAntes > p.precio).slice(0, 6);
  const masVendidos = [...all].sort((a,b)=>(b.reviews||0)-(a.reviews||0)).slice(0,8);
  const hero = all.find(p => /iphone|xiaomi|samsung/i.test(p.nombre) && p.precio > 500000)
             || all.find(p => p.precio > 1500000)
             || all[0];
  const F = fmt();
  return (
    <div className="home home-b">
      <section className="hero-b">
        <div className="hero-b-l">
          <span className="hero-kicker">YA DISPONIBLE</span>
          <h1>{hero.nombre.split(' ').slice(0,3).join(' ')}</h1>
          <p className="hero-b-sub">{hero.descripcion}</p>
          <div className="hero-b-price">
            <span className="price-now">{F(hero.precio)}</span>
            <span className="hero-b-cuotas">o 12 cuotas de {F(hero.precio/12)}</span>
          </div>
          <div className="hero-b-actions">
            <button className="btn btn-primary" onClick={()=>onNavigate('/producto/'+hero.id)}>Ver producto</button>
            <button className="btn btn-ghost" onClick={()=>{addToCart(hero); onNavigate('/carrito');}}>Agregar al carrito</button>
          </div>
        </div>
        <div className="hero-b-r">
          <ProductImage p={hero} size="big"/>
        </div>
      </section>

      <BenefitsStrip/>

      <section className="cat-tiles">
        <div className="section-head"><h2>Explora categorías</h2></div>
        <div className="tiles">
          {window.MiPCInventario.categorias.map(c => (
            <button key={c.id} className="tile" onClick={()=>onNavigate('/categoria/'+c.id)}>
              <span className="tile-ic">{c.icono}</span>
              <span className="tile-label">{c.nombre}</span>
              <span className="tile-arrow">→</span>
            </button>
          ))}
        </div>
      </section>

      <ProductShelf title="Selección editorial" subtitle="Lo que nuestros expertos recomiendan" items={masVendidos} onNavigate={onNavigate} addToCart={addToCart}/>

      {showBanners && (
        <section className="banner-row">
          <PromoBanner color="#0f172a" kicker="GAMING" title="Setup completo" big="-25%" cta="Armar setup" onClick={()=>onNavigate('/categoria/gaming')}/>
          <PromoBanner color="#dc2626" kicker="OFICINA" title="Impresoras" big="desde $749K" cta="Ver más" onClick={()=>onNavigate('/categoria/oficina')}/>
        </section>
      )}

      <ProductShelf title="Ofertas de la semana" items={destacados} onNavigate={onNavigate} addToCart={addToCart}/>
    </div>
  );
}

// Promo banner
function PromoBanner({ color, kicker, title, big, cta, onClick }) {
  return (
    <button className="promo-banner" style={{'--promo-color': color}} onClick={onClick}>
      <span className="promo-kicker">{kicker}</span>
      <span className="promo-title">{title}</span>
      <span className="promo-big">{big}</span>
      <span className="promo-cta">{cta} →</span>
    </button>
  );
}

// Carrusel horizontal de productos
function ProductShelf({ title, subtitle, items, onNavigate, addToCart }) {
  const ref = React.useRef(null);
  const scroll = (dir) => {
    if (!ref.current) return;
    ref.current.scrollBy({ left: dir * 600, behavior: 'smooth' });
  };
  if (!items.length) return null;
  return (
    <section className="shelf">
      <div className="section-head">
        <div><h2>{title}</h2>{subtitle && <p>{subtitle}</p>}</div>
        <div className="shelf-nav">
          <button onClick={()=>scroll(-1)} aria-label="Anterior">‹</button>
          <button onClick={()=>scroll(1)} aria-label="Siguiente">›</button>
        </div>
      </div>
      <div className="shelf-track" ref={ref}>
        {items.map(p => (
          <div key={p.id} className="shelf-item">
            <ProductCard p={p} onClick={()=>onNavigate('/producto/'+p.id)} onAdd={addToCart}/>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── CATEGORÍA / LISTING ──────────────────────────────────────────────
function CategoryPage({ cat, onNavigate, addToCart, density }) {
  const cats = window.MiPCInventario.categorias;
  const all = window.MiPCInventario.todos();
  const ofertas = cat === 'ofertas';
  const catInfo = cats.find(c => c.id === cat);

  const base = ofertas
    ? all.filter(p => p.precioAntes && p.precioAntes > p.precio)
    : all.filter(p => p.categoria === cat);

  // Filtros disponibles
  const marcasDisp = [...new Set(base.map(p => p.marca))].sort();
  const precios = base.map(p => p.precio);
  const minP = Math.min(...precios, 0), maxP = Math.max(...precios, 1000000);

  const [marcasSel, setMarcasSel] = usePgState([]);
  const [precioMax, setPrecioMax] = usePgState(maxP);
  const [soloOferta, setSoloOferta] = usePgState(ofertas);
  const [envioGratis, setEnvioGratis] = usePgState(false);
  const [orden, setOrden] = usePgState('relevancia');
  const [mostrarFiltros, setMostrarFiltros] = usePgState(false);

  usePgEffect(() => {
    setMarcasSel([]);
    setPrecioMax(maxP);
    setSoloOferta(ofertas);
    setEnvioGratis(false);
  }, [cat]);

  let filtrados = base.filter(p =>
    (!marcasSel.length || marcasSel.includes(p.marca)) &&
    p.precio <= precioMax &&
    (!soloOferta || (p.precioAntes && p.precioAntes > p.precio)) &&
    (!envioGratis || p.envioGratis)
  );
  if (orden === 'precio-asc') filtrados = [...filtrados].sort((a,b)=>a.precio-b.precio);
  else if (orden === 'precio-desc') filtrados = [...filtrados].sort((a,b)=>b.precio-a.precio);
  else if (orden === 'rating') filtrados = [...filtrados].sort((a,b)=>(b.rating||0)-(a.rating||0));
  else if (orden === 'descuento') filtrados = [...filtrados].sort((a,b)=>{
    const da = a.precioAntes ? (a.precioAntes - a.precio)/a.precioAntes : 0;
    const db = b.precioAntes ? (b.precioAntes - b.precio)/b.precioAntes : 0;
    return db - da;
  });

  const toggleMarca = (m) => {
    setMarcasSel(s => s.includes(m) ? s.filter(x=>x!==m) : [...s, m]);
  };

  const F = fmt();

  return (
    <div className="category-page">
      <div className="container">
        <Breadcrumbs onNavigate={onNavigate} items={[
          { label:'Inicio', to:'/' },
          { label: ofertas ? 'Ofertas del día' : (catInfo?.nombre || cat) },
        ]}/>
        <div className="cat-head">
          <h1>{ofertas ? '🔥 Ofertas del día' : (catInfo?.nombre || cat)}</h1>
          <span className="cat-count">{filtrados.length} productos</span>
        </div>

        <div className="cat-layout">
          <aside className={`filters ${mostrarFiltros?'open':''}`}>
            <div className="filters-head">
              <h3>Filtros</h3>
              <button className="filters-close" onClick={()=>setMostrarFiltros(false)} aria-label="Cerrar"><Icon.close/></button>
            </div>

            <div className="filter-group">
              <h4>Marca</h4>
              {marcasDisp.map(m => (
                <label key={m} className="check">
                  <input type="checkbox" checked={marcasSel.includes(m)} onChange={()=>toggleMarca(m)}/>
                  <span className="check-box"><Icon.check/></span>
                  <span>{m}</span>
                  <span className="check-count">({base.filter(p=>p.marca===m).length})</span>
                </label>
              ))}
            </div>

            <div className="filter-group">
              <h4>Precio máximo</h4>
              <input type="range" min={minP} max={maxP} step={50000} value={precioMax}
                onChange={(e)=>setPrecioMax(Number(e.target.value))} className="range"/>
              <div className="range-labels">
                <span>{F(minP)}</span>
                <span><strong>{F(precioMax)}</strong></span>
              </div>
            </div>

            <div className="filter-group">
              <h4>Otros</h4>
              <label className="check">
                <input type="checkbox" checked={soloOferta} onChange={(e)=>setSoloOferta(e.target.checked)}/>
                <span className="check-box"><Icon.check/></span>
                <span>Solo ofertas</span>
              </label>
              <label className="check">
                <input type="checkbox" checked={envioGratis} onChange={(e)=>setEnvioGratis(e.target.checked)}/>
                <span className="check-box"><Icon.check/></span>
                <span>Envío gratis</span>
              </label>
            </div>

            <button className="btn btn-ghost btn-block" onClick={()=>{setMarcasSel([]);setPrecioMax(maxP);setSoloOferta(false);setEnvioGratis(false);}}>
              Limpiar filtros
            </button>
          </aside>

          <div className="results">
            <div className="results-bar">
              <button className="btn-mobile-filters" onClick={()=>setMostrarFiltros(true)}>
                <Icon.filter/> Filtros
              </button>
              <label className="order">
                Ordenar por:
                <select value={orden} onChange={(e)=>setOrden(e.target.value)}>
                  <option value="relevancia">Relevancia</option>
                  <option value="precio-asc">Menor precio</option>
                  <option value="precio-desc">Mayor precio</option>
                  <option value="rating">Mejor valorados</option>
                  <option value="descuento">Mayor descuento</option>
                </select>
              </label>
            </div>

            {filtrados.length === 0 ? (
              <div className="empty">
                <div className="empty-ic">🔎</div>
                <h3>No encontramos productos con esos filtros</h3>
                <p>Prueba ajustando el precio o quitando marcas</p>
              </div>
            ) : (
              <div className={`grid grid-${density}`}>
                {filtrados.map(p => (
                  <ProductCard key={p.id} p={p}
                    onClick={()=>onNavigate('/producto/'+p.id)}
                    onAdd={addToCart}/>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

// ── DETALLE DE PRODUCTO ──────────────────────────────────────────────
function ProductPage({ id, onNavigate, addToCart }) {
  const p = window.MiPCInventario.porId(id);
  const [qty, setQty] = usePgState(1);
  const [tab, setTab] = usePgState('desc');
  const F = fmt();
  if (!p) return (
    <div className="container" style={{padding:'40px 0'}}>
      <h2>Producto no encontrado</h2>
      <button className="btn btn-primary" onClick={()=>onNavigate('/')}>Volver al inicio</button>
    </div>
  );
  const cat = window.MiPCInventario.categorias.find(c => c.id === p.categoria);
  const desc = p.precioAntes && p.precioAntes > p.precio
    ? Math.round((1 - p.precio / p.precioAntes) * 100) : 0;
  const relacionados = window.MiPCInventario.porCategoria(p.categoria).filter(x=>x.id!==p.id).slice(0,4);
  return (
    <div className="product-page">
      <div className="container">
        <Breadcrumbs onNavigate={onNavigate} items={[
          { label:'Inicio', to:'/' },
          { label: cat?.nombre || p.categoria, to: '/categoria/'+p.categoria },
          { label: p.nombre },
        ]}/>
        <div className="product-layout">
          <div className="product-gallery">
            <div className="gallery-main">
              {desc > 0 && <span className="card-discount big">-{desc}%</span>}
              <ProductImage p={p} size="big"/>
            </div>
            <div className="gallery-thumbs">
              {[0,1,2,3].map(i => (
                <div key={i} className={`thumb ${i===0?'active':''}`}>
                  <ProductImage p={p}/>
                </div>
              ))}
            </div>
          </div>
          <div className="product-info">
            <div className="prod-brand">{p.marca}</div>
            <h1 className="prod-title">{p.nombre}</h1>
            <div className="prod-rating">
              <Rating value={p.rating} reviews={p.reviews} size={16}/>
              <a href="#reviews" onClick={(e)=>{e.preventDefault();setTab('reviews');}}>Ver opiniones</a>
            </div>
            <div className="prod-prices">
              {p.precioAntes && p.precioAntes > p.precio && (
                <div className="price-old big">{F(p.precioAntes)}</div>
              )}
              <div className="price-now big">{F(p.precio)}</div>
              <div className="cuotas">o 12 cuotas sin interés de <strong>{F(p.precio/12)}</strong></div>
              {desc > 0 && <span className="discount-pill">-{desc}% de descuento</span>}
            </div>
            <div className="stock-line">
              {p.stock > 5 ? (
                <span className="stock-ok">✓ Disponible · {p.stock} unidades</span>
              ) : p.stock > 0 ? (
                <span className="stock-low">¡Quedan solo {p.stock}!</span>
              ) : (
                <span className="stock-out">Agotado</span>
              )}
            </div>

            <div className="qty-row">
              <span>Cantidad:</span>
              <div className="qty-stepper">
                <button onClick={()=>setQty(q=>Math.max(1,q-1))}>−</button>
                <input value={qty} readOnly/>
                <button onClick={()=>setQty(q=>Math.min(p.stock,q+1))}>+</button>
              </div>
            </div>

            <div className="prod-actions">
              <button className="btn btn-primary btn-big" onClick={()=>{addToCart(p,qty); onNavigate('/carrito');}}>
                Comprar ahora
              </button>
              <button className="btn btn-secondary btn-big" onClick={()=>addToCart(p,qty)}>
                <Icon.cart/> Agregar al carrito
              </button>
            </div>

            <div className="prod-benefits">
              {p.envioGratis && (
                <div className="prod-benefit"><Icon.truck/> <span><strong>Envío gratis</strong> a todo Colombia · Llega en 2-4 días hábiles</span></div>
              )}
              <div className="prod-benefit"><Icon.shield/> <span><strong>Garantía:</strong> 12 meses directo con la marca</span></div>
              <div className="prod-benefit"><Icon.card/> <span><strong>Paga hasta en 36 cuotas</strong> con tu tarjeta de crédito</span></div>
            </div>
          </div>
        </div>

        <div className="product-tabs">
          <div className="tabs">
            {[['desc','Descripción'],['especs','Especificaciones'],['reviews','Opiniones ('+(p.reviews||0)+')']].map(([k,l]) => (
              <button key={k} className={tab===k?'active':''} onClick={()=>setTab(k)}>{l}</button>
            ))}
          </div>
          <div className="tab-body">
            {tab === 'desc' && (
              <div className="desc">
                <p>{p.descripcion}</p>
                <p>En <strong>Mi PC y su Mundo</strong> sabemos lo importante que es para ti elegir el producto correcto. Por eso, te ofrecemos asesoría personalizada, garantía directa con la marca y los mejores precios del mercado.</p>
                <ul>
                  <li>Producto 100% original y nuevo</li>
                  <li>Factura electrónica</li>
                  <li>Soporte técnico postventa</li>
                  <li>Cambio gratis en los primeros 30 días</li>
                </ul>
              </div>
            )}
            {tab === 'especs' && (
              <table className="specs">
                <tbody>
                  <tr><th>Marca</th><td>{p.marca}</td></tr>
                  <tr><th>Categoría</th><td>{cat?.nombre}</td></tr>
                  <tr><th>SKU</th><td>{p.id.toUpperCase()}</td></tr>
                  <tr><th>Garantía</th><td>12 meses</td></tr>
                  <tr><th>Stock</th><td>{p.stock} unidades</td></tr>
                  <tr><th>Condición</th><td>Nuevo</td></tr>
                </tbody>
              </table>
            )}
            {tab === 'reviews' && (
              <div className="reviews">
                <div className="reviews-summary">
                  <div className="reviews-big">{p.rating?.toFixed(1)}</div>
                  <Rating value={p.rating} size={20}/>
                  <div>{p.reviews} opiniones verificadas</div>
                </div>
                <ul className="review-list">
                  {[
                    {n:'Carolina M.', d:'Hace 2 días', s:5, t:'Excelente producto, llegó muy rápido y empaque impecable. Muy recomendado.'},
                    {n:'Andrés R.', d:'Hace 1 semana', s:5, t:'Justo lo que esperaba, calidad/precio insuperable. Gracias por la asesoría.'},
                    {n:'Laura P.', d:'Hace 2 semanas', s:4, t:'Cumple lo prometido. El envío demoró un día más pero todo bien.'},
                  ].map((r,i) => (
                    <li key={i}>
                      <div className="rev-head">
                        <strong>{r.n}</strong>
                        <Rating value={r.s} size={12}/>
                        <span>· {r.d}</span>
                      </div>
                      <p>{r.t}</p>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        </div>

        {relacionados.length > 0 && (
          <ProductShelf title="También te puede interesar" items={relacionados} onNavigate={onNavigate} addToCart={addToCart}/>
        )}
      </div>
    </div>
  );
}

// ── CARRITO ──────────────────────────────────────────────────────────
function CartPage({ cart, setQty, removeItem, onNavigate }) {
  const F = fmt();
  const subtotal = cart.reduce((s, it) => s + it.p.precio * it.qty, 0);
  const envio = subtotal > 150000 || subtotal === 0 ? 0 : 12000;
  const total = subtotal + envio;
  if (cart.length === 0) {
    return (
      <div className="container empty-cart">
        <div className="empty">
          <div className="empty-ic">🛒</div>
          <h2>Tu carrito está vacío</h2>
          <p>Encuentra los mejores productos al mejor precio</p>
          <button className="btn btn-primary" onClick={()=>onNavigate('/')}>Ir a comprar</button>
        </div>
      </div>
    );
  }
  return (
    <div className="container cart-page">
      <Breadcrumbs onNavigate={onNavigate} items={[{label:'Inicio',to:'/'},{label:'Carrito'}]}/>
      <h1>Mi carrito ({cart.reduce((s,i)=>s+i.qty,0)} productos)</h1>
      <div className="cart-layout">
        <div className="cart-items">
          {cart.map(it => (
            <div key={it.p.id} className="cart-item">
              <div className="cart-item-img" onClick={()=>onNavigate('/producto/'+it.p.id)}>
                <ProductImage p={it.p}/>
              </div>
              <div className="cart-item-body">
                <a className="cart-item-name" onClick={()=>onNavigate('/producto/'+it.p.id)}>{it.p.nombre}</a>
                <div className="cart-item-brand">{it.p.marca}</div>
                {it.p.envioGratis && <div className="cart-item-tag">🚚 Envío gratis</div>}
                <div className="cart-item-bottom">
                  <div className="qty-stepper sm">
                    <button onClick={()=>setQty(it.p.id, it.qty - 1)}>−</button>
                    <input value={it.qty} readOnly/>
                    <button onClick={()=>setQty(it.p.id, it.qty + 1)}>+</button>
                  </div>
                  <button className="link-del" onClick={()=>removeItem(it.p.id)}><Icon.trash/> Eliminar</button>
                </div>
              </div>
              <div className="cart-item-price">
                {it.p.precioAntes && <span className="price-old">{F(it.p.precioAntes * it.qty)}</span>}
                <span className="price-now">{F(it.p.precio * it.qty)}</span>
                {it.qty > 1 && <small>{F(it.p.precio)} c/u</small>}
              </div>
            </div>
          ))}
        </div>
        <aside className="cart-summary">
          <h3>Resumen de tu compra</h3>
          <div className="sum-row"><span>Subtotal</span><span>{F(subtotal)}</span></div>
          <div className="sum-row">
            <span>Envío</span>
            <span>{envio === 0 ? <em style={{color:'#16a34a'}}>Gratis</em> : F(envio)}</span>
          </div>
          {subtotal < 150000 && (
            <div className="sum-tip">Te faltan {F(150000 - subtotal)} para envío gratis 🎉</div>
          )}
          <div className="sum-total"><span>Total</span><span>{F(total)}</span></div>
          <button className="btn btn-primary btn-block btn-big" onClick={()=>onNavigate('/checkout')}>
            Continuar compra
          </button>
          <button className="btn btn-ghost btn-block" onClick={()=>onNavigate('/')}>
            Seguir comprando
          </button>
          <div className="trust-row">
            <Icon.shield/> Compra 100% segura
          </div>
          <div className="cupon">
            <input placeholder="¿Tienes un cupón?"/>
            <button>Aplicar</button>
          </div>
        </aside>
      </div>
    </div>
  );
}

// ── CHECKOUT ─────────────────────────────────────────────────────────
function CheckoutPage({ cart, onNavigate, clearCart }) {
  const F = fmt();
  const [step, setStep] = usePgState(1);
  const [pago, setPago] = usePgState('tc');
  const [done, setDone] = usePgState(false);
  const subtotal = cart.reduce((s, it) => s + it.p.precio * it.qty, 0);
  const envio = subtotal > 150000 ? 0 : 12000;
  const total = subtotal + envio;

  if (done) {
    return (
      <div className="container checkout-done">
        <div className="check-success">
          <div className="check-ic"><Icon.check/></div>
          <h1>¡Tu pedido fue creado!</h1>
          <p>Te enviamos los detalles a tu correo. Pedido #MPC-{Math.floor(Math.random()*900000+100000)}</p>
          <div className="order-summary-card">
            <div><span>Total pagado</span><strong>{F(total)}</strong></div>
            <div><span>Forma de pago</span><strong>{pago==='tc'?'Tarjeta de crédito':pago==='pse'?'PSE':'Nequi'}</strong></div>
            <div><span>Entrega estimada</span><strong>2-4 días hábiles</strong></div>
          </div>
          <button className="btn btn-primary" onClick={()=>{clearCart(); onNavigate('/');}}>Volver al inicio</button>
        </div>
      </div>
    );
  }

  return (
    <div className="container checkout-page">
      <Breadcrumbs onNavigate={onNavigate} items={[{label:'Carrito',to:'/carrito'},{label:'Pagar'}]}/>
      <h1>Finalizar compra</h1>
      <div className="checkout-steps">
        {['Datos','Envío','Pago'].map((l,i)=>(
          <div key={i} className={`cstep ${step>=i+1?'on':''}`}>
            <span>{i+1}</span>{l}
          </div>
        ))}
      </div>
      <div className="checkout-layout">
        <div className="checkout-main">
          {step === 1 && (
            <section className="ch-card">
              <h2>Tus datos</h2>
              <div className="form-grid">
                <label><span>Nombres</span><input placeholder="María"/></label>
                <label><span>Apellidos</span><input placeholder="González"/></label>
                <label><span>Cédula</span><input placeholder="1.020.…"/></label>
                <label><span>Celular</span><input placeholder="300 000 0000"/></label>
                <label className="full"><span>Correo</span><input type="email" placeholder="tu@correo.com"/></label>
              </div>
              <button className="btn btn-primary" onClick={()=>setStep(2)}>Continuar →</button>
            </section>
          )}
          {step === 2 && (
            <section className="ch-card">
              <h2>Dirección de envío</h2>
              <div className="form-grid">
                <label className="full"><span>Dirección</span><input placeholder="Cra 7 # 45-23 apto 502"/></label>
                <label><span>Ciudad</span>
                  <select><option>Bogotá</option><option>Medellín</option><option>Cali</option><option>Barranquilla</option><option>Cartagena</option></select>
                </label>
                <label><span>Departamento</span>
                  <select><option>Cundinamarca</option><option>Antioquia</option><option>Valle del Cauca</option></select>
                </label>
                <label className="full"><span>Información adicional</span><input placeholder="Indicaciones para el repartidor (opcional)"/></label>
              </div>
              <div className="ch-actions">
                <button className="btn btn-ghost" onClick={()=>setStep(1)}>← Volver</button>
                <button className="btn btn-primary" onClick={()=>setStep(3)}>Continuar →</button>
              </div>
            </section>
          )}
          {step === 3 && (
            <section className="ch-card">
              <h2>Forma de pago</h2>
              <div className="pay-options">
                {[
                  ['tc','Tarjeta de crédito / débito','💳'],
                  ['pse','PSE — Débito desde tu banco','🏦'],
                  ['nequi','Nequi','📱'],
                  ['addi','Addi — Paga en 4 cuotas sin interés','🪙'],
                ].map(([k,l,e])=>(
                  <label key={k} className={`pay-option ${pago===k?'on':''}`}>
                    <input type="radio" checked={pago===k} onChange={()=>setPago(k)}/>
                    <span className="pay-ic">{e}</span>
                    <span>{l}</span>
                  </label>
                ))}
              </div>
              {pago==='tc' && (
                <div className="form-grid" style={{marginTop:16}}>
                  <label className="full"><span>Número de tarjeta</span><input placeholder="•••• •••• •••• ••••"/></label>
                  <label><span>Vence</span><input placeholder="MM/AA"/></label>
                  <label><span>CVV</span><input placeholder="•••"/></label>
                  <label className="full"><span>Cuotas</span>
                    <select><option>1 cuota</option><option>6 cuotas</option><option>12 cuotas</option><option>24 cuotas</option><option>36 cuotas</option></select>
                  </label>
                </div>
              )}
              <div className="ch-actions">
                <button className="btn btn-ghost" onClick={()=>setStep(2)}>← Volver</button>
                <button className="btn btn-primary btn-big" onClick={()=>setDone(true)}>Pagar {F(total)}</button>
              </div>
            </section>
          )}
        </div>
        <aside className="checkout-summary">
          <h3>Tu pedido</h3>
          <ul className="ch-items">
            {cart.map(it => (
              <li key={it.p.id}>
                <span className="ch-it-qty">{it.qty}×</span>
                <span className="ch-it-name">{it.p.nombre}</span>
                <span className="ch-it-price">{F(it.p.precio * it.qty)}</span>
              </li>
            ))}
          </ul>
          <div className="sum-row"><span>Subtotal</span><span>{F(subtotal)}</span></div>
          <div className="sum-row"><span>Envío</span><span>{envio?F(envio):<em style={{color:'#16a34a'}}>Gratis</em>}</span></div>
          <div className="sum-total"><span>Total</span><span>{F(total)}</span></div>
        </aside>
      </div>
    </div>
  );
}

// ── LOGIN ────────────────────────────────────────────────────────────
function LoginPage({ onNavigate }) {
  const [mode, setMode] = usePgState('login');
  return (
    <div className="login-page">
      <div className="login-card">
        <h1>{mode==='login'?'Inicia sesión':'Crea tu cuenta'}</h1>
        <p>{mode==='login'?'Bienvenid@ de vuelta a Mi PC y su Mundo':'Únete y disfruta de ofertas exclusivas'}</p>
        {mode==='register' && (
          <label><span>Nombre completo</span><input placeholder="Tu nombre"/></label>
        )}
        <label><span>Correo</span><input type="email" placeholder="tu@correo.com"/></label>
        <label><span>Contraseña</span><input type="password" placeholder="••••••••"/></label>
        {mode==='login' && <a className="forgot" href="#">¿Olvidaste tu contraseña?</a>}
        <button className="btn btn-primary btn-block btn-big" onClick={()=>onNavigate('/')}>
          {mode==='login'?'Ingresar':'Crear cuenta'}
        </button>
        <div className="login-sep"><span>o continúa con</span></div>
        <div className="login-social">
          <button>G  Google</button>
          <button> Apple</button>
          <button>f  Facebook</button>
        </div>
        <p className="login-toggle">
          {mode==='login'?'¿No tienes cuenta?':'¿Ya tienes cuenta?'}{' '}
          <a onClick={()=>setMode(mode==='login'?'register':'login')}>
            {mode==='login'?'Regístrate':'Inicia sesión'}
          </a>
        </p>
      </div>
      <div className="login-side">
        <div className="login-side-inner">
          <h2>Tu mundo tecnológico, a un clic</h2>
          <ul>
            <li>✓ Seguimiento en tiempo real de tus pedidos</li>
            <li>✓ Cupones exclusivos para miembros</li>
            <li>✓ Lista de deseos y favoritos</li>
            <li>✓ Compra más rápido con tus direcciones guardadas</li>
          </ul>
        </div>
      </div>
    </div>
  );
}

// ── BÚSQUEDA ─────────────────────────────────────────────────────────
function SearchPage({ q, onNavigate, addToCart, density }) {
  const res = window.MiPCInventario.buscar(q);
  return (
    <div className="container search-page">
      <Breadcrumbs onNavigate={onNavigate} items={[{label:'Inicio',to:'/'},{label:'Búsqueda'}]}/>
      <h1>Resultados para "{q}"</h1>
      <p className="search-count">{res.length} productos encontrados</p>
      {res.length === 0 ? (
        <div className="empty">
          <div className="empty-ic">🔍</div>
          <h3>No encontramos nada con "{q}"</h3>
          <p>Prueba con otra palabra o explora nuestras categorías</p>
          <button className="btn btn-primary" onClick={()=>onNavigate('/')}>Ir al inicio</button>
        </div>
      ) : (
        <div className={`grid grid-${density}`}>
          {res.map(p => <ProductCard key={p.id} p={p} onClick={()=>onNavigate('/producto/'+p.id)} onAdd={addToCart}/>)}
        </div>
      )}
    </div>
  );
}

Object.assign(window, {
  HomePage, CategoryPage, ProductPage, CartPage, CheckoutPage, LoginPage, SearchPage,
  ProductShelf, PromoBanner,
});