// app-flyer.jsx — Renderer de flyers NOMADE (post + story)
// ─────────────────────────────────────────────────────────────────────────
// SYSTÈME DE COULEUR « DÉSERT » — charbon chaud + neutres sable + UN accent
// terracotta employé avec parcimonie (1 trait / 1 pastille / 1 CTA par visuel).
// Aucune valeur dorée. Hiérarchie portée par les neutres, le contraste, la typo.
// ─────────────────────────────────────────────────────────────────────────

const N = {
  // — Surfaces (dark mode chaud) —
  ink: '#0C0A08', // charbon de base, légèrement chaud
  inkDeep: '#070605', // le plus sombre
  inkRaise: '#16120D', // surface relevée (cartes / pochettes)

  // — Neutres chauds (portent la hiérarchie) —
  bone: '#ECE3D4', // blanc cassé / os — texte principal
  sand: '#CFBFA4', // sable chaud — emphase secondaire + voix serif
  taupe: '#9A8B73', // grège — texte secondaire / labels
  stone: '#5E5547', // pierre — bordures / tertiaire

  // — Accent terracotta (PONCTUATION uniquement) —
  clay: '#C16A43', // terracotta / sienne brûlée — mat, organique
  clayDeep: '#8E4527', // brique profonde
  claySoft: '#D58A62', // argile claire (dégradés CTA)

  // — Alias rétro-compat (mêmes clés que l'ancien système) —
  white: '#ECE3D4',
  whiteSoft: 'rgba(236,227,212,0.72)',
  bronze: '#C16A43', // ⟵ ré-aiguillé sur clay pour compat ; usage restreint

  // — Hairlines / voiles réutilisables —
  line: 'rgba(236,227,212,0.12)', // filet neutre standard
  lineSoft: 'rgba(236,227,212,0.06)', // filet très discret
  clayLine: 'rgba(193,106,67,0.38)', // filet accent (rare)

  // — Typo —
  display: '"Space Grotesk", system-ui, sans-serif',
  serif: '"Cormorant Garamond", Georgia, serif',
  body: '"Inter", system-ui, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace'
};

function Grain() {
  return <div style={{
    position: 'absolute', inset: 0, opacity: 0.055, pointerEvents: 'none',
    mixBlendMode: 'overlay',
    backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")`,
    backgroundSize: '200px 200px'
  }} />;
}

// Logo blanc, sans halo doré — une ombre douce et neutre pour le détacher.
function Logo({ height }) {
  return <img src="assets/nomade-logo.png" crossOrigin="anonymous"
  style={{ height, width: 'auto', filter: 'drop-shadow(0 2px 10px rgba(0,0,0,0.55))' }} />;
}

function BrandRow({ size = 1, pill, accentDot = false }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 15 * size }}>
        <Logo height={42 * size} />
        <div style={{
          fontFamily: N.display, fontWeight: 600,
          fontSize: 17 * size, letterSpacing: '0.46em', color: N.bone
        }}>NOMADE</div>
      </div>
      <div style={{
        padding: `${7 * size}px ${16 * size}px`,
        background: 'transparent',
        border: `1px solid ${N.stone}`,
        borderRadius: 999,
        fontFamily: N.mono, fontSize: 10 * size,
        letterSpacing: '0.32em', textTransform: 'uppercase', fontWeight: 500,
        color: N.taupe,
        display: 'flex', alignItems: 'center', gap: 8 * size
      }}>
        {accentDot && <span style={{
          width: 5 * size, height: 5 * size, borderRadius: '50%',
          background: N.clay, display: 'inline-block'
        }} />}
        {pill}
      </div>
    </div>);

}

// Chips neutres — filet fin grège, texte sable. Aucun remplissage coloré.
function Chips({ chips, size = 1 }) {
  return (
    <div style={{ display: 'flex', gap: 12 * size, flexWrap: 'wrap' }}>
      {chips.filter(Boolean).map((c, i) =>
      <div key={i} style={{
        padding: `${9 * size}px ${18 * size}px`,
        background: 'transparent',
        border: `1px solid ${N.stone}`,
        borderRadius: 999,
        fontFamily: N.mono, fontSize: 11.5 * size,
        letterSpacing: '0.2em', textTransform: 'uppercase',
        fontWeight: 500, color: N.sand
      }}>{c}</div>
      )}
    </div>);

}

// ── POST 1080×1350 ─────────────────────────────────────────────────────────
function PostFlyer({ data }) {
  return (
    <div style={{
      position: 'relative', width: 1080, height: 1350,
      overflow: 'hidden', color: N.bone, fontFamily: N.body,
      background: N.inkDeep
    }}>
      {data.photoUrl ?
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url("${data.photoUrl}")`,
        backgroundSize: 'cover',
        backgroundPosition: data.photoPosition || '50% 30%',
        filter: 'saturate(0.96) contrast(1.05)'
      }} /> :

      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at 68% 28%, rgba(207,191,164,0.12) 0%, transparent 58%), ${N.inkDeep}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: N.mono, fontSize: 18, letterSpacing: '0.26em',
        color: N.stone, textTransform: 'uppercase'
      }}>— Photo —</div>
      }
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(7,6,5,0.74) 0%, rgba(7,6,5,0.06) 28%, rgba(7,6,5,0.40) 62%, rgba(7,6,5,0.97) 100%)'
      }} />

      <div style={{ position: 'absolute', top: 60, left: 68, right: 68 }}>
        <BrandRow pill={data.pill} size={1} />
      </div>

      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '0 68px 64px' }}>
        <div style={{
          fontFamily: N.mono, fontSize: 13, letterSpacing: '0.42em',
          color: N.clay, textTransform: 'uppercase', marginBottom: 26, fontWeight: 500
        }}>{data.kicker}</div>
        <div style={{
          fontFamily: N.display, fontWeight: 700,
          fontSize: data.headlineSize || 168, lineHeight: 0.84,
          letterSpacing: '-0.045em', marginBottom: 14, color: N.bone
        }}>{data.headline}</div>
        <div style={{
          fontFamily: N.serif, fontWeight: 500,
          fontSize: 54, lineHeight: 1.02, letterSpacing: '0',
          color: N.sand, fontStyle: 'italic',
          marginBottom: data.composer ? 18 : 38
        }}>{data.subtitle}</div>

        {data.composer &&
        <div style={{
          fontFamily: N.mono, fontSize: 15, letterSpacing: '0.26em',
          color: N.taupe, textTransform: 'uppercase',
          marginBottom: 32, fontWeight: 500
        }}>{data.composer}</div>
        }

        <div style={{ marginBottom: 32 }}>
          <Chips chips={data.chips} size={1} />
        </div>

        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          paddingTop: 26, borderTop: `1px solid ${N.line}`
        }}>
          <div style={{
            fontFamily: N.body, fontSize: 18, color: N.whiteSoft,
            fontWeight: 300, letterSpacing: '0.01em', lineHeight: 1.45,
            maxWidth: 520, whiteSpace: 'pre-line'
          }}>{data.bottomCopy}</div>
          <div style={{
            fontFamily: N.display, fontWeight: 600, fontSize: 19,
            letterSpacing: '0.16em', textTransform: 'uppercase', textAlign: 'right', color: N.bone
          }}>nomadeclan<span style={{ color: N.clay }}>.com</span></div>
        </div>
      </div>

      <Grain />
    </div>);

}

// ── STORY 1080×1920 ────────────────────────────────────────────────────────
function StoryFlyer({ data }) {
  return (
    <div style={{
      position: 'relative', width: 1080, height: 1920,
      overflow: 'hidden', color: N.bone, fontFamily: N.body,
      background: N.inkDeep
    }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1180, overflow: 'hidden' }}>
        {data.photoUrl ?
        <img src={data.photoUrl} crossOrigin="anonymous" alt=""
        style={{
          width: '100%', height: '100%', objectFit: 'cover',
          objectPosition: data.photoPosition || '50% 30%',
          filter: 'saturate(0.96) contrast(1.05)'
        }} /> :

        <div style={{
          width: '100%', height: '100%',
          background: `radial-gradient(ellipse at 50% 46%, rgba(207,191,164,0.12) 0%, transparent 60%), ${N.inkDeep}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: N.mono, fontSize: 20, letterSpacing: '0.26em',
          color: N.stone, textTransform: 'uppercase'
        }}>— Photo —</div>
        }
        <div style={{
          position: 'absolute', inset: 0,
          background: `linear-gradient(180deg, rgba(7,6,5,0.62) 0%, transparent 24%, transparent 56%, rgba(7,6,5,0.90) 88%, ${N.inkDeep} 100%)`
        }} />
      </div>

      <div style={{ position: 'absolute', top: 84, left: 68, right: 68, zIndex: 5 }}>
        <BrandRow pill={data.pill} size={1.15} accentDot={true} />
      </div>

      <div style={{
        position: 'absolute', top: 1100, left: 0, right: 0, bottom: 0,
        background: `radial-gradient(ellipse at 50% 0%, rgba(207,191,164,0.08) 0%, transparent 66%), ${N.inkDeep}`
      }} />

      <div style={{ position: 'absolute', top: 1196, left: 68, right: 68 }}>
        <div style={{
          fontFamily: N.mono, fontSize: 17, letterSpacing: '0.44em',
          color: N.clay, textTransform: 'uppercase', marginBottom: 38, fontWeight: 500
        }}>{data.kicker}</div>
        <div style={{
          fontFamily: N.display, fontWeight: 700,
          fontSize: data.storyHeadlineSize || 166, lineHeight: 0.84,
          letterSpacing: '-0.045em', marginBottom: 14, color: N.bone
        }}>{data.storyTop}</div>
        <div style={{
          fontFamily: N.serif, fontWeight: 600,
          fontSize: (data.storyHeadlineSize || 166) * 1.04, lineHeight: 0.86,
          letterSpacing: '0', color: N.sand, fontStyle: 'italic',
          marginBottom: data.composer ? 28 : 50
        }}>{data.storyBottom}</div>

        {data.composer &&
        <div style={{
          fontFamily: N.mono, fontSize: 18, letterSpacing: '0.3em',
          color: N.taupe, textTransform: 'uppercase',
          marginBottom: 50, fontWeight: 500
        }}>{data.composer}</div>
        }

        <div style={{ marginBottom: 60 }}>
          <Chips chips={data.chips} size={1.15} />
        </div>
      </div>

      {/* CTA — l'unique bloc accent terracotta de la story */}
      <div style={{
        position: 'absolute', bottom: 120, left: 68, right: 68,
        padding: '34px 38px',
        background: N.clay,
        borderRadius: 4, textAlign: 'center',
        boxShadow: '0 24px 60px rgba(7,6,5,0.55)'
      }}>
        <div style={{
          fontFamily: N.mono, fontSize: 13, letterSpacing: '0.4em',
          textTransform: 'uppercase', fontWeight: 600,
          color: 'rgba(12,10,8,0.66)', marginBottom: 14
        }}>{data.ctaLabel}</div>
        <div style={{
          fontFamily: N.display, fontWeight: 700, fontSize: 42,
          letterSpacing: '0.08em', textTransform: 'uppercase', color: N.inkDeep
        }}>{data.ctaUrl}</div>
      </div>

      <Grain />
    </div>);

}

window.N = N;
window.PostFlyer = PostFlyer;
window.StoryFlyer = StoryFlyer;

// ═══════════════════════════════════════════════════════════════════════════
// CERTIF LAYOUT — Disque d'Or / Platine / Diamant (visuels SNEP officiels)
// Les disques SNEP ne sont JAMAIS recolorés : ce sont des visuels officiels.
// ═══════════════════════════════════════════════════════════════════════════

const CERTIF_TYPES = {
  OR: {
    label: "DISQUE D'OR",
    singleLabel: "SINGLE D'OR",
    file: 'assets/snep-or.png'
  },
  PLATINE: {
    label: 'DISQUE DE PLATINE',
    singleLabel: 'SINGLE DE PLATINE',
    file: 'assets/snep-platine.png'
  },
  '2PLATINE': {
    label: 'DOUBLE DISQUE DE PLATINE',
    singleLabel: null,
    file: 'assets/snep-2platine.png'
  },
  '3PLATINE': {
    label: 'TRIPLE DISQUE DE PLATINE',
    singleLabel: null,
    file: 'assets/snep-3platine.png'
  },
  DIAMANT: {
    label: 'DISQUE DE DIAMANT',
    singleLabel: 'SINGLE DE DIAMANT',
    file: 'assets/snep-diamant.png'
  },
  '2DIAMANT': {
    label: 'DOUBLE DISQUE DE DIAMANT',
    singleLabel: 'DOUBLE DIAMANT',
    file: 'assets/snep-2diamant.png'
  }
};

// Ombre neutre + halo très discret : le disque garde ses couleurs officielles.
function CertifSeal({ type = 'OR', size = 300 }) {
  const cfg = CERTIF_TYPES[type] || CERTIF_TYPES.OR;
  return (
    <img src={cfg.file} alt={cfg.label || cfg.singleLabel}
    crossOrigin="anonymous"
    style={{
      height: size, width: 'auto', display: 'block',
      filter: 'drop-shadow(0 22px 44px rgba(0,0,0,0.6)) drop-shadow(0 0 30px rgba(0,0,0,0.4))'
    }} />);

}

// ── CERTIF POST 1080×1350 ───────────────────────────────────────────────────
function CertifPost({ data }) {
  return (
    <div style={{
      position: 'relative', width: 1080, height: 1350,
      overflow: 'hidden', color: N.bone, fontFamily: N.body,
      background: N.inkDeep
    }}>
      <CertifBackdrop />

      {/* Top brand row */}
      <div style={{ position: 'absolute', top: 60, left: 68, right: 68, display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 5 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 15 }}>
          <Logo height={42} />
          <div style={{ fontFamily: N.display, fontWeight: 600, fontSize: 17, letterSpacing: '0.46em', color: N.bone }}>
            NOMADE
          </div>
        </div>
        <div style={{
          padding: '7px 16px', background: 'transparent',
          border: `1px solid ${N.stone}`,
          borderRadius: 999, fontFamily: N.mono, fontSize: 10,
          letterSpacing: '0.32em', textTransform: 'uppercase', fontWeight: 500, color: N.taupe
        }}>{data.pill || 'CERTIFIÉ'}</div>
      </div>

      {/* Kicker */}
      <div style={{
        position: 'absolute', top: 138, left: 0, right: 0, textAlign: 'center',
        fontFamily: N.mono, fontSize: 13, letterSpacing: '0.44em',
        color: N.clay, textTransform: 'uppercase', fontWeight: 500
      }}>{data.kicker || '/ CERTIFICATION'}</div>

      {/* Artist name */}
      <div style={{
        position: 'absolute', top: 172, left: 64, right: 64, textAlign: 'center',
        fontFamily: N.display, fontWeight: 700,
        fontSize: data.artistName && data.artistName.length > 12 ? 84 : 110,
        lineHeight: 0.95, letterSpacing: '-0.03em',
        textTransform: 'uppercase', color: N.bone
      }}>{data.artistName || 'ARTISTE'}</div>

      {/* Album name */}
      <div style={{
        position: 'absolute', top: 296, left: 64, right: 64, textAlign: 'center',
        fontFamily: N.serif, fontWeight: 600,
        fontSize: 42, color: N.sand, fontStyle: 'italic',
        letterSpacing: '0.01em'
      }}>{data.albumName || 'Titre'}</div>

      {/* Cert info */}
      {(() => {
        const cfg = CERTIF_TYPES[data.certifType] || CERTIF_TYPES.OR;
        const isSingle = data.certifFormat === 'single';
        const label = isSingle ? cfg.singleLabel || cfg.label : cfg.label || cfg.singleLabel;
        const unit = isSingle ? 'streams' : 'ventes';
        return (
          <div style={{
            position: 'absolute', top: 356, left: 64, right: 64, textAlign: 'center',
            fontFamily: N.mono, fontSize: 13, letterSpacing: '0.34em',
            color: N.taupe, textTransform: 'uppercase', fontWeight: 500
          }}>
            {label}{data.salesNumber ? ` · +${data.salesNumber} ${unit}` : ''}
          </div>);

      })()}

      {/* Hero cover */}
      <div style={{
        position: 'absolute', top: 392, left: '50%', transform: 'translateX(-50%)',
        width: 700, height: 700,
        background: N.inkRaise,
        boxShadow: '0 30px 80px rgba(0,0,0,0.7)',
        overflow: 'hidden',
        border: `1px solid ${N.line}`
      }}>
        {data.photoUrl ?
        <img src={data.photoUrl} crossOrigin="anonymous" alt=""
        style={{
          width: '100%', height: '100%', objectFit: 'cover',
          objectPosition: data.photoPosition || '50% 50%',
          filter: 'saturate(0.97) contrast(1.05)'
        }} /> :

        <div style={{
          width: '100%', height: '100%',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: N.mono, fontSize: 16, letterSpacing: '0.26em',
          color: N.stone, textTransform: 'uppercase'
        }}>— Pochette —</div>
        }
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(7,6,5,0.5) 100%)',
          pointerEvents: 'none'
        }} />
      </div>

      {/* Foil seal */}
      {(() => {
        const isWide = ['2PLATINE', '3PLATINE', '2DIAMANT'].includes(data.certifType);
        return (
          <div style={{
            position: 'absolute',
            top: isWide ? 838 : 818,
            left: '50%',
            transform: `translateX(${isWide ? -30 : 80}px)`,
            zIndex: 6
          }}>
            <CertifSeal type={data.certifType || 'OR'} size={320} />
          </div>);

      })()}

      {/* Bottom signature */}
      <div style={{
        position: 'absolute', bottom: 60, left: 68, right: 68,
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        paddingTop: 26, borderTop: `1px solid ${N.line}`
      }}>
        <div style={{
          fontFamily: N.body, fontSize: 16, color: N.whiteSoft,
          fontWeight: 300, letterSpacing: '0.01em', lineHeight: 1.45,
          whiteSpace: 'pre-line', maxWidth: 580
        }}>{data.bottomCopy || "Encore une trace qui passe la barre.\nMerci à l'équipe + l'artiste."}</div>
        <div style={{
          fontFamily: N.display, fontWeight: 600, fontSize: 18,
          letterSpacing: '0.16em', textTransform: 'uppercase', textAlign: 'right', color: N.bone
        }}>nomadeclan<span style={{ color: N.clay }}>.com</span></div>
      </div>

      <Grain />
    </div>);

}

// ── CERTIF STORY 1080×1920 ──────────────────────────────────────────────────
function CertifStory({ data }) {
  return (
    <div style={{
      position: 'relative', width: 1080, height: 1920,
      overflow: 'hidden', color: N.bone, fontFamily: N.body,
      background: N.inkDeep
    }}>
      <CertifBackdrop />

      <div style={{ position: 'absolute', top: 84, left: 68, right: 68, display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 5 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <Logo height={50} />
          <div style={{ fontFamily: N.display, fontWeight: 600, fontSize: 20, letterSpacing: '0.46em', color: N.bone }}>
            NOMADE
          </div>
        </div>
        <div style={{
          padding: '9px 20px', background: 'transparent',
          border: `1px solid ${N.stone}`,
          borderRadius: 999, fontFamily: N.mono, fontSize: 11,
          letterSpacing: '0.32em', textTransform: 'uppercase', fontWeight: 500, color: N.taupe,
          display: 'flex', alignItems: 'center', gap: 9
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: N.clay }} />
          {data.pill || 'CERTIFIÉ'}
        </div>
      </div>

      <div style={{
        position: 'absolute', top: 224, left: 0, right: 0, textAlign: 'center',
        fontFamily: N.mono, fontSize: 16, letterSpacing: '0.44em',
        color: N.clay, textTransform: 'uppercase', fontWeight: 500
      }}>{data.kicker || '/ CERTIFICATION'}</div>

      <div style={{
        position: 'absolute', top: 276, left: 64, right: 64, textAlign: 'center',
        fontFamily: N.display, fontWeight: 700,
        fontSize: data.artistName && data.artistName.length > 10 ? 120 : 150,
        lineHeight: 0.95, letterSpacing: '-0.03em',
        textTransform: 'uppercase', color: N.bone
      }}>{data.artistName || 'ARTISTE'}</div>

      <div style={{
        position: 'absolute', top: 446, left: 64, right: 64, textAlign: 'center',
        fontFamily: N.serif, fontWeight: 600,
        fontSize: 52, color: N.sand, fontStyle: 'italic',
        letterSpacing: '0.01em'
      }}>{data.albumName || 'Titre'}</div>

      {(() => {
        const cfg = CERTIF_TYPES[data.certifType] || CERTIF_TYPES.OR;
        const isSingle = data.certifFormat === 'single';
        const label = isSingle ? cfg.singleLabel || cfg.label : cfg.label || cfg.singleLabel;
        const unit = isSingle ? 'streams' : 'ventes';
        return (
          <div style={{
            position: 'absolute', top: 528, left: 64, right: 64, textAlign: 'center',
            fontFamily: N.mono, fontSize: 17, letterSpacing: '0.36em',
            color: N.taupe, textTransform: 'uppercase', fontWeight: 500
          }}>
            {label}{data.salesNumber ? ` · +${data.salesNumber} ${unit}` : ''}
          </div>);

      })()}

      <div style={{
        position: 'absolute', top: 596, left: '50%', transform: 'translateX(-50%)',
        width: 880, height: 880,
        background: N.inkRaise,
        boxShadow: '0 40px 100px rgba(0,0,0,0.75)',
        overflow: 'hidden',
        border: `1px solid ${N.line}`
      }}>
        {data.photoUrl ?
        <img src={data.photoUrl} crossOrigin="anonymous" alt=""
        style={{
          width: '100%', height: '100%', objectFit: 'cover',
          objectPosition: data.photoPosition || '50% 50%',
          filter: 'saturate(0.97) contrast(1.05)'
        }} /> :

        <div style={{
          width: '100%', height: '100%',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: N.mono, fontSize: 20, letterSpacing: '0.26em',
          color: N.stone, textTransform: 'uppercase'
        }}>— Pochette —</div>
        }
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(7,6,5,0.5) 100%)'
        }} />
      </div>

      {(() => {
        const isWide = ['2PLATINE', '3PLATINE', '2DIAMANT'].includes(data.certifType);
        return (
          <div style={{
            position: 'absolute',
            top: isWide ? 1135 : 1110,
            left: '50%',
            transform: `translateX(${isWide ? -40 : 90}px)`,
            zIndex: 6
          }}>
            <CertifSeal type={data.certifType || 'OR'} size={400} />
          </div>);

      })()}

      {/* CTA — bloc accent terracotta unique */}
      <div style={{
        position: 'absolute', bottom: 120, left: 68, right: 68,
        padding: '30px 38px',
        background: N.clay,
        borderRadius: 4, textAlign: 'center',
        boxShadow: '0 24px 60px rgba(7,6,5,0.55)'
      }}>
        <div style={{
          fontFamily: N.mono, fontSize: 13, letterSpacing: '0.4em',
          textTransform: 'uppercase', fontWeight: 600,
          color: 'rgba(12,10,8,0.66)', marginBottom: 12
        }}>{data.ctaLabel || '/ Vos projets chez NOMADE'}</div>
        <div style={{
          fontFamily: N.display, fontWeight: 700, fontSize: 42,
          letterSpacing: '0.08em', textTransform: 'uppercase', color: N.inkDeep
        }}>{data.ctaUrl || 'nomadeclan.com'}</div>
      </div>

      <Grain />
    </div>);

}

window.CertifPost = CertifPost;
window.CertifStory = CertifStory;
window.CertifSeal = CertifSeal;

// ═══════════════════════════════════════════════════════════════════════════
// SESSION layout — "EN STUDIO / live rec"
// ═══════════════════════════════════════════════════════════════════════════

function SessionPost({ data }) {
  return (
    <div style={{
      position: 'relative', width: 1080, height: 1350,
      overflow: 'hidden', color: N.bone, fontFamily: N.body,
      background: N.inkDeep
    }}>
      {data.photoUrl ?
      <img src={data.photoUrl} crossOrigin="anonymous" alt=""
      style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover', objectPosition: data.photoPosition || '50% 30%',
        filter: 'saturate(0.78) contrast(1.18) brightness(0.8)'
      }} /> :

      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at 50% 38%, rgba(207,191,164,0.1) 0%, transparent 64%), ${N.inkDeep}`
      }} />
      }
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, rgba(7,6,5,0.70) 0%, transparent 30%, transparent 50%, rgba(7,6,5,0.58) 75%, rgba(7,6,5,0.97) 100%)`
      }} />
      {/* Filet accent fin en haut (le seul trait coloré) */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 3,
        background: N.clay
      }} />
      <div style={{ position: 'absolute', top: 60, left: 68, right: 68, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 15 }}>
          <Logo height={42} />
          <div style={{ fontFamily: N.display, fontWeight: 600, fontSize: 17, letterSpacing: '0.46em', color: N.bone }}>
            NOMADE
          </div>
        </div>
        {/* Pastille live REC — pastille accent unique */}
        <div style={{
          padding: '9px 18px', background: 'transparent', borderRadius: 999,
          border: `1px solid ${N.clayLine}`,
          fontFamily: N.mono, fontSize: 11, letterSpacing: '0.34em',
          textTransform: 'uppercase', fontWeight: 600, color: N.claySoft,
          display: 'flex', alignItems: 'center', gap: 9
        }}>
          <span style={{ width: 7, height: 7, borderRadius: '50%', background: N.clay }} />
          {data.pill || 'EN STUDIO'}
        </div>
      </div>
      <div style={{
        position: 'absolute', top: 134, left: 68, right: 68,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: N.mono, fontSize: 11, letterSpacing: '0.34em',
        color: N.taupe, textTransform: 'uppercase',
        paddingBottom: 16, borderBottom: `1px solid ${N.line}`
      }}>
        <span>{data.kicker || '/ SESSION · 01'}</span>
        <span>REC <span style={{ color: N.clay }}>●</span> {data.sessionDate || "AUJOURD'HUI"}</span>
      </div>
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '0 68px 64px' }}>
        <div style={{
          fontFamily: N.mono, fontSize: 13, letterSpacing: '0.42em',
          color: N.taupe, textTransform: 'uppercase', marginBottom: 20, fontWeight: 500
        }}>EN SESSION</div>
        <div style={{
          fontFamily: N.display, fontWeight: 700, fontSize: 178,
          lineHeight: 0.82, letterSpacing: '-0.045em', marginBottom: 14,
          textTransform: 'uppercase', color: N.bone
        }}>{data.artistName || data.headline || 'ARTISTE'}</div>
        <div style={{
          fontFamily: N.serif, fontWeight: 500, fontSize: 48, lineHeight: 1,
          color: N.sand, fontStyle: 'italic', marginBottom: 40
        }}>{data.subtitle || 'au studio cette nuit.'}</div>
        <div style={{ display: 'flex', gap: 12, marginBottom: 32, flexWrap: 'wrap' }}>
          {(data.chips || []).filter(Boolean).map((c, i) =>
          <div key={i} style={{
            padding: '9px 18px', background: 'transparent',
            border: `1px solid ${N.stone}`, borderRadius: 999,
            fontFamily: N.mono, fontSize: 11.5, letterSpacing: '0.2em',
            textTransform: 'uppercase', fontWeight: 500, color: N.sand
          }}>{c}</div>
          )}
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          paddingTop: 26, borderTop: `1px solid ${N.line}`
        }}>
          <div style={{
            fontFamily: N.body, fontSize: 17, color: N.whiteSoft,
            fontWeight: 300, lineHeight: 1.45, maxWidth: 540, whiteSpace: 'pre-line'
          }}>{data.bottomCopy || 'Une nuit, un son, la trace.'}</div>
          <div style={{
            fontFamily: N.display, fontWeight: 600, fontSize: 19,
            letterSpacing: '0.16em', textTransform: 'uppercase', textAlign: 'right', color: N.bone
          }}>nomadeclan<span style={{ color: N.clay }}>.com</span></div>
        </div>
      </div>
      <Grain />
    </div>);

}

function SessionStory({ data }) {
  return (
    <div style={{
      position: 'relative', width: 1080, height: 1920,
      overflow: 'hidden', color: N.bone, fontFamily: N.body,
      background: N.inkDeep
    }}>
      {data.photoUrl ?
      <img src={data.photoUrl} crossOrigin="anonymous" alt=""
      style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover', objectPosition: data.photoPosition || '50% 30%',
        filter: 'saturate(0.78) contrast(1.18) brightness(0.8)'
      }} /> :

      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at 50% 40%, rgba(207,191,164,0.1) 0%, transparent 64%), ${N.inkDeep}`
      }} />
      }
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, rgba(7,6,5,0.70) 0%, transparent 22%, transparent 50%, rgba(7,6,5,0.58) 72%, rgba(7,6,5,0.98) 100%)`
      }} />
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 4,
        background: N.clay
      }} />
      <div style={{ position: 'absolute', top: 84, left: 68, right: 68, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <Logo height={50} />
          <div style={{ fontFamily: N.display, fontWeight: 600, fontSize: 20, letterSpacing: '0.46em', color: N.bone }}>
            NOMADE
          </div>
        </div>
        <div style={{
          padding: '11px 22px', background: 'transparent', borderRadius: 999,
          border: `1px solid ${N.clayLine}`,
          fontFamily: N.mono, fontSize: 12, letterSpacing: '0.34em',
          textTransform: 'uppercase', fontWeight: 600, color: N.claySoft,
          display: 'flex', alignItems: 'center', gap: 11
        }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: N.clay }} />
          {data.pill || 'EN STUDIO'}
        </div>
      </div>
      <div style={{
        position: 'absolute', top: 176, left: 68, right: 68,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: N.mono, fontSize: 14, letterSpacing: '0.34em',
        color: N.taupe, textTransform: 'uppercase',
        paddingBottom: 18, borderBottom: `1px solid ${N.line}`
      }}>
        <span>{data.kicker || '/ SESSION · 01'}</span>
        <span>REC <span style={{ color: N.clay }}>●</span> {data.sessionDate || 'NOW'}</span>
      </div>
      <div style={{
        position: 'absolute', top: 356, right: 68,
        padding: '12px 24px', border: `2px solid ${N.sand}`, color: N.sand,
        fontFamily: N.display, fontWeight: 700, fontSize: 26,
        letterSpacing: '0.2em', textTransform: 'uppercase',
        transform: 'rotate(6deg)', background: 'rgba(7,6,5,0.42)'
      }}>EN SESSION</div>
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '0 68px 100px' }}>
        <div style={{
          fontFamily: N.mono, fontSize: 16, letterSpacing: '0.44em',
          color: N.clay, textTransform: 'uppercase', marginBottom: 26, fontWeight: 500
        }}>{data.kicker || '/ LIVE NOW'}</div>
        <div style={{
          fontFamily: N.display, fontWeight: 700, fontSize: 196,
          lineHeight: 0.82, letterSpacing: '-0.045em', marginBottom: 18,
          textTransform: 'uppercase', color: N.bone
        }}>{data.artistName || data.headline || 'ARTISTE'}</div>
        <div style={{
          fontFamily: N.serif, fontWeight: 500, fontSize: 56,
          color: N.sand, fontStyle: 'italic', marginBottom: 50
        }}>{data.subtitle || 'au studio cette nuit.'}</div>
        <div style={{ display: 'flex', gap: 13, flexWrap: 'wrap' }}>
          {(data.chips || []).filter(Boolean).map((c, i) =>
          <div key={i} style={{
            padding: '12px 20px', background: 'transparent',
            border: `1px solid ${N.stone}`, borderRadius: 999,
            fontFamily: N.mono, fontSize: 13, letterSpacing: '0.2em',
            textTransform: 'uppercase', fontWeight: 500, color: N.sand
          }}>{c}</div>
          )}
        </div>
      </div>
      <Grain />
    </div>);

}

window.SessionPost = SessionPost;
window.SessionStory = SessionStory;

// ═══════════════════════════════════════════════════════════════════════════
// PROMO layout — carte typographique (offre). Fond charbon, accent terracotta.
// ═══════════════════════════════════════════════════════════════════════════

function PromoPost({ data }) {
  return (
    <div style={{
      position: 'relative', width: 1080, height: 1350,
      overflow: 'hidden', color: N.bone, fontFamily: N.body,
      background: `radial-gradient(ellipse at 72% 24%, rgba(193,106,67,0.16) 0%, transparent 56%), ${N.ink}`
    }}>
      <img src="assets/nomade-logo.png" alt="" crossOrigin="anonymous"
      style={{
        position: 'absolute', top: '60%', right: '-10%', width: 820,
        transform: 'translateY(-50%) rotate(-10deg)',
        opacity: 0.05, pointerEvents: 'none'
      }} />
      <div style={{ position: 'absolute', top: 60, left: 68, right: 68, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 15 }}>
          <Logo height={42} />
          <div style={{ fontFamily: N.display, fontWeight: 600, fontSize: 17, letterSpacing: '0.46em', color: N.bone }}>
            NOMADE
          </div>
        </div>
        <div style={{
          padding: '7px 16px', background: 'transparent', color: N.taupe,
          border: `1px solid ${N.stone}`,
          borderRadius: 999, fontFamily: N.mono, fontSize: 10,
          letterSpacing: '0.32em', textTransform: 'uppercase', fontWeight: 500
        }}>{data.pill || 'OFFRE'}</div>
      </div>
      <div style={{
        position: 'absolute', top: 156, left: 68, right: 68,
        fontFamily: N.mono, fontSize: 13, letterSpacing: '0.44em',
        color: N.clay, textTransform: 'uppercase', fontWeight: 500
      }}>{data.kicker || '/ OFFRE LIMITÉE'}</div>
      <div style={{
        position: 'absolute', top: 196, left: 64, right: 64,
        fontFamily: N.display, fontWeight: 700, fontSize: 380, lineHeight: 0.85,
        letterSpacing: '-0.06em', color: N.bone
      }}>{data.headline || '-30%'}</div>
      <div style={{
        position: 'absolute', top: 580, left: 68, right: 68,
        fontFamily: N.serif, fontWeight: 500, fontStyle: 'italic', fontSize: 50,
        letterSpacing: '0', lineHeight: 1.08, color: N.sand
      }}>{data.subtitle || 'sur toutes les sessions studio'}</div>
      <div style={{
        position: 'absolute', top: 712, left: 68,
        padding: '11px 20px',
        background: 'transparent',
        border: `1px solid ${N.stone}`,
        borderRadius: 4,
        fontFamily: N.mono, fontSize: 13, letterSpacing: '0.22em',
        fontWeight: 500, textTransform: 'uppercase', color: N.taupe,
        display: 'inline-block'
      }}>{data.promoDate || 'Jusqu\'au 30.06.2026'}</div>
      <div style={{
        position: 'absolute', top: 812, left: 68, right: 68,
        display: 'flex', gap: 10, flexWrap: 'wrap'
      }}>
        {(data.chips || []).filter(Boolean).map((c, i) =>
        <div key={i} style={{
          padding: '9px 18px', background: 'transparent',
          border: `1px solid ${N.stone}`, borderRadius: 999,
          fontFamily: N.mono, fontSize: 11.5, letterSpacing: '0.2em',
          textTransform: 'uppercase', fontWeight: 500, color: N.sand
        }}>{c}</div>
        )}
      </div>
      {/* Code promo — bloc accent terracotta unique */}
      <div style={{
        position: 'absolute', bottom: 180, left: 68, right: 68,
        padding: '26px 34px', background: N.clay, color: N.inkDeep,
        borderRadius: 4,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        boxShadow: '0 24px 60px rgba(7,6,5,0.5)'
      }}>
        <div>
          <div style={{
            fontFamily: N.mono, fontSize: 11, letterSpacing: '0.34em',
            color: 'rgba(12,10,8,0.62)', textTransform: 'uppercase',
            marginBottom: 8, fontWeight: 600
          }}>— Code promo</div>
          <div style={{
            fontFamily: N.display, fontWeight: 700, fontSize: 44,
            letterSpacing: '0.05em', textTransform: 'uppercase', color: N.inkDeep
          }}>{data.promoCode || 'NOMADE-30'}</div>
        </div>
        <div style={{
          padding: '13px 24px', background: N.inkDeep, color: N.bone,
          borderRadius: 4, fontFamily: N.display, fontWeight: 600, fontSize: 14,
          letterSpacing: '0.16em', textTransform: 'uppercase'
        }}>Réserver →</div>
      </div>
      <div style={{
        position: 'absolute', bottom: 60, left: 68, right: 68,
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        paddingTop: 26, borderTop: `1px solid ${N.line}`
      }}>
        <div style={{
          fontFamily: N.body, fontSize: 15, color: N.whiteSoft,
          fontWeight: 300, lineHeight: 1.45, maxWidth: 540, whiteSpace: 'pre-line'
        }}>{data.bottomCopy || 'Premier arrivé, premier servi.\nPlaces limitées.'}</div>
        <div style={{
          fontFamily: N.display, fontWeight: 600, fontSize: 18,
          letterSpacing: '0.16em', textTransform: 'uppercase', textAlign: 'right', color: N.bone
        }}>nomadeclan<span style={{ color: N.clay }}>.com</span></div>
      </div>
      <Grain />
    </div>);

}

function PromoStory({ data }) {
  return (
    <div style={{
      position: 'relative', width: 1080, height: 1920,
      overflow: 'hidden', color: N.bone, fontFamily: N.body,
      background: `radial-gradient(ellipse at 50% 22%, rgba(193,106,67,0.16) 0%, transparent 58%), ${N.ink}`
    }}>
      <img src="assets/nomade-logo.png" alt="" crossOrigin="anonymous"
      style={{
        position: 'absolute', top: '52%', right: '-12%', width: 1000,
        transform: 'translateY(-50%) rotate(-12deg)',
        opacity: 0.045, pointerEvents: 'none'
      }} />
      <div style={{ position: 'absolute', top: 84, left: 68, right: 68, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <Logo height={50} />
          <div style={{ fontFamily: N.display, fontWeight: 600, fontSize: 20, letterSpacing: '0.46em', color: N.bone }}>
            NOMADE
          </div>
        </div>
        <div style={{
          padding: '9px 20px', background: 'transparent', color: N.taupe,
          border: `1px solid ${N.stone}`,
          borderRadius: 999, fontFamily: N.mono, fontSize: 11,
          letterSpacing: '0.32em', textTransform: 'uppercase', fontWeight: 500
        }}>{data.pill || 'OFFRE'}</div>
      </div>
      <div style={{
        position: 'absolute', top: 250, left: 64, right: 64, textAlign: 'center',
        fontFamily: N.mono, fontSize: 17, letterSpacing: '0.44em',
        color: N.clay, textTransform: 'uppercase', fontWeight: 500
      }}>{data.kicker || '/ OFFRE LIMITÉE'}</div>
      <div style={{
        position: 'absolute', top: 326, left: 64, right: 64, textAlign: 'center',
        fontFamily: N.display, fontWeight: 700, fontSize: 360, lineHeight: 0.88,
        letterSpacing: '-0.06em', color: N.bone
      }}>{data.headline || '-30%'}</div>
      <div style={{
        position: 'absolute', top: 726, left: 64, right: 64, textAlign: 'center',
        fontFamily: N.serif, fontWeight: 500, fontStyle: 'italic', fontSize: 52,
        letterSpacing: '0', lineHeight: 1.1, color: N.sand
      }}>{data.subtitle || 'sur toutes les sessions studio'}</div>
      <div style={{
        position: 'absolute', top: 896, left: '50%', transform: 'translateX(-50%)',
        padding: '12px 26px', background: 'transparent',
        border: `1px solid ${N.stone}`,
        borderRadius: 4,
        fontFamily: N.mono, fontSize: 14, letterSpacing: '0.24em',
        fontWeight: 500, textTransform: 'uppercase', whiteSpace: 'nowrap', color: N.taupe
      }}>{data.promoDate || 'Jusqu\'au 30.06.2026'}</div>
      <div style={{
        position: 'absolute', top: 1004, left: 64, right: 64,
        display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center'
      }}>
        {(data.chips || []).filter(Boolean).map((c, i) =>
        <div key={i} style={{
          padding: '11px 20px', background: 'transparent',
          border: `1px solid ${N.stone}`, borderRadius: 999,
          fontFamily: N.mono, fontSize: 13, letterSpacing: '0.2em',
          textTransform: 'uppercase', fontWeight: 500, color: N.sand
        }}>{c}</div>
        )}
      </div>
      <div style={{
        position: 'absolute', bottom: 260, left: 68, right: 68,
        padding: '32px 38px', background: N.clay, color: N.inkDeep,
        borderRadius: 4, textAlign: 'center',
        boxShadow: '0 30px 80px rgba(7,6,5,0.55)'
      }}>
        <div style={{
          fontFamily: N.mono, fontSize: 12, letterSpacing: '0.34em',
          color: 'rgba(12,10,8,0.62)', textTransform: 'uppercase',
          marginBottom: 12, fontWeight: 600
        }}>— Code promo</div>
        <div style={{
          fontFamily: N.display, fontWeight: 700, fontSize: 56,
          letterSpacing: '0.06em', textTransform: 'uppercase',
          color: N.inkDeep, marginBottom: 24
        }}>{data.promoCode || 'NOMADE-30'}</div>
        <div style={{
          display: 'inline-block', padding: '14px 30px',
          background: N.inkDeep, color: N.bone,
          borderRadius: 4, fontFamily: N.display, fontWeight: 600, fontSize: 15,
          letterSpacing: '0.16em', textTransform: 'uppercase'
        }}>Réserver une session →</div>
      </div>
      <div style={{
        position: 'absolute', bottom: 120, left: 64, right: 64, textAlign: 'center',
        fontFamily: N.display, fontWeight: 600, fontSize: 21,
        letterSpacing: '0.16em', textTransform: 'uppercase', color: N.bone
      }}>nomadeclan<span style={{ color: N.clay }}>.com</span></div>
      <Grain />
    </div>);

}

window.PromoPost = PromoPost;
window.PromoStory = PromoStory;
window.CERTIF_TYPES = CERTIF_TYPES;

// CertifBackdrop — fond utilisé par CertifPost / CertifStory.
// Charbon chaud + sillons de vinyle en neutre discret + halo sable très léger.
function CertifBackdrop({ children }) {
  const Disc = ({ cx, cy, r, opacity = 1 }) => {
    const grooves = [];
    for (let gr = 30; gr <= r; gr += 8) grooves.push(gr);
    return (
      <g opacity={opacity}>
        <circle cx={cx} cy={cy} r={r} fill="rgba(236,227,212,0.012)" stroke="rgba(236,227,212,0.10)" strokeWidth="1.5" />
        {grooves.map((gr, i) =>
        <circle key={i} cx={cx} cy={cy} r={gr}
        fill="none" stroke="rgba(236,227,212,0.05)"
        strokeWidth={i % 4 === 0 ? 1 : 0.5} />
        )}
        <circle cx={cx} cy={cy} r={r * 0.22} fill="rgba(236,227,212,0.05)" stroke="rgba(236,227,212,0.16)" strokeWidth="1" />
        <circle cx={cx} cy={cy} r={r * 0.02} fill="rgba(236,227,212,0.2)" />
      </g>);

  };

  return (
    <>
      <div style={{
        position: 'absolute', inset: 0,
        background: `
          radial-gradient(ellipse at 50% 26%, rgba(207,191,164,0.14) 0%, transparent 52%),
          radial-gradient(ellipse at 82% 82%, rgba(193,106,67,0.10) 0%, transparent 54%),
          radial-gradient(ellipse at 18% 92%, rgba(94,84,71,0.28) 0%, transparent 56%),
          linear-gradient(180deg, #16120D 0%, #0C0A08 52%, #070605 100%)
        `
      }} />
      <svg viewBox="0 0 1080 1920" preserveAspectRatio="xMidYMid slice"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <Disc cx={-120} cy={1700} r={520} opacity={0.7} />
        <Disc cx={1180} cy={120} r={460} opacity={0.6} />
        <Disc cx={1080} cy={1100} r={280} opacity={0.5} />
        <Disc cx={-60} cy={800} r={220} opacity={0.45} />
      </svg>
      <img src="assets/nomade-logo.png" alt="" crossOrigin="anonymous"
      style={{
        position: 'absolute', top: '50%', left: '50%',
        transform: 'translate(-50%, -50%)',
        width: '70%', opacity: 0.035, mixBlendMode: 'screen'
      }} />
      {children}
    </>);

}