// Page intercalaire — minimale
// 794 × 1123 px · design system OF
// Juste un titre de section centré sur fond bleu

const OFDivider = ({
  label = "Leviers financiers",
  num = "01"
}) => {
  const styles = {
    page: {
      width: 794, height: 1123,
      background: '#3340FA',
      fontFamily: '"Poppins", sans-serif',
      color: '#fff',
      display: 'flex', flexDirection: 'column',
      boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
      overflow: 'hidden',
      position: 'relative'
    },
    header: {
      padding: '36px 56px 0',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between'
    },
    logo: {
      display: 'flex', alignItems: 'center', gap: 10,
      fontWeight: 700, fontSize: 14, color: '#fff'
    },
    logoMark: {
      width: 22, height: 22, borderRadius: 6, background: '#fff',
      color: '#3340FA', fontSize: 11, fontWeight: 700,
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    },
    pagePill: {
      background: 'rgba(255,255,255,0.16)', color: '#fff',
      padding: '6px 14px', borderRadius: 999,
      fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
      border: '1px solid rgba(255,255,255,0.25)'
    },
    center: {
      flex: 1,
      display: 'flex', flexDirection: 'column',
      alignItems: 'flex-start', justifyContent: 'center',
      padding: '0 56px'
    },
    num: {
      fontSize: 22, fontWeight: 700, letterSpacing: '4px',
      color: 'rgba(255,255,255,0.55)',
      marginBottom: 24,
      fontVariantNumeric: 'tabular-nums'
    },
    eyebrow: {
      fontSize: 13, fontWeight: 700, letterSpacing: '3px',
      textTransform: 'uppercase', color: 'rgba(255,255,255,0.78)',
      marginBottom: 18,
      display: 'flex', alignItems: 'center', gap: 14
    },
    eyebrowLine: { width: 36, height: 1, background: 'rgba(255,255,255,0.5)' },
    title: {
      fontSize: 84, fontWeight: 700, lineHeight: 0.96,
      letterSpacing: '-3px', margin: 0, color: '#fff'
    },
    footer: {
      padding: '0 56px 36px',
      fontSize: 11, color: 'rgba(255,255,255,0.65)',
      letterSpacing: '0.1em', textTransform: 'uppercase'
    }
  };

  return (
    <div style={styles.page}>
      <div style={styles.header}>
        <div style={styles.logo}>
          <div style={styles.logoMark}>W</div>
          CABINET
        </div>
        <div style={styles.pagePill}>LEVIERS</div>
      </div>

      <div style={styles.center}>
        <div style={styles.num}>— {num}</div>
        <div style={styles.eyebrow}>
          <span style={styles.eyebrowLine} />
          Catégorie
        </div>
        <h1 style={styles.title}>{label}</h1>
      </div>

      <div style={styles.footer}>ÉDITION 2026</div>
    </div>);

};

window.OFDivider = OFDivider;