/* ═══════════════════════════════════════════════════════════════════════
   SHARED COMPONENTS — DO NOT MODIFY THE STRUCTURE
   ───────────────────────────────────────────────────────────────────────
   Ces composants définissent le chrome (header/footer) et le pattern
   "section divider" partagés par toutes les slides.

   ⚠ AGENT : tu utilises ChromeTop / ChromeBottom / SectionDivider tels
     quels. Tu changes UNIQUEMENT les props (texte, slideNum, etc.).
     Tu ne touches PAS au CSS de ces composants.
   ═══════════════════════════════════════════════════════════════════════ */

/**
 * ChromeTop — barre de tête (64px) avec branding + numéro de slide
 */
const ChromeTop = ({ section, slideNum, total, brand = window.DECK_CONFIG?.brand }) =>
  <div className="slide-chrome-top">
    <div className="left">
      <span className="dot"></span>
      <span style={{ fontWeight: 800, color: 'var(--waka-orange)', letterSpacing: 2 }}>{brand?.name || 'BRAND'}</span>
      {brand?.partner && <>
        <span className="x">×</span>
        <span className="red">{brand.partner}</span>
      </>}
      <span className="x">·</span>
      <span style={{ textTransform: 'uppercase', letterSpacing: 2, fontSize: 12 }}>{section}</span>
    </div>
    <div className="right">
      <span className="live"><span className="ld"></span>CONFIDENTIEL</span>
      <span>{String(slideNum).padStart(2, '0')} / {String(total).padStart(2, '0')}</span>
    </div>
  </div>;

/**
 * ChromeBottom — barre de pied (48px) avec breadcrumb + métadonnées
 */
const ChromeBottom = ({ chapter }) =>
  <div className="slide-chrome-bottom">
    <div className="breadcrumb">
      <b>{window.DECK_CONFIG?.brand?.name || 'BRAND'}</b> · {window.DECK_CONFIG?.tagline || ''} · {window.DECK_CONFIG?.date || ''}
    </div>
    <div className="meta">
      <span><i>◆</i> {window.DECK_CONFIG?.legalName || ''}</span>
      <span><i>◆</i> {chapter || 'Présentation'}</span>
    </div>
  </div>;

/**
 * SectionDivider — slide pleine page de transition entre sections
 */
const SectionDivider = ({ num, label, title, kicker, slideNum, total, totalSections = 6, speaker = window.DECK_CONFIG?.speaker }) =>
  <>
    <ChromeTop section={label} slideNum={slideNum} total={total} />
    <div className="section-divider">
      <div className="top">
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 3, color: 'var(--waka-orange)' }}>SECTION {num}</span>
          <span style={{ width: 60, height: 1, background: 'var(--orbit-border-strong)' }}></span>
          <span style={{ fontSize: 13, fontWeight: 500, letterSpacing: 2, color: 'var(--orbit-text-3)', textTransform: 'uppercase' }}>{label}</span>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <span className="tag">PARTIE {num}/{totalSections}</span>
        </div>
      </div>
      <div className="center">
        <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--waka-orange)', textTransform: 'uppercase', letterSpacing: 4, marginBottom: 32 }}>{kicker}</div>
        <div style={{ fontSize: 140, fontWeight: 800, lineHeight: 0.92, letterSpacing: -4, color: 'var(--orbit-text-1)', maxWidth: 1500 }}>{title}</div>
      </div>
      <div className="bottom">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <span style={{ fontSize: 11, color: 'var(--orbit-text-3)', letterSpacing: 2, textTransform: 'uppercase' }}>Présenté par</span>
          <span style={{ fontSize: 18, color: 'var(--orbit-text-1)', fontWeight: 600 }}>{speaker?.name} · {speaker?.role}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 48 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
            <span style={{ fontSize: 11, color: 'var(--orbit-text-3)', letterSpacing: 2, textTransform: 'uppercase' }}>Prochain chapitre</span>
            <span style={{ fontSize: 14, color: 'var(--orbit-text-2)' }}>→</span>
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter={`Section ${num}`} />
  </>;

Object.assign(window, { ChromeTop, ChromeBottom, SectionDivider });