// Hero — simple, warm welcome focused on patient care priority.

function Hero() {
  return (
    <section
      id="topo"
      data-screen-label="Hero"
      style={{
        paddingTop: 180,
        paddingBottom: 110,
        position: "relative",
        overflow: "hidden",
        background: "var(--c-paper)",
      }}>

      {/* Soft decorative tint */}
      <div aria-hidden="true" style={{
        position: "absolute", top: -200, right: -200, width: 600, height: 600,
        borderRadius: "50%",
        background: "radial-gradient(circle, var(--c-blue-soft) 0%, transparent 65%)",
        pointerEvents: "none",
      }}/>

      <div className="container hero-grid" style={{
        display: "grid",
        gridTemplateColumns: "1.05fr 1fr",
        gap: 80,
        alignItems: "center",
        position: "relative",
        zIndex: 1,
      }}>
        <div>
          <div className="eyebrow">Biolife Produtos Médicos</div>
          <h1 style={{
            fontFamily: "var(--font-serif)",
            fontWeight: 400,
            fontSize: "clamp(44px, 5.6vw, 78px)",
            lineHeight: 1.04,
            letterSpacing: "-0.02em",
            color: "var(--c-navy)",
            marginBottom: 28,
          }}>
            O cuidado com cada paciente <span className="italic-accent">começa com o material certo.</span>
          </h1>
          <p style={{
            fontSize: 19,
            color: "var(--c-ink-2)",
            lineHeight: 1.6,
            maxWidth: 540,
            marginBottom: 40,
          }}>
            Distribuimos produtos médicos de alta complexidade para hospitais,
            clínicas e profissionais de saúde nas regiões Norte e Nordeste do
            Brasil. Cada entrega é feita com a prioridade que o atendimento
            ao paciente exige.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a href="#contato" className="btn btn-primary">
              Fale com nosso time <span className="arrow">→</span>
            </a>
            <a href="#atuacao" className="btn btn-ghost">
              Veja onde atendemos
            </a>
          </div>
        </div>

        {/* Right: large logo as decorative element */}
        <div className="hero-art" style={{
          position: "relative",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          aspectRatio: "4/5",
        }}>
          <div style={{
            position: "absolute",
            inset: "10% 0% 10% 6%",
            background: "var(--c-blue-soft)",
            borderRadius: "var(--radius-lg)",
          }}/>
          <img src="assets/logo-biolife.png" alt="Biolife"
            style={{
              position: "relative",
              width: "80%",
              maxWidth: 360,
              filter: "drop-shadow(0 30px 50px rgba(46,122,166,0.18))",
            }}/>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });