// Page Contact / CTA finale — accompagnement
// 794 × 1123 px · design system OF
// Reprend la photo du conseiller (cohérent avec page CGP), gros titre, coordonnées

const OFContact = ({
  name = "Antoine Mercier",
  role = "Conseiller en gestion de patrimoine indépendant",
  email = "antoine.mercier@wiztax.fr",
  phone = "+33 1 00 00 00 00",
  address = "12 rue de la Paix · 75002 Paris",
  bookingUrl = "wiztax.fr/rendez-vous"
}) => {
  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'
    },
    // Header minimal
    header: {
      padding: '36px 56px 0',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between'
    },
    logo: {
      display: 'flex', alignItems: 'center', gap: 10,
      fontWeight: 700, fontSize: 14
    },
    logoMark: {
      width: 22, height: 22, borderRadius: 6, background: '#3340FA',
      color: '#fff', fontSize: 11, fontWeight: 700,
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    },
    pagePill: {
      background: '#E8E9FF', color: '#3340FA',
      padding: '6px 14px', borderRadius: 999,
      fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase'
    },
    // Hero — gros titre
    hero: {
      padding: '48px 56px 0',
      display: 'flex', flexDirection: 'column'
    },
    eyebrow: {
      fontSize: 12, fontWeight: 700, letterSpacing: '2px',
      textTransform: 'uppercase', color: '#3340FA',
      marginBottom: 16,
      display: 'flex', alignItems: 'center', gap: 14
    },
    eyebrowLine: { width: 36, height: 1, background: '#3340FA' },
    title: {
      fontSize: 50, fontWeight: 700, lineHeight: 1.0,
      letterSpacing: '-2px', margin: 0, maxWidth: 620
    },
    titleAccent: {
      color: '#3340FA'
    },
    subtitle: {
      fontSize: 15, lineHeight: 1.55, color: '#555',
      marginTop: 18, maxWidth: 540, fontWeight: 400
    },
    // Advisor card — photo + identity
    advisorBlock: {
      margin: '32px 56px 0',
      background: '#fff',
      border: '1px solid #E8E9FF',
      borderRadius: 20,
      padding: '20px 24px',
      display: 'grid', gridTemplateColumns: '96px 1fr', gap: 22,
      alignItems: 'center',
      boxShadow: '0 12px 32px rgba(0,0,0,0.05)'
    },
    photoWrap: {
      width: 96, height: 96, borderRadius: '50%',
      background: 'linear-gradient(135deg, #E8E9FF 0%, #C9CCFB 100%)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', overflow: 'hidden',
      border: '4px solid #fff',
      boxShadow: '0 8px 24px rgba(51,64,250,0.18)'
    },
    photoInitial: {
      fontSize: 38, fontWeight: 700, color: '#3340FA',
      letterSpacing: '-1.2px', opacity: 0.6
    },
    photoBadge: {
      position: 'absolute', bottom: 6, left: '50%', transform: 'translateX(-50%)',
      background: '#3340FA', color: '#fff',
      padding: '2px 8px', borderRadius: 999,
      fontSize: 7.5, fontWeight: 700, letterSpacing: '0.12em',
      textTransform: 'uppercase'
    },
    advisorIdentity: {
      display: 'flex', flexDirection: 'column', gap: 4
    },
    advisorEyebrow: {
      fontSize: 10.5, fontWeight: 700, letterSpacing: '2px',
      textTransform: 'uppercase', color: '#3340FA',
      marginBottom: 4
    },
    advisorName: {
      fontSize: 24, fontWeight: 700, lineHeight: 1.05,
      letterSpacing: '-0.9px', margin: 0
    },
    advisorRole: {
      fontSize: 12.5, color: '#555', lineHeight: 1.45,
      fontWeight: 500, marginTop: 4
    },
    // Slab bleu — CTA prendre RDV (pleine largeur, compact en bas de page)
    slab: {
      background: '#3340FA', color: '#fff',
      borderRadius: 0,
      marginTop: 'auto',
      padding: '24px 56px 28px',
      display: 'flex', flexDirection: 'column', gap: 14,
      boxShadow: '0 -4px 24px rgba(0,0,0,0.125)'
    },
    slabLabel: {
      fontSize: 11, fontWeight: 700, letterSpacing: '2px',
      textTransform: 'uppercase', color: 'rgba(255,255,255,0.78)'
    },
    slabTitle: {
      fontSize: 24, fontWeight: 700, lineHeight: 1.08,
      letterSpacing: '-0.6px', margin: 0, maxWidth: 540
    },
    contactGrid: {
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14,
      marginTop: 4
    },
    contactCard: {
      background: 'rgba(255,255,255,0.10)',
      border: '1px solid rgba(255,255,255,0.18)',
      borderRadius: 14,
      padding: '14px 16px',
      display: 'flex', flexDirection: 'column', gap: 6
    },
    contactIcon: {
      width: 28, height: 28, borderRadius: 8,
      background: '#fff', color: '#3340FA',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      marginBottom: 4
    },
    contactLabel: {
      fontSize: 9.5, fontWeight: 700, letterSpacing: '1.5px',
      textTransform: 'uppercase', color: 'rgba(255,255,255,0.72)'
    },
    contactValue: {
      fontSize: 13, fontWeight: 600, color: '#fff',
      letterSpacing: '-0.2px', lineHeight: 1.35
    },
    // CTA pill
    ctaRow: {
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      marginTop: 'auto', gap: 16,
      paddingTop: 14,
      borderTop: '1px solid rgba(255,255,255,0.18)'
    },
    ctaText: {
      fontSize: 12.5, color: 'rgba(255,255,255,0.85)', lineHeight: 1.4,
      maxWidth: 360
    },
    ctaButton: {
      background: '#fff', color: '#3340FA',
      padding: '12px 22px', borderRadius: 999,
      fontSize: 13, fontWeight: 700, letterSpacing: '0.04em',
      display: 'flex', alignItems: 'center', gap: 8,
      whiteSpace: 'nowrap'
    }
  };

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

  return (
    <div style={styles.page}>
      {/* Header */}
      <div style={styles.header}>
        <div style={styles.logo}>
          <div style={styles.logoMark}>W</div>
          CABINET
        </div>
        <div style={styles.pagePill}>Prendre rendez-vous</div>
      </div>

      {/* Hero */}
      <div style={styles.hero}>
        <div style={styles.eyebrow}>
          <span style={styles.eyebrowLine} />
          Étape suivante
        </div>
        <h1 style={styles.title}>
          Besoin d'accompagnement<br />
          pour votre stratégie<br />
          <span style={styles.titleAccent}>d'optimisation fiscale ?</span>
        </h1>
        <p style={styles.subtitle}>
          Votre conseiller dédié vous accompagne pour structurer, déployer et suivre
          chacune des solutions retenues. Premier rendez-vous offert, sans engagement.
        </p>
      </div>

      {/* Advisor card */}
      <div style={styles.advisorBlock}>
        <div style={styles.photoWrap}>
          <span style={styles.photoInitial}>{initials}</span>
          <div style={styles.photoBadge}>Photo</div>
        </div>
        <div style={styles.advisorIdentity}>
          <div style={styles.advisorEyebrow}>Votre conseiller</div>
          <div style={styles.advisorName}>{name}</div>
          <div style={styles.advisorRole}>{role}</div>
        </div>
      </div>

      {/* Slab CTA — pleine largeur */}
      <div style={styles.slab}>
        <div>
          <div style={styles.slabLabel}>Contactez-moi</div>
          <h2 style={{ ...styles.slabTitle, marginTop: 8 }}>
            Trois façons de me joindre.
          </h2>
        </div>

        <div style={styles.contactGrid}>
          <div style={styles.contactCard}>
            <div style={styles.contactIcon}>
              <Icon name="phone" size={14} stroke={2} color="#3340FA" />
            </div>
            <span style={styles.contactLabel}>Téléphone</span>
            <span style={styles.contactValue}>{phone}</span>
          </div>
          <div style={styles.contactCard}>
            <div style={styles.contactIcon}>
              <Icon name="doc" size={14} stroke={2} color="#3340FA" />
            </div>
            <span style={styles.contactLabel}>Email</span>
            <span style={styles.contactValue}>{email}</span>
          </div>
          <div style={styles.contactCard}>
            <div style={styles.contactIcon}>
              <Icon name="building" size={14} stroke={2} color="#3340FA" />
            </div>
            <span style={styles.contactLabel}>Bureau</span>
            <span style={styles.contactValue}>{address}</span>
          </div>
        </div>
      </div>
    </div>);

};

window.OFContact = OFContact;