/* MCA — Financial Advisory, Analysis & Extrapolation (bespoke, dark-only) */

const { useState: useFA, useEffect: useFAE, useRef: useFAR } = React;

/* ---------- Scroll-reveal wrapper (self-contained, hard safety fallback) ---------- */
function FAReveal({ children, delay = 0, className = "", tag = "div" }) {
  const ref = useFAR(null);
  const [seen, setSeen] = useFA(false);
  useFAE(() => {
    const el = ref.current;
    if (!el) return;
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce || !("IntersectionObserver" in window)) { setSeen(true); return; }
    let done = false;
    const reveal = () => { if (!done) { done = true; setSeen(true); } };
    const r = el.getBoundingClientRect();
    if (r.top < (window.innerHeight || 0) + 80) { reveal(); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { reveal(); io.disconnect(); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    io.observe(el);
    const t = setTimeout(reveal, 2600);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
  const Tag = tag;
  return (
    <Tag ref={ref} className={`fa-reveal ${seen ? "fa-reveal--in" : ""} ${className}`}
      style={{ transitionDelay: seen ? `${delay}ms` : "0ms" }}>
      {children}
    </Tag>
  );
}

/* ---------- Line glyphs ---------- */
function FAGlyph({ kind }) {
  const p = { stroke: "currentColor", strokeWidth: 1.3, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "analysis":
      return (
        <svg width="34" height="34" viewBox="0 0 34 34"><path d="M5 29V5M5 29h24" {...p} /><path d="M9 23l6-8 5 4 8-13" {...p} /><circle cx="20" cy="19" r="1.4" fill="currentColor" /><circle cx="28" cy="6" r="1.4" fill="currentColor" /></svg>
      );
    case "cost":
      return (
        <svg width="34" height="34" viewBox="0 0 34 34"><circle cx="17" cy="17" r="12" {...p} /><path d="M17 10v14M20.5 12.8c-.8-1.1-2.1-1.8-3.5-1.8-2.1 0-3.8 1.4-3.8 3.1 0 4.1 7.6 2.3 7.6 6.4 0 1.8-1.9 3.1-4.1 3.1-1.6 0-3-.7-3.7-1.9" {...p} /></svg>
      );
    case "cfo":
      return (
        <svg width="34" height="34" viewBox="0 0 34 34"><path d="M6 28V15l11-8 11 8v13" {...p} /><path d="M6 28h22M13 28v-8h8v8" {...p} /><circle cx="17" cy="11.5" r="1.2" fill="currentColor" /></svg>
      );
    case "strategy":
      return (
        <svg width="34" height="34" viewBox="0 0 34 34"><circle cx="17" cy="17" r="12" {...p} /><circle cx="17" cy="17" r="6" {...p} /><circle cx="17" cy="17" r="1.6" fill="currentColor" /><path d="M17 5V1M17 33v-4M5 17H1M33 17h-4" {...p} /></svg>
      );
    case "budget":
      return (
        <svg width="34" height="34" viewBox="0 0 34 34"><rect x="5" y="7" width="24" height="20" rx="2" {...p} /><path d="M5 13h24M10 20h6M22 20h2" {...p} /><circle cx="24.5" cy="4" r="0" /></svg>
      );
    default:
      return null;
  }
}

/* ---------- Hero visual: history → extrapolation with confidence cone ---------- */
function ExtrapolationChart() {
  // plot area roughly 0..900 x, 40..360 y
  const hist = "40,300 130,286 220,250 310,262 400,206 460,182";
  const proj = "460,182 560,150 660,128 760,96 880,60";
  const coneTop = "460,182 560,132 660,98 760,54 880,4";
  const coneBot = "460,182 560,168 660,158 760,138 880,116";
  const gridY = [60, 120, 180, 240, 300];
  const gridX = [40, 220, 400, 580, 760];
  return (
    <svg className="fa-chart" viewBox="0 0 920 380" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <defs>
        <linearGradient id="fa-hist" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgba(0,165,161,0.28)" />
          <stop offset="100%" stopColor="rgba(0,165,161,0)" />
        </linearGradient>
        <linearGradient id="fa-cone" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="rgba(95,240,240,0.20)" />
          <stop offset="100%" stopColor="rgba(95,240,240,0.02)" />
        </linearGradient>
      </defs>

      {/* grid */}
      <g stroke="rgba(150,225,235,0.08)" strokeWidth="1">
        {gridY.map((y) => <line key={"y" + y} x1="40" y1={y} x2="900" y2={y} />)}
        {gridX.map((x) => <line key={"x" + x} x1={x} y1="20" x2={x} y2="340" />)}
      </g>

      {/* confidence cone */}
      <polygon points={`${coneTop} ${coneBot.split(" ").reverse().join(" ")}`} fill="url(#fa-cone)" />
      <polyline points={coneTop} fill="none" stroke="rgba(95,240,240,0.35)" strokeWidth="1" strokeDasharray="2 5" />
      <polyline points={coneBot} fill="none" stroke="rgba(95,240,240,0.35)" strokeWidth="1" strokeDasharray="2 5" />

      {/* history area + line */}
      <polygon points={`40,340 ${hist} 460,340`} fill="url(#fa-hist)" />
      <polyline className="fa-chart__hist" points={hist} fill="none" stroke="#00A5A1" strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />

      {/* projection line (dashed) */}
      <polyline className="fa-chart__proj" points={proj} fill="none" stroke="#5FF0F0" strokeWidth="2.5" strokeDasharray="7 6" strokeLinejoin="round" strokeLinecap="round" />

      {/* "today" divider */}
      <line x1="460" y1="20" x2="460" y2="340" stroke="rgba(95,240,240,0.4)" strokeWidth="1" strokeDasharray="3 4" />
      <text x="466" y="34" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="rgba(170,230,240,0.7)">TODAY</text>

      {/* nodes */}
      {"40,300 130,286 220,250 310,262 400,206 460,182".split(" ").map((pt, i) => {
        const [x, y] = pt.split(",");
        return <circle key={i} cx={x} cy={y} r="3.2" fill="#04080B" stroke="#00A5A1" strokeWidth="1.6" />;
      })}
      <circle cx="880" cy="60" r="5" fill="#5FF0F0" />
      <circle cx="880" cy="60" r="11" fill="none" stroke="rgba(95,240,240,0.5)" strokeWidth="1">
        <animate attributeName="r" from="11" to="26" dur="2.6s" repeatCount="indefinite" />
        <animate attributeName="opacity" from="0.6" to="0" dur="2.6s" repeatCount="indefinite" />
      </circle>
      <text x="878" y="46" textAnchor="end" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.14em" fill="rgba(170,230,240,0.85)">EXTRAPOLATED</text>
    </svg>
  );
}

/* ---------- Hero ---------- */
function FAHero() {
  return (
    <section className="fa-hero">
      <div className="fa-hero__bg" aria-hidden="true">
        <div className="fa-hero__blob fa-hero__blob--teal" />
        <div className="fa-hero__blob fa-hero__blob--deep" />
        <div className="fa-hero__grain" />
      </div>
      <div className="container fa-hero__inner">
        <div className="fa-hero__copy">
          <h1 className="fa-hero__title">
            Financial advisory, analysis <em>&amp; extrapolation.</em>
          </h1>
          <p className="fa-hero__sub">
            CFO services, strategic planning, budgeting, and cost analysis for founders who need
            to know exactly where the business stands and exactly where it's headed. One financial
            function, connected to every stage of the company lifecycle, from grants through M&amp;A.
          </p>
          <div className="fa-hero__ctas">
            <Button variant="teal" size="lg" onClick={() => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener")} withArrow>Schedule a Free Consultation</Button>
          </div>
        </div>
        <div className="fa-hero__visual">
          <div className="fa-hero__lifecard">
            <div className="fa-lifecycle__label">THE COMPANY LIFECYCLE</div>
            <ul className="fa-lifecycle">
              {["Grants", "Growth", "Incubation", "M&A"].map((s, i) => (
                <li key={i} className="fa-lifecycle__stage">
                  <span className="fa-lifecycle__dot" aria-hidden="true" />
                  <span className="fa-lifecycle__name">{s}</span>
                </li>
              ))}
            </ul>
            <p className="fa-lifecycle__note">
              The financial function follows the company through every stage, rather than restarting
              at each one.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- The Four Services (elegant overview grid) ---------- */
const FA_FOUR = [
  {
    n: "01", icon: "cfo", title: "CFO Services",
    desc: "Financial leadership without carrying the headcount. Reporting, cash flow management, and the executive judgment a board or investor update actually requires, built into the business rather than bolted onto a founder's calendar.",
  },
  {
    n: "02", icon: "strategy", title: "Strategic Planning",
    desc: "A financial plan anchored to where the business actually is, not a template that would say the same thing to any company in the room. The plan comes out of the diagnostic, not the other way around.",
  },
  {
    n: "03", icon: "budget", title: "Budgeting",
    desc: "Budgets built against assumptions that get stress-tested before the business has to live with them, then monitored against actual spend instead of filed away after the first month.",
  },
  {
    n: "04", icon: "cost", title: "Cost Savings & Implementation",
    desc: "Cuts sequenced by what the business can absorb, not a blanket sweep that saves money in the wrong place. The savings that hold up are the ones that don't damage the parts of the business that are working.",
  },
];

function FAFour() {
  return (
    <section className="fa-sec fa-four">
      <div className="fa-four__aura" aria-hidden="true" />
      <div className="container">
        <FAReveal className="fa-sec__head">
          <span className="fa-eyebrow">WHAT WE DELIVER</span>
          <h2 className="fa-h2">The <em>financial function.</em></h2>
        </FAReveal>
        <div className="fa-four__grid">
          {FA_FOUR.map((s, i) => (
            <FAReveal key={i} delay={(i % 2) * 90} className="fa-four__cell">
              <article className="fa-four__card">
                <span className="fa-four__rule" aria-hidden="true" />
                <div className="fa-four__head">
                  <span className="fa-four__icon"><FAGlyph kind={s.icon} /></span>
                </div>
                <h3 className="fa-four__title">{s.title}</h3>
                <p className="fa-four__desc">{s.desc}</p>
              </article>
            </FAReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- SR&ED Tax Credits ---------- */
const FA_SRED_SERVICES = [
  "SR&ED eligibility assessments for software development and technology innovation",
  "Identification of qualifying research and development activities",
  "Calculation of eligible salaries, contractor costs, materials, and overhead expenses",
  "Preparation and review of SR&ED tax credit claims",
  "Corporate tax return integration and filing support",
  "CRA review and audit assistance",
  "Documentation strategies that strengthen future claims",
  "Financial planning to align SR&ED credits with your growth strategy",
];

function FASred() {
  return (
    <section className="fa-sec fa-sred">
      <div className="fa-sred__aura" aria-hidden="true" />
      <div className="container">
        <div className="fa-sred__grid">
          <FAReveal className="fa-sred__copy">
            <span className="fa-eyebrow">SR&amp;ED CREDITS</span>
            <h2 className="fa-h2">Credits you've already earned, <em>claimed properly.</em></h2>
            <p className="fa-lede">
              Most Canadian tech startups qualify for SR&amp;ED without knowing the full extent of what
              they qualify for. The program refunds a real share of R&amp;D spend, including salaries,
              and most founders either miss it, underclaim it, or file a claim that reads like a grant
              application instead of a technical narrative CRA can actually verify.
            </p>
            <p className="fa-sred__body">
              A properly documented claim takes more work upfront than a quick self-filed version. It
              also survives review instead of getting flagged, and it holds up as a repeatable process
              instead of a one-time scramble every filing season.
            </p>
            <div className="fa-sred__ctas">
              <Button variant="teal" size="lg" onClick={() => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener")} withArrow>Book a Discovery Call</Button>
            </div>
          </FAReveal>
          <FAReveal delay={90} className="fa-sred__panel">
            <div className="fa-sred__card">
              <div className="fa-sred__cardHead">
                <span className="fa-sred__cardLabel">COMPLETE SR&amp;ED ADVISORY SERVICES</span>
              </div>
              <ul className="fa-sred__list">
                {FA_SRED_SERVICES.map((s, i) => (
                  <li key={i}>
                    <span className="fa-sred__check" aria-hidden="true">
                      <svg width="11" height="11" viewBox="0 0 10 10" fill="none"><path d="M2 5l2 2 4-5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
                    </span>
                    <span>{s}</span>
                  </li>
                ))}
              </ul>
            </div>
          </FAReveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- Innovation economy / sectors ---------- */
const FA_SECTORS = [
  "Software Development",
  "Artificial Intelligence (AI)",
  "SaaS",
  "FinTech",
  "HealthTech",
  "CleanTech",
  "Manufacturing Technology",
  "Engineering & Product Development",
];

function FASectors() {
  return (
    <section className="fa-sec fa-sectors">
      <div className="container">
        <FAReveal className="fa-sec__head">
          <span className="fa-eyebrow">WHO WE WORK WITH</span>
          <h2 className="fa-h2">Helping Canada's innovation <em>economy grow.</em></h2>
          <p className="fa-lede fa-sec__lede">
            We proudly support technology companies across Canada, including startups and established
            businesses operating in:
          </p>
        </FAReveal>
        <div className="fa-sectors__grid">
          {FA_SECTORS.map((s, i) => (
            <FAReveal key={i} delay={(i % 4) * 60} className="fa-sectors__cell">
              <div className="fa-sectors__item">
                <span className="fa-sectors__dot" aria-hidden="true" />
                <span className="fa-sectors__name">{s}</span>
              </div>
            </FAReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- SR&ED closing CTA ---------- */
function FASredCTA() {
  return (
    <section className="fa-sec fa-sredcta">
      <div className="container">
        <FAReveal>
          <div className="fa-final__block">
            <div className="fa-final__grid" aria-hidden="true">
              {Array.from({ length: 6 * 12 }).map((_, i) => <span key={i} />)}
            </div>
            <div className="fa-final__inner">
              <span className="fa-eyebrow fa-final__eyebrow">SR&amp;ED CREDITS</span>
              <h2 className="fa-final__title">
                Maximize your <em>SR&amp;ED tax credits.</em>
              </h2>
              <p className="fa-final__sub">
                If your company is creating new technology or solving technical challenges, there's a
                strong possibility you qualify for SR&amp;ED tax credits in Canada. Contact MCA Financial
                Advisory to learn how our SR&amp;ED specialists can help maximize your claim, simplify the
                filing process, and unlock funding to accelerate your business growth.
              </p>
              <div className="fa-final__ctas">
                <Button variant="teal" size="lg" onClick={() => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener")} withArrow>
                  Schedule a Free Consultation
                </Button>
              </div>
            </div>
          </div>
        </FAReveal>
      </div>
    </section>
  );
}

/* ---------- Our Approach (4 steps) ---------- */
function FAApproach() {
  const steps = [
    { n: "01", title: "Analyse", desc: "We assess your current financial position, business performance, and operational efficiency." },
    { n: "02", title: "Identify Opportunities", desc: "We uncover risks, savings opportunities, and areas for sustainable improvement." },
    { n: "03", title: "Develop Strategy", desc: "We create practical financial plans aligned with your business goals." },
    { n: "04", title: "Implement & Support", desc: "We help execute recommendations, monitor progress, and continuously optimise performance." },
  ];
  return (
    <section className="fa-sec fa-approach">
      <div className="container">
        <FAReveal className="fa-sec__head">
          <span className="fa-eyebrow">OUR APPROACH</span>
          <h2 className="fa-h2">From strategy <em>to execution.</em></h2>
        </FAReveal>
        <FAReveal delay={80}>
          <div className="fa-approach__rail">
            <span className="fa-approach__line" aria-hidden="true" />
            {steps.map((s, i) => (
              <div key={i} className="fa-approach__step">
                <div className="fa-approach__node" aria-hidden="true">
                  <span className="fa-approach__nodeNum">{s.n}</span>
                </div>
                <div className="fa-approach__sTitle">{s.title}</div>
                <p className="fa-approach__sDesc">{s.desc}</p>
              </div>
            ))}
          </div>
        </FAReveal>
      </div>
    </section>
  );
}

/* ---------- How the Engagement Works (phased timeline) ---------- */
const FA_PHASES = [
  {
    n: "01", title: "Financial Diagnostic", when: "Week 1",
    desc: "Review of current financials, capital structure, burn pattern, and reporting obligations across every funding source. You leave with an honest picture of where the business actually stands, not where the last projection said it would be.",
    points: ["Diagnostic findings documented", "Gaps between projected and actual identified", "Priority areas for the engagement confirmed", "Reporting obligations mapped across sources"],
  },
  {
    n: "02", title: "Model & Plan Build", when: "Weeks 1 to 3",
    desc: "Depending on scope: CFO reporting structure, strategic plan grounded in the diagnostic, budget built against stress-tested assumptions, or cost analysis identifying where spend is and is not producing return.",
    points: ["Financial model or budget delivered", "Strategic plan connected to lifecycle stage", "Cost analysis prioritised by impact, not size", "Assumptions stress-tested against scenarios"],
  },
  {
    n: "03", title: "Implementation", when: "Ongoing",
    desc: "MCA stays through execution. Cuts get sequenced. Budgets get monitored against actual spend. Reporting structures get put into practice with the team that has to run them day to day.",
    points: ["Implementation sequence confirmed", "Team ownership of budget lines established", "Reporting cadence operating in practice", "Savings tracked against actual spend"],
  },
  {
    n: "04", title: "Ongoing Advisory", when: "Month 2 onward",
    desc: "Regular check-ins against the plan, board and investor communication support, and recalibration as the business, the market, or the capital structure changes.",
    points: ["Board-ready reporting in place", "Plan recalibrated against actual performance", "Financial function connected to the next stage", "Investor and board communication supported"],
  },
];

function FAEngagement() {
  return (
    <section className="fa-sec fa-engage">
      <div className="fa-engage__halo" aria-hidden="true" />
      <div className="container">
        <FAReveal className="fa-sec__head">
          <span className="fa-eyebrow">HOW THE ENGAGEMENT WORKS</span>
          <h2 className="fa-h2">Fast financial <em>clarity.</em></h2>
          <p className="fa-lede fa-sec__lede">
            A clear sequence, with the depth calibrated to what the engagement actually needs.
          </p>
        </FAReveal>
        <ol className="fa-engage__list">
          {FA_PHASES.map((p, i) => (
            <FAReveal key={i} delay={(i % 2) * 90} tag="li" className="fa-engage__item">
              <div className="fa-engage__spine" aria-hidden="true">
                <span className="fa-engage__dot" />
              </div>
              <div className="fa-engage__card">
                <div className="fa-engage__cardHead">
                  <h3 className="fa-engage__title">{p.title}</h3>
                  <span className="fa-engage__when">{p.when}</span>
                </div>
                <p className="fa-engage__desc">{p.desc}</p>
                <ul className="fa-engage__points">
                  {p.points.map((pt, j) => (
                    <li key={j}>
                      <span className="fa-engage__check" aria-hidden="true">
                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2 2 4-5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
                      </span>
                      {pt}
                    </li>
                  ))}
                </ul>
              </div>
            </FAReveal>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ---------- About MCA: metrics ---------- */
const FA_METRICS = [
  { num: "$50B+", label: "Peak Enterprise Value Created for Clients" },
  { num: "80+", label: "Successful Client Engagements" },
  { num: "10M+", label: "Client Social Media Growth" },
  { num: "$150M+", label: "Total Capital Raised" },
  { num: "5M+", label: "Community Growth" },
  { num: "5,000+", label: "KOLs, Ambassadors & Influencers" },
];

function FAMetrics() {
  return (
    <section className="fa-sec fa-metrics">
      <div className="container">
        <FAReveal>
          <span className="fa-eyebrow">ABOUT MCA</span>
          <h2 className="fa-h2 fa-metrics__title">
            Strategic execution<br /><em>with measurable impact.</em>
          </h2>
        </FAReveal>
        <div className="fa-metrics__grid">
          {FA_METRICS.map((m, i) => (
            <FAReveal key={i} delay={(i % 3) * 70}>
              <div className="fa-metric">
                <div className="fa-metric__num">{m.num}</div>
                <div className="fa-metric__label">{m.label}</div>
              </div>
            </FAReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Trusted by (logo marquee, mirrors the home page) ---------- */
const FA_LOGO_IDS = [
  10,11,12,13,14,15,16,18,19,20,21,22,23,24,25,26,27,28,29,
  30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,
  72,74,75,77,80,83,
];
const FA_LOGO_FILES = FA_LOGO_IDS.map((n) => `/assets/partners-v2/${n}.png`);
const FA_HALF = Math.ceil(FA_LOGO_FILES.length / 2);
const FA_ROW_A = FA_LOGO_FILES.slice(0, FA_HALF);
const FA_ROW_B = FA_LOGO_FILES.slice(FA_HALF);

function FALogoRow({ items, reverse = false, duration = 120 }) {
  const loop = [...items, ...items];
  return (
    <div className="logo-row">
      <div className={`logo-row__track ${reverse ? "logo-row__track--reverse" : ""}`}
        style={{ animationDuration: `${duration}s` }}>
        {loop.map((src, i) => (
          <span key={i} className="logo-row__item" aria-hidden={i >= items.length ? "true" : undefined}>
            <img src={src} alt="" loading="eager" decoding="async" draggable="false" />
          </span>
        ))}
      </div>
    </div>
  );
}

function FATrusted() {
  return (
    <section className="fa-sec fa-trustedsec">
      <div className="container">
        <FAReveal>
          <div className="trusted trusted--about">
            <div className="trusted__head">
              <span className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>TRUSTED BY</span>
              <h3 className="h3 trusted__title">Leading Technology Companies.</h3>
            </div>
            <div className="logo-wall">
              <FALogoRow items={FA_ROW_A} reverse={false} duration={120} />
              <FALogoRow items={FA_ROW_B} reverse={true} duration={140} />
            </div>
          </div>
        </FAReveal>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
const FA_FAQS = [
  { q: "What does financial advisory at MCA actually include?",
    a: "CFO-level reporting and board communication, strategic planning grounded in real financial data, budget construction and monitoring, and cost analysis carried through to implementation. It runs as one connected function rather than four separate services." },
  { q: "How is this different from hiring a fractional CFO directly?",
    a: "A fractional CFO hire gives you one person's bandwidth and one person's blind spots. MCA's financial advisory connects to the firm's broader lifecycle view across grants, growth, incubation, and M&A, and brings a team's worth of pattern recognition across cycles, rather than a single hire's individual experience." },
  { q: "Do you work with companies managing token treasury alongside fiat operations?",
    a: "Yes. This is a core part of the financial advisory practice. Budgeting and reporting for companies with mixed capital structures, including grant funding with restricted-use obligations, is built into the methodology rather than treated as a special case." },
  { q: "How long before we see a real financial diagnosis?",
    a: "The diagnostic phase runs in the first week. You get an honest read on where the business stands before any modeling or planning work begins. Recommendations without that diagnosis are guesses with confidence attached, which is not how MCA operates." },
  { q: "Can you help with a cost reduction we're already planning?",
    a: "Yes, and this is worth doing before the cuts happen rather than after. MCA's cost analysis identifies which reductions actually reduce risk and which ones would create more risk than they save, then stays through implementation to confirm the savings show up in the next reporting cycle." },
];

function FAFaqItem({ item, open, onToggle }) {
  return (
    <div className={"fa-faq__item" + (open ? " fa-faq__item--open" : "")}>
      <button type="button" className="fa-faq__q" onClick={onToggle} aria-expanded={open}>
        <span>{item.q}</span>
        <span className="fa-faq__icon" aria-hidden="true">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
        </span>
      </button>
      <div className="fa-faq__a"><p>{item.a}</p></div>
    </div>
  );
}

function FAFaq() {
  const [open, setOpen] = useFA(0);
  return (
    <section className="fa-sec fa-faq">
      <div className="container">
        <FAReveal className="fa-sec__head">
          <span className="fa-eyebrow">FREQUENTLY ASKED</span>
          <h2 className="fa-h2">Questions, <em>answered.</em></h2>
        </FAReveal>
        <FAReveal delay={80}>
          <div className="fa-faq__list">
            {FA_FAQS.map((f, i) => (
              <FAFaqItem key={i} item={f} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            ))}
          </div>
        </FAReveal>
      </div>
    </section>
  );
}

/* ---------- Final CTA ---------- */
function FAFinalCTA({ navigate }) {
  return (
    <section className="fa-sec fa-final">
      <div className="container">
        <FAReveal>
          <div className="fa-final__block">
            <div className="fa-final__grid" aria-hidden="true">
              {Array.from({ length: 6 * 12 }).map((_, i) => <span key={i} />)}
            </div>
            <div className="fa-final__inner">
              <span className="fa-eyebrow fa-final__eyebrow">READY WHEN YOU ARE</span>
              <h2 className="fa-final__title">
                Ready to strengthen your <em>financial strategy?</em>
              </h2>
              <p className="fa-final__sub">
                Speak with our financial advisory team and discover how data-driven financial
                management can unlock new opportunities for your business, whether you need strategic
                advice, cost optimisation, budgeting support, or experienced CFO services.
              </p>
              <div className="fa-final__ctas">
                <Button variant="teal" size="lg" onClick={() => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener")} withArrow>
                  Schedule a Free Consultation
                </Button>
                <Button variant="secondary" size="lg" onClick={() => navigate("/case-studies")}>
                  See case studies
                </Button>
              </div>
            </div>
          </div>
        </FAReveal>
      </div>
    </section>
  );
}

/* ---------- Page composition ---------- */
function FinancialAdvisoryPage({ navigate }) {
  return (
    <div className="fa-page">
      <FAHero />
      <FAFour />
      <FASred />
      <FASectors />
      <FASredCTA />
      <FAApproach />
      <FAEngagement />
      <FAMetrics />
      <FATrusted />
      <FAFaq />
      <FAFinalCTA navigate={navigate} />
    </div>
  );
}

Object.assign(window, { FinancialAdvisoryPage });