/* global React, useReveal, Container */

function Plataforma() {
  return (
    <section
      id="dados"
      style={{
        position: "relative",
        padding: "clamp(120px, 18vw, 200px) 0",
        color: "#fff",
        backgroundImage:
          "linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('assets/14.png')",
        backgroundSize: "cover",
        backgroundPosition: "center 25%",
        overflow: "hidden",
      }}
    >
      <Container w={980} style={{ position: "relative" }}>
        <p
          ref={useReveal()}
          className="reveal"
          style={{
            fontFamily: "var(--font-serif)",
            fontStyle: "italic",
            fontWeight: 500,
            fontSize: "clamp(24px, 2.8vw, 36px)",
            lineHeight: 1.6,
            color: "#fff",
            margin: 0,
            textAlign: "center",
            textShadow: "0 2px 18px rgba(0,0,0,0.5)",
          }}
        >
          "Nanoinfluência não é sobre ser pequena porque você ainda não cresceu.
          É sobre entender que o verdadeiro poder não está no tamanho da
          audiência, está na profundidade da conexão."
        </p>
      </Container>
    </section>
  );
}

Object.assign(window, { Plataforma });