/* Finance Family — homepage hero */
(function () {
  function HomeHero() {
    const { Button, Rating } = window.FinanceFamilyDesignSystem_66efc3;
    const Icon = window.Icon;
    const chips = ["First home buyers", "Refinancing", "Self-employed", "Investors", "SMSF"];
    return (
      <section style={{ position: "relative", overflow: "hidden", background: "linear-gradient(180deg, var(--grey-40) 0%, #fff 78%)" }}>
        <div className="container" style={{ paddingTop: "clamp(40px,4vw,72px)", paddingBottom: "clamp(48px,5vw,88px)" }}>
          <div className="hero-grid">
            <div>
              <div className="reveal tagpill"><span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--mint-shade)" }} /> 5.0 ★ from 399 reviews · Berwick-based, helping clients Australia-wide</div>
              <h1 className="ff-display reveal" data-delay="1" style={{ marginTop: 18, marginBottom: 20 }}>Home loans,<br />without the<br /><span style={{ color: "var(--brand-primary)" }}>headache.</span></h1>
              <p className="ff-lead reveal" data-delay="2" style={{ maxWidth: 480, marginBottom: 28 }}>
                We're Berwick's mortgage brokers — looking after families right across Australia. A specialist for every situation: compare 40+ lenders, skip the jargon and the paperwork, and get a loan that actually fits you.
              </p>
              <div className="reveal row wrap gap-sm" data-delay="3" style={{ marginBottom: 26 }}>
                <a href="/book" style={{ textDecoration: "none" }}><Button size="lg" iconRight={<Icon name="arrowRight" size={18} />}>Book a free chat</Button></a>
                <a href="/calculators" style={{ textDecoration: "none" }}><Button size="lg" variant="outline" iconLeft={<Icon name="calculator" size={18} />}>What can I borrow?</Button></a>
              </div>
              <div className="reveal row wrap" data-delay="4" style={{ gap: 10 }}>
                {chips.map((c) => (
                  <span key={c} style={{ fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 500, color: "var(--text-muted)", border: "1.5px solid var(--border-subtle)", borderRadius: "var(--radius-pill)", padding: "6px 13px", background: "#fff" }}>{c}</span>
                ))}
              </div>
              <div className="reveal row wrap" data-delay="5" style={{ gap: "8px 18px", marginTop: 18, fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-muted)" }}>
                <span>60+ years' combined experience</span><span style={{ color: "var(--border-strong)" }}>·</span><span>40+ lenders</span><span style={{ color: "var(--border-strong)" }}>·</span><span>CAFBA &amp; FBAA members</span>
              </div>
            </div>

            <div className="reveal" data-delay="2" style={{ position: "relative", minHeight: 440 }}>
              {/* blue panel */}
              <div style={{ position: "absolute", inset: "10px 0 10px 8%", background: "var(--brand-primary)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-xl)", overflow: "hidden" }}>
                <div className="cap-cluster float" style={{ top: -30, right: -46, opacity: 0.9 }} aria-hidden="true">
                  <div className="row" style={{ gap: 14 }}><span style={{ border: "3px solid rgba(255,255,255,0.5)", borderRadius: 999, height: 26, width: 120 }} /><span style={{ background: "rgba(255,255,255,0.28)", borderRadius: 999, height: 26, width: 26 }} /></div>
                  <div className="row" style={{ gap: 14, marginTop: 14 }}><span style={{ border: "3px solid rgba(255,255,255,0.5)", borderRadius: 999, height: 26, width: 26 }} /><span style={{ background: "rgba(255,255,255,0.28)", borderRadius: 999, height: 26, width: 120 }} /></div>
                  <div className="row" style={{ gap: 14, marginTop: 14 }}><span style={{ border: "3px solid rgba(255,255,255,0.5)", borderRadius: 999, height: 26, width: 120 }} /><span style={{ background: "rgba(255,255,255,0.28)", borderRadius: 999, height: 26, width: 26 }} /></div>
                </div>
              </div>
              {/* floating snapshot card */}
              <div className="float" style={{ position: "absolute", top: 36, left: 0, width: 280, background: "#fff", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-lg)", padding: 22, zIndex: 3 }}>
                <div style={{ fontFamily: "var(--font-eyebrow)", fontWeight: 700, fontSize: 11.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--text-faint)" }}>Your borrowing power</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 38, color: "var(--text-strong)", marginTop: 6, lineHeight: 1 }}>$685,000</div>
                <div style={{ height: 8, borderRadius: 999, background: "var(--grey-60)", marginTop: 16, overflow: "hidden" }}><div style={{ width: "72%", height: "100%", background: "var(--brand-primary)", borderRadius: 999 }} /></div>
                <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10, fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--text-muted)" }}><span>Est. repayment</span><strong style={{ color: "var(--text-strong)" }}>$4,070/mo</strong></div>
              </div>
              {/* approved chip */}
              <div className="float" style={{ position: "absolute", bottom: 26, right: 4, background: "#fff", borderRadius: "var(--radius-pill)", boxShadow: "var(--shadow-lg)", padding: "12px 18px", display: "flex", alignItems: "center", gap: 11, zIndex: 3, animationDelay: "1.5s" }}>
                <span style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--mint-10)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Icon name="checkCircle" size={20} color="var(--mint-shade)" /></span>
                <div style={{ lineHeight: 1.15 }}>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 15, color: "var(--text-strong)" }}>Pre-approved</div>
                  <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--text-muted)" }}>in 3 business days</div>
                </div>
              </div>
              {/* rating chip */}
              <div className="float" style={{ position: "absolute", bottom: 120, left: -8, background: "var(--navy-100)", color: "#fff", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-lg)", padding: "14px 18px", zIndex: 3, animationDelay: "0.8s" }}>
                <Rating value={5} size={16} />
                <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "rgba(255,255,255,0.75)", marginTop: 6 }}>“Made it genuinely easy.”</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
  window.HomeHero = HomeHero;
})();