/* Finance Family — services section */
(function () {
  function HomeServices() {
    const { Card, Badge } = window.FinanceFamilyDesignSystem_66efc3;
    const Icon = window.Icon;
    const items = window.FF_SERVICES;
    return (
      <section id="services" className="section bg-subtle">
        <div className="container">
          <window.SectionHead center eyebrow="What we do" title="A loan for every chapter" sub="Whatever you're financing, there's a specialist here who's done it a hundred times before." style={{ marginBottom: 48 }} />
          <div className="grid grid-3">
            {items.map((s, i) => (
              <window.Reveal key={s.t} delay={(i % 3) + 1}>
                <Card interactive padding="lg" style={{ height: "100%", display: "flex", flexDirection: "column" }}>
                  <div className="row" style={{ justifyContent: "space-between", marginBottom: 18 }}>
                    <span style={{ width: 56, height: 56, borderRadius: "var(--radius-md)", background: "var(--blue-10)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                      <Icon name={s.ic} size={27} color="var(--brand-primary)" />
                    </span>
                    {s.tag && <Badge color="mint">{s.tag}</Badge>}
                  </div>
                  <h3 className="ff-h4" style={{ marginBottom: 8 }}>{s.t}</h3>
                  <p className="ff-body" style={{ fontSize: 14.5, color: "var(--text-muted)", flex: 1, marginBottom: 16 }}>{s.d}</p>
                  <a href={"/book?purpose=" + s.id} className="link-arrow">Talk to a specialist <Icon name="arrowRight" size={16} color="var(--brand-primary)" /></a>
                </Card>
              </window.Reveal>
            ))}
          </div>
        </div>
      </section>
    );
  }
  window.HomeServices = HomeServices;
})();