const finalCtaStyles = {
  wrap: { paddingTop: 100, paddingBottom: 100, position: 'relative', overflow: 'hidden' },
  bgRadial: {
    position: 'absolute', top: '50%', left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 1100, height: 700,
    background: 'radial-gradient(ellipse at center, rgba(201,169,110,0.10), transparent 65%)',
    pointerEvents: 'none',
  },
  inner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 },
  card: {
    background: 'var(--bg-surface-2)',
    border: '1px solid var(--border-accent)',
    borderRadius: 24,
    padding: 'clamp(48px, 7vw, 88px) clamp(32px, 5vw, 72px)',
    position: 'relative', overflow: 'hidden',
    boxShadow: '0 0 96px rgba(201,169,110,0.10)',
    textAlign: 'center',
  },
  topHairline: {
    position: 'absolute', top: 0, left: 0, right: 0, height: 1,
    background: 'linear-gradient(90deg, transparent, rgba(201,169,110,0.6), transparent)',
  },
  monogramBg: {
    position: 'absolute',
    top: '50%', left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 560, height: 560,
    opacity: 0.05,
    pointerEvents: 'none',
  },
  monoTag: {
    fontFamily: 'var(--font-mono)',
    fontSize: 11, fontWeight: 700,
    color: 'var(--brand-gold)', letterSpacing: '0.18em',
    textTransform: 'uppercase',
    marginBottom: 24,
    display: 'inline-flex', alignItems: 'center', gap: 8,
  },
  monoTagBar: {
    width: 24, height: 1, background: 'var(--brand-gold)',
  },
  headline: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(34px, 5.2vw, 64px)',
    fontWeight: 700,
    letterSpacing: '-0.035em',
    lineHeight: 1.05,
    color: 'var(--fg-1)',
    margin: '0 auto 22px',
    maxWidth: 800,
    textWrap: 'balance',
  },
  sub: {
    fontSize: 17, lineHeight: 1.65, color: 'var(--fg-2)',
    margin: '0 auto 36px',
    maxWidth: 540,
  },
  ctaRow: {
    display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center',
  },
  metaRow: {
    marginTop: 40, paddingTop: 32,
    borderTop: '1px solid var(--border-subtle)',
    display: 'flex', justifyContent: 'center', gap: 36, flexWrap: 'wrap',
    fontFamily: 'var(--font-mono)', fontSize: 11,
    color: 'var(--fg-3)', letterSpacing: '0.1em',
    textTransform: 'uppercase',
  },
  metaItem: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
  },
};

function FinalCTA() {
  const scrollToForm = (e) => {
    e?.preventDefault();
    document.getElementById('contato')?.scrollIntoView({ behavior: 'smooth' });
  };
  return (
    <section style={finalCtaStyles.wrap}>
      <div style={finalCtaStyles.bgRadial}></div>
      <div style={finalCtaStyles.inner}>
        <div data-cta-card style={finalCtaStyles.card}>
          <div style={finalCtaStyles.topHairline}></div>
          <img src="assets/logo-bear-gold.svg" className="cta-monogram" style={finalCtaStyles.monogramBg} alt="" />

          <div style={finalCtaStyles.monoTag}>
            <span style={finalCtaStyles.monoTagBar}></span>
            // ÚLTIMO PASSO
          </div>

          <h2 style={finalCtaStyles.headline}>
            Pronto para automatizar<br />
            sua empresa <span className="bb-gold">com IA?</span>
          </h2>

          <p style={finalCtaStyles.sub}>
            Conversa de 30 minutos. Diagnóstico técnico em 48h.
            Sem deck. Sem compromisso.
          </p>

          <div style={finalCtaStyles.ctaRow}>
            <button className="btn btn-lg btn-gold" onClick={scrollToForm}>
              Solicitar diagnóstico <IconArrowRight size={16} />
            </button>
          </div>

          <div style={finalCtaStyles.metaRow}>
            <span style={finalCtaStyles.metaItem}>
              <IconCheckCircle size={13} /> Diagnóstico gratuito
            </span>
            <span style={finalCtaStyles.metaItem}>
              <IconUsers size={13} /> Atendimento direto
            </span>
            <span style={finalCtaStyles.metaItem}>
              <IconShield size={13} /> Sem compromisso
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FinalCTA });