/* CTA finale — kinetic gradient panel with word-reveal headline and wipe-fill button. */
function CTAFinale({ go, title = "Let's find the growth you're leaving on the table", body = 'A 30-minute consultation, then a written summary of what we would fix first — in priority order, with effort and expected impact. No pitch deck.' }) {
  return (
    <section className="zx-cta2">
      <div className="zx-container">
        <div className="zx-cta2__panel">
          <span className="zx-cta2__grain" aria-hidden="true" />
          <div className="zx-cta2__copy">
            <span className="zx-cta2__eyebrow"><i aria-hidden="true" />Free consultation</span>
            <h2 className="zx-cta2__h2">
              {title.split(' ').map((w, n) => (
                <span key={n} style={{ animationDelay: (n * 0.05) + 's' }}>{w}&nbsp;</span>
              ))}
            </h2>
            <p className="zx-cta2__lede">{body}</p>
            <div className="zx-cta2__facts">
              <span>30 minutes</span>
              <span>Written summary</span>
              <span>48h proposal</span>
              <span>No obligation</span>
            </div>
          </div>
          <div className="zx-cta2__side">
            <button type="button" className="zx-cta2__btn" onClick={() => go('contact')} data-magnetic>
              Book a Free Consultation
              <svg width="17" height="17" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8h9M8.5 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
            <button type="button" className="zx-cta2__ghost" onClick={() => go('work')}>Explore Our Services</button>
            <p className="zx-cta2__meta">Hyderabad, India — working with clients worldwide.<br />Replies within one working day.</p>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { CTAFinale });