/* Checkout — shipping + payment form, order summary card. */
function SF_Checkout({ go, cart }) {
  const { TextField, 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)', marginBottom: 4 };
  const row2 = 'sf-row2';
  const row = { display: 'flex', justifyContent: 'space-between', fontSize: 13.5, color: 'var(--sf-text-muted)' };

  return (
    <div className="sf-maxw sf-sticky-page-pad" style={{ paddingTop: 44, paddingBottom: 96 }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 600, color: 'var(--sf-text)' }}>Checkout</div>

      <div className="sf-checkout-cols" style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 48, marginTop: 32, alignItems: 'flex-start' }}>
        <div className="sf-mobile-input" style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <div>
            <div style={h}>PROFILE</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 12 }}>
              <div className={row2}><TextField label="First name" placeholder="Ananya" /><TextField label="Last name" placeholder="Rao" /></div>
              <div className={row2}><TextField label="Phone" placeholder={window.SS_SITE.phone} /><TextField label="Email" placeholder="you@example.com" type="email" /></div>
            </div>
          </div>
          <div>
            <div style={h}>SHIPPING ADDRESS</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 12 }}>
              <TextField label="Address" placeholder="Flat, street, area" />
              <div className={row2}><TextField label="City" placeholder="Mumbai" /><TextField label="Pincode" placeholder="400001" /></div>
            </div>
          </div>
          <div>
            <div style={h}>PAYMENT</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 12 }}>
              <TextField label="Card number" placeholder="•••• •••• •••• ••••" />
              <div className={row2}><TextField label="Expiry" placeholder="MM / YY" /><TextField label="CVV" placeholder="•••" /></div>
            </div>
          </div>
        </div>

        <div className="sf-hide-mobile" 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 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 600, color: 'var(--sf-text)' }}>Order summary</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {items.map((i) => (
              <div key={i.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--sf-text-muted)' }}>
                <span>{i.name} × {i.qty}</span>
                <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>
          <div style={{ borderTop: '1px solid var(--sf-border-soft)', paddingTop: 14, display: 'flex', justifyContent: 'space-between', fontSize: 16, fontWeight: 600, color: 'var(--sf-text)' }}>
            <span>Total</span><span>₹{total.toLocaleString('en-IN')}</span>
          </div>
          <Button variant="gold" size="lg" onClick={() => go('confirmation')}>PLACE ORDER</Button>
        </div>
      </div>

      <div className="sf-sticky-bar" style={{
        alignItems: 'center', gap: 14, padding: '12px 16px', paddingBottom: 'calc(12px + env(safe-area-inset-bottom))',
        background: 'var(--sf-surface-raised)', borderTop: '1px solid var(--sf-border)', boxShadow: 'var(--sf-shadow)',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.3 }}>
          <span style={{ fontSize: 10.5, fontWeight: 500, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--sf-text-faint)' }}>Total</span>
          <span style={{ fontSize: 16, fontWeight: 600, color: 'var(--sf-text)' }}>₹{total.toLocaleString('en-IN')}</span>
        </div>
        <Button variant="gold" size="lg" style={{ flex: 1 }} onClick={() => go('confirmation')}>PLACE ORDER</Button>
      </div>
    </div>
  );
}
window.SF_Checkout = SF_Checkout;