const PaymentPage = ({ product, quantity, onBack }) => {
	const [paymentMode, setPaymentMode] = React.useState('upi');
	const [paid, setPaid] = React.useState(false);
	const total = product.price * quantity;

	if (paid) {
		return <main className="checkout-page"><div className="checkout-card success-card"><div className="success-mark">✓</div><div className="eyebrow">Payment status</div><h1>Order received.</h1><p>Your demo checkout for {product.name} is ready. Connect your gateway credentials to process live payments.</p><button className="button" onClick={onBack}>Back to products <span className="button-arrow">→</span></button></div></main>;
	}

	return <main className="checkout-page">
		<div className="checkout-top"><button className="back-button" onClick={onBack}>← Back to products</button><span className="secure-label">HubTune checkout / secure</span></div>
		<div className="checkout-layout">
			<section className="checkout-card"><div className="eyebrow">Step 02 / payment</div><h1>Choose how<br />to pay.</h1><p className="checkout-intro">Select a payment mode to continue with your {product.name} order.</p>
				<div className="payment-modes">
					{[['upi', 'UPI', 'Google Pay, PhonePe, Paytm'], ['card', 'Card', 'Credit or debit card'], ['netbanking', 'Net banking', 'All major banks'], ['wallet', 'Wallet', 'Paytm, Amazon Pay']].map(([value, label, detail]) => <button className={'mode-option ' + (paymentMode === value ? 'selected' : '')} key={value} onClick={() => setPaymentMode(value)}><span className="mode-icon">{value === 'upi' ? '↗' : value === 'card' ? '▣' : value === 'netbanking' ? '≡' : '◈'}</span><span><strong>{label}</strong><small>{detail}</small></span><span className="mode-radio" /></button>)}
				</div>
				{paymentMode === 'upi' && <label className="field-label">UPI ID<input className="checkout-input" placeholder="name@bank" /></label>}
				{paymentMode === 'card' && <div className="field-row"><label className="field-label">Card number<input className="checkout-input" placeholder="1234 5678 9012 3456" /></label><label className="field-label">Expiry<input className="checkout-input" placeholder="MM / YY" /></label></div>}
				{paymentMode === 'netbanking' && <label className="field-label">Select bank<select className="checkout-input" defaultValue=""><option value="" disabled>Select your bank</option><option>State Bank of India</option><option>HDFC Bank</option><option>ICICI Bank</option><option>Axis Bank</option></select></label>}
				{paymentMode === 'wallet' && <label className="field-label">Select wallet<select className="checkout-input" defaultValue=""><option value="" disabled>Select your wallet</option><option>Paytm</option><option>Amazon Pay</option><option>Mobikwik</option></select></label>}
				<button className="button pay-button" onClick={() => setPaid(true)}>Pay ₹{total} <span className="button-arrow">→</span></button><p className="payment-note">By continuing, you agree to the HubTune payment terms.</p>
			</section>
			<aside className="order-summary"><div className="eyebrow">Order summary</div><div className="summary-line"><span>{product.name}</span><strong>₹{product.price}</strong></div><div className="summary-line muted-line"><span>Color</span><span>{product.color}</span></div><div className="summary-line muted-line"><span>Quantity</span><span>× {quantity}</span></div><div className="summary-total"><span>Total</span><strong>₹{total}</strong></div></aside>
		</div>
	</main>;
};

window.PaymentPage = PaymentPage;