/* eslint-disable */
// REVIEWS PAGE

const PB_R = window.PB_DATA;

function PageReviews() {
  return (
    <div data-screen-label="Reviews">
      <section className="page-head shell-wide">
        <div className="crumbs"><a href="#/">Home</a><span className="sep">/</span>Reviews</div>
        <h1><em>249</em><br />reasons.</h1>
        <p className="sub">
          Pulled directly from our Fresha profile — every review dated, every reviewer real.
          Nothing curated, nothing fabricated.
        </p>
      </section>

      <section className="shell-wide">
        <div className="review-hero">
          <div className="stat">
            <div className="big">4.9</div>
            <div className="of">out of 5.0</div>
            <div className="stars">★★★★★</div>
            <div className="src">From 249 reviews on Fresha · Verified May 2026</div>
          </div>
          <div className="lede">
            Our reviews <em>name our team</em>. Anastasia for hair, Joanne for massage,
            Rema for lashes — clients return for specific specialists, and they say so
            in writing.
          </div>
        </div>
      </section>

      <section className="shell-wide section">
        <div className="sig-head" style={{ marginBottom: 32 }}>
          <div>
            <Eyebrow>Recent</Eyebrow>
            <h2 className="display-2" style={{ marginTop: 18 }}>This week<br/>on <em>Fresha</em>.</h2>
          </div>
          <div>
            <p className="lede">
              Four real reviews dated into the current week. The signal is the consistency:
              every review is five stars, every reviewer names a person.
            </p>
            <a href={PB_R.brand.fresha} target="_blank" rel="noopener" className="btn btn-link" style={{ marginTop: 20 }}>Read on Fresha ↗</a>
          </div>
        </div>

        <div className="review-list">
          {PB_R.reviews.map((r) => (
            <article key={r.name} className="review-card" style={{ padding: 48 }}>
              <div className="stars">★★★★★</div>
              <div className="body">“{r.body}”</div>
              <div className="footer">
                <div className="avatar">{r.initial}</div>
                <div className="who">
                  <div className="nm">{r.name}</div>
                  <div className="dt">{r.date} · {r.service}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* Per-staff ratings */}
      <section className="shell-wide section">
        <div className="sig-head" style={{ marginBottom: 32 }}>
          <div>
            <Eyebrow>By specialist</Eyebrow>
            <h2 className="display-2" style={{ marginTop: 18 }}>Per-chair <em>ratings</em>.</h2>
          </div>
          <div>
            <p className="lede">
              Every team member rated individually on Fresha. Two perfect-five stylists,
              and no specialist below 4.8.
            </p>
          </div>
        </div>

        <div className="staff-rating">
          {PB_R.teamFull.map((m) => (
            <div key={m.id} className="row">
              <div className="nm">{m.name}</div>
              <div className="rl">{m.role}</div>
              <div className="rt">
                <span>{m.rating.toFixed(1)}</span>
                <span className="stars">★★★★★</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Themes */}
      <section className="shell-wide section">
        <div className="pillars">
          <div className="pillar">
            <div className="num">→</div>
            <div className="title">Stylist loyalty</div>
            <p className="body">Clients name and return for specific staff — Anastasia, Joanne, Rema. This is what a regulars-driven salon looks like.</p>
          </div>
          <div className="pillar">
            <div className="num">→</div>
            <div className="title">Ambience</div>
            <p className="body">“Great service and ambience” recurs — the premium-environment promise is being delivered.</p>
          </div>
          <div className="pillar">
            <div className="num">→</div>
            <div className="title">Result on brief</div>
            <p className="body">“Exactly how I described it” — the consultation translates to the chair.</p>
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

Object.assign(window, { PageReviews });