// DOMAINS — 8 knowledge domains the Agro Amigo masters
// Editorial-tech version of the user's reference (no emoji, palette-aligned)

const DOMAINS = [
  {
    n: '01', mark: '✦', tone: 'green',
    title: 'Agronomia',
    chips: ['Pragas', 'Doenças', 'Solo', 'Adubação', 'Calagem', 'Gessagem', 'Sementes', 'Variedades', 'Inoculante', 'Tratamento de sementes', 'Defensivos', 'Herbicidas', 'Fungicidas', 'Inseticidas', 'Acaricidas', 'Doses', 'Bulas', 'MIP', 'Resistência'],
  },
  {
    n: '02', mark: '◐', tone: 'sky',
    title: 'Clima',
    chips: ['Previsão', 'Chuva', 'Geada', 'Veranico', 'Janela de plantio', 'Janela de colheita', 'Janela de aplicação', 'Umidade', 'Temperatura', 'Vento'],
  },
  {
    n: '03', mark: '◇', tone: 'ink',
    title: 'Máquinas',
    chips: ['Colhedora', 'Plantadeira', 'Pulverizador', 'Trator', 'Regulagem', 'Calibração', 'Perdas', 'Bicos', 'Vazão', 'Velocidade', 'Consumo', 'Manutenção'],
  },
  {
    n: '04', mark: '$', tone: 'gold',
    title: 'Financeiro',
    chips: ['Despesas', 'Receitas', 'Custo/ha', 'Custo/saca', 'Lucro', 'Saldo', 'Fluxo de caixa', 'Ponto de equilíbrio', 'Resultado por safra', 'Resultado por talhão'],
  },
  {
    n: '05', mark: '↗', tone: 'terra',
    title: 'Mercado',
    chips: ['Preço soja', 'Preço milho', 'Preço trigo', 'CBOT', 'B3', 'Câmbio', 'Basis', 'Melhor hora de vender', 'Travas', 'Contratos'],
  },
  {
    n: '06', mark: '◈', tone: 'sand',
    title: 'Logística',
    chips: ['Mão de obra', 'Caminhões', 'Frete', 'Armazenagem', 'Cooperativa', 'Prazo de colheita', 'Planejamento operacional'],
  },
  {
    n: '07', mark: '§', tone: 'plum',
    title: 'Legislação',
    chips: ['CAR', 'ITR', 'Pronaf', 'Crédito rural', 'Proagro', 'Receituário', 'Seguro agrícola'],
  },
  {
    n: '08', mark: '◷', tone: 'rose',
    title: 'Lembretes',
    chips: ['Alertas diários', 'Semanais', 'Mensais', 'Aplicações', 'Pagamentos', 'Monitoramento'],
  },
];

const TONES = {
  green: { bg: '#EBE6D6', card: '#F5F1E5', accent: '#1E3A2C', chipBg: 'rgba(30,58,44,0.06)', chipFg: '#1E3A2C', chipBorder: 'rgba(30,58,44,0.14)' },
  sky:   { bg: '#E4E8E0', card: '#EEF1E8', accent: '#3E6951', chipBg: 'rgba(62,105,81,0.07)', chipFg: '#2D5740', chipBorder: 'rgba(62,105,81,0.18)' },
  ink:   { bg: '#E8E4D7', card: '#F2EEE3', accent: '#14201A', chipBg: 'rgba(20,32,26,0.05)', chipFg: '#14201A', chipBorder: 'rgba(20,32,26,0.13)' },
  gold:  { bg: '#EEE6CC', card: '#F8F1DA', accent: '#8C7220', chipBg: 'rgba(200,162,74,0.12)', chipFg: '#8C7220', chipBorder: 'rgba(200,162,74,0.4)' },
  terra: { bg: '#EDD9CC', card: '#F6E8DD', accent: '#8B3F1F', chipBg: 'rgba(184,84,42,0.08)', chipFg: '#8B3F1F', chipBorder: 'rgba(184,84,42,0.3)' },
  sand:  { bg: '#EDE3D2', card: '#F6ECDA', accent: '#7A5A2F', chipBg: 'rgba(122,90,47,0.08)', chipFg: '#7A5A2F', chipBorder: 'rgba(122,90,47,0.25)' },
  plum:  { bg: '#E6DED5', card: '#EFE7DD', accent: '#4A3A52', chipBg: 'rgba(74,58,82,0.08)', chipFg: '#4A3A52', chipBorder: 'rgba(74,58,82,0.22)' },
  rose:  { bg: '#EDDFD8', card: '#F6E8E0', accent: '#7A3838', chipBg: 'rgba(122,56,56,0.07)', chipFg: '#7A3838', chipBorder: 'rgba(122,56,56,0.22)' },
};

function Domains() {
  return (
    <section id="dominios" style={{ position: 'relative', padding: '120px 32px', zIndex: 2 }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <SectionLabel num="05" title="O que o Agro Amigo domina" />
        <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'end' }}>
          <h2 className="serif" style={{
            fontSize: 'clamp(40px, 5.4vw, 84px)',
            lineHeight: 0.97, margin: 0, letterSpacing: '-0.022em',
          }}>
            Do milho ao mercado futuro,<br/>
            da regulagem da pulverizadora<br/>
            <span className="it" style={{ color: 'var(--terra)' }}>ao Pronaf.</span>
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0, maxWidth: 440 }}>
            Oito domínios técnicos integrados no mesmo modelo. Não é um chatbot
            que responde "talvez" — é uma base de conhecimento agrícola brasileira
            estruturada, atualizada e citável.
          </p>
        </div>

        <div style={{
          marginTop: 64,
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 12,
        }}>
          {DOMAINS.map(d => {
            const t = TONES[d.tone];
            return (
              <article key={d.n} style={{
                background: t.card,
                border: `1px solid ${t.chipBorder}`,
                padding: 24,
                display: 'flex', flexDirection: 'column', gap: 16,
                minHeight: 280,
                position: 'relative',
                overflow: 'hidden',
              }}>
                {/* corner mark */}
                <div style={{
                  position: 'absolute', top: 14, right: 16,
                  fontSize: 22, color: t.accent, opacity: 0.55,
                  fontFamily: 'Instrument Serif, serif',
                }}>{d.mark}</div>

                <div className="mono" style={{ fontSize: 10, color: t.accent, opacity: 0.5, letterSpacing: '0.12em' }}>
                  DOMÍNIO · {d.n}
                </div>
                <h3 className="serif" style={{
                  fontSize: 32, lineHeight: 1, margin: 0,
                  color: t.accent, letterSpacing: '-0.02em',
                }}>{d.title}</h3>

                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
                  {d.chips.map(c => (
                    <span key={c} style={{
                      fontSize: 11.5,
                      padding: '5px 10px',
                      background: t.chipBg,
                      color: t.chipFg,
                      border: `1px solid ${t.chipBorder}`,
                      borderRadius: 999,
                      letterSpacing: '-0.005em',
                      whiteSpace: 'nowrap',
                    }}>{c}</span>
                  ))}
                </div>
              </article>
            );
          })}
        </div>

        <div className="mono" style={{
          marginTop: 32, fontSize: 11, color: 'var(--muted)',
          letterSpacing: '0.08em', textAlign: 'center',
        }}>
          + 240 SUBTÓPICOS COBERTOS · ATUALIZADO SEMANALMENTE COM EMBRAPA · MAPA · INMET · CEPEA
        </div>
      </div>
    </section>
  );
}

window.Domains = Domains;