// Technical blueprint-style aircraft silhouettes, hand-crafted SVG line art.
// All share a consistent line weight and construction-drawing feel.

const BP_COLOR = "currentColor";

const Rivet = ({ cx, cy, r = 1 }) => (
  <circle cx={cx} cy={cy} r={r} fill={BP_COLOR} opacity="0.4" />
);

// C-47 Dakota — low wing, twin radial engines, tail wheel
function C47({ size = 360 }) {
  return (
    <svg viewBox="0 0 400 180" style={{ color: "var(--ink)" }} width="100%" height="auto">
      {/* center line */}
      <line x1="20" y1="90" x2="380" y2="90" stroke={BP_COLOR} strokeWidth="0.4" strokeDasharray="2 3" opacity="0.35" />
      {/* fuselage */}
      <path d="M 60 90 Q 58 80 75 75 L 285 72 Q 320 74 345 82 Q 358 86 362 90 Q 358 94 345 98 L 285 108 L 75 105 Q 58 100 60 90 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1.2" />
      {/* cockpit windows */}
      <path d="M 335 82 Q 345 82 352 86 L 352 90 L 340 90" fill="none" stroke={BP_COLOR} strokeWidth="0.8" />
      {/* side windows */}
      <g stroke={BP_COLOR} strokeWidth="0.6" fill="none" opacity="0.7">
        {Array.from({ length: 9 }).map((_, i) => (
          <rect key={i} x={110 + i * 22} y="84" width="10" height="6" rx="1" />
        ))}
      </g>
      {/* wings */}
      <path d="M 140 84 L 50 56 L 30 58 L 22 62 L 24 66 L 140 92 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1.2" />
      <path d="M 140 96 L 50 124 L 30 122 L 22 118 L 24 114 L 140 88 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1.2" />
      {/* engines */}
      <ellipse cx="82" cy="62" rx="14" ry="7" fill="none" stroke={BP_COLOR} strokeWidth="1" />
      <ellipse cx="82" cy="118" rx="14" ry="7" fill="none" stroke={BP_COLOR} strokeWidth="1" />
      {/* props */}
      <line x1="68" y1="48" x2="68" y2="76" stroke={BP_COLOR} strokeWidth="0.8" />
      <line x1="68" y1="104" x2="68" y2="132" stroke={BP_COLOR} strokeWidth="0.8" />
      {/* tail vertical */}
      <path d="M 70 90 L 48 68 Q 42 68 40 74 L 58 88 Z" fill="none" stroke={BP_COLOR} strokeWidth="1" />
      {/* tail horiz */}
      <path d="M 80 90 L 40 78 L 30 80 L 28 84 L 78 92 Z" fill="none" stroke={BP_COLOR} strokeWidth="1" />
      <path d="M 80 90 L 40 102 L 30 100 L 28 96 L 78 88 Z" fill="none" stroke={BP_COLOR} strokeWidth="1" />
      {/* nose marker */}
      <circle cx="362" cy="90" r="2" fill={BP_COLOR} />
      {/* construction cross-marks */}
      <line x1="200" y1="60" x2="200" y2="120" stroke={BP_COLOR} strokeWidth="0.3" strokeDasharray="1 2" opacity="0.4" />
    </svg>
  );
}

// C-130H Hercules — high wing, 4 turboprop engines, T-shape tail
function C130({ size = 360 }) {
  return (
    <svg viewBox="0 0 400 180" style={{ color: "var(--ink)" }} width="100%" height="auto">
      <line x1="20" y1="90" x2="380" y2="90" stroke={BP_COLOR} strokeWidth="0.4" strokeDasharray="2 3" opacity="0.35" />
      {/* fuselage (wider, boxier) */}
      <path d="M 50 90 Q 48 78 65 72 L 280 68 Q 320 70 350 78 Q 365 84 370 90 Q 365 96 350 102 L 280 112 L 65 108 Q 48 102 50 90 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1.2" />
      {/* nose radome */}
      <path d="M 350 80 Q 362 82 368 88 L 368 92 Q 362 98 350 100" fill="none" stroke={BP_COLOR} strokeWidth="0.8" />
      {/* flight deck */}
      <path d="M 340 76 L 352 78 L 352 84 L 340 86 Z" fill="none" stroke={BP_COLOR} strokeWidth="0.7" />
      {/* cargo ramp (back) */}
      <path d="M 50 92 L 38 102 L 50 108 Z" fill="none" stroke={BP_COLOR} strokeWidth="0.9" />
      {/* HIGH wing — positioned above fuselage */}
      <path d="M 160 72 L 30 48 L 18 50 L 16 58 L 160 82 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1.2" />
      <path d="M 160 108 L 30 132 L 18 130 L 16 122 L 160 98 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1.2" />
      {/* 4 engines top */}
      {[60, 100, 140, 180].map((cx, i) => (
        <g key={"t" + i}>
          <ellipse cx={cx} cy="58" rx="10" ry="5" fill="none" stroke={BP_COLOR} strokeWidth="0.9" />
          <line x1={cx - 14} y1="48" x2={cx - 14} y2="68" stroke={BP_COLOR} strokeWidth="0.7" />
          <circle cx={cx - 14} cy="58" r="1" fill={BP_COLOR} />
        </g>
      ))}
      {/* 4 engines bottom */}
      {[60, 100, 140, 180].map((cx, i) => (
        <g key={"b" + i}>
          <ellipse cx={cx} cy="122" rx="10" ry="5" fill="none" stroke={BP_COLOR} strokeWidth="0.9" />
          <line x1={cx - 14} y1="112" x2={cx - 14} y2="132" stroke={BP_COLOR} strokeWidth="0.7" />
          <circle cx={cx - 14} cy="122" r="1" fill={BP_COLOR} />
        </g>
      ))}
      {/* tail vertical (tall) */}
      <path d="M 60 90 L 38 44 Q 32 42 28 50 L 48 88 Z" fill="none" stroke={BP_COLOR} strokeWidth="1" />
      {/* tail horiz */}
      <path d="M 70 90 L 30 76 L 20 78 L 18 82 L 68 92 Z" fill="none" stroke={BP_COLOR} strokeWidth="1" />
      <path d="M 70 90 L 30 104 L 20 102 L 18 98 L 68 88 Z" fill="none" stroke={BP_COLOR} strokeWidth="1" />
    </svg>
  );
}

// C-119 Flying Boxcar — twin booms
function C119({ size = 360 }) {
  return (
    <svg viewBox="0 0 400 180" style={{ color: "var(--ink)" }} width="100%" height="auto">
      <line x1="20" y1="90" x2="380" y2="90" stroke={BP_COLOR} strokeWidth="0.4" strokeDasharray="2 3" opacity="0.35" />
      {/* main fuselage (boxy cargo pod) */}
      <path d="M 90 78 L 300 78 Q 335 78 350 85 L 360 90 L 350 95 Q 335 102 300 102 L 90 102 Q 78 102 78 90 Q 78 78 90 78 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1.2" />
      {/* cargo doors rear */}
      <line x1="90" y1="82" x2="90" y2="98" stroke={BP_COLOR} strokeWidth="0.6" opacity="0.6" />
      <line x1="100" y1="82" x2="100" y2="98" stroke={BP_COLOR} strokeWidth="0.5" opacity="0.5" />
      {/* cockpit */}
      <path d="M 335 82 L 350 86 L 350 90 L 340 88 Z" fill="none" stroke={BP_COLOR} strokeWidth="0.7" />
      {/* wings */}
      <path d="M 190 78 L 90 58 L 60 58 L 55 62 L 190 86 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1.2" />
      <path d="M 190 102 L 90 122 L 60 122 L 55 118 L 190 94 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1.2" />
      {/* engines = booms that extend rearward */}
      {/* top engine */}
      <ellipse cx="115" cy="58" rx="14" ry="7" fill="none" stroke={BP_COLOR} strokeWidth="1" />
      <line x1="100" y1="46" x2="100" y2="70" stroke={BP_COLOR} strokeWidth="0.8" />
      {/* top boom */}
      <path d="M 129 53 L 50 48 L 40 52 L 40 64 L 129 65 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1" />
      {/* top tail fin */}
      <path d="M 52 50 L 44 32 L 38 32 L 40 52 Z" fill="none" stroke={BP_COLOR} strokeWidth="0.9" />

      {/* bottom engine */}
      <ellipse cx="115" cy="122" rx="14" ry="7" fill="none" stroke={BP_COLOR} strokeWidth="1" />
      <line x1="100" y1="110" x2="100" y2="134" stroke={BP_COLOR} strokeWidth="0.8" />
      {/* bottom boom */}
      <path d="M 129 127 L 50 132 L 40 128 L 40 116 L 129 115 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1" />
      {/* bottom tail fin */}
      <path d="M 52 130 L 44 148 L 38 148 L 40 128 Z" fill="none" stroke={BP_COLOR} strokeWidth="0.9" />
      {/* horizontal stabilizer between booms */}
      <path d="M 42 60 L 28 74 L 28 86 L 42 72 L 120 72 L 120 68 Z" fill="none" stroke={BP_COLOR} strokeWidth="0.9" />
      <path d="M 42 120 L 28 106 L 28 94 L 42 108 L 120 108 L 120 112 Z" fill="none" stroke={BP_COLOR} strokeWidth="0.9" />
    </svg>
  );
}

// A400M Atlas — modern, high wing, 4 turboprops (swept), T-tail
function A400M({ size = 360 }) {
  return (
    <svg viewBox="0 0 400 180" style={{ color: "var(--ink)" }} width="100%" height="auto">
      <line x1="20" y1="90" x2="380" y2="90" stroke={BP_COLOR} strokeWidth="0.4" strokeDasharray="2 3" opacity="0.35" />
      {/* fuselage (sleek) */}
      <path d="M 48 90 Q 46 74 72 68 L 288 64 Q 328 66 355 76 Q 368 82 374 90 Q 368 98 355 104 L 288 116 L 72 112 Q 46 106 48 90 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1.2" />
      {/* nose radome */}
      <path d="M 355 80 Q 369 82 374 88 L 374 92 Q 369 98 355 100" fill="none" stroke={BP_COLOR} strokeWidth="0.8" />
      {/* cockpit */}
      <path d="M 335 72 L 352 76 L 352 82 L 335 82 Z" fill="none" stroke={BP_COLOR} strokeWidth="0.8" />
      <path d="M 335 98 L 352 98 L 352 104 L 335 108 Z" fill="none" stroke={BP_COLOR} strokeWidth="0.5" opacity="0.6" />
      {/* cargo ramp */}
      <path d="M 48 92 L 34 100 L 48 106 Z" fill="none" stroke={BP_COLOR} strokeWidth="0.9" />
      {/* swept wings (high) */}
      <path d="M 180 68 L 30 36 L 14 40 L 12 50 L 180 82 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1.2" />
      <path d="M 180 112 L 30 144 L 14 140 L 12 130 L 180 98 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1.2" />
      {/* 4 modern turboprops — counter-rotating */}
      {[50, 92, 134, 176].map((cx, i) => (
        <g key={"ta" + i}>
          <ellipse cx={cx} cy={48 + (i * 2)} rx="10" ry="5" fill="none" stroke={BP_COLOR} strokeWidth="0.9" />
          <line x1={cx - 14} y1={38 + (i * 2)} x2={cx - 14} y2={58 + (i * 2)} stroke={BP_COLOR} strokeWidth="0.7" />
          <line x1={cx - 19} y1={46 + (i * 2)} x2={cx - 9} y2={46 + (i * 2)} stroke={BP_COLOR} strokeWidth="0.5" opacity="0.6" />
        </g>
      ))}
      {[50, 92, 134, 176].map((cx, i) => (
        <g key={"ba" + i}>
          <ellipse cx={cx} cy={132 - (i * 2)} rx="10" ry="5" fill="none" stroke={BP_COLOR} strokeWidth="0.9" />
          <line x1={cx - 14} y1={122 - (i * 2)} x2={cx - 14} y2={142 - (i * 2)} stroke={BP_COLOR} strokeWidth="0.7" />
          <line x1={cx - 19} y1={134 - (i * 2)} x2={cx - 9} y2={134 - (i * 2)} stroke={BP_COLOR} strokeWidth="0.5" opacity="0.6" />
        </g>
      ))}
      {/* T-tail (vertical) */}
      <path d="M 58 90 L 32 40 Q 26 38 22 46 L 46 88 Z" fill="none" stroke={BP_COLOR} strokeWidth="1" />
      {/* T-tail (horizontal — at top of vertical) */}
      <path d="M 36 42 L 10 38 L 8 44 L 30 48 Z" fill="none" stroke={BP_COLOR} strokeWidth="0.9" />
      <path d="M 36 42 L 54 34 L 56 40 L 38 46 Z" fill="none" stroke={BP_COLOR} strokeWidth="0.9" />
    </svg>
  );
}

// Sabena DC-6 — 4 radial engines, elegant classic airliner
function DC6({ size = 360 }) {
  return (
    <svg viewBox="0 0 400 180" style={{ color: "var(--ink)" }} width="100%" height="auto">
      <line x1="20" y1="90" x2="380" y2="90" stroke={BP_COLOR} strokeWidth="0.4" strokeDasharray="2 3" opacity="0.35" />
      {/* sleek fuselage */}
      <path d="M 40 90 Q 40 80 58 76 L 310 74 Q 345 76 365 82 Q 376 86 378 90 Q 376 94 365 98 L 310 106 L 58 104 Q 40 100 40 90 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1.2" />
      {/* cockpit */}
      <path d="M 355 82 Q 368 84 374 88 L 374 92 L 358 92" fill="none" stroke={BP_COLOR} strokeWidth="0.8" />
      {/* windows */}
      <g stroke={BP_COLOR} strokeWidth="0.5" fill="none" opacity="0.6">
        {Array.from({ length: 14 }).map((_, i) => (
          <rect key={i} x={95 + i * 17} y="85" width="8" height="4" rx="0.8" />
        ))}
      </g>
      {/* low wing */}
      <path d="M 150 86 L 30 58 L 12 60 L 8 66 L 150 94 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1.2" />
      <path d="M 150 94 L 30 122 L 12 120 L 8 114 L 150 86 Z"
        fill="none" stroke={BP_COLOR} strokeWidth="1.2" />
      {/* 4 radial engines */}
      {[55, 85, 115, 145].map((cx, i) => (
        <g key={"rt" + i}>
          <ellipse cx={cx} cy="68" rx="10" ry="6" fill="none" stroke={BP_COLOR} strokeWidth="0.9" />
          <line x1={cx - 13} y1="58" x2={cx - 13} y2="78" stroke={BP_COLOR} strokeWidth="0.7" />
        </g>
      ))}
      {[55, 85, 115, 145].map((cx, i) => (
        <g key={"rb" + i}>
          <ellipse cx={cx} cy="112" rx="10" ry="6" fill="none" stroke={BP_COLOR} strokeWidth="0.9" />
          <line x1={cx - 13} y1="102" x2={cx - 13} y2="122" stroke={BP_COLOR} strokeWidth="0.7" />
        </g>
      ))}
      {/* tail vertical */}
      <path d="M 60 88 L 38 58 Q 32 58 28 66 L 52 86 Z" fill="none" stroke={BP_COLOR} strokeWidth="1" />
      {/* tail horizontal */}
      <path d="M 70 88 L 28 72 L 16 74 L 14 78 L 68 92 Z" fill="none" stroke={BP_COLOR} strokeWidth="1" />
      <path d="M 70 92 L 28 108 L 16 106 L 14 102 L 68 88 Z" fill="none" stroke={BP_COLOR} strokeWidth="1" />
    </svg>
  );
}

// Simpler small silhouette version for footer / tag
function Silhouette({ size = 120 }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} style={{ color: "var(--ink)" }}>
      <g fill="none" stroke="currentColor" strokeWidth="1">
        <path d="M 15 50 L 85 50 L 88 52 L 85 54 L 15 54 Z" />
        <path d="M 50 50 L 25 30 L 55 50 L 25 70 L 50 54" />
      </g>
    </svg>
  );
}

const SILHOUETTES = { C47, C130, C119, A400M, DC6 };

Object.assign(window, { C47, C130, C119, A400M, DC6, Silhouette, SILHOUETTES });
