// "A empresa" section — what Biolife is, no numbers.

function Empresa() {
  const values = [
    {
      title: "Cuidado com o paciente",
      text: "Cada material que entregamos representa uma cirurgia, um diagnóstico, um momento crítico da vida de alguém. Tratamos cada pedido com essa responsabilidade.",
    },
    {
      title: "Especialização técnica",
      text: "Nosso time é formado por profissionais especializados nas áreas de atuação. Atendemos com conhecimento técnico, não só comercial.",
    },
    {
      title: "Atendimento próximo",
      text: "Estamos onde o hospital está. Disponibilidade real, tempo de resposta curto e equipe presente quando o caso clínico exige.",
    },
    {
      title: "Qualidade e regularidade",
      text: "Trabalhamos apenas com produtos regularizados, registrados na ANVISA e provenientes dos principais fabricantes do mundo.",
    },
  ];

  return (
    <section
      id="empresa"
      data-screen-label="Empresa"
      className="bg-cream">
      <div className="container">
        <div className="section-grid" style={{
          display: "grid",
          gridTemplateColumns: "1fr 1.2fr",
          gap: 100,
          alignItems: "start",
        }}>
          <div className="sticky-col" style={{ position: "sticky", top: 130 }}>
            <div className="eyebrow">A empresa</div>
            <h2 className="section-title">
              Uma distribuidora de produtos médicos <span className="italic-accent">construída para servir.</span>
            </h2>
            <p className="section-lead" style={{ marginBottom: 32 }}>
              A Biolife Produtos Médicos LTDA. é uma distribuidora especializada
              em materiais médicos de alta complexidade. Nosso trabalho é
              levar tecnologia médica de ponta — assinada pelos maiores
              fabricantes do mundo — até a sala de cirurgia, a UTI, a clínica.
            </p>
            <p className="section-lead">
              Atuamos com proximidade de boutique e estrutura de grande
              distribuidor, com sedes em Belém (PA) e Maceió (AL), cobrindo
              toda a região Norte e parte do Nordeste do Brasil.
            </p>
          </div>

          <div className="card-grid-2" style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 24,
          }}>
            {values.map(v => (
              <div key={v.title} className="value-card" style={{
                background: "#fff",
                padding: "32px 28px",
                borderRadius: "var(--radius-lg)",
                border: "1px solid var(--c-line)",
                transition: "border-color .18s, transform .18s",
              }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--c-blue)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--c-line)"; e.currentTarget.style.transform = "none"; }}
              >
                <div style={{
                  width: 36, height: 36,
                  borderRadius: 10,
                  background: "var(--c-blue-soft)",
                  marginBottom: 22,
                  display: "grid", placeItems: "center",
                }}>
                  <div style={{ width: 12, height: 12, borderRadius: 3, background: "var(--c-blue-deep)" }}/>
                </div>
                <h3 style={{ fontSize: 22, marginBottom: 12, fontWeight: 500 }}>{v.title}</h3>
                <p style={{ fontSize: 14, color: "var(--c-ink-2)", lineHeight: 1.6 }}>{v.text}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Empresa });