const problemsStyles = {
  inner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px' },
  header: { textAlign: 'center', marginBottom: 56 },
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 0,
    border: '1px solid var(--border-subtle)',
    borderRadius: 'var(--radius-xl)',
    overflow: 'hidden',
    background: 'var(--bg-surface-2)',
  },
  cell: {
    padding: 32,
    borderRight: '1px solid var(--border-subtle)',
    borderBottom: '1px solid var(--border-subtle)',
    background: 'var(--bg-surface-2)',
    transition: 'all 200ms var(--ease-smooth)',
    cursor: 'default',
    position: 'relative',
  },
  iconWrap: {
    width: 42, height: 42,
    background: 'rgba(255, 90, 90, 0.06)',
    border: '1px solid rgba(255, 90, 90, 0.18)',
    borderRadius: 10,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: '#E89B9B',
    marginBottom: 18,
  },
  cellTitle: {
    fontFamily: 'var(--font-display)',
    fontSize: 19, fontWeight: 600,
    letterSpacing: '-0.015em',
    color: 'var(--fg-1)',
    marginBottom: 8,
  },
  cellDesc: {
    fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.65,
    margin: 0,
  },
  costTag: {
    marginTop: 18,
    display: 'inline-flex', alignItems: 'center', gap: 6,
    fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
    color: 'var(--fg-3)', letterSpacing: '0.1em', textTransform: 'uppercase',
  },
};

const problems = [
  {
    Icon: () => <IconClock size={20} />,
    title: 'Processos manuais',
    desc: 'Planilhas, copia-e-cola, formulários que ninguém preenche. Hora do seu time vale mais que isso.',
    cost: '~ 23h / colaborador / mês',
  },
  {
    Icon: () => <IconUsers size={20} />,
    title: 'Equipes sobrecarregadas',
    desc: 'Times de operação, CX e backoffice em modo apagador de incêndio. Sem espaço para o que realmente importa.',
    cost: 'Turnover acima de 18%',
  },
  {
    Icon: () => <IconGitBranch size={20} />,
    title: 'Falta de integração',
    desc: 'CRM não fala com ERP, planilha não fala com WhatsApp. Cada sistema é uma ilha — e seu time é o barco.',
    cost: '6+ ferramentas desconectadas',
  },
  {
    Icon: () => <IconMessageCircle size={20} />,
    title: 'Atendimento ineficiente',
    desc: 'Tempo de resposta alto, leads esfriam, cliente reclama. Você sabe — mas não escala contratando.',
    cost: 'NPS estagnado há 12+ meses',
  },
  {
    Icon: () => <IconTrendingDown size={20} />,
    title: 'Operação lenta',
    desc: 'Tarefas que deveriam levar minutos consomem dias. Decisões esperam relatórios que ninguém consegue gerar.',
    cost: '−40% velocidade de execução',
  },
  {
    Icon: () => <IconAlertTriangle size={20} />,
    title: 'Custo operacional alto',
    desc: 'Crescer significa contratar. Margem aperta. Você sabe que tem gordura — só não sabe onde cortar.',
    cost: 'CAC subindo +25% a.a.',
  },
];

function Problems() {
  const [hov, setHov] = React.useState(null);
  return (
    <section className="bb-section" id="problemas" style={{ background: 'var(--bg-surface-1)' }}>
      <div style={problemsStyles.inner}>
        <div style={problemsStyles.header}>
          <div className="bb-eyebrow" style={{ justifyContent: 'center' }}>O problema</div>
          <h2 className="bb-section-title" style={{ margin: '14px auto 18px' }}>
            Você está pagando caro por tarefas<br />
            <span className="bb-gold">que uma IA já resolve hoje.</span>
          </h2>
          <p className="bb-section-desc" style={{ margin: '0 auto' }}>
            Antes de propor qualquer solução, mapeamos o que está te
            travando. As dores abaixo aparecem em 9 de cada 10 diagnósticos.
          </p>
        </div>

        <div data-grid="3col" style={problemsStyles.grid}>
          {problems.map((p, i) => {
            const col = i % 3;
            const row = Math.floor(i / 3);
            const isLastCol = col === 2;
            const isLastRow = row === 1;
            const isHov = hov === i;
            return (
              <div key={p.title}
                onMouseEnter={() => setHov(i)}
                onMouseLeave={() => setHov(null)}
                style={{
                  ...problemsStyles.cell,
                  borderRight: isLastCol ? 'none' : problemsStyles.cell.borderRight,
                  borderBottom: isLastRow ? 'none' : problemsStyles.cell.borderBottom,
                  background: isHov ? 'var(--bg-surface-3)' : 'var(--bg-surface-2)',
                }}>
                <div style={problemsStyles.iconWrap}>
                  <p.Icon />
                </div>
                <div style={problemsStyles.cellTitle}>{p.title}</div>
                <p style={problemsStyles.cellDesc}>{p.desc}</p>
                <div style={problemsStyles.costTag}>
                  <span style={{ color: '#E89B9B' }}>●</span> {p.cost}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Problems });