// LIVE AI DEMO — canned static responses (no API call)
// Side-by-side: AGRA (specific, regional) vs Generic AI (vague)

const PROMPTS = [
  {
    label: 'Quando plantar milho na Bahia?',
    q: 'Sou produtor em Vitória da Conquista, Bahia. Quando devo plantar milho safrinha esse ano?',
  },
  {
    label: 'Devo vender soja agora?',
    q: 'Tenho 800 sacas de soja armazenadas em Sorriso, MT. Devo vender agora ou esperar?',
  },
  {
    label: 'Praga nas folhas',
    q: 'Encontrei lagarta nas folhas do meu algodão em Luís Eduardo Magalhães. Como agir?',
  },
  {
    label: 'Crédito Pronaf',
    q: 'Sou pequeno produtor de mandioca no Ceará, faturei 90 mil ano passado. Que linha de crédito serve pra mim?',
  },
];

const CANNED = [
  {
    agra: 'Em Vitória da Conquista o milho safrinha vai bem entre 11–25/fev se a precipitação acumulada de jan ≥ 80mm. Variedade BRS-1055 ou AG-1051 com 65 mil pl/ha; janela ótima quando umidade do solo a 20cm > 22%. Adubação de base 320kg NPK 08-28-16 + 90kg N cobertura no V6. Risco principal: veranico de mar — mantenha plano B com sorgo após 28/fev (zoneamento MAPA 2026 + INMET 30y).',
    generic: 'Depende de muitos fatores como clima, tipo de solo e variedade escolhida. Recomendo consultar um agrônomo local e o calendário agrícola do seu município para identificar o melhor período de plantio. Cada região tem suas particularidades.',
  },
  {
    agra: 'CEPEA Sorriso fechou R$ 142,30/sc (↑2.1% sem); base de R$ 8 abaixo do CBOT. Estoque regional caiu 14% mês/mês e exportações pelo porto de Itacoatiara estão 23% acima de abr/25. Pico provável 14–16/abr (↑R$ 4–6/sc) — vender 60% da posição agora e travar restante via opção julho a R$ 148. Custo de carrego: R$ 2,40/sc/mês.',
    generic: 'O melhor momento para vender soja varia conforme a oferta e demanda do mercado. Considere acompanhar as cotações regularmente e consultar especialistas em commodities. Vender ou esperar depende de muitos fatores que variam ao longo do tempo.',
  },
  {
    agra: 'Spodoptera frugiperda (lagarta-do-cartucho) em estágio V4–V6, dano inicial pelos sinais típicos da região LEM. Bacillus thuringiensis 0,5L/ha entre 16h–18h dias 11–13/abr (sem chuva prevista, vento < 12 km/h). Custo R$ 38/ha — 4× menor que químico convencional e preserva inimigos naturais. Reaplicar em 10d se monitoramento apontar ≥ 2 lagartas/planta. Alternar com Spinosad se resistência detectada.',
    generic: 'Pragas em algodão exigem identificação correta antes de qualquer tratamento. Consulte um técnico agrícola da sua região e siga sempre as recomendações da bula do produto escolhido. Existem várias opções de manejo disponíveis no mercado.',
  },
  {
    agra: 'Para seu perfil (faturamento até R$ 96 mil, agricultura familiar): Pronaf B (até R$ 6.000, taxa 0,5% a.a., sem garantia real) cobre custeio rápido. Para investimento em estrutura (forno de farinha, irrigação) o Mais Alimentos vai até R$ 250 mil a 4% a.a. com 10 anos de prazo. FNE Verde (BNB) tem teto R$ 412 mil a 8,5% a.a. com 3 anos de carência — exige CAR ativo e DAP/CAF válida. Comece pelo agente do BNB de Quixadá; aprovação média 21 dias.',
    generic: 'Existem várias linhas de crédito rural disponíveis para pequenos produtores. Procure o banco mais próximo ou um agente de extensão rural para receber orientação personalizada sobre as opções que melhor se adequam ao seu caso.',
  },
];

const AGRA_DELAY = 1700;
const GENERIC_DELAY = 850;

function AIDemo() {
  const [question, setQuestion] = useState(PROMPTS[0].q);
  const [activeIdx, setActiveIdx] = useState(0);
  const [agra, setAgra] = useState({ status: 'idle', text: '', meta: null });
  const [generic, setGeneric] = useState({ status: 'idle', text: '' });
  const [hasRun, setHasRun] = useState(false);

  const ask = (q) => {
    setHasRun(true);
    setAgra({ status: 'loading', text: '', meta: null });
    setGeneric({ status: 'loading', text: '' });

    const startTime = Date.now();
    const region = q.match(/Bahia|Mato Grosso|MT|Ceará|Pernambuco|Maranhão|Piauí|Goiás|Sorriso|Vitória|Magalhães/i)?.[0] || 'Brasil';

    const idx = PROMPTS.findIndex(p => p.q === q);
    const canned = idx >= 0 ? CANNED[idx] : CANNED[0];
    const customAgra = idx < 0
      ? 'Pergunta personalizada detectada. Em produção, o Agro Amigo cruza zoneamento MAPA, INMET 30 anos, NDVI Sentinel-2 e cotações CEPEA para responder com dados específicos do seu município, variedade e janela atual. Esta é uma demo estática — conecte à API para ver respostas reais.'
      : canned.agra;
    const customGeneric = idx < 0
      ? 'Depende de muitos fatores. Recomendo consultar um especialista da sua região para uma orientação adequada ao seu caso específico.'
      : canned.generic;

    setTimeout(() => {
      setGeneric({ status: 'done', text: customGeneric });
    }, GENERIC_DELAY);

    setTimeout(() => {
      setAgra({
        status: 'done',
        text: customAgra,
        meta: {
          ms: Date.now() - startTime,
          region,
          sources: pickSources(q),
        },
      });
    }, AGRA_DELAY);
  };

  const onSelect = (i) => {
    setActiveIdx(i);
    setQuestion(PROMPTS[i].q);
  };

  return (
    <section id="inteligência" style={{ position: 'relative', padding: '120px 32px', zIndex: 2 }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <SectionLabel num="03" title="Demonstração ao vivo" />

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, marginTop: 24 }}>
          <div>
            <h2 className="serif" style={{
              fontSize: 'clamp(40px, 5vw, 76px)',
              lineHeight: 0.98,
              margin: 0,
              letterSpacing: '-0.02em',
            }}>
              Pergunte<br/>
              <span className="it" style={{ color: 'var(--terra)' }}>qualquer</span> coisa.<br/>
              Veja a diferença.
            </h2>
            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.55, color: 'var(--ink-2)', maxWidth: 480 }}>
              Lado a lado: a mesma pergunta para uma IA genérica e para o Agro Amigo. A
              diferença não é estilo — é <i>conhecimento real</i> da agricultura brasileira.
            </p>
          </div>
          <div style={{ alignSelf: 'end' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>
              ESCOLHA UMA PERGUNTA OU ESCREVA A SUA
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {PROMPTS.map((p, i) => (
                <button key={i} onClick={() => onSelect(i)} style={{
                  background: i === activeIdx ? 'var(--ink)' : 'var(--paper)',
                  color: i === activeIdx ? 'var(--paper)' : 'var(--ink)',
                  border: '1px solid ' + (i === activeIdx ? 'var(--ink)' : 'var(--line)'),
                  padding: '8px 14px', borderRadius: 999,
                  fontSize: 13,
                }}>{p.label}</button>
              ))}
            </div>
          </div>
        </div>

        {/* Question input */}
        <div style={{
          marginTop: 40,
          background: 'var(--paper)',
          border: '1px solid var(--line)',
          padding: 4,
          display: 'flex',
          alignItems: 'stretch',
        }}>
          <div style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', borderRight: '1px solid var(--line)' }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.08em' }}>PERGUNTA →</span>
          </div>
          <input
            value={question}
            onChange={e => setQuestion(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter') ask(question); }}
            placeholder="Ex: como reduzir custo de adubo no algodão..."
            style={{
              flex: 1, border: 0, outline: 'none', background: 'transparent',
              padding: '14px 16px', fontSize: 16, color: 'var(--ink)',
            }}
          />
          <button onClick={() => ask(question)} style={{
            background: 'var(--green)', color: 'var(--paper)',
            border: 0, padding: '0 32px',
            fontSize: 14, fontWeight: 500,
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            Comparar respostas
            <span style={{ fontSize: 18 }}>→</span>
          </button>
        </div>

        {/* Two-pane response */}
        <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <ResponsePane
            kind="generic"
            title="IA Genérica"
            subtitle="GPT padrão, sem contexto agrícola"
            state={generic}
            hasRun={hasRun}
          />
          <ResponsePane
            kind="agra"
            title="Agro Amigo"
            subtitle="modelo agrícola brasileiro especializado"
            state={agra}
            hasRun={hasRun}
          />
        </div>

        {!hasRun && (
          <p className="mono" style={{ marginTop: 16, fontSize: 11, color: 'var(--muted)', textAlign: 'center', letterSpacing: '0.08em' }}>
            ↑ CLIQUE EM "COMPARAR RESPOSTAS" PARA VER A IA REAL TRABALHANDO
          </p>
        )}
      </div>
    </section>
  );
}

function ResponsePane({ kind, title, subtitle, state, hasRun }) {
  const isAgra = kind === 'agra';
  const accent = isAgra ? 'var(--green)' : 'var(--muted)';
  const bg = isAgra ? 'var(--paper)' : 'var(--bg-2)';

  return (
    <div style={{
      background: bg,
      border: '1px solid ' + (isAgra ? 'var(--green)' : 'var(--line)'),
      padding: 24,
      minHeight: 320,
      display: 'flex', flexDirection: 'column',
      position: 'relative',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              width: 8, height: 8, borderRadius: '50%',
              background: isAgra ? 'var(--terra)' : 'var(--muted)',
              animation: state.status === 'loading' ? 'liveDot 1s ease-out infinite' : 'none',
            }}/>
            <span className="serif" style={{ fontSize: 22, color: 'var(--ink)' }}>{title}</span>
          </div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.06em', marginTop: 4, textTransform: 'uppercase' }}>
            {subtitle}
          </div>
        </div>
        {isAgra && state.meta && (
          <div className="mono" style={{ fontSize: 10, color: 'var(--green-2)', textAlign: 'right', letterSpacing: '0.05em' }}>
            <div>{state.meta.ms}ms</div>
            <div style={{ color: 'var(--muted)' }}>região: {state.meta.region}</div>
          </div>
        )}
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        {!hasRun && (
          <div style={{ color: 'var(--muted)', fontSize: 14, fontStyle: 'italic' }}>
            Aguardando pergunta...
          </div>
        )}
        {hasRun && state.status === 'loading' && (
          <LoadingDots isAgra={isAgra} />
        )}
        {state.status === 'done' && (
          <>
            <p style={{
              fontSize: isAgra ? 16 : 15,
              lineHeight: 1.55,
              color: 'var(--ink)',
              margin: 0,
              whiteSpace: 'pre-wrap',
            }}>{state.text}</p>
            {isAgra && state.meta?.sources && (
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px dashed var(--line)' }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 8 }}>
                  Fontes consultadas
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {state.meta.sources.map((s, i) => (
                    <span key={i} className="mono" style={{
                      fontSize: 10, padding: '3px 8px',
                      background: 'rgba(30,58,44,0.06)',
                      color: 'var(--green-2)',
                      border: '1px solid rgba(30,58,44,0.15)',
                    }}>{s}</span>
                  ))}
                </div>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}

function LoadingDots({ isAgra }) {
  const stages = isAgra
    ? ['Carregando contexto regional...', 'Consultando satélite + clima...', 'Cruzando com base histórica...', 'Gerando recomendação...']
    : ['Pensando...'];
  const [i, setI] = useState(0);
  useEffect(() => {
    if (!isAgra) return;
    const t = setInterval(() => setI(x => Math.min(x + 1, stages.length - 1)), 380);
    return () => clearInterval(t);
  }, [isAgra]);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      {(isAgra ? stages.slice(0, i+1) : stages).map((s, k) => (
        <div key={k} className="mono" style={{
          fontSize: 12,
          color: k === i ? 'var(--ink-2)' : 'var(--muted)',
          opacity: k === i ? 1 : 0.6,
        }}>
          <span style={{ color: 'var(--terra)' }}>{k === i ? '▸' : '✓'}</span> {s}
        </div>
      ))}
      <div style={{ display: 'flex', gap: 4, marginTop: 8 }}>
        {[0,1,2].map(k => (
          <span key={k} style={{
            width: 6, height: 6, borderRadius: '50%',
            background: 'var(--ink-2)',
            animation: `bounce 1.2s ease-in-out infinite`,
            animationDelay: `${k * 0.15}s`,
          }}/>
        ))}
      </div>
      <style>{`
        @keyframes bounce {
          0%, 60%, 100% { opacity: 0.2; transform: translateY(0); }
          30% { opacity: 1; transform: translateY(-4px); }
        }
      `}</style>
    </div>
  );
}

function pickSources(q) {
  const lower = q.toLowerCase();
  const all = [];
  if (/milho|soja|algodão|mandioca|safra|plantar/.test(lower)) all.push('zoneamento MAPA 2026');
  if (/bahia|mato grosso|sorriso|ceará|nordeste/.test(lower)) all.push('clima INMET 30y');
  if (/vender|preço|saca/.test(lower)) all.push('CEPEA cotações');
  if (/crédito|pronaf|fne/.test(lower)) all.push('linhas BNB/BB');
  if (/praga|lagarta|doença/.test(lower)) all.push('Embrapa fitopatologia');
  all.push('NDVI Sentinel-2', 'históricos Agro Amigo 2018-26');
  return all.slice(0, 4);
}

window.AIDemo = AIDemo;