/* Finance Family — how it works */
(function () {
  function HomeHow() {
    const { Button } = window.FinanceFamilyDesignSystem_66efc3;
    const Icon = window.Icon;
    const steps = [
      { n: "01", ic: "message", t: "Have a chat", d: "Tell us your goals over a quick, no-pressure call. We listen first — then map your options." },
      { n: "02", ic: "fileText", t: "We do the legwork", d: "We compare 40+ lenders, structure your loan and handle the paperwork end to end." },
      { n: "03", ic: "home", t: "Get the keys", d: "We manage settlement and stay in your corner long after — rate reviews included." },
    ];
    return (
      <section className="section">
        <div className="container">
          <div className="how-grid">
            <div className="reveal">
              <window.Eyebrow>How it works</window.Eyebrow>
              <h2 className="ff-h1" style={{ margin: "14px 0 18px" }}>Three steps to sorted</h2>
              <p className="ff-lead muted" style={{ marginBottom: 28 }}>No banking-speak, no surprise fees — just clear advice from people who treat you like family.</p>
              <a href="/book" style={{ textDecoration: "none" }}><Button size="lg" iconRight={<Icon name="arrowRight" size={18} />}>Start your free chat</Button></a>
            </div>
            <div className="stack" style={{ gap: 16 }}>
              {steps.map((s, i) => (
                <window.Reveal key={s.n} delay={i + 1} className="row" style={{ gap: 22, alignItems: "flex-start", padding: 24, borderRadius: "var(--radius-lg)", border: "1.5px solid var(--border-subtle)", background: "#fff", boxShadow: "var(--shadow-xs)" }}>
                  <span style={{ fontFamily: "var(--font-display)", fontSize: 30, color: "var(--blue-40)", lineHeight: 1, flex: "none", width: 46 }}>{s.n}</span>
                  <div style={{ flex: 1 }}>
                    <div className="row" style={{ gap: 10, marginBottom: 6 }}>
                      <Icon name={s.ic} size={20} color="var(--brand-primary)" />
                      <h3 className="ff-h4" style={{ margin: 0 }}>{s.t}</h3>
                    </div>
                    <p className="ff-body muted" style={{ fontSize: 14.5, margin: 0 }}>{s.d}</p>
                  </div>
                </window.Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }
  window.HomeHow = HomeHow;
})();