// Final CTA + Footer
function FinalCTA() {
  return (
    <section className="bp-section" id="book" style={{
      paddingTop: 'clamp(100px, 12vw, 180px)',
      paddingBottom: 'clamp(100px, 12vw, 180px)',
      position: 'relative', overflow: 'hidden',
      borderTop: '1px solid var(--rule)',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 60% 80% at 50% 30%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 70%)',
        pointerEvents: 'none',
      }} />
      <div className="container" style={{ textAlign: 'center', position: 'relative' }}>
        <Reveal>
          <SectionEyebrow num="08" label="Ready when you are" />
          <h2 className="t-display" style={{
            fontSize: 'clamp(2.5rem, 6vw, 5rem)',
            maxWidth: '20ch', margin: '0 auto 28px',
          }}>
            Ready to find more clients like{' '}
            <span className="t-italic" style={{ color: 'var(--signal)' }}>your best clients?</span>
          </h2>
        </Reveal>
        <Reveal delay={120} className="t-lede" style={{ maxWidth: '52ch', margin: '0 auto 40px', color: 'var(--fg-mute)' }}>
          Bring your website or one customer you wish you had ten more of. We'll show you how BetterPipe turns that context into signals, outreach, and pipeline.
        </Reveal>
        <Reveal delay={240} style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
          <a href="#" className="btn btn-primary" style={{ padding: '16px 24px', fontSize: 14 }}>
            Book a founder demo
            <ArrowRight />
          </a>
          <a href="#how" className="btn btn-ghost" style={{ padding: '16px 24px', fontSize: 14 }}>
            See an example campaign
            <ArrowRight />
          </a>
        </Reveal>
        <Reveal delay={380} style={{ marginTop: 48, display: 'inline-flex', alignItems: 'center', gap: 16, color: 'var(--fg-mute)' }}>
          <span className="upper-mono">Aaron & Paul · founders</span>
          <span style={{ height: 1, width: 30, background: 'var(--rule-strong)' }} />
          <span className="upper-mono">replies in 24h</span>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{
      borderTop: '1px solid var(--rule)',
      padding: '32px 0', background: 'var(--bg)',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        flexWrap: 'wrap', gap: 16,
      }}>
        <Wordmark />
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
          {['Privacy', 'Terms', 'Contact'].map(l => (
            <a key={l} href="#" className="ulink" style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '0.04em', color: 'var(--fg-mute)',
            }}>{l}</a>
          ))}
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-mute)', letterSpacing: '0.04em' }}>
          © BetterPipe · 2026
        </div>
      </div>
    </footer>
  );
}

window.FinalCTA = FinalCTA;
window.Footer = Footer;