/* FINAL CTA */

function CTA() {
  return (
    <section data-screen-label="16 CTA" id="cta" style={{ paddingTop: 64, paddingBottom: 48, position: 'relative', overflow: 'hidden' }}>
      <div className="container-tight" style={{ textAlign: 'center', position: 'relative', zIndex: 2 }}>
        <Reveal>
          <span className="eyebrow"><span className="dot"></span>Book a call</span>
        </Reveal>
        <Reveal delay={80}>
          <h2 className="h2" style={{ marginTop: 18 }}>
            Join 1500+ professionals<br />
            elevating their brand
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p className="lead" style={{ margin: '20px auto 0', textAlign: 'center' }}>
            Schedule a free discovery call with us to talk strategy, goals, and how we can help you grow.
          </p>
        </Reveal>

        {/* Mini logo strip */}
        <Reveal delay={200} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 40, marginTop: 32, color: 'var(--muted)', flexWrap: 'wrap' }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, letterSpacing: '0.16em', fontSize: 13 }}>CASA SLIM</span>
          <span style={{ fontFamily: 'Georgia, serif', fontWeight: 700, fontStyle: 'italic' }}>MUM&YOU</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#26B26A' }}></span>
            <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 600 }}>Grow Mechanics</span>
          </span>
        </Reveal>

        <Reveal delay={260} style={{ marginTop: 32, display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
          <BtnDark onClick={() => window.open('https://calendly.com/ecomlifters/30min', '_blank')}>Book an intro call</BtnDark>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-soft)' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--warn)' }}></span>
            Only 7 open slots available this month
          </span>
        </Reveal>
      </div>

      {/* Big wordmark watermark */}
      <Reveal delay={300} style={{
        marginTop: 56,
        textAlign: 'center',
        fontFamily: 'var(--font-sans)',
        fontWeight: 600,
        fontSize: 'clamp(80px, 18vw, 280px)',
        letterSpacing: '-0.04em',
        lineHeight: 0.9,
        color: 'transparent',
        WebkitTextStroke: '1px var(--hairline)',
        userSelect: 'none',
      }}>
        ecomlifters
      </Reveal>
    </section>
  );
}

window.CTA = CTA;