function Checkout({ go, cart, checkoutData, setCheckoutData }) {
  const items = cart.map(c => ({ ...PRODUCTS.find(x => x.sku === c.sku), qty: c.qty }));
  const subtotal = items.reduce((s,i) => s + i.priceList * i.qty, 0);
  const ship = subtotal > 800000 ? 0 : 18000;
  const total = subtotal + ship;

  const [ship_method, setShipMethod] = useState(checkoutData.shipMethod || 'home');

  const update = (k, v) => setCheckoutData({ ...checkoutData, [k]: v });

  return (
    <div className="container checkout-wrap">
      <div className="steps">
        <div className="step done"><span className="n"><Icon name="check" size={12}/></span>Carrito</div>
        <div className="step active"><span className="n">2</span>Datos y envío</div>
        <div className="step"><span className="n">3</span>Pago</div>
        <div className="step"><span className="n">4</span>Confirmación</div>
      </div>

      <div className="form-grid">
        <div>
          <div className="form-section">
            <h3>Contacto</h3>
            <div className="desc">Te enviamos el comprobante y el seguimiento del envío.</div>
            <div className="field-grid">
              <div className="field full">
                <label>Email</label>
                <input type="email" placeholder="tu@email.com" value={checkoutData.email||''} onChange={e => update('email', e.target.value)} />
              </div>
              <div className="field">
                <label>Nombre</label>
                <input placeholder="Juan" value={checkoutData.first||''} onChange={e => update('first', e.target.value)} />
              </div>
              <div className="field">
                <label>Apellido</label>
                <input placeholder="Pérez" value={checkoutData.last||''} onChange={e => update('last', e.target.value)} />
              </div>
              <div className="field">
                <label>DNI / CUIT</label>
                <input placeholder="20-12345678-9" value={checkoutData.dni||''} onChange={e => update('dni', e.target.value)} />
              </div>
              <div className="field">
                <label>Teléfono</label>
                <input placeholder="+54 11 ..." value={checkoutData.phone||''} onChange={e => update('phone', e.target.value)} />
              </div>
            </div>
          </div>

          <div className="form-section">
            <h3>Método de envío</h3>
            <div className="desc">Seleccioná cómo querés recibir tu pedido.</div>
            <div className="radio-group">
              <div className={`radio-option ${ship_method==='home'?'active':''}`} onClick={() => { setShipMethod('home'); update('shipMethod','home'); }}>
                <div className="dot"/>
                <div className="rb">
                  <div className="rb-t">Envío a domicilio</div>
                  <div className="rb-s">48–72 hs hábiles · Logística propia o courier</div>
                </div>
                <div className="rb-r">{ship === 0 ? 'Gratis' : fmtARS(ship)}</div>
              </div>
              <div className={`radio-option ${ship_method==='pickup'?'active':''}`} onClick={() => { setShipMethod('pickup'); update('shipMethod','pickup'); }}>
                <div className="dot"/>
                <div className="rb">
                  <div className="rb-t">Retiro en sucursal</div>
                  <div className="rb-s">Av. Belgrano 2847, CABA · Disponible en 24 hs</div>
                </div>
                <div className="rb-r">Gratis</div>
              </div>
              <div className={`radio-option ${ship_method==='cargo'?'active':''}`} onClick={() => { setShipMethod('cargo'); update('shipMethod','cargo'); }}>
                <div className="dot"/>
                <div className="rb">
                  <div className="rb-t">Transporte de carga al interior</div>
                  <div className="rb-s">Para máquinas grandes · 5–7 días hábiles</div>
                </div>
                <div className="rb-r">A cotizar</div>
              </div>
            </div>
          </div>

          {ship_method === 'home' && (
            <div className="form-section">
              <h3>Dirección de envío</h3>
              <div className="field-grid">
                <div className="field full">
                  <label>Calle y número</label>
                  <input placeholder="Av. Corrientes 1234" value={checkoutData.addr||''} onChange={e => update('addr', e.target.value)} />
                </div>
                <div className="field">
                  <label>Piso / Depto.</label>
                  <input placeholder="opcional" value={checkoutData.apt||''} onChange={e => update('apt', e.target.value)} />
                </div>
                <div className="field">
                  <label>Código postal</label>
                  <input placeholder="C1043" value={checkoutData.zip||''} onChange={e => update('zip', e.target.value)} />
                </div>
                <div className="field">
                  <label>Ciudad</label>
                  <input placeholder="CABA" value={checkoutData.city||''} onChange={e => update('city', e.target.value)} />
                </div>
                <div className="field">
                  <label>Provincia</label>
                  <select value={checkoutData.prov||''} onChange={e => update('prov', e.target.value)}>
                    <option value="">Seleccionar…</option>
                    {PROVINCES.map(pr => <option key={pr}>{pr}</option>)}
                  </select>
                </div>
                <div className="field full">
                  <label>Notas para la entrega</label>
                  <input placeholder="Timbre 2B, dejar en portería, etc." value={checkoutData.notes||''} onChange={e => update('notes', e.target.value)} />
                </div>
              </div>
            </div>
          )}

          <div style={{display:'flex', gap: 12, marginTop: 32}}>
            <button className="btn btn-outline" onClick={() => go('cart')}>← Volver al carrito</button>
            <button className="btn btn-primary btn-lg" style={{flex: 1}} onClick={() => go('payment')}>
              Continuar al pago <Icon name="arrow" size={16}/>
            </button>
          </div>
        </div>

        <OrderSummary items={items} subtotal={subtotal} ship={ship} total={total} />
      </div>
    </div>
  );
}

function OrderSummary({ items, subtotal, ship, total, discount = 0, extra = null }) {
  return (
    <aside className="order-summary">
      <h4>Tu pedido</h4>
      {items.map(i => (
        <div key={i.sku} className="os-item">
          <div className="os-thumb">
            <div className="qb">{i.qty}</div>
          </div>
          <div>
            <div className="os-name">{i.name}</div>
            <div className="li-sku" style={{marginTop: 2}}>{i.sku}</div>
          </div>
          <div className="os-price">{fmtARS(i.priceList * i.qty)}</div>
        </div>
      ))}
      <div style={{borderTop: '1px solid var(--line)', marginTop: 16, paddingTop: 16}}>
        <div className="totals-row"><span>Subtotal</span><span className="mono">{fmtARS(subtotal)}</span></div>
        <div className="totals-row"><span>Envío</span><span className="mono">{ship === 0 ? 'Gratis' : (ship > 0 ? fmtARS(ship) : 'A cotizar')}</span></div>
        {discount > 0 && <div className="totals-row" style={{color:'var(--ok)'}}><span>Descuento</span><span className="mono">− {fmtARS(discount)}</span></div>}
        {extra}
        <div className="totals-row total"><span>Total</span><span className="mono">{fmtARS(total - discount)}</span></div>
      </div>
      <div style={{marginTop: 20, fontSize: 12, color: 'var(--ink-3)', display:'flex', alignItems:'center', gap: 6}}>
        <Icon name="lock" size={12}/> Checkout seguro con cifrado SSL
      </div>
    </aside>
  );
}

Object.assign(window, { Checkout, OrderSummary });