/* Finance Family — reviews */
(function () {
  function HomeReviews() {
    const { Card, Rating, Avatar } = window.FinanceFamilyDesignSystem_66efc3;
    const reviews = [
      { n: "Aaron Fedrick", r: "Helped by Sam", tone: "blue", q: "Sam is an absolute legend. Very professional and really went above and beyond — he made us feel completely at ease the whole way." },
      { n: "Vanessa C. Swaris", r: "First home · helped by Patricia", tone: "mint", q: "Patricia is amazing. A truly personalised service, and she follows through till the very end — even checking in after settlement." },
      { n: "Tomo Chap", r: "Investor · helped by Sam", tone: "yellow", q: "I've purchased over 6 properties using different banks and brokers, and never felt as comfortable as I did with the Finance Family." },
    ];
    return (
      <section id="reviews" className="section bg-subtle">
        <div className="container">
          <div className="reveal row wrap" style={{ justifyContent: "space-between", alignItems: "flex-end", gap: 20, marginBottom: 44 }}>
            <div className="head" style={{ marginBottom: 0 }}>
              <window.Eyebrow>Don't take our word for it</window.Eyebrow>
              <h2 className="ff-h1" style={{ margin: "14px 0 0" }}>Rated 5.0 by 399 families</h2>
            </div>
            <div className="row gap-sm" style={{ background: "#fff", border: "1.5px solid var(--border-subtle)", borderRadius: "var(--radius-pill)", padding: "12px 20px", boxShadow: "var(--shadow-sm)" }}>
              <Rating value={5} size={20} showValue />
              <span style={{ width: 1, height: 22, background: "var(--border-subtle)" }} />
              <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-muted)" }}>399 reviews on Google &amp; Facebook</span>
            </div>
          </div>
          <div className="grid grid-3">
            {reviews.map((rv, i) => (
              <window.Reveal key={rv.n} delay={(i % 3) + 1}>
                <Card padding="lg" style={{ height: "100%", display: "flex", flexDirection: "column", gap: 16 }}>
                  <Rating value={5} size={18} />
                  <p className="ff-body" style={{ fontSize: 15.5, color: "var(--text-body)", flex: 1, margin: 0, lineHeight: 1.6 }}>“{rv.q}”</p>
                  <div className="row" style={{ gap: 12, paddingTop: 4 }}>
                    <Avatar name={rv.n} tone={rv.tone} size={44} />
                    <div>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: 15.5, color: "var(--text-strong)" }}>{rv.n}</div>
                      <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-muted)" }}>{rv.r}</div>
                    </div>
                  </div>
                </Card>
              </window.Reveal>
            ))}
          </div>
        </div>
      </section>
    );
  }
  window.HomeReviews = HomeReviews;
})();