// Final CTA + Footer
function WhatNext() {
  const steps = [
    { k: '01', t: 'Reply within 24h', d: 'A real person — Aaron or Paul, not a sequence.' },
    { k: '02', t: '30-min demo', d: 'Bring your site or a customer you wish you had ten more of.' },
    { k: '03', t: 'Tailored plan', d: "The exact signals & outreach we’d run for you." },
  ];
  return (
    <div>
      <div className="upper-mono" style={{
        color: 'var(--fg-mute)', marginBottom: 20, display: 'inline-flex',
        alignItems: 'center', gap: 12,
      }}>
        <span style={{ height: 1, width: 24, background: 'var(--rule-strong)' }} />
        What happens next
        <span style={{ height: 1, width: 24, background: 'var(--rule-strong)' }} />
      </div>
      <div style={{
        display: 'flex', justifyContent: 'center', gap: 28, flexWrap: 'wrap',
        maxWidth: 780, margin: '0 auto',
      }}>
        {steps.map((s) => (
          <div key={s.k} style={{ flex: '1 1 200px', maxWidth: 230, textAlign: 'left' }}>
            <div className="upper-mono" style={{ color: 'var(--signal)', marginBottom: 8 }}>{s.k}</div>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, marginBottom: 5,
            }}>{s.t}</div>
            <div style={{ color: 'var(--fg-mute)', fontSize: 13, lineHeight: 1.5 }}>{s.d}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

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={{ marginTop: 8 }}>
          <ContactForm />
        </Reveal>
        <Reveal delay={340} style={{ marginTop: 22 }}>
          <a href="#how" className="ulink" style={{
            fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.04em',
            color: 'var(--fg-mute)',
          }}>
            Or see an example campaign →
          </a>
        </Reveal>
        <Reveal delay={440} style={{ marginTop: 56 }}>
          <WhatNext />
        </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' }}>
          {[{ l: 'Privacy', h: '/privacy' }, { l: 'Terms', h: '/terms' }, { l: 'Contact', h: '#book' }].map(({ l, h }) => (
            <a key={l} href={h} 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;