/* ───────────────────────────────────────────────────────────────────────
   Thank you / Order confirmation page.
   ─────────────────────────────────────────────────────────────────────── */

function CheckoutThanks({ onBack, mobile = false }) {
  const orderNumber = 'RC-2026-' + Math.floor(48200 + Math.random() * 1500);
  const cart = MOCK_CART;
  const subtotal = cart.reduce((s, i) => s + i.price * i.qty, 0);
  const totals = MOCK_TOTALS(subtotal, 0, 15, 0);

  return (
    <div style={{ background: 'var(--bg)', minHeight: '100%' }}>
      <CheckoutHeader/>

      {/* Hero */}
      <div style={{
        background: 'var(--ink)', color: '#fff',
        padding: mobile ? '28px 18px 32px' : '48px 28px 56px',
      }}>
        <div style={{ maxWidth: 820, margin: '0 auto' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: mobile ? 52 : 64, height: mobile ? 52 : 64, borderRadius: 32,
            background: '#0f8a5b', color: '#fff',
            marginBottom: mobile ? 16 : 22,
          }}>
            <Icon name="check" size={mobile ? 26 : 32} strokeWidth={2.2}/>
          </div>
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.55)', fontSize: mobile ? 10 : 11 }}><span className="dot"/>PEDIDO CONFIRMADO</div>
          <h1 style={{ fontSize: mobile ? 24 : 38, fontWeight: 800, letterSpacing: '-0.025em', margin: mobile ? '8px 0 8px' : '10px 0 12px', color: '#fff', maxWidth: 600, lineHeight: 1.1 }}>
            ¡Gracias por tu compra, Juan!
          </h1>
          <p style={{ fontSize: mobile ? 13 : 16, color: 'rgba(255,255,255,0.7)', margin: 0, maxWidth: 540, lineHeight: 1.45 }}>
            Te enviamos los detalles a <strong style={{ color: '#fff' }}>juan@email.com</strong>.
            En cuanto despachemos tu pedido te avisamos por WhatsApp.
          </p>

          <div style={{ display: 'flex', alignItems: 'center', gap: mobile ? 12 : 24, marginTop: mobile ? 18 : 28, flexWrap: 'wrap' }}>
            <div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase' }}>N° de pedido</div>
              <div className="mono" style={{ fontSize: mobile ? 13 : 16, fontWeight: 700, color: '#fff', marginTop: 2 }}>{orderNumber}</div>
            </div>
            <div style={{ width: 1, height: 32, background: 'rgba(255,255,255,0.2)' }}/>
            <div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase' }}>Total</div>
              <div style={{ fontSize: mobile ? 15 : 18, fontWeight: 800, color: '#fff', marginTop: 1, letterSpacing: '-0.01em' }}>$ {totals.total.toLocaleString('es-AR')}</div>
            </div>
            <div style={{ width: 1, height: 32, background: 'rgba(255,255,255,0.2)' }}/>
            <div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase' }}>Llega</div>
              <div style={{ fontSize: mobile ? 13 : 15, fontWeight: 700, color: '#fff', marginTop: 2 }}>Mar 26 — Jue 28</div>
            </div>
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 820, margin: '0 auto', padding: mobile ? '18px 14px 32px' : '24px 28px 40px', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 320px', gap: mobile ? 14 : 22, alignItems: 'start' }}>

        {/* LEFT — timeline + payment instructions */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {/* Payment instructions (transfer pending) */}
          <CkCard>
            <SectionTitle title="Falta un paso: enviar tu transferencia" subtitle="Tu pedido queda reservado por 48 hs" icon="bank"/>
            <div style={{
              padding: '16px 18px', background: '#FFF5F4', border: '1px solid #F0D0CE',
              borderRadius: 10, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px 18px', alignItems: 'center',
            }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Banco</div>
              <div style={{ fontSize: 13, color: 'var(--ink)' }}>Galicia · Cta. Corriente $</div>
              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>CBU</div>
              <div className="mono" style={{ fontSize: 13, color: 'var(--ink)' }}>0070123456789012345678</div>
              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Alias</div>
              <div className="mono" style={{ fontSize: 13, color: 'var(--ink)' }}>RC.POWERCLEAN.PAGO</div>
              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Titular</div>
              <div style={{ fontSize: 13, color: 'var(--ink)' }}>RC Powerclean S.R.L. · CUIT 30-12345678-9</div>
              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Monto</div>
              <div style={{ fontSize: 15, fontWeight: 800, color: '#a00e0c', letterSpacing: '-0.01em' }}>$ {totals.total.toLocaleString('es-AR')}</div>
            </div>
            <div style={{ marginTop: 14, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <button className="btn btn-dark" style={{ padding: '12px 18px', fontSize: 13 }}>
                <Icon name="whatsapp" size={14}/> Enviar comprobante por WhatsApp
              </button>
              <button className="btn btn-ghost" style={{ padding: '12px 18px', fontSize: 13 }}>
                <Icon name="mail" size={14}/> Enviar por email
              </button>
            </div>
          </CkCard>

          {/* Timeline */}
          <CkCard>
            <SectionTitle title="¿Qué sigue?" icon="truck"/>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
              {[
                { state: 'done',     t: 'Pedido recibido',        d: 'Hoy a las 14:32' },
                { state: 'pending',  t: 'Transferencia pendiente', d: 'Cuando recibamos el comprobante' },
                { state: 'next',     t: 'Preparación y embalaje', d: '24 hs hábiles' },
                { state: 'next',     t: 'En camino con Andreani', d: 'Te mandamos el código de seguimiento' },
                { state: 'next',     t: 'Entrega en tu domicilio', d: 'Mar 26 — Jue 28' },
              ].map((step, i, arr) => (
                <div key={i} style={{ display: 'flex', gap: 14, position: 'relative', paddingBottom: i < arr.length - 1 ? 18 : 0 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
                    <div style={{
                      width: 24, height: 24, borderRadius: 12,
                      background: step.state === 'done' ? '#0f8a5b' : step.state === 'pending' ? '#a00e0c' : 'var(--bg-2)',
                      color: step.state === 'next' ? 'var(--ink-4)' : '#fff',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      flexShrink: 0, fontSize: 11, fontWeight: 700,
                    }}>
                      {step.state === 'done' ? <Icon name="check" size={13}/> :
                       step.state === 'pending' ? <Icon name="clock" size={13}/> :
                       i + 1}
                    </div>
                    {i < arr.length - 1 && (
                      <div style={{ width: 2, flex: 1, background: step.state === 'done' ? '#0f8a5b' : 'var(--line)', marginTop: 4 }}/>
                    )}
                  </div>
                  <div style={{ flex: 1, paddingTop: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 700, color: step.state === 'next' ? 'var(--ink-3)' : 'var(--ink)' }}>{step.t}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-4)', marginTop: 1 }}>{step.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </CkCard>

          {/* Cross-sell */}
          <CkCard>
            <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 12 }}>Para sumar a tu próxima compra</div>
            <CrossSell items={MOCK_CROSS_SELL} onAdd={() => {}}/>
          </CkCard>

          {/* Actions */}
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <button onClick={onBack} className="btn btn-ghost" style={{ flex: 1, padding: '14px 18px', fontSize: 14 }}>
              <Icon name="chevronLeft" size={14}/> Volver a la tienda
            </button>
            <button className="btn btn-dark" style={{ flex: 1, padding: '14px 18px', fontSize: 14 }}>
              <Icon name="user" size={14}/> Ver mis pedidos
            </button>
          </div>
        </div>

        {/* RIGHT — order summary */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <CkCard>
            <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>Resumen del pedido</div>
            <div style={{ borderTop: '1px solid var(--line)' }}>
              {cart.map((it, i) => <SummaryItem key={i} {...it} compact/>)}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14, padding: '12px 0', borderTop: '1px solid var(--line)' }}>
              <SummaryRow label="Subtotal" value={'$ ' + subtotal.toLocaleString('es-AR')}/>
              <SummaryRow label="Descuentos" value={'− $ ' + (totals.productDiscount + totals.paymentDiscount).toLocaleString('es-AR')} color="#0f8a5b"/>
              <SummaryRow label="Envío" value="GRATIS" color="#0f8a5b"/>
            </div>
            <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--line)' }}>
              <SummaryRow label="Total" value={'$ ' + totals.total.toLocaleString('es-AR')} strong/>
            </div>
          </CkCard>

          <CkCard padded={false} style={{ padding: '14px 16px' }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink-2)', marginBottom: 4 }}>Envío a</div>
            <div style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.5 }}>
              Juan Pérez<br/>
              Av. Rivadavia 1234, 3°B<br/>
              Caballito, CABA, 1706<br/>
              <span style={{ color: 'var(--ink-3)' }}>11 5555 5555</span>
            </div>
          </CkCard>

          <CkCard padded={false} style={{ padding: '14px 16px' }}>
            <TrustBadges compact/>
          </CkCard>
        </div>
      </div>
    </div>
  );
}

window.CheckoutThanks = CheckoutThanks;