// Hero — Limine institutional welcome.

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

      <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" style={{ marginBottom: 22 }}>Limine Produtos Médicos</div>
          <h1 style={{
            fontFamily: "var(--font-serif)",
            fontWeight: 400,
            fontSize: "clamp(44px, 5.6vw, 78px)",
            lineHeight: 1.04,
            letterSpacing: "-0.005em",
            color: "var(--c-navy)",
            marginBottom: 28,
          }}>
            Cuidado <span className="italic-accent">que vem</span><br/>do norte.
          </h1>
          <p style={{
            fontSize: 19,
            color: "var(--c-ink-2)",
            lineHeight: 1.6,
            maxWidth: 540,
            marginBottom: 40,
          }}>
            A Limine é uma distribuidora regional de produtos médicos sediada
            em Manaus — levando materiais de excelência para hospitais, clínicas
            e profissionais de saúde da região Norte do Brasil.
          </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>

        <div className="hero-art" style={{
          position: "relative",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          aspectRatio: "4/5",
        }}>
          <div style={{
            position: "absolute",
            inset: "8% 0% 8% 4%",
            background: "var(--c-blue-soft)",
            borderRadius: "var(--radius-lg)",
          }}/>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 36,
            filter: "drop-shadow(0 30px 50px rgba(27,58,107,0.18))",
          }}>
            <img src="assets/logo-limine-mark-dark.svg" alt=""
              style={{ width: 240, height: 240, display: "block" }}/>
            <div style={{ textAlign: "center", lineHeight: 1 }}>
              <div style={{
                fontFamily: "var(--font-serif)",
                fontSize: 56,
                color: "var(--c-navy)",
                letterSpacing: "0.18em",
                paddingLeft: "0.18em",
              }}>LIMINE</div>
              <div style={{
                fontFamily: "var(--font-sans)",
                fontSize: 14,
                fontWeight: 500,
                color: "var(--c-blue)",
                letterSpacing: "0.32em",
                paddingLeft: "0.32em",
                marginTop: 14,
              }}>PRODUTOS MÉDICOS</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });