/* Finance Family — about / founding story + stats */
(function () {
  function HomeAbout() {
    const Icon = window.Icon;
    const stats = [
      ["dollar", "$1.61B", "funded for clients"],
      ["checkCircle", "4,152", "loans settled"],
      ["star", "5.0★", "Google rating"],
      ["users", "399", "five-star reviews"],
      ["building", "40+", "lenders on our panel"],
      ["clock", "60+ yrs", "collective experience"],
    ];
    return (
      <section id="about" className="section">
        <div className="container">
          <div className="about-grid">
            <div className="reveal">
              <window.Eyebrow>Our story</window.Eyebrow>
              <h2 className="ff-h1" style={{ margin: "14px 0 18px" }}>A brokerage for everyone &mdash; that includes you.</h2>
              <p className="ff-lead muted" style={{ marginBottom: 16 }}>
                Finance Family was founded by Tony and Luke &mdash; brokers who wanted a warmer, more honest way to do home loans. Most of our team came from the big banks, so we know exactly how lenders think.
              </p>
              <p className="ff-body muted" style={{ marginBottom: 24 }}>
                As a private, family-run brokerage in Berwick with 60+ years' collective experience, we're not tied to any one bank. We work for <strong style={{ color: "var(--text-strong)" }}>you</strong> &mdash; finding the right loan from 40+ lenders, and sticking around long after settlement. We've now funded <strong style={{ color: "var(--text-strong)" }}>$1.61 billion across 4,152 settled loans</strong>. Proud members of the CAFBA and FBAA.
              </p>
              <a href="/book" className="link-arrow" style={{ fontSize: 16 }}>Meet your family broker <Icon name="arrowRight" size={17} color="var(--brand-primary)" /></a>
            </div>
            <div className="reveal grid grid-2" data-delay="1" style={{ gap: 16 }}>
              {stats.map(([ic, n, l]) => (
                <div key={l} style={{ padding: 26, borderRadius: "var(--radius-lg)", background: "var(--surface-subtle)", border: "1.5px solid var(--border-subtle)" }}>
                  <span style={{ width: 46, height: 46, borderRadius: "50%", background: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", boxShadow: "var(--shadow-xs)" }}><Icon name={ic} size={22} color="var(--brand-primary)" /></span>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 34, color: "var(--text-strong)", marginTop: 14, lineHeight: 1 }}>{n}</div>
                  <div style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-muted)", marginTop: 6 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }
  window.HomeAbout = HomeAbout;
})();