// Page CGP V3 — "Carte d'identité" centrée avec piliers d'expertise
// Photo ronde, nom centré, 3 domaines d'expertise
// 794 × 1123 px

const OFAdvisorV3 = ({
  name = "Antoine Mercier",
  role = "Conseiller en gestion de patrimoine indépendant",
  bio = "Diplômé du CESB Patrimoine et certifié AMF, Antoine accompagne depuis 14 ans des dirigeants, professions libérales et cadres supérieurs dans la structuration de leur patrimoine — protection du capital, optimisation fiscale et transmission.",
  email = "antoine.mercier@wiztax.fr",
  phone = "+33 1 00 00 00 00",
  address = "12 rue de la Paix · 75002 Paris",
  orias = "23 001 234",
  cif = "F000123",
  ams = "AMF GP-23-0001",
  pillars = [
  {
    title: "Investissements",
    desc: "Allocations d'actifs, placements financiers, immobiliers, etc."
  },
  {
    title: "Optimisation fiscale",
    desc: "Girardin, PER, FCPI, immobilier locatif et solutions sur mesure."
  },
  {
    title: "Transmission",
    desc: "Donations, démembrement, pactes Dutreil, assurance-vie."
  }]

}) => {
  const styles = {
    page: {
      width: 794, height: 1123,
      background: '#FFFFFF',
      fontFamily: '"Poppins", sans-serif',
      color: '#1A1A1A',
      display: 'flex', flexDirection: 'column',
      boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
      overflow: 'hidden',
      position: 'relative'
    },
    // Top blue band — half height with photo overlapping
    blueBand: {
      background: '#3340FA',
      height: 280,
      padding: '32px 56px 0',
      display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
      position: 'relative'
    },
    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)'
    },
    eyebrowOnBlue: {
      position: 'absolute',
      top: 100, left: 0, right: 0,
      textAlign: 'center',
      fontSize: 12, fontWeight: 700, letterSpacing: '3px',
      textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)'
    },
    // Photo — overlaps the band
    photoWrap: {
      position: 'absolute',
      top: 160, left: '50%', transform: 'translateX(-50%)',
      width: 200, height: 200, borderRadius: '50%',
      background: 'linear-gradient(135deg, #E8E9FF 0%, #C9CCFB 100%)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      border: '8px solid #fff',
      boxShadow: '0 12px 32px rgba(51,64,250,0.25)',
      zIndex: 2,
      overflow: 'hidden'
    },
    photoInitial: {
      fontSize: 84, fontWeight: 700, color: '#3340FA',
      letterSpacing: '-3px', opacity: 0.55
    },
    photoBadge: {
      position: 'absolute', bottom: 14, left: '50%', transform: 'translateX(-50%)',
      background: '#3340FA', color: '#fff',
      padding: '4px 12px', borderRadius: 999,
      fontSize: 9, fontWeight: 700, letterSpacing: '0.12em',
      textTransform: 'uppercase'
    },
    // Identity block
    identity: {
      paddingTop: 132,
      textAlign: 'center',
      padding: '132px 56px 0'
    },
    name: {
      fontSize: 44, fontWeight: 700, lineHeight: 1.02,
      letterSpacing: '-1.8px', margin: 0
    },
    role: {
      fontSize: 14, color: '#555555', marginTop: 8,
      lineHeight: 1.5, fontWeight: 500
    },
    bio: {
      fontSize: 13, lineHeight: 1.6, color: '#1A1A1A',
      maxWidth: 540, margin: '20px auto 0'
    },
    // Pillars
    pillars: {
      padding: '32px 56px 0',
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14
    },
    pillar: {
      background: '#fff',
      border: '1px solid #E8E9FF',
      borderRadius: 14,
      padding: '18px 18px 20px',
      boxShadow: '0 8px 24px rgba(0,0,0,0.06)',
      display: 'flex', flexDirection: 'column', gap: 10
    },
    pillarNum: {
      fontSize: 13, fontWeight: 700, color: '#3340FA',
      letterSpacing: '2px',
      fontVariantNumeric: 'tabular-nums'
    },
    pillarTitle: {
      fontSize: 15, fontWeight: 700, letterSpacing: '-0.3px',
      color: '#1A1A1A', lineHeight: 1.2
    },
    pillarDesc: {
      fontSize: 11.5, lineHeight: 1.5, color: '#555'
    },
    // Bottom card row
    bottomBlock: {
      marginTop: 'auto',
      padding: '24px 56px 16px',
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14
    },
    contactCard: {
      background: '#3340FA',
      color: '#fff',
      borderRadius: 16,
      padding: '20px 22px'
    },
    contactLabel: {
      fontSize: 10.5, fontWeight: 700, letterSpacing: '2px',
      textTransform: 'uppercase', color: 'rgba(255,255,255,0.75)',
      marginBottom: 12
    },
    contactList: {
      margin: 0, padding: 0, listStyle: 'none',
      display: 'flex', flexDirection: 'column', gap: 8
    },
    contactRow: {
      display: 'flex', alignItems: 'center', gap: 10,
      fontSize: 12, fontWeight: 500
    },
    contactIcon: {
      width: 22, height: 22, borderRadius: 6,
      background: 'rgba(255,255,255,0.16)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0
    },
    regCard: {
      background: '#E8E9FF',
      borderRadius: 16,
      padding: '20px 22px'
    },
    regLabel: {
      fontSize: 10.5, fontWeight: 700, letterSpacing: '2px',
      textTransform: 'uppercase', color: '#3340FA',
      marginBottom: 12
    },
    regList: {
      margin: 0, padding: 0, listStyle: 'none',
      display: 'flex', flexDirection: 'column', gap: 8
    },
    regRow: {
      display: 'flex', justifyContent: 'space-between',
      fontSize: 11.5, alignItems: 'baseline',
      paddingBottom: 6, borderBottom: '1px solid rgba(51,64,250,0.15)'
    },
    regRowLast: { borderBottom: 'none', paddingBottom: 0 },
    regKey: {
      fontWeight: 700, color: '#3340FA',
      letterSpacing: '0.06em', textTransform: 'uppercase',
      fontSize: 10.5
    },
    regVal: {
      fontWeight: 600, color: '#1A1A1A'
    },
    // Footer
    footer: {
      borderTop: '1px solid #E2E8F0',
      padding: '10px 56px 14px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontSize: 10, color: '#999'
    },
    footerLogo: {
      display: 'flex', alignItems: 'center', gap: 8,
      fontSize: 11, fontWeight: 700, color: '#1A1A1A'
    },
    footerMark: {
      width: 22, height: 22, background: '#3340FA',
      borderRadius: 6, color: '#fff',
      fontSize: 11, fontWeight: 700,
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    }
  };

  const initials = name.split(' ').map((w) => w[0]).join('').slice(0, 2);

  return (
    <div style={styles.page}>
      {/* Blue band */}
      <div style={styles.blueBand}>
        <div style={styles.logo}>
          <div style={styles.logoMark}>W</div>
          CABINET
        </div>
        <div style={styles.pagePill}>Votre conseiller</div>
        <div style={styles.eyebrowOnBlue}>Conseiller dédié</div>
      </div>

      {/* Photo overlapping */}
      <div style={styles.photoWrap}>
        <span style={styles.photoInitial}>{initials}</span>
        <div style={styles.photoBadge}>Photo</div>
      </div>

      {/* Identity */}
      <div style={styles.identity}>
        <h1 style={styles.name}>{name}</h1>
        <p style={styles.role}>{role}</p>
        <p style={styles.bio}>{bio}</p>
      </div>

      {/* Pillars */}
      <div style={styles.pillars}>
        {pillars.map((p, i) =>
        <div key={i} style={styles.pillar}>
            <div style={styles.pillarNum}>0{i + 1}</div>
            <div style={styles.pillarTitle}>{p.title}</div>
            <div style={styles.pillarDesc}>{p.desc}</div>
          </div>
        )}
      </div>

      {/* Contact + Reglementaire */}
      <div style={{ ...styles.bottomBlock, margin: "161px 0px 0px" }}>
        <div style={styles.contactCard}>
          <div style={styles.contactLabel}>Coordonnées</div>
          <ul style={styles.contactList}>
            <li style={styles.contactRow}>
              <span style={styles.contactIcon}>
                <Icon name="phone" size={11} stroke={2} color="#fff" />
              </span>
              {phone}
            </li>
            <li style={styles.contactRow}>
              <span style={styles.contactIcon}>
                <Icon name="doc" size={11} stroke={2} color="#fff" />
              </span>
              {email}
            </li>
            <li style={styles.contactRow}>
              <span style={styles.contactIcon}>
                <Icon name="building" size={11} stroke={2} color="#fff" />
              </span>
              {address}
            </li>
          </ul>
        </div>
        <div style={styles.regCard}>
          <div style={styles.regLabel}>Numéros réglementaires</div>
          <ul style={styles.regList}>
            <li style={styles.regRow}>
              <span style={styles.regKey}>Orias</span>
              <span style={styles.regVal}>n° {orias}</span>
            </li>
            <li style={styles.regRow}>
              <span style={styles.regKey}>CIF</span>
              <span style={styles.regVal}>n° {cif}</span>
            </li>
            <li style={{ ...styles.regRow, ...styles.regRowLast }}>
              <span style={styles.regKey}>AMF</span>
              <span style={styles.regVal}>{ams}</span>
            </li>
          </ul>
        </div>
      </div>

      {/* Footer supprimé — logo déjà présent en haut */}
    </div>);

};

window.OFAdvisorV3 = OFAdvisorV3;