// Segment illustrations — line art on navy. Brass + signal blue accents.
// These are custom, simple, editorial illustrations for the four segments.
// Drawn at viewBox 200x150, stroke 1.25 for a consistent line weight.

const STROKE = "#F0E3C4";     // brass-100, soft warm line
const ACCENT = "#B8913F";     // brass-500
const SIGNAL = "#30A3D9";     // signal blue, used sparingly

function IlloFoundations() {
  return (
    <svg viewBox="0 0 200 150" fill="none" aria-hidden="true">
      {/* Columned portico — a foundation hall */}
      <g stroke={STROKE} strokeWidth="1.1" strokeLinecap="square">
        {/* steps */}
        <path d="M20 125 H180" />
        <path d="M28 119 H172" />
        <path d="M36 113 H164" />
        {/* entablature */}
        <path d="M34 54 H166" />
        <path d="M34 48 H166" />
        <path d="M30 48 V113" opacity="0.25" />
        <path d="M170 48 V113" opacity="0.25" />
        {/* pediment */}
        <path d="M34 48 L100 24 L166 48" />
        {/* columns — 5 */}
        {[48, 72, 100, 128, 152].map((x, i) => (
          <g key={i}>
            <path d={`M${x-6} 54 H${x+6}`} />
            <path d={`M${x-5} 113 H${x+5}`} />
            <path d={`M${x-4} 54 V113`} />
            <path d={`M${x+4} 54 V113`} />
          </g>
        ))}
      </g>
      {/* brass compass rose on pediment */}
      <g stroke={ACCENT} strokeWidth="1" fill="none">
        <circle cx="100" cy="40" r="4" />
        <path d="M100 34 V46 M94 40 H106" />
      </g>
    </svg>
  );
}

function IlloNonprofits() {
  return (
    <svg viewBox="0 0 200 150" fill="none" aria-hidden="true">
      <g stroke={STROKE} strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" fill="none">
        {/* horizon / waterline */}
        <path d="M18 102 H182" />
        {/* distant hills */}
        <path d="M18 102 Q42 88 66 98 T112 94 T160 100 T182 102" opacity="0.55" />
        {/* a salmon leaping — abstract arc */}
        <path d="M70 112 Q92 78 120 92" />
        <path d="M116 88 L124 90 L120 96 Z" fill={ACCENT} stroke={ACCENT} />
        {/* ripples */}
        <path d="M48 118 Q62 113 76 118" opacity="0.6" />
        <path d="M100 124 Q118 118 136 124" opacity="0.6" />
        <path d="M140 112 Q150 108 162 112" opacity="0.4" />
        {/* small rising sun */}
      </g>
      <g stroke={SIGNAL} strokeWidth="1" fill="none">
        <circle cx="152" cy="60" r="11" />
        <path d="M152 42 V48 M152 72 V78 M130 60 H136 M168 60 H174 M138 46 L142 50 M162 70 L166 74 M138 74 L142 70 M162 50 L166 46" opacity="0.7" />
      </g>
    </svg>
  );
}

function IlloHigherEd() {
  return (
    <svg viewBox="0 0 200 150" fill="none" aria-hidden="true">
      <g stroke={STROKE} strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" fill="none">
        {/* open book / codex */}
        <path d="M40 60 Q64 48 100 56 Q136 48 160 60 L160 110 Q136 100 100 108 Q64 100 40 110 Z" />
        <path d="M100 56 V108" />
        {/* page lines left */}
        <path d="M52 72 H88" opacity="0.7" />
        <path d="M52 80 H88" opacity="0.55" />
        <path d="M52 88 H82" opacity="0.4" />
        {/* page lines right */}
        <path d="M112 72 H148" opacity="0.7" />
        <path d="M112 80 H148" opacity="0.55" />
        <path d="M112 88 H142" opacity="0.4" />
        {/* mortarboard floating above */}
        <path d="M76 32 L100 24 L124 32 L100 40 Z" />
        <path d="M100 40 V50" />
        <path d="M100 50 L108 50" />
      </g>
      <g stroke={ACCENT} strokeWidth="1" fill="none">
        <path d="M120 32 L126 30 L126 38" />
      </g>
    </svg>
  );
}

function IlloBusiness() {
  return (
    <svg viewBox="0 0 200 150" fill="none" aria-hidden="true">
      <g stroke={STROKE} strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" fill="none">
        {/* factory / workshop skyline */}
        <path d="M20 112 H180" />
        {/* main shed */}
        <path d="M36 112 V70 L56 58 L76 70 L96 58 L116 70 V112" />
        {/* saw-tooth roof lines */}
        <path d="M36 70 L56 58 M56 58 L56 70 M56 70 L76 58 M76 58 L76 70 M76 70 L96 58 M96 58 L96 70 M96 70 L116 58" opacity="0.5" />
        {/* side building */}
        <path d="M124 112 V84 H158 V112" />
        {/* chimney */}
        <path d="M148 84 V64 H156 V84" />
        {/* gear to the right — instrumentation */}
        <circle cx="172" cy="40" r="10" />
        <circle cx="172" cy="40" r="3" />
        <path d="M172 28 V32 M172 48 V52 M160 40 H164 M180 40 H184 M163.5 31.5 L166 34 M178 46 L180.5 48.5 M163.5 48.5 L166 46 M178 34 L180.5 31.5" />
        {/* tiny windows */}
        <path d="M44 92 H48 M52 92 H56 M60 92 H64 M68 92 H72 M80 92 H84 M88 92 H92 M100 92 H104 M108 92 H112" opacity="0.55" />
      </g>
      <g stroke={ACCENT} strokeWidth="1" fill="none">
        {/* small upward trend line */}
        <path d="M30 136 L70 128 L110 118 L150 110" />
        <path d="M148 106 L154 110 L150 114" />
      </g>
    </svg>
  );
}

Object.assign(window, { IlloFoundations, IlloNonprofits, IlloHigherEd, IlloBusiness });
