const AMENITIES = ["Free Wi-Fi", "Outdoor fireplace", "Private entrance", "Bath & bathrobes", "Free parking", "Garden & braai area"];
function RoomDetailScreen({ room, Badge, Tag, Button, Input, Select, Card, onBook }) {
  const PhotoPlaceholder = window.PhotoPlaceholder;
  return (
    <div style={{ maxWidth: 1160, margin: "0 auto", padding: "48px 24px 88px", fontFamily: "var(--font-sans-body)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 12, marginBottom: 36 }}>
        <PhotoPlaceholder height={420} label={`${room.name} — main view`} />
        <div style={{ display: "grid", gridTemplateRows: "1fr 1fr", gap: 12 }}>
          <PhotoPlaceholder height="100%" label="Bathroom" />
          <PhotoPlaceholder height="100%" label="Deck view" />
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 48 }}>
        <div>
          <Badge tone="gold" icon="star">{room.tag || "Guest favorite"}</Badge>
          <h1 style={{ font: "var(--text-display-lg)", margin: "16px 0 8px", color: "var(--color-text-primary)" }}>{room.name}</h1>
          <div style={{ font: "var(--text-body-md)", color: "var(--color-text-secondary)", marginBottom: 24 }}>{room.desc}</div>
          <p style={{ font: "var(--text-body-md)", lineHeight: 1.7, color: "var(--color-text-primary)", marginBottom: 28 }}>A calm, well-appointed room designed for rest. Natural materials, soft natural light, and a private outdoor space overlooking the surrounding hills of Nongoma — a peaceful base whether you're here for a weekend or settling in for longer.</p>
          <div style={{ font: "var(--text-label-lg)", marginBottom: 14, color: "var(--color-text-primary)" }}>Amenities</div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>{AMENITIES.map((a) => <Tag key={a}>{a}</Tag>)}</div>
        </div>
        <Card elevated>
          <div style={{ font: "var(--text-display-sm)", marginBottom: 4, color: "var(--color-text-primary)" }}>{room.price} <span style={{ font: "var(--text-body-sm)", color: "var(--color-text-muted)" }}>/ night</span></div>
          <div style={{ height: 1, background: "var(--color-border)", margin: "18px 0" }} />
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              <Input label="Check-in" type="date" />
              <Input label="Check-out" type="date" />
            </div>
            <Select label="Guests" placeholder="2 adults" options={[{ value: "2", label: "2 adults" }, { value: "4", label: "2 adults, 2 children" }]} />
          </div>
          <div style={{ height: 1, background: "var(--color-border)", margin: "18px 0" }} />
          <div style={{ display: "flex", justifyContent: "space-between", font: "var(--text-body-sm)", color: "var(--color-text-secondary)", marginBottom: 8 }}><span>{room.price} × 2 nights</span><span>R{Number(room.price.replace(/\D/g,"")) * 2}</span></div>
          <div style={{ display: "flex", justifyContent: "space-between", font: "var(--text-body-sm)", color: "var(--color-text-secondary)", marginBottom: 16 }}><span>Service fee</span><span>R180</span></div>
          <div style={{ display: "flex", justifyContent: "space-between", font: "var(--text-label-lg)", color: "var(--color-text-primary)", marginBottom: 20 }}><span>Total</span><span>R{Number(room.price.replace(/\D/g,"")) * 2 + 180}</span></div>
          <Button variant="primary" fullWidth icon="arrow_forward" iconPosition="right" onClick={onBook}>Reserve this room</Button>
        </Card>
      </div>
    </div>
  );
}
window.RoomDetailScreen = RoomDetailScreen;