// Direction OF — Brochure A4 portrait au design system OF Finance
// 794 × 1123 px · Poppins · #3340FA · cards à la OF (border #E8E9FF, soft shadow)
// Signature : protection slab bleue avec radius 40 0 0 0 pour le bloc impact
// Eyebrow ALL CAPS tracked +2px, icon tile 60×60 #E8E9FF radius 16

const OFPage = ({ solution }) => {
  const s = solution;
  const iconForSolution = {
    girardin: 'factory',
    fcpi: 'spark',
    scpi: 'building',
    per: 'piggy',
    denormandie: 'hammer',
    malraux: 'column',
    'deficit-foncier': 'leaf',
    monuments: 'column',
    'loc-avantages': 'home',
    'ir-pme': 'pme',
    sofica: 'film',
    dons: 'heart',
    jeanbrun: 'sparkle-new',
    gfi: 'tree',
    sap: 'helping',
    garde: 'baby'
  }[s.id];

  const ofStyles = {
    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'
    },
    // Header
    header: {
      padding: '28px 56px 16px',
      display: 'grid', gridTemplateColumns: '1fr auto', gap: 20,
      alignItems: 'flex-start'
    },
    eyebrow: {
      fontSize: 13, fontWeight: 700, letterSpacing: '2px',
      textTransform: 'uppercase', color: '#3340FA',
      marginBottom: 10
    },
    title: {
      fontSize: 34, fontWeight: 700, lineHeight: 1.05,
      letterSpacing: '-1.5px', color: '#1A1A1A', margin: 0
    },
    tagline: {
      fontSize: 14, lineHeight: 1.5, color: '#555555',
      marginTop: 10, maxWidth: 460
    },
    headerIconTile: {
      width: 60, height: 60, background: '#E8E9FF',
      borderRadius: 16,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0
    },
    // Impact — protection slab bleue (signature OF)
    slab: {
      background: '#3340FA',
      color: '#fff',
      borderRadius: '40px 40px 0 0',
      margin: '4px 56px 0',
      padding: '20px 36px',
      display: 'grid', gridTemplateColumns: '1.4fr 1fr',
      gap: 28,
      boxShadow: '0 -4px 24px rgba(0,0,0,0.125)'
    },
    slabLabel: {
      fontSize: 13, fontWeight: 700, letterSpacing: '2px',
      textTransform: 'uppercase', color: 'rgba(255,255,255,0.80)',
      marginBottom: 10
    },
    slabPrefix: {
      fontSize: 13, fontWeight: 500, fontStyle: 'italic',
      color: 'rgba(255,255,255,0.78)',
      marginBottom: 4
    },
    slabBig: {
      fontSize: 44, fontWeight: 700, lineHeight: 1,
      letterSpacing: '-2px',
      fontVariantNumeric: 'tabular-nums'
    },
    slabDesc: {
      fontSize: 13, fontWeight: 500, marginTop: 6
    },
    slabSub: {
      fontSize: 11, lineHeight: 1.45,
      color: 'rgba(255,255,255,0.80)', marginTop: 8,
      paddingTop: 8, borderTop: '1px solid rgba(255,255,255,0.13)'
    },
    slabRight: {
      borderLeft: '1px solid rgba(255,255,255,0.13)',
      paddingLeft: 28,
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
    },
    slabRentNum: {
      fontSize: 28, fontWeight: 700, lineHeight: 1,
      letterSpacing: '-1px', fontVariantNumeric: 'tabular-nums'
    },
    body: {
      padding: '16px 56px 16px',
      flex: 1, display: 'flex', flexDirection: 'column',
      justifyContent: 'space-evenly',
      minHeight: 0
    },
    sectionEyebrow: {
      fontSize: 12, fontWeight: 700, letterSpacing: '2px',
      textTransform: 'uppercase', color: '#3340FA',
      marginBottom: 10
    },
    // Timeline avec icon tiles 40×40
    timeline: {
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
      position: 'relative', gap: 10
    },
    timelineLine: {
      position: 'absolute',
      top: 17, left: '12.5%', right: '12.5%',
      height: 1, background: '#E8E9FF', zIndex: 0
    },
    timelineStep: {
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      textAlign: 'center', position: 'relative', zIndex: 1, padding: '0 4px'
    },
    timelineTile: {
      width: 34, height: 34, borderRadius: 10,
      background: '#E8E9FF', color: '#3340FA',
      fontSize: 12, fontWeight: 700,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      marginBottom: 10, border: '2px solid #fff'
    },
    timelineText: {
      fontSize: 10.5, lineHeight: 1.4, color: '#555555', maxWidth: 145
    },
    // Two col : règles (sober) + avantages (highlighted card OF)
    twoCol: {
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24
    },
    rulesBlock: {},
    rulesList: { margin: 0, padding: 0, listStyle: 'none' },
    ruleRow: {
      display: 'flex', justifyContent: 'space-between',
      alignItems: 'center', padding: '8px 0',
      borderBottom: '1px solid #E2E8F0',
      fontSize: 12
    },
    ruleLabel: { color: '#666666', fontWeight: 400 },
    ruleValue: { fontWeight: 700, color: '#1A1A1A' },
    // Card OF style : white bg, border #E8E9FF, radius 12, soft shadow
    advCard: {
      background: '#FFFFFF',
      border: '1px solid #E8E9FF',
      borderRadius: 12,
      padding: '16px 20px',
      boxShadow: '0 8px 24px rgba(0,0,0,0.06)',
      display: 'flex', flexDirection: 'column'
    },
    advList: {
      margin: 0, padding: 0, listStyle: 'none',
      display: 'flex', flexDirection: 'column', gap: 8
    },
    advItem: {
      fontSize: 12, lineHeight: 1.45, color: '#1A1A1A',
      paddingLeft: 14, position: 'relative'
    },
    // Risks — fond gris doux F8F9FA, harmonisé avec advCard (col à droite)
    riskBlock: {
      background: '#F8F9FA',
      border: '1px solid #E5E7EB',
      borderRadius: 12,
      padding: '16px 20px',
      boxShadow: '0 8px 24px rgba(0,0,0,0.06)',
      display: 'flex', flexDirection: 'column'
    },
    riskTitle: {
      fontSize: 13, fontWeight: 700, letterSpacing: '2px',
      textTransform: 'uppercase', color: '#3340FA',
      display: 'flex', alignItems: 'center', gap: 8,
      marginBottom: 10
    },
    riskList: {
      margin: 0, padding: 0, listStyle: 'none',
      display: 'flex', flexDirection: 'column', gap: 8
    },
    riskItem: {
      fontSize: 12, lineHeight: 1.45, color: '#1A1A1A',
      paddingLeft: 14, position: 'relative'
    },
    // Mon avis — card OF avec accent
    expertCard: {
      background: '#F0F4FF',
      border: '1px solid #E8E9FF',
      borderRadius: 12,
      padding: '14px 18px',
      display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 14,
      marginBottom: 10
    },
    expertAvatar: {
      width: 42, height: 42, borderRadius: '50%',
      background: '#3340FA', color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 14, fontWeight: 700, letterSpacing: '0.04em', flexShrink: 0
    },
    expertEyebrow: {
      fontSize: 11, fontWeight: 700, letterSpacing: '2px',
      textTransform: 'uppercase', color: '#3340FA'
    },
    expertAuthor: {
      fontSize: 13, fontWeight: 700, color: '#1A1A1A', marginTop: 3
    },
    expertRole: {
      fontSize: 11, color: '#666666', marginTop: 1
    },
    expertQuote: {
      fontSize: 11.5, lineHeight: 1.5, color: '#1A1A1A',
      margin: '6px 0 8px'
    },
    expertTags: { display: 'flex', flexWrap: 'wrap', gap: 5 },
    expertTag: {
      fontSize: 10, fontWeight: 600,
      color: '#3340FA', background: '#D6D9FE',
      borderRadius: 8, padding: '3px 9px'
    },
    // Footer — avec logo Wiz Tax à gauche
    footer: {
      borderTop: '1px solid #E2E8F0',
      padding: '10px 56px 14px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontSize: 10, color: '#999999', lineHeight: 1.4, gap: 16,
      flexShrink: 0
    },
    footerLogo: {
      fontWeight: 700, fontSize: 16, letterSpacing: '-0.5px',
      color: '#1A1A1A', display: 'flex', alignItems: 'center', gap: 10,
      flexShrink: 0
    },
    footerLogoMark: {
      width: 22, height: 22, background: '#3340FA',
      borderRadius: 6,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontSize: 11, fontWeight: 700
    },
    footerCode: {
      display: 'inline-flex', alignItems: 'center', gap: 6,
      fontSize: 11, color: '#3340FA', fontWeight: 600,
      background: '#D6D9FE', padding: '4px 10px', borderRadius: 24,
      flexShrink: 0
    }
  };

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

  return (
    <div style={ofStyles.page}>
      {/* Header */}
      <div style={ofStyles.header}>
        <div>
          <div style={ofStyles.eyebrow}>{s.category}</div>
          <h1 style={ofStyles.title}>{s.name}</h1>
          <p style={ofStyles.tagline}>{s.tagline}</p>
        </div>
        <div style={ofStyles.headerIconTile}>
          <Icon name={iconForSolution} size={32} stroke={2} color="#3340FA" />
        </div>
      </div>

      {/* Slab bleu — signature OF */}
      <div style={{ ...ofStyles.slab, borderRadius: "10px" }}>
        <div>
          <div style={ofStyles.slabLabel}>Potentiel fiscal</div>
          {s.bigNumberPrefix && <div style={ofStyles.slabPrefix}>{s.bigNumberPrefix}</div>}
          <div style={ofStyles.slabBig}>{s.bigNumber}</div>
          <div style={ofStyles.slabDesc}>{s.bigNumberLabel}</div>
          <div style={ofStyles.slabSub}>{s.bigNumberSub}</div>
        </div>
        <div style={ofStyles.slabRight}>
          <div>
            <div style={ofStyles.slabLabel}>Indicateur clé</div>
            <div style={ofStyles.slabRentNum}>{s.rentability}</div>
            <div style={{ fontSize: 12, fontWeight: 500, marginTop: 6, color: 'rgba(255,255,255,0.92)' }}>
              {s.rentabilityLabel}
            </div>
          </div>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.67)', lineHeight: 1.5 }}>
            Indicatif — variable selon profil et conjoncture.
          </div>
        </div>
      </div>

      <div style={ofStyles.body}>
        {/* How it works — timeline avec tiles OF */}
        <div>
          <div style={ofStyles.sectionEyebrow}>Comment ça fonctionne ?</div>
          <div style={ofStyles.timeline}>
            <div style={ofStyles.timelineLine} />
            {s.howItWorks.map((item, i) =>
            <div key={i} style={ofStyles.timelineStep}>
                <div style={ofStyles.timelineTile}>{String(i + 1).padStart(2, '0')}</div>
                <div style={ofStyles.timelineText}>{item}</div>
              </div>
            )}
          </div>
        </div>

        {/* Two cols : Avantages clés | Points de vigilance */}
        <div style={ofStyles.twoCol}>
          <div style={ofStyles.advCard}>
            <div style={ofStyles.sectionEyebrow}>Avantages clés</div>
            <ul style={ofStyles.advList}>
              {s.advantages.map((a, i) =>
              <li key={i} style={ofStyles.advItem}>
                  <span style={{
                  position: 'absolute', left: 0, top: 7,
                  width: 6, height: 6, background: '#3340FA',
                  borderRadius: '50%'
                }} />
                  {a}
                </li>
              )}
            </ul>
          </div>
          <div style={ofStyles.riskBlock}>
            <div style={ofStyles.riskTitle}>
              <Icon name="warning" size={14} stroke={2} color="#3340FA" />
              Points de vigilance
            </div>
            <ul style={ofStyles.riskList}>
              {s.risks.map((rr, i) =>
              <li key={i} style={ofStyles.riskItem}>
                  <span style={{
                  position: 'absolute', left: 0, top: 7,
                  width: 6, height: 6, background: '#3340FA',
                  borderRadius: '50%'
                }} />
                  {rr}
                </li>
              )}
            </ul>
          </div>
        </div>

        {/* Mon avis */}
        <div style={ofStyles.expertCard}>
          <div style={ofStyles.expertAvatar}>{initials}</div>
          <div>
            <div style={ofStyles.expertEyebrow}>Mon avis</div>
            <div style={ofStyles.expertAuthor}>{s.expertOpinion.author}</div>
            <div style={ofStyles.expertRole}>{s.expertOpinion.role}</div>
            <p style={ofStyles.expertQuote}>« {s.expertOpinion.quote} »</p>
          </div>
        </div>
      </div>

      {/* Footer — logo Wiz Tax + mention légale + code */}
      <div style={ofStyles.footer}>
        <div style={ofStyles.footerLogo}>
          <div style={ofStyles.footerLogoMark}>W</div>
          CABINET
        </div>
        <div style={{ flex: 1, textAlign: 'center', maxWidth: 420 }}>
          contact@wiztax.fr · +33 1 00 00 00 00 — Document pédagogique non contractuel, conforme AMF, risque de perte en capital.
        </div>
        <div style={ofStyles.footerCode}>
          <Icon name="phone" size={12} stroke={2} color="#3340FA" />
          +33 1 00 00 00 00
        </div>
      </div>
    </div>);

};

window.OFPage = OFPage;