// ORGANIZACIÓN — 14 sigilos (palo verde)
// 1 MEMBRANA · 2 DIFERENCIACIÓN · 3 ESPECIALIZACIÓN · 4 COORDINACIÓN · 5 METABOLISMO
// 6 ADAPTACIÓN · 7 MEMORIA · 8 APRENDIZAJE · 9 AUTOPOIESIS · 10 ECOSISTEMA
// 11 EL APRENDIZ · 12 EL ORGANIZADOR · 13 LA HOMEÓSTATA · 14 EL SISTEMA

const G_SVG = ({ children, size = 300 }) => (
  <svg viewBox={`0 0 ${size} ${size}`} width="100%" height="100%">{children}</svg>
);
const _gr = (s) => {
  let a = s >>> 0;
  return () => { a = (a + 0x6D2B79F5) >>> 0; let t = a; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; };
};
const ArrG = ({ id, color }) => (
  <marker id={id} markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M 0 0 L 6 3 L 0 6 Z" fill={color}/></marker>
);

// 1 · LA MEMBRANA — circular cell with double bilayer
const Sigil_MEMBRANA_ORG = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  const R = 90;
  return <G_SVG size={size}>
    {/* outer boundary */}
    <circle cx={cx} cy={cy} r={R} fill="none" stroke={color} strokeWidth={1.2}/>
    <circle cx={cx} cy={cy} r={R-8} fill="none" stroke={color} strokeWidth={0.7} opacity={0.7}/>
    {/* phospholipid representation: tiny strokes pointing inward */}
    {Array.from({length:40}).map((_,i)=>{
      const a = (i/40)*Math.PI*2;
      const x1 = cx + Math.cos(a)*R;
      const y1 = cy + Math.sin(a)*R;
      const x2 = cx + Math.cos(a)*(R-8);
      const y2 = cy + Math.sin(a)*(R-8);
      return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={color} strokeWidth={0.5} opacity={0.7}/>;
    })}
    {/* inside / outside labels */}
    <text x={cx} y={cy-6} fontSize={10} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" letterSpacing="2">YO</text>
    <text x={cx} y={cy+14} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" opacity={0.6}>(adentro)</text>
    <text x={cx} y={size-26} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" opacity={0.5}>(afuera)</text>
    {/* a transport channel */}
    <rect x={cx+R-12} y={cy-10} width={24} height={20} fill="#000" stroke={color} strokeWidth={1}/>
  </G_SVG>;
};

// 2 · DIFERENCIACIÓN — identical cells, one becomes different
const Sigil_DIFERENCIACION = ({ color, size = 300 }) => {
  return <G_SVG size={size}>
    {[0,1,2,3,4,5].map(i => {
      const row = Math.floor(i/3), col = i%3;
      const x = 80 + col*70;
      const y = 80 + row*100;
      const isDifferent = i === 5;
      return <g key={i}>
        <circle cx={x} cy={y} r={28} fill="none" stroke={color} strokeWidth={1.2}/>
        {isDifferent ? (
          <g>
            {/* differentiated — has tail */}
            <circle cx={x} cy={y} r={28} fill={color} fillOpacity={0.2}/>
            <line x1={x} y1={y+28} x2={x+15} y2={y+50} stroke={color} strokeWidth={2}/>
            <line x1={x+15} y1={y+50} x2={x+30} y2={y+45} stroke={color} strokeWidth={1.4}/>
            <circle cx={x-10} cy={y-3} r={3} fill={color}/>
            <circle cx={x+10} cy={y-3} r={3} fill={color}/>
          </g>
        ) : (
          <circle cx={x} cy={y} r={10} fill="none" stroke={color} strokeWidth={0.7} opacity={0.7}/>
        )}
      </g>;
    })}
    {/* arrow from a similar cell to the differentiated one */}
    <line x1={155} y1={140} x2={205} y2={170} stroke={color} strokeWidth={0.6} markerEnd="url(#aog2)" strokeDasharray="2 2" opacity={0.7}/>
    <defs><ArrG id="aog2" color={color}/></defs>
  </G_SVG>;
};

// 3 · ESPECIALIZACIÓN — cell with specialized internal organelles
const Sigil_ESPECIALIZACION = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <G_SVG size={size}>
    {/* cell boundary */}
    <ellipse cx={cx} cy={cy} rx={100} ry={70} fill="none" stroke={color} strokeWidth={1.3}/>
    <ellipse cx={cx} cy={cy} rx={100} ry={70} fill={color} fillOpacity={0.05}/>
    {/* specialized tool — large gear / hammer-like organelle */}
    <g transform={`translate(${cx-30} ${cy-10})`}>
      <circle r={22} fill="none" stroke={color} strokeWidth={1.2}/>
      {Array.from({length:8}).map((_,i)=>{
        const a = (i/8)*Math.PI*2;
        return <rect key={i} x={-4} y={-32} width={8} height={10} fill={color} transform={`rotate(${a*180/Math.PI})`}/>;
      })}
      <circle r={8} fill="#000" stroke={color}/>
    </g>
    {/* worker organelle */}
    <g transform={`translate(${cx+40} ${cy+15})`}>
      <ellipse rx={18} ry={10} fill="none" stroke={color} strokeWidth={1}/>
      <line x1={-14} y1={0} x2={14} y2={0} stroke={color} strokeWidth={0.6}/>
    </g>
    {/* arrows: input → tool → output */}
    <line x1={cx-95} y1={cy-10} x2={cx-58} y2={cy-10} stroke={color} strokeWidth={0.6} markerEnd="url(#aog3)" strokeDasharray="2 2"/>
    <line x1={cx+62} y1={cy+15} x2={cx+98} y2={cy+15} stroke={color} strokeWidth={0.6} markerEnd="url(#aog3)" strokeDasharray="2 2"/>
    <text x={cx-100} y={cy-18} fontSize={9} fill={color} fontFamily="serif" fontStyle="italic" opacity={0.7}>in</text>
    <text x={cx+95} y={cy+8} fontSize={9} fill={color} fontFamily="serif" fontStyle="italic" opacity={0.7}>out</text>
    <defs><ArrG id="aog3" color={color}/></defs>
  </G_SVG>;
};

// 4 · COORDINACIÓN — multiple aligned bodies, conductor in center
const Sigil_COORDINACION = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <G_SVG size={size}>
    {/* conductor (central baton) */}
    <line x1={cx} y1={cy-50} x2={cx+30} y2={cy-80} stroke={color} strokeWidth={2}/>
    <circle cx={cx+30} cy={cy-80} r={4} fill={color}/>
    <circle cx={cx} cy={cy-25} r={10} fill="none" stroke={color} strokeWidth={1.4}/>
    {/* arms */}
    <line x1={cx} y1={cy-15} x2={cx-18} y2={cy} stroke={color} strokeWidth={1.2}/>
    <line x1={cx} y1={cy-15} x2={cx+10} y2={cy-55} stroke={color} strokeWidth={1.2}/>
    {/* musicians in a semicircle */}
    {[-1, -0.5, 0, 0.5, 1].map((t, i) => {
      const a = Math.PI/2 + t*Math.PI*0.45;
      const r = 105;
      const x = cx + Math.cos(a)*r;
      const y = cy + Math.sin(a)*r;
      return <g key={i}>
        <circle cx={x} cy={y} r={9} fill="none" stroke={color} strokeWidth={1}/>
        {/* small instrument hint */}
        <line x1={x-8} y1={y+4} x2={x+8} y2={y+4} stroke={color} strokeWidth={0.6}/>
        {/* downbeat arrow */}
        <line x1={cx} y1={cy-15} x2={x-Math.cos(a)*15} y2={y-Math.sin(a)*15} stroke={color} strokeWidth={0.4} strokeDasharray="2 2" opacity={0.5}/>
      </g>;
    })}
    {/* unified beat indicator */}
    <text x={cx} y={cy+60} fontSize={14} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" opacity={0.8}>♩</text>
  </G_SVG>;
};

// 5 · METABOLISMO — flow loop in/out of body
const Sigil_METABOLISMO_ORG = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <G_SVG size={size}>
    <defs><ArrG id="aog5" color={color}/></defs>
    {/* body */}
    <ellipse cx={cx} cy={cy} rx={70} ry={90} fill="none" stroke={color} strokeWidth={1.2}/>
    {/* inputs at top */}
    {[-20, 0, 20].map((dx, i) => (
      <line key={`in${i}`} x1={cx+dx} y1={20} x2={cx+dx} y2={cy-80} stroke={color} strokeWidth={1.2} markerEnd="url(#aog5)"/>
    ))}
    {/* outputs at bottom */}
    {[-20, 0, 20].map((dx, i) => (
      <line key={`out${i}`} x1={cx+dx} y1={cy+80} x2={cx+dx} y2={size-15} stroke={color} strokeWidth={1.2} markerEnd="url(#aog5)"/>
    ))}
    {/* internal cycles */}
    <circle cx={cx-15} cy={cy-15} r={18} fill="none" stroke={color} strokeWidth={0.7}/>
    <circle cx={cx+15} cy={cy+15} r={18} fill="none" stroke={color} strokeWidth={0.7}/>
    <path d={`M ${cx-15} ${cy-33} A 18 18 0 0 1 ${cx+3} ${cy-15}`} fill="none" stroke={color} strokeWidth={0.6} markerEnd="url(#aog5)"/>
    <path d={`M ${cx+15} ${cy+33} A 18 18 0 0 1 ${cx-3} ${cy+15}`} fill="none" stroke={color} strokeWidth={0.6} markerEnd="url(#aog5)"/>
    <line x1={cx-15} y1={cy-15} x2={cx+15} y2={cy+15} stroke={color} strokeWidth={0.4} strokeDasharray="2 2" opacity={0.6}/>
    {/* labels */}
    <text x={cx} y={16} fontSize={8} fill={color} textAnchor="middle" fontFamily="monospace" letterSpacing="2" opacity={0.7}>E·M·H₂O</text>
    <text x={cx} y={size-4} fontSize={8} fill={color} textAnchor="middle" fontFamily="monospace" letterSpacing="2" opacity={0.7}>CO₂·CALOR</text>
  </G_SVG>;
};

// 6 · ADAPTACIÓN — shape morphing to fit niche
const Sigil_ADAPTACION = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <G_SVG size={size}>
    <defs><ArrG id="aog6" color={color}/></defs>
    {/* niche outline — irregular pocket */}
    <path d={`M 30 100 Q 60 80 90 90 Q 130 100 140 130 Q 145 160 130 180 Q 110 200 90 195 Q 60 190 40 170 Q 25 140 30 100 Z`}
      fill={color} fillOpacity={0.08} stroke={color} strokeWidth={0.6} strokeDasharray="3 2"/>
    {/* organism — successive forms morphing */}
    <circle cx={size-90} cy={size/2} r={30} fill="none" stroke={color} strokeWidth={0.4} strokeDasharray="2 2" opacity={0.4}/>
    <ellipse cx={size-90} cy={size/2} rx={32} ry={26} fill="none" stroke={color} strokeWidth={0.5} opacity={0.5}/>
    {/* final form — matching niche curvature */}
    <path d={`M ${size-120} ${cy-20} Q ${size-95} ${cy-30} ${size-70} ${cy-15} Q ${size-55} ${cy+5} ${size-65} ${cy+25} Q ${size-90} ${cy+35} ${size-110} ${cy+20} Q ${size-128} ${cy} ${size-120} ${cy-20} Z`} fill={color} fillOpacity={0.4} stroke={color} strokeWidth={1.4}/>
    {/* arrow from start to final */}
    <line x1={size-90} y1={size/2-30} x2={size-90} y2={size/2-10} stroke={color} strokeWidth={0.4} markerEnd="url(#aog6)" opacity={0.7}/>
    {/* fit indicator */}
    <line x1={155} y1={140} x2={size-130} y2={cy} stroke={color} strokeWidth={0.4} strokeDasharray="2 3" opacity={0.5}/>
    <text x={cx-10} y={cy+90} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" opacity={0.7}>nicho</text>
    <text x={size-90} y={size/2+58} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" opacity={0.7}>forma</text>
  </G_SVG>;
};

// 7 · MEMORIA — archive folds / timeline with bookmarks
const Sigil_MEMORIA = ({ color, size = 300 }) => {
  const cy = size/2;
  return <G_SVG size={size}>
    {/* horizontal timeline */}
    <line x1={30} y1={cy} x2={size-30} y2={cy} stroke={color} strokeWidth={1.5}/>
    {/* present marker */}
    <circle cx={size-30} cy={cy} r={6} fill={color}/>
    <text x={size-30} y={cy+22} fontSize={9} fill={color} textAnchor="end" fontFamily="serif" fontStyle="italic">ahora</text>
    {/* memory anchors — vertical books along the line */}
    {[60, 110, 170, 220].map((x, i) => (
      <g key={i}>
        <rect x={x-7} y={cy-30} width={14} height={28} fill={color} fillOpacity={0.2} stroke={color} strokeWidth={1}/>
        <line x1={x-7} y1={cy-22} x2={x+7} y2={cy-22} stroke={color} strokeWidth={0.4}/>
        <line x1={x-7} y1={cy-14} x2={x+7} y2={cy-14} stroke={color} strokeWidth={0.4}/>
        <line x1={x-7} y1={cy-6} x2={x+7} y2={cy-6} stroke={color} strokeWidth={0.4}/>
        {/* tick on timeline */}
        <line x1={x} y1={cy-2} x2={x} y2={cy+2} stroke={color} strokeWidth={1.4}/>
      </g>
    ))}
    {/* invocation arrow: anchor 2 → now */}
    <path d={`M 110 ${cy-32} Q ${(110+(size-30))/2} ${cy-60} ${size-30} ${cy-8}`} fill="none" stroke={color} strokeWidth={0.6} strokeDasharray="2 2" markerEnd="url(#aog7)"/>
    <defs><ArrG id="aog7" color={color}/></defs>
    <text x={(110+(size-30))/2} y={cy-66} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" opacity={0.7}>traer al presente</text>
  </G_SVG>;
};

// 8 · APRENDIZAJE — network connections strengthening (Hebbian)
const Sigil_APRENDIZAJE = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  const r = _gr(8);
  // 2 layers of nodes
  const layerA = Array.from({length:5}).map((_,i)=>({ x: cx-80, y: 60 + i*42 }));
  const layerB = Array.from({length:5}).map((_,i)=>({ x: cx+80, y: 60 + i*42 }));
  return <G_SVG size={size}>
    {/* connections — some thick (learned), most thin */}
    {layerA.map((a, i) => layerB.map((b, j) => {
      const seed = r();
      const learned = seed > 0.78;
      return <line key={`${i}-${j}`} x1={a.x} y1={a.y} x2={b.x} y2={b.y} stroke={color} strokeWidth={learned ? 2 : 0.3} opacity={learned ? 1 : 0.35}/>;
    }))}
    {/* nodes */}
    {[...layerA, ...layerB].map((n, i) => (
      <circle key={i} cx={n.x} cy={n.y} r={6} fill="#000" stroke={color} strokeWidth={1.2}/>
    ))}
    {/* time arrow */}
    <line x1={cx-50} y1={size-30} x2={cx+50} y2={size-30} stroke={color} strokeWidth={0.5} markerEnd="url(#aog8)"/>
    <defs><ArrG id="aog8" color={color}/></defs>
    <text x={cx} y={size-12} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" opacity={0.7}>weights ↑</text>
  </G_SVG>;
};

// 9 · AUTOPOIESIS — self-producing closed network (different from CLAUSURA major)
const Sigil_AUTOPOIESIS = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <G_SVG size={size}>
    <defs><ArrG id="aog9" color={color}/></defs>
    {/* boundary */}
    <circle cx={cx} cy={cy} r={110} fill="none" stroke={color} strokeWidth={1.4}/>
    {/* internal node graph forming the boundary */}
    {(() => {
      const N = 12;
      const nodes = Array.from({length:N}).map((_,i)=>{
        const a = (i/N)*Math.PI*2 - Math.PI/2;
        return [cx + Math.cos(a)*80, cy + Math.sin(a)*80];
      });
      return nodes.map(([x,y],i) => {
        const next = nodes[(i+1)%N];
        const inner = nodes[(i+3)%N];
        return <g key={i}>
          <line x1={x} y1={y} x2={next[0]} y2={next[1]} stroke={color} strokeWidth={0.8}/>
          <line x1={x} y1={y} x2={inner[0]} y2={inner[1]} stroke={color} strokeWidth={0.4} opacity={0.55}/>
          <circle cx={x} cy={y} r={5} fill={color}/>
          {/* output arrow back to boundary */}
          <path d={`M ${x*0.8 + cx*0.2} ${y*0.8 + cy*0.2} L ${x*0.95 + cx*0.05} ${y*0.95 + cy*0.05}`} stroke={color} strokeWidth={0.4} markerEnd="url(#aog9)" opacity={0.6}/>
        </g>;
      });
    })()}
    {/* center label */}
    <circle cx={cx} cy={cy} r={4} fill={color}/>
    <text x={cx} y={cy-12} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" opacity={0.85}>se produce</text>
    <text x={cx} y={cy+18} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" opacity={0.85}>a sí mismo</text>
  </G_SVG>;
};

// 10 · ECOSISTEMA — multiple coupled organisms, nested
const Sigil_ECOSISTEMA = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <G_SVG size={size}>
    <defs><ArrG id="aog10" color={color}/></defs>
    {/* outer boundary */}
    <rect x={20} y={20} width={size-40} height={size-40} rx={20} fill="none" stroke={color} strokeWidth={0.8} strokeDasharray="4 3"/>
    {/* sub-organisms */}
    {(() => {
      const orgs = [
        { x: 80, y: 80, r: 32, shape: 'tri' },
        { x: 220, y: 80, r: 28, shape: 'circle' },
        { x: 80, y: 220, r: 28, shape: 'square' },
        { x: 220, y: 220, r: 30, shape: 'hex' },
        { x: 150, y: 150, r: 26, shape: 'star' },
      ];
      return <>
        {orgs.map((o, i) => {
          let shape;
          if (o.shape === 'tri') shape = <polygon points={`${o.x},${o.y-o.r} ${o.x-o.r},${o.y+o.r*0.7} ${o.x+o.r},${o.y+o.r*0.7}`} fill="none" stroke={color} strokeWidth={1.2}/>;
          else if (o.shape === 'circle') shape = <circle cx={o.x} cy={o.y} r={o.r} fill="none" stroke={color} strokeWidth={1.2}/>;
          else if (o.shape === 'square') shape = <rect x={o.x-o.r} y={o.y-o.r} width={o.r*2} height={o.r*2} fill="none" stroke={color} strokeWidth={1.2}/>;
          else if (o.shape === 'hex') {
            const pts = Array.from({length:6}).map((_,k)=>{
              const a = (k/6)*Math.PI*2;
              return `${o.x+Math.cos(a)*o.r},${o.y+Math.sin(a)*o.r}`;
            }).join(' ');
            shape = <polygon points={pts} fill="none" stroke={color} strokeWidth={1.2}/>;
          } else if (o.shape === 'star') {
            const pts = Array.from({length:10}).map((_,k)=>{
              const a = (k/10)*Math.PI*2 - Math.PI/2;
              const rr = k%2 === 0 ? o.r : o.r*0.5;
              return `${o.x+Math.cos(a)*rr},${o.y+Math.sin(a)*rr}`;
            }).join(' ');
            shape = <polygon points={pts} fill="none" stroke={color} strokeWidth={1.2}/>;
          }
          return <g key={i}>{shape}</g>;
        })}
        {/* relations */}
        <line x1={orgs[0].x+orgs[0].r-5} y1={orgs[0].y+5} x2={orgs[4].x-orgs[4].r+5} y2={orgs[4].y-5} stroke={color} strokeWidth={0.4} markerEnd="url(#aog10)" opacity={0.6}/>
        <line x1={orgs[1].x-orgs[1].r+5} y1={orgs[1].y+5} x2={orgs[4].x+orgs[4].r-5} y2={orgs[4].y-5} stroke={color} strokeWidth={0.4} markerEnd="url(#aog10)" opacity={0.6}/>
        <line x1={orgs[4].x-5} y1={orgs[4].y+orgs[4].r-5} x2={orgs[2].x+orgs[2].r-5} y2={orgs[2].y-5} stroke={color} strokeWidth={0.4} markerEnd="url(#aog10)" opacity={0.6}/>
        <line x1={orgs[4].x+5} y1={orgs[4].y+orgs[4].r-5} x2={orgs[3].x-orgs[3].r+5} y2={orgs[3].y-5} stroke={color} strokeWidth={0.4} markerEnd="url(#aog10)" opacity={0.6}/>
        <line x1={orgs[2].x+orgs[2].r-3} y1={orgs[2].y} x2={orgs[3].x-orgs[3].r+3} y2={orgs[3].y} stroke={color} strokeWidth={0.4} markerEnd="url(#aog10)" opacity={0.6}/>
      </>;
    })()}
  </G_SVG>;
};

// 11 · EL APRENDIZ (Sota) — small figure with hand reaching out
const Sigil_APRENDIZ = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <G_SVG size={size}>
    {/* small body */}
    <circle cx={cx} cy={cy-30} r={14} fill="none" stroke={color} strokeWidth={1.4}/>
    <line x1={cx} y1={cy-16} x2={cx} y2={cy+30} stroke={color} strokeWidth={1.4}/>
    {/* one arm reaching up */}
    <line x1={cx} y1={cy} x2={cx+30} y2={cy-20} stroke={color} strokeWidth={1.2}/>
    {/* other arm */}
    <line x1={cx} y1={cy} x2={cx-18} y2={cy+15} stroke={color} strokeWidth={1.2}/>
    {/* legs */}
    <line x1={cx} y1={cy+30} x2={cx-10} y2={cy+62} stroke={color} strokeWidth={1.2}/>
    <line x1={cx} y1={cy+30} x2={cx+10} y2={cy+62} stroke={color} strokeWidth={1.2}/>
    {/* light source above */}
    <circle cx={cx+30} cy={cy-20} r={4} fill={color}/>
    <circle cx={cx+30} cy={cy-20} r={11} fill="none" stroke={color} strokeWidth={0.4} strokeDasharray="2 2"/>
    {/* dashed rays — what's being learned */}
    {[-2, -1, 0, 1, 2].map((t, i) => (
      <line key={i} x1={cx+30+t*8} y1={cy-32} x2={cx+30+t*16} y2={cy-50} stroke={color} strokeWidth={0.5} opacity={0.6} strokeDasharray="2 2"/>
    ))}
    {/* dependency line below — still tied to ground */}
    <line x1={cx-50} y1={cy+62} x2={cx+50} y2={cy+62} stroke={color} strokeWidth={1} strokeDasharray="4 2" opacity={0.6}/>
    <text x={cx} y={cy+82} fontSize={8} fill={color} textAnchor="middle" fontFamily="monospace" letterSpacing="2" opacity={0.6}>SOPORTE</text>
  </G_SVG>;
};

// 12 · EL ORGANIZADOR (Caballero) — central node with field
const Sigil_ORGANIZADOR = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <G_SVG size={size}>
    {/* organizer node — strong center */}
    <circle cx={cx} cy={cy} r={14} fill={color}/>
    <circle cx={cx} cy={cy} r={22} fill="none" stroke={color} strokeWidth={1.4}/>
    {/* iron filings aligned by the field */}
    {Array.from({length:80}).map((_,i)=>{
      const r = _gr(12+i)();
      const ang = r * Math.PI * 2;
      const dist = 35 + r * 90;
      const px = cx + Math.cos(ang) * dist;
      const py = cy + Math.sin(ang) * dist;
      // line oriented tangentially (or radially) — show field
      const tangAng = ang + Math.PI/2;
      const x1 = px - Math.cos(tangAng)*6;
      const y1 = py - Math.sin(tangAng)*6;
      const x2 = px + Math.cos(tangAng)*6;
      const y2 = py + Math.sin(tangAng)*6;
      return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={color} strokeWidth={0.5} opacity={0.7}/>;
    })}
    {/* field rings */}
    {[55, 85, 115].map((rr,i)=>(<circle key={i} cx={cx} cy={cy} r={rr} fill="none" stroke={color} strokeWidth={0.3} opacity={0.4} strokeDasharray="1 4"/>))}
  </G_SVG>;
};

// 13 · LA HOMEÓSTATA (Reina) — controller diagram (different from HOMEOSTASIS major)
const Sigil_HOMEOSTATA = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <G_SVG size={size}>
    <defs><ArrG id="aog13" color={color}/></defs>
    {/* multiple variables — each with a setpoint and corrective gauge */}
    {[0, 1, 2].map((i, k) => {
      const y = 70 + i*70;
      const variable = ['T', 'pH', 'O₂'][i];
      return <g key={i}>
        <text x={42} y={y+5} fontSize={11} fill={color} fontFamily="serif" fontStyle="italic">{variable}</text>
        <line x1={70} y1={y} x2={size-50} y2={y} stroke={color} strokeWidth={0.4} opacity={0.4}/>
        {/* setpoint */}
        <line x1={cx} y1={y-10} x2={cx} y2={y+10} stroke={color} strokeWidth={1.5}/>
        {/* current value with corrective arrows pointing toward setpoint */}
        {(() => {
          const offset = [-26, 22, -18][i];
          return <>
            <circle cx={cx+offset} cy={y} r={4} fill={color}/>
            <line x1={cx+offset + (offset>0?-6:6)} y1={y} x2={cx + (offset>0?6:-6)} y2={y} stroke={color} strokeWidth={0.8} markerEnd="url(#aog13)"/>
          </>;
        })()}
      </g>;
    })}
    {/* unified controller box */}
    <rect x={cx-40} y={size-50} width={80} height={28} fill="none" stroke={color} strokeWidth={1.2}/>
    <text x={cx} y={size-32} fontSize={10} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic">ajuste</text>
    {/* loops from controller back up */}
    <path d={`M ${cx} ${size-50} Q ${cx} ${size-80} ${cx+20} ${size-100}`} fill="none" stroke={color} strokeWidth={0.5} strokeDasharray="2 2" opacity={0.6}/>
  </G_SVG>;
};

// 14 · EL SISTEMA (Rey) — complete system with boundary + processes + relations
const Sigil_SISTEMA = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <G_SVG size={size}>
    <defs><ArrG id="aog14" color={color}/></defs>
    {/* outer boundary */}
    <circle cx={cx} cy={cy} r={115} fill="none" stroke={color} strokeWidth={1.6}/>
    {/* internal processes — 4 small modules */}
    {[[cx-50, cy-50], [cx+50, cy-50], [cx-50, cy+50], [cx+50, cy+50]].map(([x,y],i)=>(
      <g key={i}>
        <rect x={x-22} y={y-15} width={44} height={30} fill="none" stroke={color} strokeWidth={1.1}/>
        <text x={x} y={y+5} fontSize={10} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic">{['α','β','γ','δ'][i]}</text>
      </g>
    ))}
    {/* arrows between */}
    <line x1={cx-28} y1={cy-50} x2={cx+28} y2={cy-50} stroke={color} strokeWidth={0.8} markerEnd="url(#aog14)"/>
    <line x1={cx+50} y1={cy-35} x2={cx+50} y2={cy+35} stroke={color} strokeWidth={0.8} markerEnd="url(#aog14)"/>
    <line x1={cx+28} y1={cy+50} x2={cx-28} y2={cy+50} stroke={color} strokeWidth={0.8} markerEnd="url(#aog14)"/>
    <line x1={cx-50} y1={cy+35} x2={cx-50} y2={cy-35} stroke={color} strokeWidth={0.8} markerEnd="url(#aog14)"/>
    {/* environment perturbation from outside */}
    <line x1={cx} y1={cy-130} x2={cx} y2={cy-118} stroke={color} strokeWidth={1.2} markerEnd="url(#aog14)" opacity={0.7}/>
    <line x1={cx} y1={cy+118} x2={cx} y2={cy+130} stroke={color} strokeWidth={1.2} markerEnd="url(#aog14)" opacity={0.7}/>
    {/* crown */}
    <g transform={`translate(${cx} ${cy-125})`}>
      <path d="M -22 14 L -22 -2 L -14 -10 L -7 -2 L 0 -14 L 7 -2 L 14 -10 L 22 -2 L 22 14 Z" fill="none" stroke={color} strokeWidth={1.2}/>
      <circle cx={0} cy={-14} r={2.5} fill={color}/>
    </g>
  </G_SVG>;
};

Object.assign(PILOT_SIGILS, {
  'LA MEMBRANA':       Sigil_MEMBRANA_ORG,
  'DIFERENCIACIÓN':    Sigil_DIFERENCIACION,
  'ESPECIALIZACIÓN':   Sigil_ESPECIALIZACION,
  'COORDINACIÓN':      Sigil_COORDINACION,
  'METABOLISMO':       Sigil_METABOLISMO_ORG,
  'ADAPTACIÓN':        Sigil_ADAPTACION,
  'MEMORIA':           Sigil_MEMORIA,
  'APRENDIZAJE':       Sigil_APRENDIZAJE,
  'AUTOPOIESIS':       Sigil_AUTOPOIESIS,
  'ECOSISTEMA':        Sigil_ECOSISTEMA,
  'EL APRENDIZ':       Sigil_APRENDIZ,
  'EL ORGANIZADOR':    Sigil_ORGANIZADOR,
  'LA HOMEÓSTATA':     Sigil_HOMEOSTATA,
  'EL SISTEMA':        Sigil_SISTEMA,
});
