/* global React */

function Diagnostic() {
  const items = [
    { n: "01", t: "Agenda cheia, lucro baixo", d: "Operação ocupada o dia inteiro, mas margem que não corresponde ao esforço." },
    { n: "02", t: "Leads chegam, conversão escapa", d: "O marketing entrega — o comercial não transforma interesse em avaliação." },
    { n: "03", t: "Muito esforço, pouco crescimento", d: "Times exaustos, dono sobrecarregado, e a curva continua plana." },
    { n: "04", t: "Marketing rodando sem retorno claro", d: "Investimento em tráfego e conteúdo sem indicador de retorno por etapa." },
    { n: "05", t: "Procedimentos baratos consumindo agenda", d: "Slots ocupados por ticket baixo bloqueiam pacientes premium." },
    { n: "06", t: "Crescimento sem previsibilidade", d: "Bons meses, meses ruins. Decisão por achismo, não por número." },
  ];
  return (
    <section id="diagnostico-mercado" style={{ background: "var(--bg-canvas)" }}>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow-tag" style={{ marginBottom: 20 }}>
            <span className="dot" />
            O que vemos todos os dias
          </span>
          <h2>
            Os <span className="accent">gargalos invisíveis</span> que travam clínicas promissoras.
          </h2>
          <p className="lede">
            Antes de discutir solução, mapeamos o cenário. Nenhum desses pontos é
            sobre falta de demanda — todos são sobre estrutura.
          </p>
        </div>

        <div
          className="diagnostic-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 1,
            background: "var(--border-subtle)",
            border: "1px solid var(--border-subtle)",
            borderRadius: 16,
            overflow: "hidden",
          }}
        >
          {items.map((it) => (
            <div
              key={it.n}
              style={{
                background: "#fff",
                padding: 32,
                display: "flex",
                flexDirection: "column",
                gap: 16,
                minHeight: 220,
                transition: "background 200ms",
              }}
              onMouseEnter={(e) => (e.currentTarget.style.background = "var(--ink-050)")}
              onMouseLeave={(e) => (e.currentTarget.style.background = "#fff")}
            >
              <div className="numeral">{it.n}</div>
              <div style={{
                fontFamily: "var(--font-display)",
                fontWeight: 600,
                fontSize: 22,
                lineHeight: 1.2,
                letterSpacing: "-0.01em",
                color: "var(--fg-primary)",
              }}>
                {it.t}
              </div>
              <div style={{ color: "var(--fg-secondary)", fontSize: 15, lineHeight: 1.55 }}>
                {it.d}
              </div>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 1024px) {
            .diagnostic-grid { grid-template-columns: repeat(2, 1fr) !important; }
          }
          @media (max-width: 600px) {
            .diagnostic-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.Diagnostic = Diagnostic;