function BookingScreen({ room, Input, Select, Checkbox, Radio, Button, Card, onConfirm }) {
  const [payment, setPayment] = React.useState("full");
  return (
    <div style={{ maxWidth: 880, margin: "0 auto", padding: "56px 24px 88px", fontFamily: "var(--font-sans-body)" }}>
      <span style={{ font: "var(--text-label-sm)", letterSpacing: "var(--tracking-eyebrow)", textTransform: "uppercase", color: "var(--gold-700)" }}>Reservation</span>
      <h1 style={{ font: "var(--text-display-lg)", margin: "10px 0 36px", color: "var(--color-text-primary)" }}>Guest details</h1>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 28 }}>
        <Input label="Full name" placeholder="Nomvula Zulu" icon="person" />
        <Input label="Email address" placeholder="you@example.com" icon="mail" />
        <Input label="Phone number" placeholder="+27 82 000 0000" icon="call" />
        <Select label="Guests" placeholder="2 adults" options={[{ value: "2", label: "2 adults" }, { value: "4", label: "2 adults, 2 children" }]} />
      </div>
      <div style={{ font: "var(--text-label-lg)", margin: "0 0 14px", color: "var(--color-text-primary)" }}>Add to your stay</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 12, marginBottom: 28 }}>
        <Checkbox label="Breakfast included (+R250/night)" checked />
        <Checkbox label="Airport transfer (+R450 one-way)" />
      </div>
      <div style={{ font: "var(--text-label-lg)", margin: "0 0 14px", color: "var(--color-text-primary)" }}>Payment</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 12, marginBottom: 32 }}>
        <Radio name="pay" label="Pay in full now" checked={payment === "full"} onChange={() => setPayment("full")} />
        <Radio name="pay" label="Pay 50% deposit, balance on arrival" checked={payment === "deposit"} onChange={() => setPayment("deposit")} />
      </div>
      <Card>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10, font: "var(--text-body-sm)", color: "var(--color-text-secondary)" }}><span>{room.name} × 2 nights</span><span>R{Number(room.price.replace(/\D/g,"")) * 2}</span></div>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 16, font: "var(--text-body-sm)", color: "var(--color-text-secondary)" }}><span>Service fee</span><span>R180</span></div>
        <div style={{ height: 1, background: "var(--color-border)", marginBottom: 16 }} />
        <div style={{ display: "flex", justifyContent: "space-between", font: "var(--text-label-lg)", color: "var(--color-text-primary)" }}><span>Total due{payment === "deposit" ? " today" : ""}</span><span>R{payment === "deposit" ? Math.round((Number(room.price.replace(/\D/g,"")) * 2 + 180) / 2) : Number(room.price.replace(/\D/g,"")) * 2 + 180}</span></div>
      </Card>
      <Button variant="primary" size="lg" fullWidth icon="lock" onClick={onConfirm} style={{ marginTop: 28 }}>Confirm reservation</Button>
    </div>
  );
}
window.BookingScreen = BookingScreen;