// ImageDemo — placeholder par défaut, image si imageSrc fourni
// Même structure visuelle que VideoDemo (template) : aspect 16:9, max 960px,
// border + shadow + light gradient. Exposé sur window.ImageDemo.

const ImageDemo = ({ imageSrc, alt = '', placeholderLabel = 'Vista previa próximamente' }) => (
  <section style={{ paddingTop: 16, paddingBottom: 32 }}>
    <div className="container">
      <div
        className="reveal cb-image-demo"
        style={{
          maxWidth: 960,
          margin: '0 auto',
          borderRadius: 16,
          border: '1px solid var(--border)',
          background: 'linear-gradient(135deg, rgba(84,181,227,0.05) 0%, rgba(198,156,255,0.05) 100%), #F3F4F6',
          boxShadow: '0 24px 60px -20px rgba(15,23,42,0.18), 0 1px 2px rgba(0,0,0,0.04)',
          overflow: 'hidden',
          position: 'relative',
        }}
      >
        <div style={{ position: 'relative', width: '100%', paddingTop: '56.25%' }}>
          {imageSrc ? (
            <img
              src={imageSrc}
              alt={alt}
              loading="lazy"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
            />
          ) : (
            <div style={{
              position: 'absolute', inset: 0,
              display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
              gap: 18, padding: 24, textAlign: 'center',
            }}>
              <div style={{
                width: 76, height: 76, borderRadius: '50%',
                background: 'var(--grad)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 12px 32px -8px rgba(84,181,227,0.45)',
              }}>
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                  <circle cx="9" cy="9" r="2" />
                  <path d="M21 15l-5-5L5 21" />
                </svg>
              </div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--fg-muted)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                Imagen
              </div>
              <div style={{ fontSize: 15, color: 'var(--fg-muted)' }}>
                {placeholderLabel}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  </section>
);

window.ImageDemo = ImageDemo;