/** @jsx React.createElement */

function Hero() {
  const [, force] = React.useState(0);
  React.useEffect(() => {
    const h = () => force(n => n + 1);
    window.addEventListener('brand:rerender', h);
    return () => window.removeEventListener('brand:rerender', h);
  }, []);
  const B = window.BRAND;
  return (
    <section id="home" className="hero on-dark">
      <div className="hero-overlay" />
      <div className="container hero-inner">
        <div className="eyebrow hero-eyebrow">{B.tagline}</div>
        <h1 className="hero-title">
          <span className="accent">Integramos</span> sistemas médicos.<br />
          <span className="accent">Migramos</span> datos clínicos.
        </h1>
        <p className="lead hero-lead">
          Soluciones tecnológicas en el ámbito de la salud, con el cuidado y bienestar
          de los pacientes como fin último.
        </p>
        <div className="hero-cta">
          <a href="#service" className="btn btn-primary btn-lg">NUESTROS SERVICIOS</a>
          <a href="#contact" className="btn btn-ghost-light btn-lg">Contáctenos →</a>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;