// Page de garde V3 — Split vertical éditorial avec sommaire
// Gauche bleue (titre), droite blanche (sommaire des solutions + client)
// 794 × 1123 px

const OFCoverV3 = ({
  title = "Vos leviers d'optimisation fiscale",
  client = "Prénom NOM",
  edition = "Édition 2026",
  toc = [
  { num: '01', name: 'Votre simulation 2026', tag: 'Diagnostic personnalisé' },
  { num: '02', name: 'Leviers financiers', tag: 'Catégorie' },
  { num: '03', name: 'Leviers immobiliers', tag: 'Catégorie' },
  { num: '04', name: 'Autres', tag: 'Catégorie' }]

}) => {
  const styles = {
    page: {
      width: 794, height: 1123,
      background: '#FFFFFF',
      fontFamily: '"Poppins", sans-serif',
      color: '#1A1A1A',
      display: 'grid', gridTemplateColumns: '1fr 1fr',
      boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
      overflow: 'hidden',
      position: 'relative'
    },
    // LEFT — bleu signature
    left: {
      background: '#3340FA',
      color: '#fff',
      padding: '40px 36px',
      display: 'flex', flexDirection: 'column',
      position: 'relative'
    },
    logo: {
      display: 'flex', alignItems: 'center', gap: 10,
      fontWeight: 700, fontSize: 15, color: '#fff'
    },
    logoMark: {
      width: 26, height: 26, borderRadius: 7, background: '#fff',
      color: '#3340FA', fontSize: 13, fontWeight: 700,
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    },
    leftHero: {
      marginTop: 'auto', marginBottom: 36
    },
    eyebrow: {
      fontSize: 12, fontWeight: 700, letterSpacing: '2px',
      textTransform: 'uppercase', color: '#fff',
      marginBottom: 22,
      display: 'flex', alignItems: 'center', gap: 12
    },
    eyebrowLine: { width: 28, height: 1, background: '#fff' },
    title: {
      fontSize: 50, fontWeight: 700, lineHeight: 0.98,
      letterSpacing: '-2px', color: '#fff',
      margin: 0
    },
    leftFooter: {
      borderTop: '1px solid rgba(255,255,255,0.25)',
      paddingTop: 18,
      display: 'flex', flexDirection: 'column', gap: 4,
      fontSize: 11, color: 'rgba(255,255,255,0.85)'
    },
    leftFooterStrong: {
      fontSize: 12, fontWeight: 700, color: '#fff',
      letterSpacing: '0.04em'
    },
    // RIGHT — blanc
    right: {
      padding: '40px 36px',
      display: 'flex', flexDirection: 'column'
    },
    rightTop: {
      display: 'flex', justifyContent: 'flex-end'
    },
    metaPill: {
      display: 'flex', alignItems: 'center', gap: 8,
      background: '#E8E9FF', color: '#3340FA',
      borderRadius: 999, padding: '6px 14px',
      fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase'
    },
    sectionEyebrow: {
      fontSize: 11, fontWeight: 700, letterSpacing: '2px',
      textTransform: 'uppercase', color: '#3340FA',
      marginBottom: 16,
      display: 'flex', alignItems: 'center', gap: 12
    },
    // TOC
    tocBlock: { marginTop: 56 },
    tocList: {
      margin: 0, padding: 0, listStyle: 'none',
      display: 'flex', flexDirection: 'column'
    },
    tocItem: {
      borderTop: '1px solid #E2E8F0',
      padding: '20px 0',
      display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 18,
      alignItems: 'center'
    },
    tocItemLast: { borderBottom: '1px solid #E2E8F0' },
    tocNum: {
      fontSize: 32, fontWeight: 700, color: '#3340FA',
      letterSpacing: '-1px', lineHeight: 1,
      fontVariantNumeric: 'tabular-nums'
    },
    tocBody: {
      display: 'flex', flexDirection: 'column', gap: 4
    },
    tocName: {
      fontSize: 17, fontWeight: 700, letterSpacing: '-0.4px',
      color: '#1A1A1A'
    },
    tocTag: {
      fontSize: 10.5, fontWeight: 700, letterSpacing: '1.5px',
      textTransform: 'uppercase', color: '#3340FA'
    },
    // Client card
    clientCard: {
      marginTop: 'auto',
      background: '#E8E9FF',
      borderRadius: 16,
      padding: '20px 22px',
      display: 'flex', flexDirection: 'column', gap: 4
    },
    clientLabel: {
      fontSize: 10.5, fontWeight: 700, letterSpacing: '2px',
      textTransform: 'uppercase', color: '#3340FA',
      marginBottom: 6
    },
    clientName: {
      fontSize: 24, fontWeight: 700, lineHeight: 1.05,
      letterSpacing: '-0.6px', color: '#1A1A1A'
    },
    clientMeta: {
      fontSize: 12, color: '#555', marginTop: 6,
      display: 'flex', justifyContent: 'space-between'
    },
    clientEdition: {
      fontWeight: 600, color: '#3340FA'
    }
  };

  return (
    <div style={styles.page}>
      {/* LEFT */}
      <div style={styles.left}>
        <div style={styles.logo}>
          <div style={styles.logoMark}>W</div>
          CABINET
        </div>

        <div style={styles.leftHero}>
          <div style={styles.eyebrow}>
            <span style={styles.eyebrowLine} />
            Stratégie 2026
          </div>
          <h1 style={styles.title}>{title}</h1>
        </div>

        <div style={styles.leftFooter}>
          <div style={styles.leftFooterStrong}>contact@wiztax.fr</div>
          <div>+33 1 00 00 00 00 
contact@agence.fr
</div>
          <div style={{ marginTop: 8 }}>12 rue de la Paix · 75002 Paris</div>
        </div>
      </div>

      {/* RIGHT */}
      <div style={styles.right}>
        <div style={styles.rightTop}>
          <div style={styles.metaPill}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#3340FA' }} />
            Confidentiel
          </div>
        </div>

        <div style={styles.tocBlock}>
          <div style={styles.sectionEyebrow}>
            <span style={{ width: 24, height: 1, background: '#3340FA' }} />
            Sommaire
          </div>
          <ul style={styles.tocList}>
            {toc.map((it, i) => <li key={it.num}
              style={i === toc.length - 1 ?
              { ...styles.tocItem, ...styles.tocItemLast } :
              styles.tocItem}>
              
                <div style={styles.tocNum}>{it.num}</div>
                <div style={styles.tocBody}>
                  <span style={styles.tocTag}>{it.tag}</span>
                  <span style={styles.tocName}>{it.name}</span>
                </div>
              </li>
            )}
          </ul>
        </div>

        <div style={styles.clientCard}>
          <div style={styles.clientLabel}>Préparé pour</div>
          <div style={styles.clientName}>{client}</div>
          <div style={styles.clientMeta}>
            <span>4 chapitres · 6 pages</span>
            <span style={styles.clientEdition}>{edition}</span>
          </div>
        </div>
      </div>
    </div>);

};

window.OFCoverV3 = OFCoverV3;