const _PA_strokeBase = { fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round' };

const ApogeeArt = () => (
  <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
    <g style={{ color: 'var(--accent)' }} {..._PA_strokeBase} strokeWidth="1">
      <path d="M 80 50 H 160" />
      <path d="M 240 50 H 280" />
      <path d="M 80 100 V 130" />
      <path d="M 160 50 V 100 H 80" />
      <path d="M 160 100 H 240 V 50" />
      <path d="M 160 150 H 240 V 100" />
      <path d="M 40 100 V 150 H 80" />
      <circle cx="80"  cy="50"  r="2.5" fill="currentColor" />
      <circle cx="160" cy="100" r="2.5" fill="currentColor" />
      <circle cx="240" cy="50"  r="2.5" fill="currentColor" />
      <circle cx="240" cy="100" r="2.5" fill="currentColor" />
      <rect x="20"  y="38"  width="60" height="24" rx="2" />
      <rect x="100" y="38"  width="60" height="24" rx="2" />
      <rect x="180" y="38"  width="60" height="24" rx="2" />
      <rect x="260" y="38"  width="40" height="24" rx="2" />
      <rect x="60"  y="120" width="60" height="24" rx="2" />
      <rect x="180" y="138" width="60" height="24" rx="2" />
      <line x1="20" y1="180" x2="40" y2="180" />
      <line x1="60" y1="180" x2="80" y2="180" />
      <line x1="100" y1="180" x2="120" y2="180" />
    </g>
  </svg>
);

const PinoArt = () => (
  <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
    <g style={{ color: 'var(--accent)' }} {..._PA_strokeBase}>
      <g strokeWidth="1.1">
        <ellipse cx="80" cy="100" rx="26" ry="26" />
        <ellipse cx="80" cy="100" rx="36" ry="22" transform="rotate(20 80 100)" />
        <ellipse cx="80" cy="100" rx="50" ry="16" transform="rotate(-15 80 100)" />
        <ellipse cx="80" cy="100" rx="62" ry="32" transform="rotate(40 80 100)" opacity="0.75" />
      </g>
      <g strokeWidth="1">
        <ellipse cx="220" cy="100" rx="14" ry="24" />
        <ellipse cx="220" cy="100" rx="22" ry="34" transform="rotate(-12 220 100)" />
        <ellipse cx="220" cy="100" rx="30" ry="44" transform="rotate(-25 220 100)" opacity="0.75" />
        <ellipse cx="220" cy="100" rx="8" ry="14" transform="rotate(8 220 100)" opacity="0.85" />
      </g>
      <g strokeWidth="0.9">
        <path d="M 100 100 C 130 20, 180 20, 222 88"  strokeDasharray="4 3" />
        <path d="M 100 100 C 150 180, 180 180, 222 112" strokeDasharray="4 3" />
        <path d="M 90 80  C 140 50, 180 40, 220 78"   strokeDasharray="2 5" opacity="0.7" />
        <path d="M 90 120 C 140 150, 180 160, 220 122" strokeDasharray="2 5" opacity="0.7" />
        <path d="M 100 95 C 200 40, 280 60, 300 100 C 280 140, 200 160, 100 105"
              strokeDasharray="1 4" opacity="0.55" />
      </g>
      <circle cx="80"  cy="100" r="7" fill="currentColor" />
      <circle cx="80"  cy="100" r="11" fill="none" strokeWidth="0.7" opacity="0.5" />
      <circle cx="220" cy="100" r="4.5" fill="currentColor" />
      <circle cx="220" cy="100" r="8" fill="none" strokeWidth="0.6" opacity="0.4" />
      <g strokeWidth="0.8">
        <path d="M 148 96 v 8 M 144 100 h 8" />
        <path d="M 168 96 v 8 M 164 100 h 8" />
        <path d="M 256 96 v 8 M 252 100 h 8" />
        <path d="M 36  96 v 8 M 32  100 h 8" />
        <path d="M 148 56 v 8 M 144 60 h 8" opacity="0.65" />
        <path d="M 148 136 v 8 M 144 140 h 8" opacity="0.65" />
      </g>
      <g fontFamily="var(--mono)" fontSize="6" fill="currentColor" opacity="0.7">
        <text x="151" y="115">L1</text>
        <text x="171" y="115">L2</text>
        <text x="259" y="115">L3</text>
        <text x="40"  y="115">—</text>
      </g>
      <line x1="0" y1="100" x2="320" y2="100" strokeWidth="0.4" strokeDasharray="2 6" opacity="0.55" />
      <g strokeWidth="0.6" opacity="0.5">
        <path d="M 10 10 h 10 M 10 10 v 10" />
        <path d="M 310 10 h -10 M 310 10 v 10" />
        <path d="M 10 190 h 10 M 10 190 v -10" />
        <path d="M 310 190 h -10 M 310 190 v -10" />
      </g>
    </g>
  </svg>
);

const MultistaticArt = () => (
  <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
    <g style={{ color: 'var(--accent)' }} {..._PA_strokeBase} strokeWidth="0.8">
      <line x1="0" y1="166" x2="320" y2="166" opacity="0.5" />
      {[34, 60, 86].map((x, i) => (
        <g key={i}>
          <line x1={x} y1="166" x2={x} y2="132" strokeWidth="1" opacity="0.75" />
          <path d={`M ${x - 5} 166 L ${x} 132 L ${x + 5} 166`} opacity="0.55" />
          <circle cx={x} cy="132" r="1.4" fill="currentColor" />
          <path d={`M ${x} 132 Q ${(x + 214) / 2 - 6} ${98 - i * 6}, 214 74`} strokeDasharray="3 3" opacity="0.38" />
        </g>
      ))}
      <ellipse cx="214" cy="74" rx="13" ry="42" opacity="0.26" />
      <ellipse cx="214" cy="74" rx="8" ry="26" opacity="0.5" />
      <circle cx="214" cy="74" r="2.2" fill="currentColor" />
      <path d="M 96 150 C 150 138, 190 104, 262 56" strokeWidth="1.2" opacity="0.9" />
      <path d="M 255 51 L 268 54 L 259 63 Z" fill="currentColor" stroke="none" opacity="0.9" />
      {[[132, 140], [176, 112], [224, 78]].map((p, i) => (
        <circle key={i} cx={p[0]} cy={p[1]} r="1.1" fill="currentColor" opacity="0.7" />
      ))}
      <path d="M 292 166 L 250 62 M 292 166 L 302 60" opacity="0.38" strokeDasharray="3 3" />
      <path d="M 259 92 A 104 104 0 0 1 298 84" opacity="0.28" strokeDasharray="2 4" />
      <circle cx="292" cy="166" r="1.6" fill="currentColor" />
      <g strokeWidth="0.6" opacity="0.5">
        <path d="M 8 8 h 8 M 8 8 v 8" />
        <path d="M 312 8 h -8 M 312 8 v 8" />
        <path d="M 8 192 h 8 M 8 192 v -8" />
        <path d="M 312 192 h -8 M 312 192 v -8" />
      </g>
    </g>
  </svg>
);

const KlProxArt = () => (
  <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
    <g style={{ color: 'var(--accent)' }} {..._PA_strokeBase} strokeWidth="0.8">
      <line x1="20" y1="100" x2="300" y2="100" strokeDasharray="2 5" opacity="0.55" />
      <line x1="160" y1="20" x2="160" y2="180" strokeDasharray="2 5" opacity="0.55" />
      <ellipse cx="160" cy="100" rx="110" ry="55" />
      <ellipse cx="160" cy="100" rx="80"  ry="40" opacity="0.7" />
      <ellipse cx="160" cy="100" rx="50"  ry="25" opacity="0.4" strokeDasharray="3 3" />
      <g fill="currentColor">
        <circle cx="270" cy="100" r="2.5" />
        <circle cx="267" cy="95"  r="1.6" opacity="0.7" />
        <circle cx="273" cy="106" r="1.6" opacity="0.7" />
        <circle cx="50"  cy="100" r="2.5" />
        <circle cx="53"  cy="106" r="1.6" opacity="0.7" />
        <circle cx="160" cy="155" r="2"   opacity="0.6" />
        <circle cx="160" cy="45"  r="2"   opacity="0.6" />
      </g>
      <circle cx="160" cy="100" r="4" fill="currentColor" />
      <circle cx="160" cy="100" r="9" />
      <g strokeWidth="0.6">
        <line x1="270" y1="100" x2="282" y2="92" />
        <line x1="50"  y1="100" x2="38"  y2="108" />
      </g>
      <g strokeWidth="0.5" opacity="0.55">
        <line x1="50"  y1="98"  x2="50"  y2="102" />
        <line x1="270" y1="98"  x2="270" y2="102" />
        <line x1="158" y1="45"  x2="162" y2="45"  />
        <line x1="158" y1="155" x2="162" y2="155" />
      </g>
    </g>
  </svg>
);

const BioWingArt = () => {
  const N = 60;
  const makeCurve = (offset, decay, scale) => {
    const pts = [];
    for (let i = 0; i < N; i++) {
      const x = 20 + (i / (N - 1)) * 280;
      const t = i / (N - 1);
      const noise = Math.sin(i * 1.7 + offset) * 1.6 * (1 - t);
      const y = 30 + (130 - 30) * Math.exp(-decay * t) * scale + noise;
      pts.push(`${x.toFixed(1)},${y.toFixed(1)}`);
    }
    return 'M ' + pts.join(' L ');
  };
  return (
    <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
      <g style={{ color: 'var(--accent)' }} {..._PA_strokeBase} strokeWidth="0.8">
        <line x1="20" y1="170" x2="300" y2="170" opacity="0.55" />
        <line x1="20" y1="20"  x2="20"  y2="170" opacity="0.55" />
        <g strokeWidth="0.3" opacity="0.3" strokeDasharray="2 4">
          <line x1="20" y1="50"  x2="300" y2="50"  />
          <line x1="20" y1="90"  x2="300" y2="90"  />
          <line x1="20" y1="130" x2="300" y2="130" />
        </g>
        <path d={makeCurve(0,   3.0, 1.0)} opacity="0.4"  />
        <path d={makeCurve(1.2, 2.4, 0.85)} opacity="0.6"  />
        <path d={makeCurve(2.5, 1.8, 0.7)}  opacity="0.85" />
        <circle cx="290" cy="55" r="3" fill="currentColor" />
        <line x1="290" y1="55" x2="290" y2="170" strokeWidth="0.5" strokeDasharray="2 3" opacity="0.6" />
      </g>
    </svg>
  );
};

const PROJECT_ART = {
  'PRJ-001': ApogeeArt,
  'PRJ-002': PinoArt,
  'PRJ-003': MultistaticArt,
  'PRJ-004': KlProxArt,
  'PRJ-005': BioWingArt,
};

const ProjectArt = ({ project, projectId, style }) => {
  const pid = project?.id || projectId;
  const img = project?.artImage;
  const [imgFailed, setImgFailed] = React.useState(false);
  if (img && !imgFailed) {
    return (
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        ...style,
      }}>
        <img src={img} alt="" onError={() => setImgFailed(true)}
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      </div>
    );
  }
  const Comp = PROJECT_ART[pid];
  if (!Comp) return null;
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      display: 'flex', alignItems: 'stretch', justifyContent: 'stretch',
      ...style,
    }}>
      <Comp />
    </div>
  );
};

Object.assign(window, { ProjectArt });