function ConfirmationScreen({ room, Button, Card, onBackHome }) {
  return (
    <div style={{ maxWidth: 640, margin: "0 auto", padding: "96px 24px 120px", textAlign: "center", fontFamily: "var(--font-sans-body)" }}>
      <div style={{ width: 64, height: 64, borderRadius: "var(--radius-full)", background: "var(--forest-100)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 28px" }}>
        <span className="material-symbols-rounded" style={{ fontSize: 34, color: "var(--forest-800)" }}>check_circle</span>
      </div>
      <h1 style={{ font: "var(--text-display-lg)", color: "var(--color-text-primary)", marginBottom: 14 }}>You're all set</h1>
      <p style={{ font: "var(--text-body-lg)", color: "var(--color-text-secondary)", marginBottom: 40 }}>Thank you — your stay at {room.name} is confirmed. We've sent the details to your email, and we look forward to welcoming you to The Hide.</p>
      <Card style={{ textAlign: "left", marginBottom: 32 }}>
        <div style={{ font: "var(--text-label-md)", color: "var(--color-text-muted)", marginBottom: 6 }}>Confirmation number</div>
        <div style={{ font: "var(--text-display-sm)", color: "var(--color-text-primary)", marginBottom: 18 }}>HIDE-48213</div>
        <div style={{ display: "flex", justifyContent: "space-between", font: "var(--text-body-sm)", color: "var(--color-text-secondary)" }}><span>{room.name}</span><span>2 nights</span></div>
      </Card>
      <Button variant="outline" onClick={onBackHome}>Back to home</Button>
    </div>
  );
}
window.ConfirmationScreen = ConfirmationScreen;