// Hero.jsx — kinetic split-line headline with mint highlight + floating square
function Hero() {
  const lines = [
    { text: 'Your business' },
    { text: 'has outgrown' },
    { text: 'its', highlight: 'systems.' },
  ];
  return (
    <section className="hero" id="top">
      <div className="hero__eyebrow">
        <span className="tick" />
        Fractional CTO · Salt Lake City · Est. 2018
      </div>

      <h1 className="hero__headline">
        {lines.map((l, i) => (
          <span className="hero__line" key={i} style={{ animationDelay: `${i * 120}ms` }}>
            <span className="hero__line-inner" style={{ animationDelay: `${i * 120}ms` }}>
              {l.text}
              {l.highlight && <> <em>{l.highlight}</em></>}
            </span>
          </span>
        ))}
      </h1>

      <HeroCanvas />

      <div className="hero__footer">
        <p className="hero__lede">
          <strong>You didn't get here by accident.</strong>{' '}
          You built a real business by moving fast and figuring it out as you went.
          But growth eventually exposes the cracks — we rebuild the systems that got you here.
        </p>
        <div className="hero__meta">
          <span className="now">● Taking 2 clients · Q2 2026</span>
          <span>Scroll to begin</span>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;