// Decorative SVG "plate" placeholders for each bird.
// These are abstract field-guide compositions — striped backgrounds + a label,
// not literal bird drawings. The palette varies per species.

function BirdPlate({ bird, size = 'lg' }) {
  const [c1, c2, c3] = bird.palette;
  const stripeId = `stripes-${bird.id}-${size}`;
  const ringId = `ring-${bird.id}-${size}`;
  const plateNum = String(bird.plate).padStart(2, '0');

  return (
    <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice"
         style={{ width: '100%', height: '100%', display: 'block' }}
         xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id={stripeId} patternUnits="userSpaceOnUse" width="6" height="6"
                 patternTransform="rotate(45)">
          <rect width="6" height="6" fill={c2} />
          <rect width="3" height="6" fill={c1} opacity="0.55" />
        </pattern>
        <radialGradient id={ringId} cx="50%" cy="44%" r="55%">
          <stop offset="0%" stopColor={c2} stopOpacity="0" />
          <stop offset="70%" stopColor={c2} stopOpacity="0" />
          <stop offset="100%" stopColor={c3} stopOpacity="0.18" />
        </radialGradient>
      </defs>

      {/* paper background */}
      <rect width="400" height="500" fill="#f4ede0" />

      {/* striped centerpiece */}
      <rect x="40" y="60" width="320" height="320" fill={`url(#${stripeId})`} />

      {/* solid color block — represents the bird */}
      <rect x="40" y="60" width="320" height="320" fill={`url(#${ringId})`} />
      <ellipse cx="200" cy="220" rx="92" ry="64" fill={c1} opacity="0.92" />
      <ellipse cx="200" cy="220" rx="92" ry="64" fill="none" stroke={c3} strokeWidth="1" opacity="0.5" />

      {/* corner registration marks */}
      {[[40,60],[360,60],[40,380],[360,380]].map(([x,y], i) => (
        <g key={i} stroke={c3} strokeWidth="0.6" opacity="0.5">
          <line x1={x-6} y1={y} x2={x+6} y2={y} />
          <line x1={x} y1={y-6} x2={x} y2={y+6} />
        </g>
      ))}

      {/* plate label */}
      <text x="40" y="420" fill={c3} opacity="0.75"
            style={{ font: '500 11px ui-monospace, "JetBrains Mono", monospace', letterSpacing: '0.18em' }}>
        PLATE {plateNum} — {bird.family.toUpperCase()}
      </text>
      <text x="40" y="446" fill={c3}
            style={{ font: '400 18px "Cormorant Garamond", "Source Serif 4", serif', fontStyle: 'italic' }}>
        {bird.latin}
      </text>
      <text x="40" y="472" fill={c3} opacity="0.6"
            style={{ font: '400 10px ui-monospace, monospace', letterSpacing: '0.1em' }}>
        {bird.length} · {bird.weight} · {bird.region.toUpperCase()}
      </text>
    </svg>
  );
}

// Smaller plate for index cards — same DNA, less metadata
function BirdPlateCompact({ bird }) {
  const [c1, c2, c3] = bird.palette;
  const stripeId = `cstripes-${bird.id}`;
  return (
    <svg viewBox="0 0 200 160" preserveAspectRatio="xMidYMid slice"
         style={{ width: '100%', height: '100%', display: 'block' }}
         xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id={stripeId} patternUnits="userSpaceOnUse" width="5" height="5"
                 patternTransform="rotate(45)">
          <rect width="5" height="5" fill={c2} />
          <rect width="2.5" height="5" fill={c1} opacity="0.5" />
        </pattern>
      </defs>
      <rect width="200" height="160" fill="#f4ede0" />
      <rect x="14" y="14" width="172" height="132" fill={`url(#${stripeId})`} />
      <ellipse cx="100" cy="80" rx="44" ry="28" fill={c1} opacity="0.92" />
      <ellipse cx="100" cy="80" rx="44" ry="28" fill="none" stroke={c3} strokeWidth="0.7" opacity="0.45" />
    </svg>
  );
}

Object.assign(window, { BirdPlate, BirdPlateCompact });