// mcp-section.jsx — MCP exposing knowledge to AI agents

const AGENTS = [
  { name: 'Claude Desktop', glyph: '✦' },
  { name: 'Cursor',         glyph: '◆' },
  { name: 'Custom Agent',   glyph: '◉' },
  { name: 'ChatGPT',        glyph: '✺' },
];

const MCPSection = () => {
  const ref = React.useRef(null);
  const inView = useInView(ref, { threshold: 0.2, once: true });
  const [t, setT] = React.useState(0);
  useRaf((s) => setT(s), inView);

  // Query showcase cycling
  const queries = [
    { q: 'search_collections', args: '{ "query": "política de vacaciones" }', hits: 12 },
    { q: 'get_chunks_by_ids',  args: '{ "ids": ["p_8421", "p_8422"] }',        hits: 2 },
    { q: 'get_taxonomy_tree',  args: '{ "root": "rrhh" }',                     hits: 38 },
    { q: 'compare_perspectives', args: '{ "topic": "remote work" }',           hits: 6 },
  ];
  const currentIdx = Math.floor(t / 3) % queries.length;
  const currentQ = queries[currentIdx];
  const phase = (t / 3) % 1;

  return (
    <section
      id="mcp"
      ref={ref}
      data-screen-label="06 MCP"
      style={{
        position: 'relative',
        padding: 'clamp(96px, 12vw, 160px) clamp(24px, 5vw, 60px)',
        background: '#f9f9f9',
        color: '#0d0d0d',
        overflow: 'hidden',
      }}
    >
      <div style={{ maxWidth: 1400, margin: '0 auto', position: 'relative' }}>
        <Reveal>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase',
            fontWeight: 600, marginBottom: 24,
          }}>
            <span style={{ width: 9, height: 9, background: '#0d0d0d' }} />
            05 · MCP
          </div>
        </Reveal>
        <Reveal delay={150}>
          <h2 style={{
            fontSize: 'clamp(40px, 6vw, 84px)',
            fontWeight: 600,
            lineHeight: 1.0,
            letterSpacing: '-0.025em',
            margin: 0,
            maxWidth: '18ch',
          }}>
            Tu conocimiento,<br/>
            hablando el idioma<br/>
            de <span style={{ background: '#a1f75e', padding: '0 12px' }}>los agentes</span>.
          </h2>
        </Reveal>
        <Reveal delay={300}>
          <p style={{
            marginTop: 28, fontSize: 'clamp(16px, 1.3vw, 19px)',
            maxWidth: '54ch', lineHeight: 1.55,
            color: 'rgba(13,13,13,0.72)',
          }}>
            Un endpoint Model Context Protocol con tokens por tenant. Cualquier cliente
            —Claude, Cursor, un agente propio— se conecta y obtiene búsqueda híbrida,
            chunks contextuales, taxonomías y síntesis LLM sobre tu corpus.
          </p>
        </Reveal>

        {/* Query visualization */}
        <div style={{
          marginTop: 80,
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr)',
          gap: 24,
          alignItems: 'stretch',
        }} className="nx-mcp-grid">
          {/* Agents column */}
          <Reveal>
            <div style={{ display: 'grid', gap: 12 }}>
              <div style={{
                fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
                fontWeight: 600, color: 'rgba(13,13,13,0.55)', marginBottom: 4,
              }}>AI Agents</div>
              {AGENTS.map((agent, i) => {
                const active = (currentIdx % AGENTS.length) === i;
                return (
                  <div key={agent.name} style={{
                    border: `1px solid ${active ? '#0d0d0d' : 'rgba(13,13,13,0.18)'}`,
                    background: active ? '#0d0d0d' : '#fff',
                    color: active ? '#f9f9f9' : '#0d0d0d',
                    padding: '16px 18px',
                    display: 'flex', alignItems: 'center', gap: 14,
                    transition: 'all 400ms cubic-bezier(.2,.7,.2,1)',
                  }}>
                    <span style={{
                      width: 36, height: 36,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      background: active ? '#a1f75e' : 'rgba(13,13,13,0.06)',
                      color: '#0d0d0d',
                      fontSize: 18,
                    }}>{agent.glyph}</span>
                    <div>
                      <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em' }}>
                        {agent.name}
                      </div>
                      <div style={{
                        fontSize: 11, fontFamily: "'JetBrains Mono', ui-monospace, monospace",
                        color: active ? 'rgba(249,249,249,0.55)' : 'rgba(13,13,13,0.5)',
                        marginTop: 2,
                      }}>
                        {active ? 'querying…' : 'connected'}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </Reveal>

          {/* MCP pipe in the middle */}
          <div style={{ position: 'relative', minHeight: 400 }}>
            <div style={{
              position: 'absolute', inset: 0,
              display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
            }}>
              {/* Lines flowing */}
              <svg viewBox="0 0 200 400" preserveAspectRatio="none"
                   style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                <defs>
                  <linearGradient id="mcpPipe" x1="0" y1="0" x2="1" y2="0">
                    <stop offset="0%" stopColor="#0d0d0d" stopOpacity="0"/>
                    <stop offset="50%" stopColor="#a1f75e" stopOpacity="1"/>
                    <stop offset="100%" stopColor="#0d0d0d" stopOpacity="0"/>
                  </linearGradient>
                </defs>
                <line x1="0" y1="200" x2="200" y2="200" stroke="rgba(13,13,13,0.15)" strokeWidth="1"/>
                {/* packets going right (query) */}
                {[0, 0.33, 0.66].map((off) => {
                  const p = ((phase + off) % 1);
                  return (
                    <circle key={`r${off}`} cx={p * 200} cy={200} r="4" fill="#0d0d0d"/>
                  );
                })}
                {/* packets going left (response) */}
                {[0.16, 0.5, 0.83].map((off) => {
                  const p = 1 - ((phase + off) % 1);
                  return (
                    <circle key={`l${off}`} cx={p * 200} cy={210} r="3" fill="#a1f75e"/>
                  );
                })}
              </svg>

              {/* MCP node */}
              <div style={{
                position: 'relative',
                width: 140, height: 140,
                background: '#0d0d0d',
                color: '#a1f75e',
                display: 'flex', flexDirection: 'column',
                alignItems: 'center', justifyContent: 'center',
                border: '1px solid #a1f75e',
              }}>
                <div style={{
                  fontSize: 10, letterSpacing: '0.22em', fontWeight: 600,
                  color: 'rgba(249,249,249,0.5)', marginBottom: 8,
                }}>
                  PROTOCOL
                </div>
                <div style={{
                  fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em',
                }}>
                  MCP
                </div>
                <div style={{
                  position: 'absolute', inset: -10,
                  border: '1px solid rgba(161,247,94,0.3)',
                  pointerEvents: 'none',
                  animation: 'nx-pulse 2s ease-in-out infinite',
                }}/>
              </div>

              <div style={{
                marginTop: 20,
                fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
                fontWeight: 600, color: 'rgba(13,13,13,0.5)',
                fontFamily: "'JetBrains Mono', ui-monospace, monospace",
              }}>
                /api/search/mcp
              </div>
            </div>
          </div>

          {/* Tools / result column */}
          <Reveal delay={200}>
            <div style={{
              background: '#0d0d0d',
              color: '#f9f9f9',
              padding: 24,
              height: '100%',
              fontFamily: "'JetBrains Mono', ui-monospace, monospace",
              fontSize: 13,
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                marginBottom: 20,
                color: 'rgba(249,249,249,0.5)', fontSize: 11, letterSpacing: '0.18em',
                textTransform: 'uppercase',
              }}>
                <span>MCP TOOL CALL</span>
                <span style={{ color: '#a1f75e' }}>● LIVE</span>
              </div>

              <div style={{ marginBottom: 16 }}>
                <div style={{ color: 'rgba(249,249,249,0.5)', fontSize: 11, marginBottom: 6 }}>
                  tool
                </div>
                <div style={{ color: '#a1f75e', fontWeight: 600, fontSize: 15, letterSpacing: '-0.01em' }}>
                  {currentQ.q}()
                </div>
              </div>

              <div style={{ marginBottom: 20 }}>
                <div style={{ color: 'rgba(249,249,249,0.5)', fontSize: 11, marginBottom: 6 }}>
                  arguments
                </div>
                <div style={{ color: '#f9f9f9', lineHeight: 1.5, wordBreak: 'break-word' }}>
                  {currentQ.args}
                </div>
              </div>

              <div style={{
                borderTop: '1px solid rgba(255,255,255,0.1)',
                paddingTop: 16, marginTop: 'auto',
              }}>
                <div style={{ color: 'rgba(249,249,249,0.5)', fontSize: 11, marginBottom: 8 }}>
                  response
                </div>
                <div style={{ display: 'flex', gap: 12, alignItems: 'baseline' }}>
                  <span style={{ fontSize: 36, fontWeight: 700, color: '#a1f75e', letterSpacing: '-0.03em' }}>
                    {currentQ.hits}
                  </span>
                  <span style={{ color: 'rgba(249,249,249,0.65)' }}>hits · x-tenant-slug</span>
                </div>
                <div style={{
                  marginTop: 12, height: 4,
                  background: 'rgba(255,255,255,0.08)', overflow: 'hidden',
                }}>
                  <div style={{
                    height: '100%', background: '#a1f75e',
                    width: `${(phase * 100)}%`, transition: 'none',
                  }}/>
                </div>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Tool list ribbon */}
        <Reveal delay={300}>
          <div style={{
            marginTop: 48,
            border: '1px solid rgba(13,13,13,0.14)',
            background: '#fff',
            padding: '14px 20px',
            display: 'flex', gap: 28, flexWrap: 'wrap', rowGap: 10,
            fontFamily: "'JetBrains Mono', ui-monospace, monospace",
            fontSize: 12,
            color: 'rgba(13,13,13,0.8)',
          }}>
            <span style={{ fontWeight: 700, color: '#0d0d0d' }}>available tools →</span>
            {['search_collections','get_chunks_by_ids','get_chunks_by_parent','get_filter_criteria','get_taxonomy_tree','get_post_summaries','get_book_toc','compare_perspectives','summarize_document','extract_claims','synthesize_comparison'].map((tool) => (
              <span key={tool} style={{ opacity: 0.7 }}>
                {tool}()
              </span>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

Object.assign(window, { MCPSection });