// TheLoop.jsx — What Skardi is: the Observe / Learn / Act cycle, laid out
// as the same loop diagram the OSS README uses.
const LoopNode = ({ n, title, color, icon, desc, mono, governed }) => (
  <div style={{
    padding: '22px 24px',
    borderRadius: 16,
    border: `1px solid ${color}33`,
    background: 'linear-gradient(180deg, rgba(14,26,46,0.92) 0%, rgba(10,18,32,0.92) 100%)',
    textAlign: 'left',
    boxShadow: '0 8px 30px rgba(0,0,0,0.35)',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: 48, height: 48, borderRadius: 12, flexShrink: 0,
        background: `${color}14`, color,
        border: `1px solid ${color}30`,
      }}>{icon}</span>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
        <span style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 14, fontWeight: 600,
          color, letterSpacing: '0.04em',
        }}>{n}</span>
        <span style={{
          fontFamily: 'Inter, sans-serif', fontSize: 25, fontWeight: 700,
          color: '#e6eef9', letterSpacing: '-0.01em',
        }}>{title}</span>
      </span>
    </div>
    <p style={{
      fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.55,
      color: '#8ea3c0', margin: '0 0 12px',
    }}>{desc}</p>
    <div style={{
      fontFamily: 'JetBrains Mono, monospace', fontSize: 14,
      color, opacity: 0.9, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
    }}>{mono}</div>
    <div style={{
      display: 'flex', alignItems: 'flex-start', gap: 8,
      marginTop: 12, paddingTop: 12,
      borderTop: '1px solid rgba(125,211,252,0.08)',
      fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.5,
      color: '#9aacc2',
    }}>
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2ee89a" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 2 }}>
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />
      </svg>
      {governed}
    </div>
  </div>
);

const TheLoop = () => {
  const stroke = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const nodes = {
    observe: {
      n: '01', title: 'Observe', color: '#2ee89a',
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" {...stroke}>
          <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" />
          <circle cx="12" cy="12" r="3" />
        </svg>
      ),
      desc: 'The agent asks anything, and declares why.',
      mono: 'POST /query + ai_context → audit ledger',
      governed: 'Permission-aware: agents see only what the asking user can',
    },
    learn: {
      n: '02', title: 'Learn', color: '#7ec4ff',
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" {...stroke}>
          <path d="M3 3v18h18" />
          <path d="M7 14l4-4 3 3 5-6" />
        </svg>
      ),
      desc: 'Find the questions that keep coming back.',
      mono: 'GROUP BY session_id, purpose',
      governed: 'Explainable: every ask lands on the audit trail',
    },
    act: {
      n: '03', title: 'Act', color: '#e8b34b',
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" {...stroke}>
          <path d="M13 2 3 14h7l-1 8 10-12h-7l1-8Z" />
        </svg>
      ),
      desc: 'They become named tools and routines.',
      mono: 'recurring → pipelines · routines',
      governed: 'Controlled: promotions are reviewed and revertable',
    },
  };

  return (
    <section style={{ padding: '56px 32px', borderTop: '1px solid rgba(125,211,252,0.06)' }}>
      <style>{`
        .loop-stage { position: relative; max-width: 1200px; height: 750px; margin: 0 auto; }
        .loop-node { position: absolute; width: 440px; }
        .loop-node-observe { top: 0; left: 50%; transform: translateX(-50%); }
        .loop-node-learn { bottom: 0; right: 0; }
        .loop-node-act { bottom: 0; left: 0; }
        .loop-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
        .loop-center { position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
        @media (max-height: 1060px) and (min-width: 961px) { .loop-stage { zoom: 0.82; } }
        @media (max-height: 899px) and (min-width: 961px) { .loop-stage { zoom: 0.72; } }
        @media (max-width: 960px) {
          .loop-stage { height: auto; display: flex; flex-direction: column; gap: 16px; }
          .loop-node { position: static; width: 100%; transform: none; }
          .loop-edges, .loop-center { display: none; }
        }
      `}</style>
      <div style={{ maxWidth: 1240, margin: '0 auto', textAlign: 'center' }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
          letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500,
          color: '#2ee89a', marginBottom: 16,
        }}>What</div>
        <h2 style={{
          fontFamily: 'Inter, sans-serif', fontSize: 'clamp(36px, 4.5vw, 54px)', fontWeight: 700,
          letterSpacing: '-0.025em', lineHeight: 1.08, margin: '0 0 28px',
          color: '#e6eef9', textWrap: 'balance',
        }}>The toolset grows itself</h2>
        <div className="loop-stage">
          {/* Curved edges with verbs, drawn beneath the cards */}
          <svg className="loop-edges" viewBox="0 0 1200 750" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
            <defs>
              <marker id="loopHead" viewBox="0 0 10 10" refX="7.5" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
                <path d="M 0 1 L 9 5 L 0 9 z" fill="#6b7e9a" />
              </marker>
            </defs>
            {/* Observe -> Learn (mine) */}
            <path d="M 828 155 Q 1130 215 1030 520" stroke="#4a6284" strokeWidth="1.6" fill="none" markerEnd="url(#loopHead)" />
            <text x="1118" y="335" fill="#6b7e9a" fontFamily="JetBrains Mono, monospace" fontSize="17" textAnchor="middle">mine</text>
            {/* Learn -> Act (promote) */}
            <path d="M 748 630 Q 600 705 452 632" stroke="#4a6284" strokeWidth="1.6" fill="none" markerEnd="url(#loopHead)" />
            <text x="600" y="722" fill="#6b7e9a" fontFamily="JetBrains Mono, monospace" fontSize="17" textAnchor="middle">promote</text>
            {/* Act -> Observe (serve) */}
            <path d="M 170 528 Q 72 210 368 145" stroke="#4a6284" strokeWidth="1.6" fill="none" markerEnd="url(#loopHead)" />
            <text x="80" y="335" fill="#6b7e9a" fontFamily="JetBrains Mono, monospace" fontSize="17" textAnchor="middle">serve</text>
          </svg>

          <div className="loop-node loop-node-observe"><LoopNode {...nodes.observe} /></div>
          <div className="loop-node loop-node-learn"><LoopNode {...nodes.learn} /></div>
          <div className="loop-node loop-node-act"><LoopNode {...nodes.act} /></div>

          {/* Center caption */}
          <div className="loop-center">
            <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#e8b34b" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ marginBottom: 10 }}>
              <path d="M21 12a9 9 0 1 1-2.64-6.36" />
              <path d="M21 3v6h-6" />
            </svg>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 17,
              color: '#e8b34b', letterSpacing: '0.02em',
            }}>the toolset grew itself</div>
          </div>
        </div>

        <div style={{
          marginTop: 24,
          fontFamily: 'JetBrains Mono, monospace', fontSize: 14,
          color: '#6b7e9a', letterSpacing: '0.02em',
        }}>
          each cycle returns to Observe with one fewer thing to figure out from scratch
        </div>
      </div>
    </section>
  );
};

window.TheLoop = TheLoop;