/* global React, Button */

function Hero({ onCTA }) {
  const photo = "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1600&q=70";
  return (
    <section className="hero-root">
      <div className="hero-image-wrap">
        <img src={photo} alt="" className="hero-bg"/>
        <div className="hero-overlay"/>
        <div className="hero-content">
          <h1 className="hero-headline">
            Stop running your business<br/>from the bottom of your inbox.
          </h1>
          <p className="hero-sub">
            Nova Admin Solutions gives small business owners reliable, behind-the-scenes support for inbox, calendar, invoices, and more. So you can get back to the work only you can do.
          </p>
          <div className="hero-ctas">
            <Button variant="accent" size="lg" as="a" href="tel:5126505062">Call for a Free Consultation</Button>
            <Button variant="on-dark" size="lg" onClick={onCTA}>See packages</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;