/* Finance Family — FAQ + closing CTA */
(function () {
  const FAQS = [
    { question: "Does it cost anything to use a broker?", answer: "For most home loans the lender pays us a commission once your loan settles, so there's often no cost to you. If a fee does apply to your situation, we'll explain it clearly and in writing before you commit — no surprises." },
    { question: "How much can I borrow?", answer: "It depends on your income, deposit, expenses and each lender's policies. We'll run your numbers across 40+ lenders and give you a realistic figure — not a guess. Try our calculators to get a ballpark." },
    { question: "How long does approval take?", answer: "Conditional pre-approval is often just a few business days once we have your documents. We keep you updated at every step." },
    { question: "I'm self-employed — can you still help?", answer: "Absolutely. We know exactly which lenders are friendly to the self-employed and what they need to see. It's one of the things we do best." },
    { question: "Do you only help people in Berwick?", answer: "We're based in Berwick and love our local community, but we help families right across Melbourne and Victoria — in person or over video." },
  ];

  function HomeFaq() {
    const { Accordion, Button, Logo } = window.FinanceFamilyDesignSystem_66efc3;
    const Icon = window.Icon;
    return (
      <React.Fragment>
        <section id="faq" className="section">
          <div className="container-narrow">
            <window.SectionHead center eyebrow="Good questions" title="The bits everyone asks" style={{ marginBottom: 40 }} />
            <div className="reveal"><Accordion items={FAQS} defaultOpen={[0]} /></div>
            <div className="center" style={{ marginTop: 28 }}>
              <a href="/faq" className="link-arrow" style={{ justifyContent: "center", fontSize: 16 }}>See all 20 questions answered <Icon name="arrowRight" size={17} color="var(--brand-primary)" /></a>
            </div>
          </div>
        </section>
        <section className="section">
          <div className="container">
            <div className="reveal" style={{ background: "var(--brand-primary)", borderRadius: "var(--radius-xl)", padding: "clamp(36px,5vw,64px)", position: "relative", overflow: "hidden" }}>
              <div className="cap-cluster float hide-md" style={{ top: -30, right: -40, opacity: 0.5 }} aria-hidden="true">
                <div className="row"><span className="cap-o" style={{ border: "3px solid rgba(255,255,255,0.6)", height: 22, width: 110 }} /><span className="cap-f" style={{ background: "rgba(255,255,255,0.3)", height: 22, width: 22, borderRadius: "50%", marginLeft: 12 }} /></div>
                <div className="row" style={{ marginTop: 12 }}><span className="cap-f" style={{ background: "rgba(255,255,255,0.3)", height: 22, width: 150 }} /></div>
              </div>
              <div className="cta-grid">
                <div style={{ position: "relative", zIndex: 2 }}>
                  <h2 className="ff-h1" style={{ color: "#fff", marginBottom: 16 }}>Let's get you sorted.</h2>
                  <p className="ff-lead" style={{ color: "rgba(255,255,255,0.9)", maxWidth: 460, marginBottom: 28 }}>Book a free, no-pressure chat. We'll tell you honestly where you stand and what's possible — today.</p>
                  <div className="row wrap gap-sm">
                    <a href="/book" style={{ textDecoration: "none" }}><Button size="lg" variant="secondary" iconRight={<Icon name="arrowRight" size={18} />}>Book a chat</Button></a>
                    <a href="tel:0389004699" style={{ textDecoration: "none" }}><Button size="lg" variant="dark" iconLeft={<Icon name="phone" size={18} />}>(03) 8900 4699</Button></a>
                  </div>
                </div>
                <div className="row hide-md" style={{ justifyContent: "center", zIndex: 2 }}>
                  <Logo variant="mark" tone="white" base="../assets/logos" height={120} style={{ opacity: 0.95 }} />
                </div>
              </div>
            </div>
          </div>
        </section>
      </React.Fragment>
    );
  }
  window.HomeFaq = HomeFaq;
  window.FF_FAQS = FAQS;
})();