function FinalCTA() {
  return (
    <section id="cta" style={{
      padding: '120px 48px',
      position: 'relative', overflow: 'hidden', textAlign: 'center'
    }}>
      <motion.div aria-hidden
      animate={{ scaleX: [0.8, 1.1, 0.8] }}
      transition={{ duration: 9, repeat: Infinity, ease: 'easeInOut' }}
      style={{
        position: 'absolute', top: 80, left: '8%', right: '8%', height: 1,
        background: 'linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.4), transparent)'
      }} />

      <motion.div aria-hidden
      animate={{ scaleX: [0.8, 1.1, 0.8] }}
      transition={{ duration: 9, repeat: Infinity, ease: 'easeInOut' }}
      style={{
        position: 'absolute', bottom: 80, left: '8%', right: '8%', height: 1,
        background: 'linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.4), transparent)'
      }} />

      <div className="container-narrow" style={{ position: 'relative', zIndex: 1 }}>
        <motion.div {...fadeUp(0)} style={{ display: 'flex', justifyContent: 'center', marginBottom: 32 }}>
          <Wordmark size={14} />
        </motion.div>

        <motion.div {...fadeUp(0.06)} style={{ marginBottom: 16 }}>
          <span className="eyebrow" style={{ color: 'var(--muted)' }}>07 · NEXT STEP</span>
        </motion.div>

        <motion.h2 {...fadeUp(0.1)} className="h1" style={{ marginBottom: 18 }}>
          FIND OUT WHERE YOUR TEAM<br />
          IS LOSING THE MOST TIME.
        </motion.h2>

        <motion.div {...fadeUp(0.18)} style={{ marginBottom: 36 }}>
          <span className="accent-it" style={{
            fontSize: 'clamp(20px, 2.6vw, 28px)', lineHeight: 1.3, fontWeight: 400
          }}>20-minute call. No pitch deck.</span>
        </motion.div>

        <motion.p {...fadeUp(0.24)} className="body-muted" style={{ maxWidth: 520, margin: '0 auto 40px' }}>
          A real conversation about what's slowing your team down. If it's not a fit,
          you'll know before the call is over.
        </motion.p>

        <motion.div {...fadeUp(0.3)} style={{
          display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 14
        }}>
          <a href={CALENDLY_URL} target="_blank" rel="noopener noreferrer" className="btn"
          style={{ padding: '18px 30px', fontSize: 11 }}>
            See if you're a good fit <span style={{ fontWeight: 400 }}>{'→'}</span>
          </a>
          <span className="body-muted" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase' }}>

          </span>
        </motion.div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer style={{
      padding: '36px 28px',
      borderTop: '1px solid var(--border)',
      display: 'flex', justifyContent: 'space-between',
      alignItems: 'center', flexWrap: 'wrap', gap: 16
    }}>
      <Wordmark size={11} dim />
      <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
        <a href={CALENDLY_URL} target="_blank" rel="noopener noreferrer"
        style={{
          fontFamily: "'Space Mono', monospace", fontWeight: 700,
          fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: 'var(--muted)', textDecoration: 'none'
        }}
        onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent)'}
        onMouseLeave={(e) => e.currentTarget.style.color = 'var(--muted)'}>Contact</a>
        <span style={{
          fontFamily: "'Space Mono', monospace", fontSize: 10,
          letterSpacing: '0.16em', textTransform: 'uppercase',
          color: 'var(--muted-2)'
        }}>{'©'} 2026 VENTUREUP SOLUTIONS LLC</span>
      </div>
    </footer>);

}

Object.assign(window, { FinalCTA, Footer });