/* global React */
// Closing CTA — the one charcoal moment, with brand glow.
function CTASection({ t = {} }) {
  React.useEffect(() => { requestAnimationFrame(() => window.lucide && window.lucide.createIcons()); });

  return (
    <section style={{ background: 'var(--ink-900)', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(700px 320px at 50% 120%, color-mix(in srgb, var(--cyan-500) 22%, transparent), transparent 70%)',
      }} />
      <div style={{
        position: 'relative', maxWidth: '760px', margin: '0 auto', textAlign: 'center',
        padding: 'var(--section-y) var(--container-pad)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '24px',
      }}>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: '12px', fontWeight: 600, letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--cyan-400)' }}>
          Be first in line
        </span>
        <h2 style={{ fontSize: 'clamp(2rem,4vw,3.2rem)', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.05, color: '#fff' }}>
          Stop chasing exceptions.<br />Join the waitlist.
        </h2>
        <p style={{ fontSize: '17px', lineHeight: 1.6, color: 'var(--gray-300)', maxWidth: '46ch', margin: 0 }}>
          We're onboarding finance teams in waves. Be among the first to never chase an exception again.
        </p>
        <div style={{ marginTop: '8px', width: '100%', display: 'flex', justifyContent: 'center' }}>
          <WaitlistForm
            tone="dark"
            ctaLabel={t.ctaLabel || 'Join waitlist'}
            placeholder={t.placeholder || 'you@company.com'}
            requireBusiness={t.requireBusiness !== false}
            successMessage={t.successMessage || "You're on the list — we'll be in touch."}
            showCount={!!t.showCount}
          />
        </div>
      </div>
    </section>
  );
}
window.CTASection = CTASection;