const Metrics = () => {
  return (
    <section className="relative py-32 md:py-48 border-t" style={{ borderColor: 'var(--rule)' }} data-screen-label="04 Metrics">
      <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="04"
              label="Indicadores · Sheet 04"
              title={<>Resultados <em className="italic font-serif" style={{ color: 'var(--sepia)' }}>medidos</em>, não estimados.</>}
              kicker="Dados agregados de 1.240 escritórios brasileiros que migraram para ArchPlan no último ano."
            />
          </div>
        </div>

        <div className="mt-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px" style={{ background: 'var(--rule-strong)' }}>
          {[
            { v: 38, suffix: '%', label: 'Aumento médio na margem por projeto', desc: 'Após 6 meses de uso' },
            { v: 14, suffix: 'h', label: 'Horas/semana economizadas em gestão', desc: 'Por sócio fundador' },
            { v: 92, suffix: '%', label: 'Recebimentos no prazo', desc: 'vs. 64% antes da migração' },
            { v: 1240, suffix: '+', label: 'Escritórios brasileiros', desc: 'De 2 a 200 pessoas' },
          ].map((m, i) => (
            <MetricCard key={i} {...m} delay={i * 100} />
          ))}
        </div>
      </div>
    </section>
  );
};

const MetricCard = ({ v, suffix, label, desc, delay }) => {
  const [ref, inView] = useReveal({ threshold: 0.3 });
  return (
    <div ref={ref} className="p-10 transition-all" style={{ background: 'var(--bg)', opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(20px)', transitionDuration: '900ms', transitionDelay: `${delay}ms` }}>
      <div className="font-serif font-light tracking-tightest leading-none text-7xl md:text-8xl">
        <Counter to={v} suffix={suffix} duration={2200} />
      </div>
      <div className="mt-6 pt-6 border-t" style={{ borderColor: 'var(--rule)' }}>
        <div className="text-base" style={{ color: 'var(--ink)' }}>{label}</div>
        <div className="font-mono text-[10px] uppercase tracking-wider2 mt-2" style={{ color: 'var(--stone)' }}>{desc}</div>
      </div>
    </div>
  );
};

window.Metrics = Metrics;