// FinalCTA — "Let's Talk About Your Operation." Dark, centered, with trust signals.
const FinalCTA = () => {
  const mob = useIsMobile();
  return (
    <section
      id="final-cta"
      data-screen-label="07 Final CTA"
      style={{
        position: 'relative', overflow: 'hidden',
        background: '#1C2540', color: '#FFFFFF',
        padding: mob ? '64px 20px 64px' : '140px 32px 140px',
      }}
    >
      {/* Faint orbit echo in the background */}
      <svg viewBox="-1000 -400 2000 800" preserveAspectRatio="xMidYMid slice"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity: 0.9 }}
        aria-hidden>
        <ellipse cx="0" cy="0" rx="820" ry="220" fill="none" stroke="rgba(238,232,223,0.08)" strokeWidth="1" vectorEffect="non-scaling-stroke" transform="rotate(-8)" />
        <ellipse cx="0" cy="0" rx="620" ry="380" fill="none" stroke="rgba(238,232,223,0.08)" strokeWidth="1" vectorEffect="non-scaling-stroke" transform="rotate(22)" />
        <ellipse cx="0" cy="0" rx="480" ry="480" fill="none" stroke="rgba(238,232,223,0.08)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
      </svg>

      <div className="wrap" style={{
        position: 'relative', zIndex: 1,
        maxWidth: 880, margin: '0 auto', textAlign: 'center',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 32,
      }}>
        <div className="reveal" style={{
          fontSize: 11, fontWeight: 700, letterSpacing: '0.22em',
          textTransform: 'uppercase', color: '#C4BCB0',
          display: 'inline-flex', alignItems: 'center', gap: 12,
        }}>
          <span style={{ width: 28, height: 1, background: 'rgba(196,188,176,0.5)' }} />
          Get started
          <span style={{ width: 28, height: 1, background: 'rgba(196,188,176,0.5)' }} />
        </div>

        <h2 className="reveal" style={{
          margin: 0, fontFamily: 'Clash Display, General Sans, system-ui',
          fontSize: 'clamp(44px, 6vw, 88px)',
          fontWeight: 700, lineHeight: 1.0,
          letterSpacing: '-0.035em', color: '#FFFFFF',
          textWrap: 'balance',
        }}>
          Let's Talk About<br />Your Operation.
        </h2>

        <p className="reveal" style={{
          margin: '0 auto', maxWidth: 600,
          fontSize: 'clamp(17px, 1.4vw, 20px)',
          lineHeight: 1.6, color: 'rgba(255,255,255,0.75)',
          transitionDelay: '0.1s',
        }}>
          Tell me what's not working. I'll tell you exactly what I'd build and
          whether it's a fit. No commitment required.
        </p>

        <div className="reveal" style={{ marginTop: 8, transitionDelay: '0.15s' }}>
          <CTA size="lg" href="https://calendly.com/contact-andririvera">See if it's a fit</CTA>
        </div>

        <div className="reveal" style={{
          marginTop: 24, display: 'flex', gap: mob ? 8 : 0,
          flexWrap: 'wrap', flexDirection: mob ? 'column' : 'row',
          justifyContent: 'center', alignItems: 'center',
          transitionDelay: '0.2s',
        }}>
          {[
            'Free 30-min call',
            'No commitment',
            'Straight answer on fit',
          ].map((t, i, arr) => (
            <React.Fragment key={t}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: mob ? '4px 0' : '8px 18px',
                fontSize: 13, fontWeight: 600, color: 'rgba(238,232,223,0.8)',
                letterSpacing: '0.02em',
              }}>
                <span style={{ color: '#C8874A', fontSize: 14 }}>✓</span>
                {t}
              </div>
              {!mob && i < arr.length - 1 && (
                <span style={{ width: 1, height: 14, background: 'rgba(238,232,223,0.18)' }} />
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
};

window.FinalCTA = FinalCTA;