// CTA.jsx — bloc de conclusion.

const ctaStyles = {
  section: {
    padding: '120px 0',
    background: 'var(--ink-900)',
    color: 'var(--paper)',
    position: 'relative',
    overflow: 'hidden',
  },
  pattern: {
    position: 'absolute',
    inset: 0,
    backgroundSize: '80px',
    opacity: 0.06,
    filter: 'invert(1)',
    pointerEvents: 'none',
  },
  inner: { position: 'relative', textAlign: 'center', maxWidth: 880, margin: '0 auto' },
  h2: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontWeight: 600,
    fontSize: 'clamp(40px, 6.5vw, 80px)',
    lineHeight: 1.02,
    letterSpacing: '-0.025em',
    margin: '0 0 28px',
    textWrap: 'balance',
  },
  accent: { color: 'var(--amber-500)' },
  sub: {
    fontSize: 19,
    lineHeight: 1.55,
    color: 'var(--mist-200)',
    maxWidth: 580,
    margin: '0 auto 40px',
  },
  ctas: { display: 'flex', justifyContent: 'center', gap: 16, flexWrap: 'wrap' },
  mailLink: {
    border: '1px solid var(--paper)',
    color: 'var(--paper)',
    background: 'transparent',
    padding: '12px 20px',
    minHeight: 44,
    display: 'inline-flex',
    alignItems: 'center',
    fontFamily: 'var(--font-body)',
    fontWeight: 500,
    fontSize: 16,
    cursor: 'pointer',
    backgroundImage: 'none',
  },
};

// `root` : même convention que Nav.jsx/Footer.jsx — préfixe relatif pour
// atteindre la racine du site (index.html) depuis la page courante.
// CTA est utilisé à la fois sur l'accueil (root='') et sur les pages
// d'offres (root='../'), d'où le besoin d'être conscient de sa profondeur.
const CTA = ({ onBookCall, root = '' }) => (
  <section style={ctaStyles.section} id="contact">
    <div
      style={{
        ...ctaStyles.pattern,
        backgroundImage: `url("${root}08_assets-marque/design-system/assets/pattern-hexgrid.svg")`,
      }}
    />
    <div className="b2a-container b2a-reveal" style={ctaStyles.inner}>
      <p className="b2a-eyebrow" style={{ color: 'var(--mist-200)', textAlign: 'center' }}>
        // Prêt quand vous l'êtes
      </p>
      <h2 style={ctaStyles.h2}>
        Arrêtez d'être le<br />
        <span style={ctaStyles.accent}>goulot d'étranglement</span>.
      </h2>
      <p style={ctaStyles.sub}>
        20 minutes, sans présentation PowerPoint. Apportez un processus qui vous fait
        perdre du temps. On vous dit pendant l'appel si un agent a du sens pour vous.
      </p>
      <div style={ctaStyles.ctas}>
        <button className="b2a-btn b2a-btn-primary" onClick={onBookCall}>
          Réserver un appel de 20 min <Icon name="arrow-right" size={16} />
        </button>
        <a href="mailto:hello@theb2atek.com" style={ctaStyles.mailLink} className="b2a-link">
          hello@theb2atek.com
        </a>
      </div>
    </div>
  </section>
);

window.CTA = CTA;