// js/pages/legal.jsx — Composant partagé pour les pages légales (éditorial sobre)
// Rend une page « document » : masthead court + corps en articles numérotés.
// Les champs à compléter par Tanguy sont signalés par <Todo>.

// Champ à compléter — visuellement distinct (souligné pointillé doré)
function Todo({ children }) {
  return (
    <span style={{

      borderBottom: '1px dashed var(--eq-gold)',
      paddingBottom: 1, fontStyle: 'italic', color: "rgb(255, 255, 255)"
    }} title="À compléter">{children}</span>);

}

// En-tête de page légale
function LegalMasthead({ eyebrow, title, italicWord, updated }) {
  return (
    <section style={{
      position: 'relative', padding: '64px 64px 48px', overflow: 'hidden',
      borderBottom: '1px solid var(--eq-line-soft)'
    }} className="eq-edsec">
      <div style={{ position: 'absolute', top: -20, right: -80, opacity: 0.4 }}>
        <CircuitOrnament width={260} height={260} color="var(--eq-gold)" opacity={0.4} />
      </div>
      <div style={{ position: 'relative', maxWidth: 1080, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'var(--eq-font-mono)', fontSize: 11, letterSpacing: '0.28em',
          textTransform: 'uppercase', color: 'var(--eq-gold)',
          display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24
        }}>
          <span style={{ width: 28, height: 1, background: 'var(--eq-gold)' }} />
          {eyebrow}
        </div>
        <h1 className="eq-mh-title" style={{
          margin: 0, fontFamily: 'var(--eq-font-display)',
          fontWeight: 'var(--eq-display-weight)', letterSpacing: 'var(--eq-display-tracking)',
          fontSize: 64, lineHeight: 1.0, color: 'var(--eq-ink)', textWrap: 'balance'
        }}>
          {italicWord ?
          <>
              {title.split(italicWord)[0]}
              <span style={{ fontStyle: 'italic', color: 'var(--eq-gold)' }}>{italicWord}</span>
              {title.split(italicWord)[1]}
            </> :
          title}
        </h1>
        {updated &&
        <p style={{
          margin: '24px 0 0', fontFamily: 'var(--eq-font-mono)', fontSize: 11,
          letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--eq-ink-muted)'
        }}>Dernière mise à jour · {updated}</p>
        }
      </div>
    </section>);

}

// Corps : suite d'articles numérotés
function LegalBody({ articles }) {
  return (
    <section className="eq-edsec" style={{ padding: '64px 64px 40px' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        {articles.map((a, i) =>
        <article key={i} style={{
          paddingBottom: 40, marginBottom: 40,
          borderBottom: i < articles.length - 1 ? '1px solid var(--eq-line-soft)' : 'none'
        }}>
            <div style={{
            display: 'flex', alignItems: 'baseline', gap: 18, marginBottom: 18
          }}>
              <span style={{
              fontFamily: 'var(--eq-font-display)', fontSize: 30, fontStyle: 'italic',
              color: 'var(--eq-gold)', lineHeight: 1, flex: '0 0 auto'
            }}>{String(i + 1).padStart(2, '0')}</span>
              <h2 style={{
              margin: 0, fontFamily: 'var(--eq-font-display)',
              fontWeight: 'var(--eq-display-weight)', letterSpacing: '0.01em',
              fontSize: 28, lineHeight: 1.15, color: 'var(--eq-ink)'
            }}>{a.title}</h2>
            </div>
            <div style={{ paddingLeft: 48 }}>
              {a.rows &&
            <div style={{
              background: 'var(--eq-surface)', border: '1px solid var(--eq-line)',
              borderRadius: 4, overflow: 'hidden', marginBottom: a.body ? 20 : 0
            }}>
                  {a.rows.map((r, j) =>
              <div key={j} className="eq-legal-rows" style={{
              display: 'grid', gridTemplateColumns: '240px 1fr', gap: 24,
              padding: '14px 24px',
              borderBottom: j < a.rows.length - 1 ? '1px solid var(--eq-line-soft)' : 'none'
            }}>
                      <span style={{
                  fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: 'var(--eq-ink-muted)', paddingTop: 2
                }}>{r.label}</span>
                      <span style={{ fontSize: 15, lineHeight: 1.55, color: "rgb(255, 255, 255)" }}>
                        {r.value}
                      </span>
                    </div>
              )}
                </div>
            }
              {a.paragraphs && a.paragraphs.map((p, j) =>
            <p key={j} style={{
              margin: j === 0 ? '0 0 16px' : '0 0 16px', fontSize: 15.5, lineHeight: 1.75,
              color: 'var(--eq-ink-soft)', maxWidth: 760
            }}>{p}</p>
            )}
            </div>
          </article>
        )}
      </div>
    </section>);

}

Object.assign(window, { Todo, LegalMasthead, LegalBody });