/* Finance Family — lenders trust strip. Self-hosted logos from /assets/lenders/. */
(function () {
  const BASE = "/assets/lenders/";
  const logos = [
    { name: "Commonwealth Bank", file: "commbank.svg",               h: 30 },
    { name: "Westpac",           file: "westpac.png",                h: 22 },
    { name: "ANZ",               file: "anz.png",                    h: 26 },
    { name: "NAB",               file: "nab.png",                    h: 24 },
    { name: "Macquarie",         file: "macquarie.svg",              h: 20 },
    { name: "ING",               file: "ing.svg",                    h: 30 },
    { name: "Bankwest",          file: "bankwest.png",               h: 28 },
    { name: "Bank of Melbourne", file: "bank-of-melbourne.png",      h: 28 },
    { name: "People First Bank", file: "people-first-bank.png",      h: 28 },
    { name: "Teachers Mutual",   file: "teachers-mutual-bank.png",   h: 28 },
    { name: "UniBank",           file: "unibank.png",                h: 24 },
    { name: "Health Professionals Bank", file: "health-professionals-bank.png", h: 32 },
    { name: "Plenti",            file: "plenti.png",                 h: 26 },
    { name: "Firstmac",          file: "firstmac.png",               h: 24 },
    { name: "Connective Horizon",file: "connective-horizon.png",     h: 28 },
    { name: "Now Finance",       file: "now-finance.png",            h: 24 },
  ];

  function LogoImg({ logo }) {
    return (
      <img
        src={BASE + logo.file}
        alt={logo.name}
        title={logo.name}
        style={{
          height: logo.h, width: "auto", maxWidth: 150, objectFit: "contain",
          filter: "grayscale(1)", opacity: 0.62,
          transition: "opacity var(--dur, 0.2s) var(--ease-out, ease), filter var(--dur, 0.2s) var(--ease-out, ease)",
        }}
        onMouseEnter={(ev) => { ev.currentTarget.style.filter = "grayscale(0)"; ev.currentTarget.style.opacity = "1"; }}
        onMouseLeave={(ev) => { ev.currentTarget.style.filter = "grayscale(1)"; ev.currentTarget.style.opacity = "0.62"; }}
      />
    );
  }

  function LendersStrip() {
    return (
      <section className="section-tight" style={{ borderTop: "1.5px solid var(--border-subtle)", borderBottom: "1.5px solid var(--border-subtle)", background: "#fff", paddingTop: "1.25rem", paddingBottom: "1.25rem" }}>
        <div className="container">
          <p className="reveal center" style={{ fontFamily: "var(--font-eyebrow)", fontWeight: 700, fontSize: 12.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-faint)", margin: "0 0 26px" }}>
            Access to 40+ of Australia's lenders
          </p>
          <div className="reveal" data-delay="1" style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", alignItems: "center", gap: "20px 40px", minHeight: 34 }}>
            {logos.map((l) => <LogoImg key={l.name} logo={l} />)}
          </div>
        </div>
      </section>
    );
  }
  window.LendersStrip = LendersStrip;
})();