// PIPELINE — animated SVG showing how data flows through the AI

function Pipeline() {
  const [activeNode, setActiveNode] = useState(0);
  const nodes = [
    { id: 'sat', label: 'Satélite', sub: 'Sentinel-2, MODIS', detail: 'NDVI, EVI, umidade do solo, mapeamento de biomassa em resolução de 10m. Reprocessado a cada 5 dias.', x: 8 },
    { id: 'clima', label: 'Clima', sub: 'INMET + ECMWF', detail: 'Pluviometria por município, temperatura, ventos, previsão estendida 14 dias. Histórico de 30 anos.', x: 24 },
    { id: 'solo', label: 'Solo', sub: 'Embrapa + IoT', detail: 'pH, NPK, matéria orgânica, textura. Sensores em campo + base georreferenciada nacional.', x: 40 },
    { id: 'mercado', label: 'Mercado', sub: 'CEPEA, B3, CBOT', detail: 'Cotações em tempo real de soja, milho, algodão, café, bovino. Câmbio e custos de insumos.', x: 56 },
    { id: 'modelo', label: 'Modelo Agro Amigo', sub: '47B parâmetros', detail: 'Treinado em 1.8M hectares brasileiros. Especialização por bioma (cerrado, semiárido, mata atlântica).', x: 74, highlight: true },
    { id: 'rec', label: 'Recomendação', sub: 'em <200ms', detail: 'Janela de plantio, dose ótima, momento de venda, alerta de praga, opções de crédito — tudo georreferenciado.', x: 91 },
  ];

  useEffect(() => {
    const t = setInterval(() => setActiveNode(n => (n + 1) % nodes.length), 1800);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="plataforma" style={{ position: 'relative', padding: '120px 32px', background: 'var(--ink)', color: 'var(--paper)', zIndex: 2 }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <SectionLabel num="06" title="Anatomia da inteligência" dark />

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, marginTop: 24, alignItems: 'start' }}>
          <h2 className="serif" style={{
            fontSize: 'clamp(40px, 5vw, 76px)',
            lineHeight: 0.98,
            margin: 0,
            letterSpacing: '-0.02em',
            color: 'var(--paper)',
          }}>
            Cinco fontes<br/>de verdade,<br/>
            <span className="it" style={{ color: 'var(--gold)' }}>uma única</span> resposta.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'rgba(248,245,236,0.7)', margin: 0, marginTop: 14 }}>
            A maioria das ferramentas usa um modelo genérico em cima de qualquer texto.
            O Agro Amigo roda um pipeline próprio que mistura sensoriamento remoto, dados
            climáticos oficiais, base de solo nacional e cotações em tempo real — antes
            de o modelo gerar qualquer recomendação.
          </p>
        </div>

        {/* SVG pipeline */}
        <div style={{ marginTop: 80, position: 'relative' }}>
          <svg viewBox="0 0 100 26" style={{ width: '100%', height: 'auto', overflow: 'visible' }}>
            {/* connecting line */}
            <line x1="8" y1="10" x2="91" y2="10" stroke="rgba(248,245,236,0.15)" strokeWidth="0.15" strokeDasharray="0.6 0.6" />

            {/* moving particle */}
            <circle r="0.6" fill="var(--gold)">
              <animateMotion dur="6s" repeatCount="indefinite" path="M 8 10 L 91 10" />
              <animate attributeName="opacity" values="0;1;1;0" dur="6s" repeatCount="indefinite" />
            </circle>
            <circle r="0.4" fill="var(--terra-2)">
              <animateMotion dur="6s" begin="2s" repeatCount="indefinite" path="M 8 10 L 91 10" />
              <animate attributeName="opacity" values="0;1;1;0" dur="6s" begin="2s" repeatCount="indefinite" />
            </circle>
            <circle r="0.5" fill="var(--green-3)">
              <animateMotion dur="6s" begin="4s" repeatCount="indefinite" path="M 8 10 L 91 10" />
              <animate attributeName="opacity" values="0;1;1;0" dur="6s" begin="4s" repeatCount="indefinite" />
            </circle>

            {nodes.map((n, i) => (
              <g key={n.id} onMouseEnter={() => setActiveNode(i)} style={{ cursor: 'pointer' }}>
                <circle
                  cx={n.x} cy={10}
                  r={n.highlight ? 3.2 : 2.4}
                  fill={i === activeNode ? (n.highlight ? 'var(--gold)' : 'var(--terra)') : 'var(--ink-2)'}
                  stroke={n.highlight ? 'var(--gold)' : 'rgba(248,245,236,0.4)'}
                  strokeWidth="0.15"
                  style={{ transition: 'fill .3s' }}
                />
                {i === activeNode && (
                  <circle cx={n.x} cy={10} r={n.highlight ? 3.2 : 2.4} fill="none" stroke={n.highlight ? 'var(--gold)' : 'var(--terra)'} strokeWidth="0.15" opacity="0.5">
                    <animate attributeName="r" from={n.highlight ? 3.2 : 2.4} to="6" dur="1.4s" repeatCount="indefinite" />
                    <animate attributeName="opacity" from="0.5" to="0" dur="1.4s" repeatCount="indefinite" />
                  </circle>
                )}
                <text x={n.x} y={16} textAnchor="middle" fontSize="1.3" fill="var(--paper)" style={{ fontFamily: 'Instrument Serif, serif' }}>
                  {n.label}
                </text>
                <text x={n.x} y={18.5} textAnchor="middle" fontSize="0.8" fill="rgba(248,245,236,0.5)" style={{ fontFamily: 'JetBrains Mono, monospace' }}>
                  {n.sub}
                </text>
              </g>
            ))}
          </svg>

          {/* active detail card */}
          <div style={{
            marginTop: 40,
            border: '1px solid rgba(248,245,236,0.15)',
            background: 'rgba(248,245,236,0.03)',
            padding: 28,
            display: 'grid',
            gridTemplateColumns: 'auto 1fr auto',
            gap: 32,
            alignItems: 'center',
          }}>
            <div className="mono" style={{ fontSize: 28, color: 'var(--gold)', fontWeight: 500 }}>
              0{activeNode + 1}
            </div>
            <div>
              <div className="serif" style={{ fontSize: 28, color: 'var(--paper)', marginBottom: 6 }}>
                {nodes[activeNode].label}
                <span className="mono" style={{ fontSize: 12, marginLeft: 12, color: 'var(--gold)', letterSpacing: '0.05em' }}>
                  {nodes[activeNode].sub}
                </span>
              </div>
              <div style={{ fontSize: 15, color: 'rgba(248,245,236,0.75)', lineHeight: 1.55, maxWidth: 720 }}>
                {nodes[activeNode].detail}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              {nodes.map((_, i) => (
                <button key={i} onClick={() => setActiveNode(i)} style={{
                  width: 24, height: 3,
                  background: i === activeNode ? 'var(--gold)' : 'rgba(248,245,236,0.2)',
                  border: 0, padding: 0,
                  transition: 'background .3s',
                }} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Pipeline = Pipeline;