/* reviews.jsx — sticky score aside + review cards */
function Reviews() {
  const r = window.RIAD.reviews;
  return (
    <section className="section band" id="reviews" data-screen-label="Reviews">
      <div className="wrap">
        <SectionHead
          eyebrow="Reviews"
          title="What guests say when they leave."
          sub="Gathered across booking channels. We answer every one, by hand."
        />
        <div className="reviews-grid">
          <Reveal className="rev-summary">
            <div>
              <div className="rev-score">{r.score.toFixed(1)}</div>
              <div className="of"><Stars n={5} /> &nbsp;out of 5 · {r.count} reviews</div>
            </div>
            <div className="rev-bars">
              {r.breakdown.map((b) => (
                <div className="rev-bar" key={b.k}>
                  <span>{b.k}</span>
                  <span className="track"><span className="fill" style={{ width: (b.v / 5 * 100) + "%" }}></span></span>
                  <span>{b.v.toFixed(1)}</span>
                </div>
              ))}
            </div>
          </Reveal>

          <div className="rev-list">
            {r.items.map((it, k) => (
              <Reveal className="rev-card" key={k} delay={(k % 3) + 1}>
                <div className="top">
                  <div className="who">
                    <span className="name">{it.name}</span>
                    <span className="place">{it.place}</span>
                  </div>
                  <Stars n={it.stars} />
                </div>
                <p className="quote">&ldquo;{it.quote}&rdquo;</p>
                <span className="date">{it.date}</span>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Reviews = Reviews;