const Comparison = () => {
  const rows = [
    { feat: 'Propostas comerciais em PDF', us: true, generic: 'limitado', planilha: 'manual' },
    { feat: 'CRM de clientes com histórico', us: true, generic: 'limitado', planilha: 'manual' },
    { feat: 'Contratos com parcelas vinculadas', us: true, generic: 'limitado', planilha: 'manual' },
    { feat: 'Entradas, saídas e fluxo de caixa', us: true, generic: true, planilha: 'manual' },
    { feat: 'Projetos com etapas e checklist', us: true, generic: false, planilha: 'manual' },
    { feat: 'Tarefas, permissões e relatórios CSV', us: true, generic: 'limitado', planilha: 'manual' },
    { feat: 'Migração assistida por consultor', us: true, generic: false, planilha: '—' },
    { feat: 'Suporte com arquitetos no time', us: true, generic: false, planilha: false },
  ];

  const Cell = ({ v }) => {
    if (v === true) return <span style={{ color: 'var(--ink)' }} className="font-serif text-2xl">●</span>;
    if (v === false) return <span style={{ color: 'var(--mist)' }} className="font-serif text-2xl">○</span>;
    return <span className="font-mono text-[10px] uppercase tracking-wider2" style={{ color: 'var(--stone)' }}>{v}</span>;
  };

  return (
    <section className="relative py-32 md:py-48 border-t" style={{ borderColor: 'var(--rule)' }} data-screen-label="06 Comparison">
      <div className="max-w-[1400px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-12 gap-x-6">
          <div className="col-span-12 md:col-span-7">
            <SectionHeader
              index="06"
              label="Comparativo · Sheet 06"
              title={<>Por que não um <em className="italic font-serif" style={{ color: 'var(--sepia)' }}>ERP genérico</em>?</>}
              kicker="Tentamos todos eles antes de construir o nosso. Eis a planilha honesta da diferença."
            />
          </div>
        </div>

        <div className="mt-20 border" style={{ borderColor: 'var(--rule-strong)' }}>
          <div className="grid grid-cols-12 px-6 py-5 border-b" style={{ borderColor: 'var(--rule-strong)', background: 'var(--bg-deep)' }}>
            <DimLabel className="col-span-6">Capacidade</DimLabel>
            <DimLabel className="col-span-2 text-center" style={{ color: 'var(--ink)' }}>ArchPlan</DimLabel>
            <DimLabel className="col-span-2 text-center">ERP genérico</DimLabel>
            <DimLabel className="col-span-2 text-center">Planilha</DimLabel>
          </div>

          {rows.map((r, i) => (
            <CompareRow key={i} {...r} index={i} Cell={Cell} />
          ))}
        </div>
      </div>
    </section>
  );
};

const CompareRow = ({ feat, us, generic, planilha, index, Cell }) => {
  const [ref, inView] = useReveal({ threshold: 0.3 });
  return (
    <div
      ref={ref}
      className="grid grid-cols-12 px-6 py-6 border-b items-center transition-all hover:bg-paperdeep"
      style={{
        borderColor: 'var(--rule)',
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateX(0)' : 'translateX(-20px)',
        transitionDuration: '700ms',
        transitionDelay: `${index * 60}ms`,
      }}
    >
      <div className="col-span-6 text-base">{feat}</div>
      <div className="col-span-2 text-center"><Cell v={us} /></div>
      <div className="col-span-2 text-center"><Cell v={generic} /></div>
      <div className="col-span-2 text-center"><Cell v={planilha} /></div>
    </div>
  );
};

window.Comparison = Comparison;