/* global React */
function Services() {
  const wrap = { padding: '120px 0' };
  const header = {
    display: 'grid', gridTemplateColumns: '5fr 7fr', gap: '64px',
    alignItems: 'end', paddingBottom: '48px', borderBottom: '1px solid var(--ink)',
  };
  const h2 = {
    fontSize: 'clamp(40px, 5.4vw, 72px)', fontWeight: 500,
    letterSpacing: '-0.03em', lineHeight: 1.02, color: 'var(--ink)', margin: 0,
    maxWidth: '14ch',
  };
  const lead = {
    fontSize: '19px', lineHeight: 1.55, color: 'var(--warm-700)', margin: 0,
    maxWidth: '50ch',
  };
  const grid = {
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0',
    paddingTop: '48px',
  };
  const cell = {
    padding: '48px 48px 48px 0', borderRight: '1px solid var(--border)',
    display: 'flex', flexDirection: 'column', gap: '20px', minHeight: '360px',
  };
  const cellLast = { ...cell, borderRight: 'none', paddingRight: 0, paddingLeft: 48 };
  const num = {
    fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.14em',
    color: 'var(--graphite)', fontWeight: 500,
  };
  const t = {
    fontSize: 'clamp(28px, 2.6vw, 36px)', fontWeight: 500,
    letterSpacing: '-0.025em', lineHeight: 1.1, color: 'var(--ink)',
    margin: 0, maxWidth: '16ch',
  };
  const d = { fontSize: '16px', lineHeight: 1.55, color: 'var(--warm-700)', margin: 0, maxWidth: '34ch' };

  const subhead = {
    fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.14em',
    textTransform: 'uppercase', color: 'var(--warm-600)',
    marginTop: 'auto', paddingTop: '24px', borderTop: '1px solid var(--border)',
  };
  const subList = { display: 'flex', flexDirection: 'column', gap: '6px', margin: '12px 0 0', padding: 0, listStyle: 'none' };
  const subItem = {
    display: 'flex', alignItems: 'baseline', gap: '10px',
    fontSize: '14px', color: 'var(--ink)', fontWeight: 500,
  };
  const subMark = { color: 'var(--graphite)', fontFamily: 'var(--font-mono)', fontSize: 11 };

  return (
    <section style={wrap} id="fazemos">
      <div className="container">
        <header style={header}>
          <div>
            <div className="eyebrow"><span className="n">02</span>O que fazemos</div>
            <h2 style={{ ...h2, marginTop: '16px' }}>Trabalho que escala com sua operação.</h2>
          </div>
          <p style={lead}>
            Criamos agentes em produção, integrados ao que o seu time já usa. Duas frentes que andam juntas: o agente que opera, e o time que opera com ele.
          </p>
        </header>

        <div style={grid}>
          <div style={cell}>
            <span style={num}>01</span>
            <h3 style={t}>De colaborador a super-colaborador.</h3>
            <p style={d}>
              O time ganha um agente que adianta o que dá para automatizar. Triagem, pesquisa, relatório, contrato: o que consome o dia chega quase pronto, e as pessoas entram onde o julgamento humano importa.
            </p>
            <div style={subhead}>
              Onde começa
              <ul style={subList}>
                <li style={subItem}><span style={subMark}>·</span> Triagem e classificação de tickets</li>
                <li style={subItem}><span style={subMark}>·</span> Pesquisa e síntese de documentos</li>
                <li style={subItem}><span style={subMark}>·</span> Geração de relatórios e dashboards</li>
                <li style={subItem}><span style={subMark}>·</span> Análise e padronização de contratos</li>
                <li style={subItem}><span style={subMark}>·</span> Briefing de reuniões e follow-ups</li>
              </ul>
            </div>
          </div>
          <div style={cellLast}>
            <span style={num}>02</span>
            <h3 style={t}>Um novo membro no time.</h3>
            <p style={d}>
              O agente assume a tarefa inteira, do input à entrega. Você aprova as decisões críticas, o resto roda sozinho.
            </p>
            <div style={subhead}>
              O que ele faz
              <ul style={subList}>
                <li style={subItem}><span style={subMark}>·</span> Análise consolidada a partir de planilhas</li>
                <li style={subItem}><span style={subMark}>·</span> Triagem e categorização de inboxes</li>
                <li style={subItem}><span style={subMark}>·</span> Relatórios recorrentes</li>
                <li style={subItem}><span style={subMark}>·</span> Síntese de documentos longos</li>
                <li style={subItem}><span style={subMark}>·</span> Monitoramento e alertas</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Services = Services;