// Hero, banner wave behind headline, stat strip below.
const Hero = () => {
  return (
    <section className="k-hero">
      <div className="k-hero__inner">
        <div className="k-hero__eyebrow">A &nbsp; K I N E T I C &nbsp; S O F T W A R E &nbsp; P R O D U C T</div>
        <h1 className="k-hero__title">
          A warmer welcome,<br/>
          <span className="k-hero__title-accent">with zero paperwork.</span>
        </h1>
        <p className="k-hero__lead">
          KxWelcome is how you meet every new student on day one. Book arrival slots,
          confirm rooms, collect documents, and hand over the keys, all from one place.
        </p>
        <div className="k-hero__ctas">
          <button className="k-btn k-btn--onpurple k-btn--lg">Book a demo</button>
          <a href="#" className="k-btn k-btn--ghost-onpurple k-btn--lg">See how it works →</a>
        </div>

        <div className="k-hero__stats">
          <div className="k-stat">
            <div className="k-stat__value">−80%</div>
            <div className="k-stat__label">of the admin load on move-in weekend</div>
          </div>
          <div className="k-stat">
            <div className="k-stat__value">2,300+</div>
            <div className="k-stat__label">students checked in, per campus, per weekend</div>
          </div>
          <div className="k-stat">
            <div className="k-stat__value">94%</div>
            <div className="k-stat__label">arrive on their booked slot, no queues</div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Hero = Hero;