// Final CTA / Contact — deepest indigo, gold-framed band. Footer chrome below.
function FinalCTA() {
  return (
    <section id="contact" className="site-deep" style={{ position: 'relative', padding: '0 var(--fs-gutter)' }}>
      <div className="wrap" style={{ padding: 'var(--fs-space-9) 0' }}>
        <Reveal>
          <div style={{ position: 'relative', border: '1px solid rgba(212,175,55,0.55)', borderRadius: 'var(--fs-radius-md)', padding: 'clamp(40px, 6vw, 72px)', background: 'rgba(26,22,53,0.4)', overflow: 'hidden' }}>
            <div className="crop-ticks" style={{ inset: 18 }}><span /><span /><span /><span /></div>
            <div style={{ position: 'relative', zIndex: 2, textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
              <Eyebrow dark style={{ justifyContent: 'center' }}>Engagement</Eyebrow>
              <h2 style={{
                fontFamily: 'var(--fs-font-display)', fontWeight: 700, fontSize: 'var(--fs-step-h1)',
                lineHeight: 1.12, letterSpacing: '-0.015em', color: 'var(--fs-pearl)', margin: '20px 0 0', textWrap: 'balance',
              }}>
                Stop the bleeding. Secure the architecture.
              </h2>
              <p style={{
                fontFamily: 'var(--fs-font-body)', fontSize: 'var(--fs-step-body-lg)', lineHeight: 1.7,
                color: 'var(--fs-indigo-200)', margin: '18px 0 0',
              }}>
                Schedule a confidential Triage Call.
              </p>
              <div style={{ marginTop: 36, display: 'flex', justifyContent: 'center' }}>
                <Button variant="primary" size="lg" href="https://ca8.link/HUT" target="_blank" rel="noopener noreferrer" icon="phone">Book Triage Call</Button>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--fs-ink)', padding: '40px var(--fs-gutter)' }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 20 }}>
        <a className="logo-lockup on-dark" href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'auto' }); }}>
          <img className="mark" src="assets/monogram.svg" alt="" />
          <span>
            <span className="logo-word" style={{ fontSize: 17 }}>Franz Schöning</span>
            <span className="logo-byline" style={{ display: 'block' }}>Principal Enterprise Architect</span>
          </span>
        </a>
        <DataTag style={{ color: 'var(--fs-indigo-300)' }}>© 2026 SCHONING.COM &middot; ENTERPRISE ARCHITECTURE & IT TURNAROUND ADVISORY</DataTag>
      </div>
    </footer>
  );
}
Object.assign(window, { FinalCTA, Footer });