// COMPARISON — visual contrast between traditional decision and AGRA decision
// Plus shared SectionLabel helper used by other sections

function SectionLabel({ num, title, dark }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingBottom: 18, borderBottom: '1px solid ' + (dark ? 'rgba(248,245,236,0.15)' : 'var(--line)') }}>
      <span className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: dark ? 'rgba(248,245,236,0.5)' : 'var(--muted)', textTransform: 'uppercase' }}>
        — {num}
      </span>
      <span className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: dark ? 'rgba(248,245,236,0.7)' : 'var(--ink-2)', textTransform: 'uppercase' }}>
        {title}
      </span>
    </div>
  );
}
window.SectionLabel = SectionLabel;

function Comparison() {
  return (
    <section style={{ position: 'relative', padding: '120px 32px', zIndex: 2 }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <SectionLabel num="04" title="O que muda na prática" />

        <h2 className="serif" style={{
          marginTop: 24, fontSize: 'clamp(40px, 5vw, 76px)',
          lineHeight: 0.98, letterSpacing: '-0.02em', maxWidth: 920,
        }}>
          O agricultor não precisa de mais um <span className="it" style={{ color: 'var(--terra)' }}>chatbot.</span> Precisa de uma decisão.
        </h2>

        <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--line)' }}>
          <DecisionCol
            kind="before"
            tag="ANTES"
            title="O ciclo do achismo"
            steps={[
              { t: 'Lê previsão genérica', d: 'Confia no boletim do rádio + opinião do vizinho. Sem dado específico do talhão.' },
              { t: 'Decide na intuição', d: 'Planta na data que sempre plantou, mesmo com clima fora do padrão.' },
              { t: 'Descobre tarde', d: 'Veranico em fevereiro mata o estande. Já comprou semente, já gastou diesel.' },
              { t: 'Vende com pressa', d: 'Sem dado de mercado, vende quando o caminhão do atravessador aparece.' },
            ]}
            outcome={{ label: 'RESULTADO MÉDIO', value: '−18% margem', sub: 'sobre custo total da safra' }}
          />
          <DecisionCol
            kind="after"
            tag="COM AGRO AMIGO"
            title="Decisão com base em dado"
            steps={[
              { t: 'Recebe alerta georreferenciado', d: 'Notificação no WhatsApp: "Sua área de Conquista entra em janela ideal entre 11–18/nov."' },
              { t: 'Plano com 3 cenários', d: 'Agro Amigo gera plano A/B/C com expectativa de produção, custo e risco para cada um.' },
              { t: 'Acompanhamento contínuo', d: 'NDVI semanal aponta talhão com baixo vigor antes do olho ver. Sugere ajuste de N.' },
              { t: 'Vende no pico', d: 'Alerta de pico de preço cruza CEPEA + câmbio + estoque regional. Janela de venda recomendada.' },
            ]}
            outcome={{ label: 'RESULTADO MÉDIO', value: '+27% margem', sub: 'média de 1.412 produtores em 2 safras' }}
          />
        </div>
      </div>
    </section>
  );
}

function DecisionCol({ kind, tag, title, steps, outcome }) {
  const isAfter = kind === 'after';
  return (
    <div style={{
      padding: 40,
      background: isAfter ? 'var(--paper)' : 'var(--bg-2)',
      borderRight: kind === 'before' ? '1px solid var(--line)' : 'none',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
        <span className="mono" style={{
          fontSize: 11, letterSpacing: '0.1em',
          padding: '4px 10px',
          background: isAfter ? 'var(--green)' : 'transparent',
          color: isAfter ? 'var(--paper)' : 'var(--muted)',
          border: '1px solid ' + (isAfter ? 'var(--green)' : 'var(--line-2)'),
        }}>{tag}</span>
        {isAfter && <span className="mono" style={{ fontSize: 11, color: 'var(--terra)', letterSpacing: '0.05em' }}>● AO VIVO</span>}
      </div>

      <h3 className="serif" style={{ fontSize: 36, lineHeight: 1.1, margin: 0, marginBottom: 28, color: 'var(--ink)' }}>
        {title}
      </h3>

      <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 18 }}>
        {steps.map((s, i) => (
          <li key={i} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 14 }}>
            <div className="mono" style={{ fontSize: 11, color: isAfter ? 'var(--green-2)' : 'var(--muted)', paddingTop: 4 }}>
              0{i+1}
            </div>
            <div>
              <div style={{ fontWeight: 500, fontSize: 15, color: 'var(--ink)', marginBottom: 2 }}>{s.t}</div>
              <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5 }}>{s.d}</div>
            </div>
          </li>
        ))}
      </ol>

      <div style={{ marginTop: 36, paddingTop: 24, borderTop: '1px dashed ' + (isAfter ? 'var(--line-2)' : 'var(--line)') }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--muted)', marginBottom: 6 }}>{outcome.label}</div>
        <div className="serif" style={{
          fontSize: 56, lineHeight: 1, color: isAfter ? 'var(--green)' : 'var(--ink-2)',
          letterSpacing: '-0.02em',
        }}>{outcome.value}</div>
        <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>{outcome.sub}</div>
      </div>
    </div>
  );
}

window.Comparison = Comparison;