/* global React */
const { useState, useEffect } = React;

/**
 * Placeholder image used when before/after URLs aren't provided yet.
 * Stays on-brand: subtle grayscale tone, hairline border, an eyebrow label,
 * and a "x×y placeholder" caption. Two flavors (before vs after) so the
 * slider has visible contrast even before real images are added.
 */
function Placeholder({ kind = 'before', label = 'Image' }) {
  const isBefore = kind === 'before';
  const bg = isBefore ? '#E3E3E3' : '#2D333A';
  const fg = isBefore ? '#14171C' : '#FFFFFF';
  const muted = isBefore ? '#9D9D9C' : '#9D9D9C';

  return (
    <div
      style={{
        position: 'absolute',
        inset: 0,
        background: bg,
        color: fg,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        padding: 24,
        boxSizing: 'border-box',
        fontFamily: 'Poppins, Arial, sans-serif',
        overflow: 'hidden',
      }}
    >
      {/* Diagonal pattern lines, very subtle */}
      <svg
        viewBox="0 0 100 100"
        preserveAspectRatio="none"
        style={{
          position: 'absolute',
          inset: 0,
          width: '100%',
          height: '100%',
          opacity: 0.06,
        }}
      >
        <defs>
          <pattern id={`p-${kind}`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="6" stroke={fg} strokeWidth="0.5" />
          </pattern>
        </defs>
        <rect width="100" height="100" fill={`url(#p-${kind})`} />
      </svg>

      {/* Top: eyebrow */}
      <div
        style={{
          position: 'relative',
          fontSize: 10,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          fontWeight: 600,
          color: muted,
        }}
      >
        {isBefore ? '— Source' : '— Output'}
      </div>

      {/* Center: big label */}
      <div
        style={{
          position: 'relative',
          fontWeight: 300,
          fontSize: 'clamp(28px, 4vw, 56px)',
          letterSpacing: '-0.02em',
          lineHeight: 1.05,
          textAlign: 'center',
          alignSelf: 'center',
          maxWidth: '70%',
        }}
      >
        {label}
      </div>

      {/* Bottom: caption */}
      <div
        style={{
          position: 'relative',
          display: 'flex',
          justifyContent: 'space-between',
          fontSize: 10,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          fontWeight: 600,
          color: muted,
        }}
      >
        <span>Placeholder</span>
        <span>{isBefore ? '01' : '02'} / 02</span>
      </div>
    </div>
  );
}

window.Placeholder = Placeholder;