// Stylized silhouettes + identity cards for the 3 players.
// Designed to be bold, readable, recognizable — not literal illustrations.

// ── Silhouette: rendered as pure SVG so it scales.
// Three variants: enthusiast (slim active pose), trainer (commanding stance),
// institution (not a person — a modernist building icon).

function SilhouetteEnthusiast({ size = 200, glow = true, color = '#CCFF00' }) {
  return (
    <svg width={size} height={size * 1.2} viewBox="0 0 100 120" style={{ overflow: 'visible' }}>
      {glow && (
        <defs>
          <filter id="sil-e-glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="2"/>
          </filter>
        </defs>
      )}
      <g fill={color} style={glow ? { filter: `drop-shadow(0 0 12px ${color})` } : {}}>
        {/* head */}
        <circle cx="50" cy="18" r="9"/>
        {/* torso leaning forward — running / active stance */}
        <path d="M50,28 L58,40 L62,62 L58,78 L52,78 L48,64 L44,46 Z"/>
        {/* back arm raised */}
        <path d="M58,40 L70,32 L74,40 L64,46 Z"/>
        {/* front arm swinging */}
        <path d="M48,44 L38,52 L36,60 L42,58 Z"/>
        {/* forward leg */}
        <path d="M56,76 L68,92 L66,108 L60,108 L54,94 Z"/>
        {/* back leg */}
        <path d="M50,76 L42,96 L38,110 L32,110 L40,94 L44,80 Z"/>
      </g>
    </svg>
  );
}

function SilhouetteTrainer({ size = 200, glow = true, color = '#CCFF00' }) {
  return (
    <svg width={size} height={size * 1.2} viewBox="0 0 100 120" style={{ overflow: 'visible' }}>
      <g fill={color} style={glow ? { filter: `drop-shadow(0 0 14px ${color})` } : {}}>
        {/* head */}
        <circle cx="50" cy="16" r="9"/>
        {/* broad shoulders, standing tall */}
        <path d="M50,26 L66,34 L70,46 L64,48 L60,60 L58,82 L42,82 L40,60 L36,48 L30,46 L34,34 Z"/>
        {/* right arm by side, slightly forward */}
        <path d="M66,36 L74,52 L72,70 L66,70 L62,54 Z"/>
        {/* left arm gesturing up (clipboard/pointing) */}
        <path d="M34,36 L26,28 L22,20 L18,22 L24,32 L28,46 Z"/>
        {/* legs grounded, wide stance */}
        <path d="M42,80 L34,108 L28,108 L34,92 L40,78 Z"/>
        <path d="M58,80 L66,108 L72,108 L66,92 L60,78 Z"/>
      </g>
    </svg>
  );
}

function IconInstitution({ size = 200, glow = true, color = '#CCFF00' }) {
  // Abstract modern gym building — stacked volumes
  return (
    <svg width={size} height={size * 1.2} viewBox="0 0 100 120" style={{ overflow: 'visible' }}>
      <g fill={color} style={glow ? { filter: `drop-shadow(0 0 16px ${color})` } : {}}>
        {/* Base */}
        <rect x="12" y="78" width="76" height="30"/>
        {/* Mid block */}
        <rect x="24" y="50" width="52" height="28"/>
        {/* Top tower */}
        <rect x="40" y="20" width="20" height="30"/>
        {/* Antenna */}
        <rect x="49" y="8" width="2" height="12"/>
        <circle cx="50" cy="8" r="2"/>
      </g>
      {/* Window grid (cut-outs) */}
      <g fill="#0a0a0a">
        {/* Base windows */}
        {[0,1,2,3,4].map(c =>
          [0,1].map(r => (
            <rect key={`b${c}${r}`}
              x={18 + c * 13} y={84 + r * 10}
              width={6} height={5}/>
          ))
        )}
        {/* Mid windows */}
        {[0,1,2].map(c =>
          [0,1].map(r => (
            <rect key={`m${c}${r}`}
              x={30 + c * 14} y={56 + r * 10}
              width={6} height={5}/>
          ))
        )}
        {/* Tower windows */}
        {[0,1,2].map(r => (
          <rect key={`t${r}`}
            x={46} y={26 + r * 8}
            width={8} height={4}/>
        ))}
      </g>
    </svg>
  );
}

// ── Player card: silhouette + label + status line.
// Used in Scene 1 (establish cast) and referenced throughout.
function PlayerCard({
  x, y, width = 260, height = 340,
  role,           // 'enthusiast' | 'trainer' | 'institution'
  name,           // display name
  tag,            // role tag text, eg "ENTHUSIAST"
  meta,           // small meta text below name
  active = true,  // glow on/off
  highlighted = false, // extra ring
  opacity = 1,
  scale = 1,
  transform = '',
}) {
  const Silhouette = role === 'enthusiast' ? SilhouetteEnthusiast
                   : role === 'trainer' ? SilhouetteTrainer
                   : IconInstitution;
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      width, height,
      opacity,
      transform: `${transform} scale(${scale})`,
      transformOrigin: 'center center',
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'flex-start',
    }}>
      {/* Ring / backdrop */}
      <div style={{
        position: 'absolute',
        left: '50%', top: 60,
        transform: 'translateX(-50%)',
        width: 220, height: 220,
        borderRadius: '50%',
        background: highlighted
          ? 'radial-gradient(circle, rgba(204,255,0,0.18) 0%, rgba(204,255,0,0.02) 55%, transparent 80%)'
          : 'radial-gradient(circle, rgba(204,255,0,0.07) 0%, transparent 65%)',
        border: highlighted ? '1px solid rgba(204,255,0,0.35)' : '1px solid rgba(255,255,255,0.06)',
        boxShadow: highlighted ? '0 0 60px rgba(204,255,0,0.25), inset 0 0 40px rgba(204,255,0,0.08)' : 'none',
        transition: 'all 300ms',
      }}/>
      {/* Silhouette */}
      <div style={{
        position: 'relative', zIndex: 2,
        marginTop: 30,
        filter: active ? 'none' : 'grayscale(1) brightness(0.5)',
      }}>
        <Silhouette size={160} glow={highlighted} color={active ? '#CCFF00' : 'rgba(255,255,255,0.3)'}/>
      </div>
      {/* Label */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        textAlign: 'center',
      }}>
        <div style={{
          fontFamily: FONT_MONO, fontSize: 11, fontWeight: 700,
          color: BRAND.volt, letterSpacing: '0.25em',
          marginBottom: 6, textTransform: 'uppercase',
          textShadow: '0 0 10px rgba(204,255,0,0.4)',
        }}>{tag}</div>
        <div style={{
          fontFamily: FONT_DISPLAY, fontSize: 26, fontWeight: 800,
          color: '#fff', letterSpacing: '-0.02em',
          marginBottom: 4,
        }}>{name}</div>
        {meta && (
          <div style={{
            fontFamily: FONT_SANS, fontSize: 13, fontWeight: 500,
            color: BRAND.textSecondary, letterSpacing: '-0.005em',
          }}>{meta}</div>
        )}
      </div>
    </div>
  );
}

// ── Flight path: a data packet flying from A to B along a curve,
// leaving a trail. Used to visualize connections in action.
// progress 0..1. Origin/target are {x, y}.
function DataPacket({
  fromX, fromY, toX, toY,
  progress,
  label,          // optional glyph text ("$", "→", "✓", "⚡", or emoji-equivalent)
  curve = 0.3,    // bend strength
  color = '#CCFF00',
  size = 24,
}) {
  if (progress <= 0 || progress >= 1) return null;

  // Quadratic bezier midpoint for curve control
  const mx = (fromX + toX) / 2;
  const my = (fromY + toY) / 2;
  const dx = toX - fromX;
  const dy = toY - fromY;
  const perpX = -dy;
  const perpY = dx;
  const perpLen = Math.sqrt(perpX*perpX + perpY*perpY) || 1;
  const cx = mx + (perpX / perpLen) * Math.sqrt(dx*dx+dy*dy) * curve;
  const cy = my + (perpY / perpLen) * Math.sqrt(dx*dx+dy*dy) * curve;

  // Current position on bezier
  const t = progress;
  const x = (1-t)*(1-t)*fromX + 2*(1-t)*t*cx + t*t*toX;
  const y = (1-t)*(1-t)*fromY + 2*(1-t)*t*cy + t*t*toY;

  // Trail (segments sampled behind)
  const trailSteps = 8;
  const trail = [];
  for (let i = 1; i <= trailSteps; i++) {
    const tt = Math.max(0, t - i * 0.04);
    const tx = (1-tt)*(1-tt)*fromX + 2*(1-tt)*tt*cx + tt*tt*toX;
    const ty = (1-tt)*(1-tt)*fromY + 2*(1-tt)*tt*cy + tt*tt*toY;
    trail.push({ x: tx, y: ty, o: (1 - i/trailSteps) * 0.8 });
  }

  return (
    <>
      {/* Full path line (faint) */}
      <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'visible' }} viewBox="0 0 1920 1080">
        <path
          d={`M ${fromX} ${fromY} Q ${cx} ${cy} ${toX} ${toY}`}
          fill="none"
          stroke={color}
          strokeOpacity="0.18"
          strokeWidth="1"
          strokeDasharray="4 6"
        />
        {/* Trail */}
        {trail.map((p, i) => (
          <circle key={i} cx={p.x} cy={p.y} r={2 + (1-i/trailSteps)*3} fill={color} opacity={p.o * 0.5}/>
        ))}
      </svg>
      {/* Packet */}
      <div style={{
        position: 'absolute',
        left: x - size/2, top: y - size/2,
        width: size, height: size,
        background: color,
        borderRadius: '50%',
        boxShadow: `0 0 ${size}px ${color}, 0 0 ${size*2}px rgba(204,255,0,0.4)`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: FONT_MONO, fontSize: Math.floor(size * 0.55), fontWeight: 900,
        color: '#0a0a0a',
      }}>
        {label}
      </div>
    </>
  );
}

// ── Phone frame (compact, bigger than mini, smaller than full hero)
function PhoneMini({ x, y, width = 200, rotateDeg = 0, children, glow = false }) {
  const height = width * 2.05;
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      width, height,
      transform: `rotate(${rotateDeg}deg)`,
      transformOrigin: 'center center',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        borderRadius: width * 0.15,
        background: '#0a0a0a',
        border: '2px solid rgba(255,255,255,0.18)',
        boxShadow: glow
          ? '0 0 80px rgba(204,255,0,0.4), 0 30px 80px rgba(0,0,0,0.7)'
          : '0 20px 60px rgba(0,0,0,0.6)',
        overflow: 'hidden',
      }}>
        {/* Notch */}
        <div style={{
          position: 'absolute', left: '50%', top: 8,
          transform: 'translateX(-50%)',
          width: width * 0.32, height: width * 0.06,
          background: '#000', borderRadius: width * 0.04, zIndex: 10,
        }}/>
        {/* Screen bg */}
        <div style={{ position: 'absolute', inset: 0, background: '#0a0a0a' }}>
          {children}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  SilhouetteEnthusiast, SilhouetteTrainer, IconInstitution,
  PlayerCard, DataPacket, PhoneMini,
});