/* Gaby · retrato — PNG real de Iris (perfil con moño + aro, trazo crema sobre naranjo)
   con anillo petrol punteado orbitando. El PNG es el avatar canónico de Gaby;
   los anillos vienen del DS de cloud.design (vale el wow visual). */

const CY_ORANGE = "var(--cy-orange)";
const CY_PETROL = "var(--cy-petrol)";

/* --- Anillos --- */
function RingDashed() {
  return (
    <g className="cy-ring cy-ring--spin" fill="none" stroke={CY_PETROL} strokeWidth="1.4" opacity="0.85">
      <circle cx="50" cy="50" r="46" strokeDasharray="3 7" strokeLinecap="round" />
    </g>
  );
}
function RingDouble() {
  return (
    <>
      <g fill="none" stroke={CY_PETROL} strokeWidth="1" opacity="0.5">
        <circle cx="50" cy="50" r="47" />
      </g>
      <g className="cy-ring cy-ring--spin-rev" fill="none" stroke={CY_PETROL} strokeWidth="1.4" opacity="0.85">
        <circle cx="50" cy="50" r="43" strokeDasharray="2 9" strokeLinecap="round" />
      </g>
    </>
  );
}
function RingTravel() {
  /* anillo fino + un fotón naranjo viajando (guiño al orbital, sin redibujarlo) */
  return (
    <>
      <g fill="none" stroke={CY_PETROL} strokeWidth="1.2" opacity="0.55">
        <circle cx="50" cy="50" r="46" />
      </g>
      <g className="cy-ring cy-ring--spin">
        <circle cx="50" cy="4" r="2.6" fill={CY_ORANGE} stroke="none" />
      </g>
    </>
  );
}
const RINGS = { dashed: RingDashed, double: RingDouble, travel: RingTravel };

function GabyPortrait({ size = 72, ring = "dashed", showRing = true }) {
  const Ring = RINGS[ring] || RingDashed;
  return (
    <div className="cy-portrait" style={{
      width: size, height: size, position: 'relative',
      flex: 'none', display: 'inline-block'
    }}>
      {/* PNG real de Iris recortado a círculo */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: "url('/assets/avatar-gaby.webp')",
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        borderRadius: '50%',
        boxShadow: '0 6px 20px rgba(240,136,60,0.32), inset 0 1px 0 rgba(255,255,255,0.18)',
        border: '1px solid rgba(240,136,60,0.35)'
      }} aria-label="Gaby" role="img" />
      {/* Anillos animados encima (no bloquean clicks) */}
      {showRing && (
        <svg viewBox="0 0 100 100" style={{
          position: 'absolute', inset: '-8%', width: '116%', height: '116%',
          pointerEvents: 'none', overflow: 'visible'
        }} aria-hidden="true">
          <Ring />
        </svg>
      )}
    </div>
  );
}

window.GabyPortrait = GabyPortrait;