const ROOMS = [
  { name: "Peace Room", desc: "Double Room", price: "R1,549", amenities: ["Free Wi-Fi", "Private bathroom"] },
  { name: "Joy Room", desc: "Double Room", price: "R1,399", amenities: ["Free Wi-Fi", "Garden access"] },
  { name: "Grace Room", desc: "Double Room", price: "R1,399", amenities: ["Free Wi-Fi", "Fireplace"] },
];
function RoomsScreen({ Tag, Card, Badge, Button, onViewRoom }) {
  const PhotoPlaceholder = window.PhotoPlaceholder;
  const [filter, setFilter] = React.useState(null);
  const filters = ["Free Wi-Fi", "Private bathroom", "Garden access", "Fireplace"];
  return (
    <div style={{ maxWidth: 1160, margin: "0 auto", padding: "56px 24px", fontFamily: "var(--font-sans-body)" }}>
      <span style={{ font: "var(--text-label-sm)", letterSpacing: "var(--tracking-eyebrow)", textTransform: "uppercase", color: "var(--gold-700)" }}>Rooms & Suites</span>
      <h1 style={{ font: "var(--text-display-lg)", margin: "10px 0 28px", color: "var(--color-text-primary)" }}>Three rooms, one quiet standard</h1>
      <div style={{ display: "flex", gap: 10, marginBottom: 32, flexWrap: "wrap" }}>
        {filters.map((f) => (<Tag key={f} selected={filter === f} onClick={() => setFilter(filter === f ? null : f)}>{f}</Tag>))}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        {ROOMS.filter((r) => !filter || r.amenities.includes(filter)).map((r) => (
          <Card key={r.name} padding="0" elevated style={{ overflow: "hidden", display: "flex", flexDirection: "column" }}>
            <PhotoPlaceholder height={200} radius="0" label={r.name} />
            <div style={{ padding: 22, display: "flex", flexDirection: "column", justifyContent: "space-between", flex: 1 }}>
              <div>
                <div style={{ font: "var(--text-display-sm)", marginBottom: 6, color: "var(--color-text-primary)" }}>{r.name}</div>
                <div style={{ font: "var(--text-body-sm)", color: "var(--color-text-secondary)", marginBottom: 12 }}>{r.desc}</div>
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 14 }}>{r.amenities.map((a) => <Badge key={a} tone="sandstone">{a}</Badge>)}</div>
              </div>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div style={{ font: "var(--text-label-lg)", color: "var(--color-text-primary)" }}>{r.price} <span style={{ color: "var(--color-text-muted)", fontWeight: 400 }}>/ night</span></div>
                <Button variant="outline" size="sm" onClick={() => onViewRoom(r)}>View room</Button>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}
window.RoomsScreen = RoomsScreen;