// Hero.jsx
const Hero = () => (
  <section className="hero">
    <div className="blob blob1"></div>
    <div className="blob blob2"></div>
    <div className="container" style={{position: 'relative', zIndex: 2}}>
      <div className="hero-eyebrow">
        <span className="dot"></span>
        <span>// MERCURY FISH AGENCY · PANAMÁ</span>
        <span className="ver">v.2026</span>
      </div>
      <h1>
        Sistemas de <span className="accent">captación</span> de leads para empresas que ya operan.
      </h1>
      <p className="hero-lead">
        Diseñamos el motor que convierte tráfico pagado en clientes. Estrategia, segmentación, copy y optimización continua sobre Meta Ads — con métricas que importan.
      </p>
      <div className="hero-cta-row">
        <a href="#contacto" className="btn btn-primary">Hablemos de tu pipeline <span className="ar">→</span></a>
        <a href="#servicios" className="btn btn-secondary">Ver servicios <span className="ar">→</span></a>
      </div>
      <div className="hero-meta">
        <div className="hero-meta-item"><div className="v">+47</div><div className="l">// OPERACIONES ACTIVAS</div></div>
        <div className="hero-meta-item"><div className="v">3.2x</div><div className="l">// ROAS PROMEDIO</div></div>
        <div className="hero-meta-item"><div className="v">$1.2M</div><div className="l">// ADS GESTIONADOS</div></div>
        <div className="hero-meta-item"><div className="v">PA</div><div className="l">// HQ · PANAMÁ</div></div>
      </div>
    </div>
  </section>
);

window.Hero = Hero;