/* Confirmation — order placed. Brand-forward thank-you + order recap. */
function SF_Confirmation({ go, cart }) {
  const { Button, PriceTag } = window.SS;
  const items = Object.entries(cart).map(([id, qty]) => ({ ...window.SS_PRODUCTS.find((p) => p.id === id), qty })).filter((i) => i.id);
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const shipping = subtotal >= 999 || subtotal === 0 ? 0 : 79;
  const total = subtotal + shipping;

  const h = { fontSize: 11, fontWeight: 500, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--sf-gold-hi)' };
  const row = { display: 'flex', justifyContent: 'space-between', fontSize: 13.5, color: 'var(--sf-text-muted)' };
  const step = { display: 'flex', gap: 14, alignItems: 'flex-start' };
  const dot = { width: 26, height: 26, borderRadius: 999, flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600, background: 'var(--sf-well)', boxShadow: 'inset 0 0 0 1px var(--sf-border)', color: 'var(--sf-gold-hi)' };

  return (
    <div className="sf-maxw" style={{ paddingTop: 72, paddingBottom: 96, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <window.SS.BrandMark size={44} color="var(--sf-gold-hi)" />
      <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 38, color: 'var(--sf-text)', marginTop: 18, textAlign: 'center' }}>Thank you for your order</div>
      <div style={{ fontSize: 13.5, fontWeight: 300, color: 'var(--sf-text-muted)', marginTop: 10, maxWidth: 460, textAlign: 'center', lineHeight: 1.6 }}>
        Order <span style={{ color: 'var(--sf-gold-hi)', fontWeight: 500, letterSpacing: '.08em' }}>#SS-2201</span> is confirmed. A receipt has been sent to your email — your pieces will arrive in {window.SS_SITE.brandName}&rsquo;s signature packaging.
      </div>

      <div style={{ background: 'var(--sf-card-grad)', border: '1px solid var(--sf-border)', borderRadius: 'var(--sf-radius-lg)', padding: 28, boxShadow: 'var(--sf-shadow-card)', display: 'flex', flexDirection: 'column', gap: 16, width: 'min(440px, 100%)', marginTop: 36 }}>
        <div style={h}>ORDER SUMMARY</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {items.map((i) => (
            <div key={i.id} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 44, height: 44, borderRadius: 'var(--sf-radius-sm)', background: 'var(--sf-well)', boxShadow: 'inset 0 0 0 1px var(--sf-border-soft)', overflow: 'hidden', flex: 'none' }}>
                <img src={i.image} alt={i.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ flex: 1, fontSize: 13, color: 'var(--sf-text)' }}>{i.name} <span style={{ color: 'var(--sf-text-faint)' }}>× {i.qty}</span></div>
              <PriceTag price={i.price * i.qty} size="sm" />
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid var(--sf-border-soft)', paddingTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={row}><span>Subtotal</span><span>₹{subtotal.toLocaleString('en-IN')}</span></div>
          <div style={row}><span>Shipping</span><span>{shipping === 0 ? 'Free' : '₹' + shipping}</span></div>
          <div style={{ ...row, fontSize: 15, fontWeight: 600, color: 'var(--sf-text)' }}><span>Total</span><span>₹{total.toLocaleString('en-IN')}</span></div>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 'min(440px, 100%)', marginTop: 32 }}>
        <div style={h}>WHAT HAPPENS NEXT</div>
        <div style={step}><span style={dot}>1</span><div style={{ fontSize: 13, fontWeight: 300, color: 'var(--sf-text-muted)', lineHeight: 1.55 }}><span style={{ color: 'var(--sf-text)', fontWeight: 400 }}>Hand-checked &amp; wrapped.</span> Every piece is inspected and boxed by Suman before it ships.</div></div>
        <div style={step}><span style={dot}>2</span><div style={{ fontSize: 13, fontWeight: 300, color: 'var(--sf-text-muted)', lineHeight: 1.55 }}><span style={{ color: 'var(--sf-text)', fontWeight: 400 }}>Dispatch in 1–2 days.</span> Tracking arrives by email and WhatsApp the moment it leaves.</div></div>
        <div style={step}><span style={dot}>3</span><div style={{ fontSize: 13, fontWeight: 300, color: 'var(--sf-text-muted)', lineHeight: 1.55 }}><span style={{ color: 'var(--sf-text)', fontWeight: 400 }}>Delivered in 3–6 days.</span> A care card is tucked inside — follow it and the foil stays bright.</div></div>
      </div>

      <div style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap', justifyContent: 'center' }}>
        <Button variant="gold" onClick={() => go('listing')}>CONTINUE SHOPPING</Button>
        <Button variant="ghost" onDark onClick={() => go('account')}>VIEW MY ORDERS</Button>
      </div>
    </div>
  );
}
window.SF_Confirmation = SF_Confirmation;