/* eslint-disable react/prop-types */
/**
 * CobreDefs · Defs SVG globales para la textura de cobre patinado.
 * El brief 0.1 lo especifica como composición de 3 capas:
 *   1. gradiente diagonal de 5 paradas
 *   2. sheen vertical
 *   3. ruido procedural feTurbulence
 *
 * Inyectar UNA sola vez en el shell de la app para poder usar
 * fill="url(#cobre-patinado)" en cualquier SVG hijo.
 *
 * Para CSS backgrounds, usar `/assets/textures/cobre-patinado.svg`.
 */

function CobreDefs() {
  return (
    <svg
      aria-hidden="true"
      width="0"
      height="0"
      style={{ position: 'absolute', width: 0, height: 0, overflow: 'hidden' }}
    >
      <defs>
        <linearGradient id="cobre-base" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%"   stopColor="#5e3a17" />
          <stop offset="25%"  stopColor="#9a5e25" />
          <stop offset="50%"  stopColor="#c8884a" />
          <stop offset="75%"  stopColor="#a26430" />
          <stop offset="100%" stopColor="#4e2f11" />
        </linearGradient>

        <linearGradient id="cobre-sheen" x1="50%" y1="0%" x2="50%" y2="100%">
          <stop offset="0%"   stopColor="#ffffff" stopOpacity="0.16" />
          <stop offset="40%"  stopColor="#ffffff" stopOpacity="0" />
          <stop offset="100%" stopColor="#000000" stopOpacity="0.22" />
        </linearGradient>

        <filter id="cobre-noise" x="0%" y="0%" width="100%" height="100%">
          <feTurbulence type="fractalNoise" baseFrequency="3" numOctaves="3" seed="3" />
          <feColorMatrix values="0 0 0 0 0.40
                                 0 0 0 0 0.25
                                 0 0 0 0 0.10
                                 0 0 0 0.55 0" />
        </filter>

        <pattern id="cobre-patinado" patternUnits="userSpaceOnUse" width="600" height="90">
          <rect width="600" height="90" fill="url(#cobre-base)" />
          <rect width="600" height="90" filter="url(#cobre-noise)" style={{ mixBlendMode: 'multiply', opacity: 0.6 }} />
          <rect width="600" height="90" fill="url(#cobre-sheen)" />
        </pattern>
      </defs>
    </svg>
  );
}

window.CobreDefs = CobreDefs;