/* eslint-disable */

const Hero = () => (
  <section className="hero" id="topo">
    <div className="container">
      <Eyebrow>00 — pesquisador estratégico · são paulo, br</Eyebrow>
      <div className="grid">
        <div>
          <h1>um olhar qualitativo para dados de consumo e comportamento.</h1>
          <p className="lede">
            Eu trabalho com social listening, entrevistas em profundidade e análise
            de discurso para revelar o "porquê" por trás dos números — o que move,
            o que resiste, o que está mudando.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Btn variant="primary" as="a" href="#contato">conversar →</Btn>
            <Btn variant="secondary" as="a" href="#portfolio">ver portfolio</Btn>
          </div>
        </div>
        <div className="hero-portrait dither-fade-bottom">
          <img src="./assets/portrait-1.jpg" alt="Raphael Lima Costa" />
        </div>
      </div>
    </div>
  </section>
);

window.Hero = Hero;