const REVIEW_CATEGORIES = [
  { label: "Staff", score: 9.3 },
  { label: "Facilities", score: 9.0 },
  { label: "Cleanliness", score: 9.3 },
  { label: "Comfort", score: 8.7 },
  { label: "Value for money", score: 9.1 },
  { label: "Location", score: 8.0 },
];

const REVIEWS = [
  { name: "Nompumelelo", date: "6 July 2026", score: 10, title: "Exceptional", room: "Double Room", stay: "2 nights · July 2026", quote: "The Peace and cleanliness of the place." },
  { name: "Thembelihle", date: "1 June 2026", score: 10, title: "Church retreat group", room: "Double Room", stay: "1 night · May 2026", quote: "The cleanliness of the place, location just off main road and close to the filling station. The accommodation surpasses a five-star hotel. The facilities are exceptional, and bedrooms are specious with matrass heating, The kitchen appliances are top of the range." },
  { name: "Sbahle", date: "18 April 2026", score: 8.0, title: "Wonderful, beautiful modern clean space – had a wonderful stay", room: "Double Room with Private Bathroom", stay: "2 nights · March 2026", quote: "Spotless, great peaceful location friendly staff personnel." },
  { name: "Mngomezulu", date: "6 April 2026", score: 10, title: "I stayed in very comfortable", room: "Double Room", stay: "2 nights · April 2026", quote: "The comfortability." },
  { name: "Zinhle", date: "19 March 2026", score: 10, title: "Exceptional", room: "Double Room with Private Bathroom", stay: "2 nights · March 2026", quote: "Cleanliness, and quietness." },
  { name: "Kuben", date: "18 February 2026", score: 10, title: "Exceptional", room: "Double Room", stay: "1 night · February 2026", quote: "Everything was perfect clean friendly staff." },
];

function ReviewsScreen() {
  return (
    <section style={{ maxWidth: 1160, margin: "88px auto 0", padding: "0 24px" }}>
      <span style={{ font: "var(--text-label-sm)", letterSpacing: "var(--tracking-eyebrow)", textTransform: "uppercase", color: "var(--gold-700)" }}>Guest reviews</span>
      <h2 style={{ font: "var(--text-display-lg)", margin: "10px 0 8px", color: "var(--color-text-primary)" }}>What guests are saying</h2>
      <p style={{ font: "var(--text-body-md)", color: "var(--color-text-secondary)", marginBottom: 32 }}>As reviewed on Booking.com.</p>

      <div style={{ display: "flex", alignItems: "center", gap: 20, marginBottom: 36, flexWrap: "wrap" }}>
        <div style={{ background: "var(--color-brand-primary)", color: "var(--color-text-inverse)", borderRadius: "var(--radius-md)", padding: "12px 18px", font: "700 1.5rem/1 var(--font-sans-body)", minWidth: 64, textAlign: "center" }}>8.6</div>
        <div>
          <div style={{ font: "var(--text-label-lg)", color: "var(--color-text-primary)" }}>Fabulous</div>
          <div style={{ font: "var(--text-body-sm)", color: "var(--color-text-muted)" }}>27 reviews</div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginBottom: 56 }}>
        {REVIEW_CATEGORIES.map((c) => (
          <div key={c.label}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6, font: "var(--text-body-sm)", color: "var(--color-text-primary)" }}>
              <span>{c.label}</span><span>{c.score.toFixed(1)}</span>
            </div>
            <div style={{ height: 4, background: "var(--sandstone-200)", borderRadius: "var(--radius-full)" }}>
              <div style={{ width: `${(c.score / 10) * 100}%`, height: "100%", background: "var(--color-brand-primary)", borderRadius: "var(--radius-full)" }} />
            </div>
          </div>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        {REVIEWS.map((r) => (
          <div key={r.name + r.date} style={{ background: "var(--color-surface-card)", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", padding: 22, display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div>
                <div style={{ font: "var(--text-label-lg)", color: "var(--color-text-primary)" }}>{r.name}</div>
                <div style={{ font: "var(--text-body-sm)", color: "var(--color-text-muted)" }}>{r.room} · {r.stay}</div>
              </div>
              <div style={{ background: "var(--color-brand-primary)", color: "var(--color-text-inverse)", borderRadius: "var(--radius-sm)", padding: "4px 10px", font: "700 0.9rem/1 var(--font-sans-body)" }}>{r.score % 1 === 0 ? r.score : r.score.toFixed(1)}</div>
            </div>
            <div style={{ font: "var(--text-label-md)", color: "var(--color-text-primary)" }}>{r.title}</div>
            <p style={{ font: "var(--text-body-sm)", color: "var(--color-text-secondary)", lineHeight: 1.6, margin: 0 }}>{r.quote}</p>
            <div style={{ font: "var(--text-body-sm)", color: "var(--color-text-muted)" }}>Reviewed: {r.date}</div>
          </div>
        ))}
      </div>
    </section>
  );
}
window.ReviewsScreen = ReviewsScreen;