/* global React, CAL_LINK */

function FinalCTA() {
  return (
    <section id="cta" className="fcta">
      <span className="section-mark">§ 07 / Next step</span>
      <div className="wrap">
        <Reveal><span className="eyebrow" style={{ justifyContent: 'center', display: 'inline-flex' }}>Last thing</span></Reveal>
        <Reveal delay={80}>
          <h2 className="h-section" style={{ marginTop: 22 }}>
            Ready to <em>stop the scramble?</em>
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p className="lead">
            We will show you exactly where your operations are leaking and what the system would look like for your portfolio.
          </p>
        </Reveal>
        <Reveal delay={200}>
          <div style={{ marginTop: 40 }}>
            <a href={CAL_LINK} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
              Book a Free Discovery Call <Arrow />
            </a>
          </div>
        </Reveal>

        <Reveal delay={260}>
          <div className="cal-embed-wrap" style={{ marginTop: 64 }}>
            <iframe
              src={CAL_LINK + "?embed=true&theme=dark"}
              title="Book a 15-minute call with FutureReady AI"
              allow="payment"
              loading="lazy"
            ></iframe>
            <div className="cal-fallback">
              Trouble loading? <a href={CAL_LINK} target="_blank" rel="noopener noreferrer">Open the calendar in a new tab →</a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.FinalCTA = FinalCTA;