function Hero() {
  return (
    <header className="g-hero">
      <div className="g-hero-bolts" aria-hidden="true">
        <svg className="g-hero-bolt g-hero-bolt--1" viewBox="0 0 80 200" fill="none">
          <path d="M48 0 L18 100 L40 100 L26 200 L70 76 L48 76 Z" fill="currentColor"/>
        </svg>
        <svg className="g-hero-bolt g-hero-bolt--2" viewBox="0 0 80 200" fill="none">
          <path d="M50 0 L14 96 L38 96 L22 200 L72 70 L48 70 Z" fill="currentColor"/>
        </svg>
        <svg className="g-hero-bolt g-hero-bolt--3" viewBox="0 0 80 200" fill="none">
          <path d="M52 0 L20 110 L42 110 L28 200 L68 80 L46 80 Z" fill="currentColor"/>
        </svg>
      </div>
      <h1 className="g-display">
        Klientki, które rezerwują <em>u Ciebie</em><span className="g-blink">.</span>
      </h1>
      <p className="g-lead">
        Jeśli oddajesz prowizję Booksy i Znanemu Lekarzowi za każdą klientkę,
        pomagam zbudować system rezerwacji na własność, tak żeby klientki
        rezerwowały bezpośrednio u Ciebie, a recepcja odzyskała czas.
      </p>
      <div className="g-hero-cta">
        <a className="g-btn g-btn--primary g-btn--lg" href="#kontakt">
          Umów bezpłatny audyt <i data-lucide="arrow-right"></i>
        </a>
        <a className="g-btn g-btn--accent-ghost g-btn--lg" href="#portfolio">
          Moje prace
        </a>
      </div>
      <div className="g-hero-meta">
        <span><i data-lucide="check-circle-2"></i> Bezpłatny audyt</span>
        <span><i data-lucide="check-circle-2"></i> Efekt w dni, nie miesiące</span>
        <span><i data-lucide="check-circle-2"></i> Pracujesz tylko ze mną</span>
      </div>
    </header>
  );
}

window.Hero = Hero;