/* Finance Family — "Why we exist" manifesto band.
   Uses the values/emotional lines from the Finance Family Manifesto.
   NOTE: outcome- & comparison-related manifesto language is intentionally
   omitted pending the brand's ACL/ASIC review (per manifesto draft note). */
(function () {
  function HomeManifesto() {
    const Icon = window.Icon;
    const creed = [
      ["Money problems don't stay in the bank.", false],
      ["They sit at the dinner table.", false],
      ["A family's finances should ", "set them free", " — not quietly trap them."],
      ["The interest rate is just a number. What it buys — or steals — is ", "a life", "."],
    ];
    return (
      <section id="why" className="bg-dark" style={{ position: "relative", overflow: "hidden" }}>
        <div className="cap-cluster float hide-md" style={{ top: 40, right: -40, opacity: 0.18 }} aria-hidden="true">
          <div className="row" style={{ gap: 14 }}><span style={{ border: "3px solid #fff", borderRadius: 999, height: 26, width: 120 }} /><span style={{ background: "#fff", borderRadius: 999, height: 26, width: 26 }} /></div>
          <div className="row" style={{ gap: 14, marginTop: 14 }}><span style={{ border: "3px solid #fff", borderRadius: 999, height: 26, width: 26 }} /><span style={{ background: "#fff", borderRadius: 999, height: 26, width: 120 }} /></div>
        </div>
        <div className="container" style={{ paddingTop: "var(--section-y)", paddingBottom: "var(--section-y)", position: "relative", zIndex: 2 }}>
          <div style={{ maxWidth: 880 }}>
            <window.Eyebrow style={{ color: "var(--mint-100)" }}>Why we exist</window.Eyebrow>
            <div className="reveal" style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 6 }}>
              {creed.map((line, i) => (
                <p key={i} className="ff-display" style={{ fontSize: "clamp(1.5rem,1.1rem+1.8vw,2.4rem)", lineHeight: 1.28, color: "rgba(255,255,255,0.55)", margin: 0 }}>
                  {Array.isArray(line) && line.length === 3
                    ? <React.Fragment>{line[0]}<span style={{ color: "#fff" }}>{line[1]}</span>{line[2]}</React.Fragment>
                    : line[0]}
                </p>
              ))}
            </div>
            <div className="reveal" data-delay="1" style={{ marginTop: 40, paddingTop: 32, borderTop: "1.5px solid rgba(255,255,255,0.14)", display: "grid", gridTemplateColumns: "1fr auto", gap: 28, alignItems: "center" }}>
              <div>
                <p className="ff-h2" style={{ color: "#fff", margin: 0, lineHeight: 1.18 }}>We're not here to write loans.<br />We're here to give families their lives back.</p>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "rgba(255,255,255,0.6)", marginTop: 16, maxWidth: 540 }}>
                  We're on your side on purpose — we answer to families, never to a bank. And we educate before we sell, because a family that understands its money never has to be afraid of it again..
                </p>
                <a href="/book" className="link-arrow" style={{ marginTop: 22, color: "var(--mint-100)" }}>Start with a free chat <Icon name="arrowRight" size={17} color="var(--mint-100)" /></a>
              </div>
              <div className="hide-md" style={{ textAlign: "right" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 13, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--mint-100)" }}>The Finance Family</div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "rgba(255,255,255,0.5)", marginTop: 6 }}>Manifesto · Why we exist</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
  window.HomeManifesto = HomeManifesto;
})();