// "A empresa" — Limine description, independent identity.

function Empresa() {
  const values = [
    {
      title: "Cuidado com o paciente",
      text: "Cada material que entregamos representa uma cirurgia, um diagnóstico, um momento crítico. Tratamos cada pedido com essa responsabilidade.",
    },
    {
      title: "Pertencimento ao Norte",
      text: "Somos do Amazonas e atuamos com proximidade real. Conhecemos a logística, os hospitais e os profissionais da região.",
    },
    {
      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: "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">
              Distribuição médica<br/><span className="italic-accent">com raiz no Amazonas.</span>
            </h2>
            <p className="section-lead" style={{ marginBottom: 32 }}>
              A Limine Produtos Médicos LTDA. é uma distribuidora especializada
              em materiais médicos de alta complexidade, sediada em Manaus.
              Levamos 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" style={{ marginBottom: 32 }}>
              Operamos com sede em Manaus e cobertura direta em cinco estados
              da região Norte. Atuamos com proximidade real — conhecendo a
              logística amazônica, os hospitais e os profissionais que
              fazem a saúde da região acontecer.
            </p>
            <div style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              padding: "6px 12px",
              borderRadius: 999,
              background: "var(--c-surface)",
              border: "1px solid var(--c-line)",
              color: "var(--c-navy)",
              fontSize: 11,
              fontWeight: 600,
              letterSpacing: "0.12em",
              textTransform: "uppercase",
            }}>
              <span style={{ width: 6, height: 6, background: "var(--c-blue)", borderRadius: 2, transform: "rotate(45deg)" }}/>
              Sede própria · Manaus/AM
            </div>
          </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: "var(--c-surface)",
                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-sky)"; 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, background: "var(--c-navy)", transform: "rotate(45deg)" }}/>
                </div>
                <h3 style={{ fontSize: 22, marginBottom: 12, fontWeight: 400 }}>{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 });