// ─── PLACEHOLDER COMPONENT ────────────────────────────────────────────────
// Reusable placeholder for product mockup zones.
// aspect: "1:1" | "9:16" | "16:10"
function Placeholder({ zone, aspect = '1:1', label, style, mini, image }) {
  const aspectMap = { '1:1': '1 / 1', '9:16': '9 / 16', '16:10': '16 / 10' };
  return (
    <div
      data-template-zone={zone}
      style={{
        position: 'relative',
        width: '100%',
        aspectRatio: aspectMap[aspect],
        borderRadius: mini ? 6 : 12,
        background: image ? 'transparent' : 'rgba(255,255,255,0.55)',
        backdropFilter: image ? 'none' : 'blur(8px)',
        border: image ? 'none' : '1px dashed rgba(110,2,64,0.22)',
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        ...style,
      }}
    >
      {image && (
        <img src={image} alt={label || ''} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      )}
      {/* Subtle stripe pattern */}
      {!image && <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(45deg, rgba(110,2,64,0.04) 0 8px, transparent 8px 16px)',
        pointerEvents: 'none',
      }}></div>}
      {!image && !mini && label && (
        <div style={{
          position: 'relative', zIndex: 1,
          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
          fontSize: 10, letterSpacing: '0.04em',
          color: 'rgba(42,14,26,0.42)',
          textAlign: 'center', padding: '8px 12px',
          maxWidth: '90%',
        }}>
          {label}
        </div>
      )}
      {!image && mini && (
        <div style={{
          width: 6, height: 6, borderRadius: '50%',
          background: 'rgba(110,2,64,0.25)',
        }}></div>
      )}
    </div>
  );
}

// Window-frame variant for website mockups
function PlaceholderWebsite({ zone, label, style, image }) {
  return (
    <div
      data-template-zone={zone}
      style={{
        position: 'relative',
        width: '100%',
        aspectRatio: '16 / 10',
        borderRadius: 10,
        background: 'rgba(255,255,255,0.78)',
        border: '1px solid rgba(42,14,26,0.1)',
        overflow: 'hidden',
        boxShadow: '0 4px 20px rgba(110,2,64,0.08)',
        display: 'flex', flexDirection: 'column',
        ...style,
      }}
    >
      <div style={{ flex: 1, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
        {image && (
          <img src={image} alt={label || ''} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        )}
        {!image && <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'repeating-linear-gradient(45deg, rgba(110,2,64,0.04) 0 8px, transparent 8px 16px)',
        }}></div>}
        {!image && label && (
          <div style={{
            position: 'relative', zIndex: 1,
            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
            fontSize: 10, letterSpacing: '0.04em',
            color: 'rgba(42,14,26,0.42)',
            textAlign: 'center', padding: '8px 12px', maxWidth: '90%',
          }}>{label}</div>
        )}
      </div>
    </div>
  );
}

window.Placeholder = Placeholder;
window.PlaceholderWebsite = PlaceholderWebsite;